@sjse/component-library NPM

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 📋

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

@everything-registry/sub-chunk-839 @zalastax/nolb-_sj

4.6.1-sj-react-compatible

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4.6.0-sj-react-compatible

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

0.0.4-radio-button-card

5 years ago

0.0.2-radio-button-card

5 years ago

0.0.3-radio-button-card

5 years ago

0.8.8-beta.4

5 years ago

0.0.1-radio-button-card

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago