@sjse/component-library

SJ Component Library implementing SJ Design System

Usage no npm install needed!

<script type="module">
  import sjseComponentLibrary from 'https://cdn.skypack.dev/@sjse/component-library';
</script>

README

Design System

⚠️Be aware: this library is in BETA!

SJ Component Library based on the SJ Design System

The Library is under development.

Release notes 📋

Installing

You can install sj component library with NPM.

  • NPM: npm i @sjse/component-library

Compatibility

SJ component system is compatible with React v16+ and works with ReactDOM. React Native is not supported at this time.

Using Themes

Example on how to use the Green Theme. If you want to use different themes, you will have to use different ThemeProviders, with different themes. We recommend wrapping the page in one theme, and deviations in separate ones.

import React from "react";

import { greenTheme, ThemeProvider } from "@sjse/component-library";

const App = () => {
  return (
    <ThemeProvider theme={greenTheme}>
      <App />
    </ThemeProvider>
  );
};

export default App;

Using Theme

You can also set the ThemeProviders to render the dark version of the theme as follows:

import React from "react";

import { greenTheme, ThemeProvider } from "sj-component-library";

const App = () => {
  return (
    <ThemeProvider theme={greenTheme} darkMode={true}>
      <App />
    </ThemeProvider>
  );
};

export default App;

Contribute to this package

Contributions are made through pull requests, make sure to ping/tag someone so they get notified about the PR.

Setup dev environment

Clone the repository and create a new branch for your feature or fix.

Storybook is started using the command npm start. It also runs eslint.

Publish new package

To be able to publish a new package you need to be a member of the @sjse organisation on npm. Then pull latest master (make sure that the version in package.json is updated), make sure everything is fit for new publication and then run:

npm publish

npm scripts

  • build: Builds a dist folder and runs lint
  • start: Start ups Storybook locally and runs lint
  • lint: Runs eslint according to conf in .eslintrc
  • lint:fix: Runs eslint and fix simple errors

Release notes

2022-02-22

0.11.29-beta

SMART-9150 - Set TransportDetails default props

0.11.28-beta

SMART-9142 - Make padding optional in TransportSummary

2022-02-21

0.11.27-beta

0.11.26-beta

SMART-9134 - Add translations for all concepts

0.11.25-beta

SMART-9134 - Make sure transport details can handle empty concept

2022-02-18

0.11.24-beta

SMART-9052 - Fix accessibility problem in TravellerField

2022-02-16

0.11.23-beta

SMART-8674 Configurable version of Ticket Card SMART-9053 Fix Dialog component is not possible to scroll with keyboard

0.11.22-beta

SMART-8650 added horizontal swap icon

0.11.21-beta

SMART-8650 added swap button to station field

2022-02-15

0.11.20-beta

SMART-8543 Fixed broken autocomplete styling

2022-02-14

0.11.19-beta

SMART-8447 Add SwitchCard component

2022-02-10

0.11.18-beta

SMART-8649 Always use chevron down as optional end icon TravellerField

0.11.17-beta

SMART-8829 DepartureCard comfort availability label handle all unavailable scenario

0.11.16-beta

SMART-8829 DepartureCard comfort availability label and screen reader support

2022-02-09

0.11.15-beta

SMART-8649 Add icon to TravellerField SMART-8829 Add comfort availability to DepartureCard, add caption + comfort availability option to DepartureCardSkeleton

2021-01-07

0.11.14-beta

SMART-8938 Add exports to MenuItem and correct label color TouchDatePicker

2021-01-03

0.11.13-beta

SMART-8925 Make TextField Label red on error

2021-01-31

0.11.12-beta

SMART-8706 ALlow Radio Button Card Label to be as small as needed, for example Swish.

0.11.11-beta

SMART-8722 Add class names for the app bar buttons

2021-01-28

0.11.10-beta

SMART-8813 Add left- and right button props as dependency in AppBar useMemo

2021-01-27

0.11.9-beta

SMART-8789 Add fullWidth to DatePicker dialog

2021-01-20

0.11.8-beta

SMART-8402 Add time to TicketCard

0.11.7-beta

SMART-8169 Uploads fonts in AEM and use i Component Library

0.11.6-beta

SMART-7334-Sync Icons Figma Storybook

New icons, such as social icons (twitter, facebook etc) added.

2021-01-17

0.11.5-beta

SMART-8629-Fix feedback on transport details Use named import for config provider

2021-01-17

0.11.4-beta

Exposed ConfigProvider from @sjse/component-library, not just @sjse/component-library/dist

2021-01-17

0.11.3-beta

SMART-8483 Refactor AppBar, add useMemo to avoid unnecessary rerender, add fade transition to title on scroll

2021-01-14

0.11.2-beta

SMART-8333-filter-chip-menu-and-code-refactoring

Add-StyleProvider-prefix-to-Chip-component

0.11.1-beta

SMART-8072 Added option to show more days in DatePickerWeek

0.11.0-beta

SMART-8546 Prefix Mui CSS classes to work with StyleProvider / MFE CSS

0.10.35-beta

SMART-8446-Enable seat info in TransportSummary

2021-01-10

0.10.33-beta

SMART-8044 Added ConfigProvider for prefixing CSS class names that are not targeted by StylesProvider

2021-01-04

0.10.32-beta

SMART-7525 Design bugs for Execute button

2021-01-04

0.10.31-beta

SMART-8451 Wrong typeface for night train in departure card

2021-12-28

0.10.30-beta

SMART-7162 Execute button does not scale with font size

2021-12-23

0.10.29-beta

SMART-8046 AppBar with single back button

0.10.28-beta

SMART-8481 Add parent Box with display flex to Large Badge

0.10.27-beta

SMART-7501 Create component and stories for Badge

2021-12-22

0.10.26-beta

First step in adding prefixes to MFE CSS

2021-12-17

0.10.25-beta

SMART-8241 Added optional id field to DepartureCard

2021-12-16

0.10.24-beta

SMART-8306 Updated @svg/rollup and shell-quote

2021-12-16

0.10.23-beta

SMART-6384 Updated typescript and React versions

2021-12-14

0.10.22-beta

SMART-8346 Fix blinking header in AppBar on state change

0.10.21-beta

SMART-8336 Fix MFE-related issue for enhanced focus option on ClickableCard

0.10.20-beta

SMART-8336 Add enhanced focus option on ClickableCard SMART-8338 Fix re-exports for chip

0.10.19-beta

Export TicketCard

2021-12-13

0.10.18-beta

SMART-7630 SMART Create component and stories for Assist, Filter and Suggestion Chip

0.10.17-beta

SMART-8260 Removed Layout effect from DatePickerWeek This is due to a layout bug when useLayoutEffect is used together with CssTransition

0.10.16-beta

SMART-7187 Improved SR texts transport details

2021-12-10

0.10.15-beta

SMART-8245 Add TicketCard

2021-12-08

0.10.14-beta

SMART-8285 Move TabPanel to not approved SMART-7974 change typo for journey summary, bump package-lock to match package

2021-12-07

0.10.13-beta

SMART-8238 Make focus outline scalable when increasing text size

2021-12-06

0.10.12-beta

SMART-8128 add of pos. to add id to button in AppBar

2021-12-05

0.10.11-beta

SMART-8209 Adjust sticky behaviour in AppBar

2021-12-03

0.10.10-beta

SMART-8179 Enable onClick with LinkComponent in CardActionArea

2021-12-02

0.10.9-beta

SMART-6226 Fix spacing issue in RadioButtonCard

0.10.8-beta

Expand story for multiple text fields stacked upon each other

0.10.7-beta

SMART-8217 DatePickerWeek does not respect new value - bugfix for lost animation

0.10.5-beta

SMART-8217 DatePickerWeek does not respect new value - bugfix

0.10.4-beta

SMART-8217 DatePickerWeek does not respect new value

2021-12-01

0.10.3-beta

SMART-7794 Incorrect padding on clear button in station picker desktop SMART-7394 TextField and related components - design bugs SMART-7796 Incorrect padding on end adornment in date picker SMART-7983 Change typography in route description item

2021-11-30

0.10.2-beta

SMART-7952 Typo fixes for Journey Summary

0.10.1-beta

SMART-7713 update movingo logo, agian, since previous file was corrupt

2021-11-25

0.9.9-beta.48

SMART-8142 Add support for background image behind AppBar in fullscreen Dialog

0.9.9-beta.47

SMART-8075 Minor padding fixes on RadioButtonCard and CheckboxCard

2021-11-24

0.9.9-beta.46

SMART-8117 Set correct color on floating label for Text Fields

2021-11-23

0.9.9-beta.45

Add story for multiple dialogs that appear after each other in a user flow

0.9.9-beta.44

SMART-8081 Fix logic for colors on Logo SMART-7434 Support passing text nodes as secondary text to RadioButtonCard SMART-8075 Better flex wrapping for toggle button variant of RadioButtonCard

0.9.9-beta.42

SMART-8075 - Better flex wrapping on RadioButtonCard and CheckboxCard

2021-11-22

0.9.9-beta.42

SMART-7713 update movingo logo

2021-11-18

2021-11-22

0.9.9-beta.38

SMART-7394 Fix design bugs for TextField and related components

2021-11-18

0.9.9-beta.37

SMART-7966 added disabled option to StationPicker

2021-11-18

0.9.9-beta.36

SMART-7589 New variants and responsive H1 to Typography SMART-7934 Remove train image from DepartureCardSkeleton SMART-7750 Add new default train Image SMART-5701 Styling changes to BottomSheet and BottomSheetSwipeable

2021-11-18

0.9.9-beta.35

SMART-7956 Fix for iOS bugs when using Reduce motion system setting

0.9.9-beta.34

SMART-8017 Allow Dialog to have enteringDirection = "none"

2021-11-18

0.9.9-beta.33

SMART-7962 Move modals to deprecated

2021-11-17

0.9.9-beta.32

Fix flex issue in Dialog, allow content to be pushed to bottom.

2021-11-17

0.9.9-beta.31

SMART-7958 Add support for sticky App Bar in Dialog

2021-11-17

0.9.9-beta.30

SMART-7957 Set correct divider color on ListItem divider borders SMART-7513 Change English currency to kr SMART-7703 New stories for lists

2021-11-16

0.9.9-beta.29

SMART-7958 Add support for fullscreen dialog and scrollable content

2021-11-12

0.9.9-beta.28

Added icons for Swedis and British flags

2021-11-11

0.9.9-beta.27

SMART-7818 - Change typography variant for radio button card label

2021-11-11

0.9.9-beta.26

SMART-7712 - Fix Date Picker Calendar mobile style

2021-11-08

0.9.9-beta.25

SMART-7447 - Add dialog

2021-11-05

0.9.9-beta.23

SMART-7843 - Fix for focus bug in ClickableCard

0.9.9-beta.22

SMART-7782 - Add prop LinkComponent to all buttons + ClickableCard

2021-11-02

0.9.9-beta.21

SMART-7853 - Modify VMA to accept children instead of text string

2021-11-02

0.9.9-beta.20

SMART-7805 - Add new component TravellerField

2021-11-01

0.9.9-beta.18

SMART-7732 - Added SubHeader to Select

2021-10-25

0.9.9-beta.16

SMART-7548 - Disable keyboard input for Date Picker in desktop mode.

0.9.9-beta.15

  • Add re-export for Accordion and AccordionDetails

0.9.9-beta.14

  • Add re-export for AccordionSummary

2021-10-22

0.9.9-beta.13

SMART-7687 - Allow ListItem button, TextButton and IconButton to accept onClick event handlers when they are used as router links

0.9.9-beta.12

SMART-7547 - Fixed bug where 0 prices didn't show

2021-10-20

0.9.9-beta.11

SMART-7655 - Allow ListItem and MenuItem to accept LinkComponent (needed for routing)

2021-10-19

0.9.9-beta.10

SMART-7547 - Formatting prices.

0.9.9-beta.9

SMART-6299 - Allow TextButton to accept RouterLinks.

2021-10-15

0.9.9-beta.8

SMART-6431 - Add stories for Radio, Checkbox and Switch list items. Also changes to ListItemText component.

2021-10-11

0.9.9-beta.7

  • removes fixed width of menu

2021-10-08

0.9.9-beta.6

Added dot-dot-dot-icon.

2021-10-08

0.9.9-beta.5

Added fallback return type to getCalendarDateLabelFunc in DatePicker.tsx, necessary to make typing into input field possible.

2021-10-06

0.9.9-beta.4

Icons mysteriously were excluded from latest package, bumping version hoping they will be mysteriously included

2021-10-06

0.9.9-beta.3

SMART-7510 - Extends Menu with positioning props

2021-10-05

