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.
- Breaking change:
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
- Breaking change: LinearProgress now requires
- 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.
- Breaking change:
SMART-5800 Added a FormHelperText component
0.8.5-beta.8
- SMART-5800 Added a FormHelperText component
2021-03-17
rollup
build is updated withsvgr({ icon: true })
.
Thisaddsheight
andwidth
to the icons, like they have in StoryBook.MuiInputAdornment
has fixed size svg atpositionEnd
.- SMART-5537 Updates to the Card component
- Updated
Card
story and added aClickableCard
. - Added
CardActionArea
,CardHeader
andCardMedia
components. - Fixed
:hover
state onTextListLink
.
- Updated
- Formatted the text in
ThemeProvider
to make it readble to dev's as well. - Body text is now
SJSans
and notSJSansMedium
as previous.
Thisissetbyconfiguringthebody2
typography and we are not usingbody2
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