0.9.9-beta.2

SMART-7500 - Fix incorrect color on IconButton

0.9.9-beta.1

Update Snackbar styling according to SJ Design

SMART-7498 - Fix bug with incorrect background color on FeatureButton when used on touchscreen devices

0.9.8-beta.1

SMART-7495 Add missing keyboard focus style to ExecuteButton

0.9.8-beta.0

SMART-5438 Rewrite of FeatureButton Breaking change: The interface has changed for how we set the button color

0.9.7-beta.15

SMART-7464 override MUI viewBox defaults in departure card

0.9.7-beta.14

SMART-7464 new small heart icon added, and changed the icons in departure card to 20px

0.9.7-beta.13

SMART-7487 Fixed left aligned price

0.9.7-beta.12

SMART-5727 Fixed price size in departure card

2021-10-04

0.9.7-beta.11

SMART-7406 Support Windows high contrast mode

2021-10-01

0.9.7-beta.9

SMART-7463 RadiButtonCard children rerenders on state change

Simplified rendering of RadioButtonCard children so they will not rerender when typing in a TextField.

2021-09-29

0.9.7-beta.8

SMART-7439 Export vanilla Button

Export vanilla Button to be used in NavigationBar. This is needed to have an anchor tag with ripple effect.

2021-09-29

0.9.7-beta.7

SMART-7432 Handle multiple children in CheckboxCard and RadioButtonCard Breaking change, teams that send multiple children to these components need to remove their paddings and dividers to avoid visual bugs.

2021-09-28

0.9.7-beta.6

SMART-7268 DepartureCard typography error fixed SMART-7393 JourneySummary - Show consumer categories merged when more than one

2021-09-27

0.9.7-beta.5

SMART-7379 Disabled DepartureCard feature

2021-09-24

0.9.7-beta.3

SMART-7268 SMART-7396 - this has a small breaking change. If props for the Box inside the radio button card was passed, it should now be passed through the boxProps prop

2021-09-23

0.9.7-beta.2

SMART-7259 Fix icon color when IconButton is black.

0.9.7-beta.1

SMART-7150 Fix focus styling for ClickableCard, CheckboxCard and RadioButtonCard.

0.9.7-beta.0

SMART-7288 Fix padding on CheckboxCard and RadiobuttonCard. Breaking change, teams need to remove their own padding to avoid visual bugs.

0.9.6-beta.19

SMART-7161 Fix SearchButton design bugs plus text resizing

2021-09-17

0.9.6-beta.16

SMART-5231 Rename generic Props to {Component}Props

0.9.6-beta.15

SMART-7199 Fixed sr-only for RouteDescription.

2021-09-15

0.9.6-beta.14

SMART-5701 BottomSheet component. It is still work in progress not production ready.

2021-09-10

0.9.6-beta.10

Adds MUI StepIcon

2021-09-08

0.9.6-beta.9

SMART-7007 Make the default color of ListItemIcon black but have the ability to change when necessary.

0.9.6-beta.8

SMART-5478 - Implementing scalable font sizes (using rem instead of px)

2021-08-18

0.9.5-beta.4

SMART-5300 fix incorrect disabled color for FlowButton SMART-5296 set icon in ListItem always to be black SMART-5436 upate icon on Checkbox SMART-5685 change disabled color on Switch

0.9.5-beta.3

SMART-6782 fix to show popular stations in desktop for Autocomplete SMART-5327 fix background color for disabled ExecuteButton SMART-6918 fix incorrect font on active/inactive tab SMART-6793 fix so Autocomplete show values on focus

2021-06-22

0.9.3-beta.6

SMART-6889 - Add of a journeyStatus text that uses status circle. Also modified the JourneySummare component so it can take in an journey status test, optional

2021-06-22

0.9.2-beta.24

SMART-6646 - JourneySummary now handling comfort and flexibility

2021-06-21

0.9.2-beta.22

SMART-6610 - Fix with card and alert box, padding, colors

2021-06-18

0.9.2-beta.21

SMART-6344 - Add X2000 image to Train List SMART-6345 - Icon size on Search Button SMART-6346 - Active Tab font weight

2021-05-07

0.8.9-beta.16

SMART-6260 - New design for Select, MenuItem and Menu.

2021-05-03

0.8.9-beta.10

SMART-5479 - Add global support for prefers-reduced-motion mediaquery

2021-04-30

0.8.9-beta.8

SMART-5329 - add optional color prop to divider SMART-6156 - Add accessibility documentation to Storybook stories.

2021-04-28

0.8.9-beta.6

SMART-6156 - Add accessibility documentation to Storybook stories.

2021-04-27

0.8.9-beta.4

SMART-5669 - Add properties to Logo

  • Add optional className, style, height and width properties to Logo.

2021-04-23

0.8.9-beta.3

SMART-6101, SMART-6102 export of functions

  • Export StylesProvider, createGenerateClassName, withTheme,

2021-04-21

0.8.9-beta.2

SMART-5469 - AppBar design fixes

  • Add new isOnImage prop to display AppBar with overlay gradient. Replaces SJAppBar.

2021-04-15

0.8.9-beta.0

SMART-5469 - Rewrite of AppBar

  • Breaking change: New interface for AppBar, see Storybook documentation

2021-03-29 - 0.8.8-beta.2

  • SMART-5462 - adds IE11 support to aria-labeledby and aria-describedby to SJModal

2021-03-25

0.8.8-beta.1

  • SMART-5826 - Accessibility update for Menu
    • Breaking change: onClose prop is now mandatory.

2021-03-19

0.8.6-beta.4

  • SMART-5472 - Accessibility updates for List and ListItem

0.8.6-beta.3

  • SMART-5477 - Accessibility updates for LinearProgress
    • Breaking change: LinearProgress now requires accessibleText text description for screen readers
  • SMART-5539 - Design fix for MiniButton and refactored disabled styles in theme

2021-03-18

0.8.6-beta.1

  • SMART-5247 Changes to TextField

    • Breaking change: autoComplete prop is now mandatory for accessibility purposes. Refer to documentation in Storybook for guidance.
  • SMART-5800 Added a FormHelperText component

0.8.5-beta.8

  • SMART-5800 Added a FormHelperText component

2021-03-17

  • rollup build is updated with svgr({ icon: true }).
    Thisaddsheight and width to the icons, like they have in StoryBook.
  • MuiInputAdornment has fixed size svg at positionEnd.
  • SMART-5537 Updates to the Card component
    • Updated Card story and added a ClickableCard.
    • Added CardActionArea, CardHeader and CardMedia components.
    • Fixed :hover state on TextListLink.
  • Formatted the text in ThemeProvider to make it readble to dev's as well.
  • Body text is now SJSans and not SJSansMedium as previous.
    Thisissetbyconfiguringthebody2 typography and we are not using body2
    sothisshouldnotaffectusinanyotherwaythanthat<body> isn't semi-bold.
  • Cleanup of Color story and added the color WarmWhite that was referenced
    butmissingincolors.ts.
  • Exported enUS, fiFI, isIS, svSE from @material/core/locale.
  • Put type-done package back as it makes development easier by making sure
    that@types are up to date.

0.6.2-beta.23

  • adds Select component

0.6.2-beta.18

  • adds optional params for SJModal to take ariaLabel and ariaDescription

0.6.2-beta.7

bugfixes

-The SJModal had issue when it was track maintenance. The Track maintenance banner in the Time table view
hade higher z-index than the modal.

0.6.0-beta.1

Added

  • MiniButton
  • interfaces Trying to put all interfaces in one place
  • Logo
  • SwitchListItem

Updated StoryBook

bugfixes

  • Fixed an issue with @svgr/core not working
  • Missing property style on FormControlLabel
  • Missing properties [in, unmountOnExit] on Collapse
  • Added the theme.type = "dark" to all colors
  • Calculate lineHeight on all Typography values
  • Export Toolbar from our lib
  • Cleaned up language in README.md

Adjustments

  • Put stories in more sensible places
  • Rearranged imports in Stepper, because it was generating a warning when building
  • Removed Accordion Story (not in Figma)
  • ExecuteButton
  • TextField
  • Tabs
  • Box
  • Divider
  • FlowButton
  • StatusCircle
  • Paper
  • AppBar
  • Grid
  • List
  • ListItemIcon
  • ListItemText
  • Menu
  • MenuItem
  • MenuItemIcon
  • Typography

0.9.6-beta.6

  • fixed async issues for StationPicker

0.10.6-beta

  • Updated the MOVINGO.svg file