README
suomifi-ui-components
Suomi.fi-styleguide in React components. Living styleguide (latest release/master-branch).
✨ Features
- Accessibility WCAG 2.1 level AA
- React-components with TypeScript support
- Suomi.fi brand styles
- Highly customizable (CSS, CSS-in-JS)
Works with React >= 16.8.0 and Styled Components >= 5.2.1. Supports TypeScript. CJS and ESM builds provided via the npm package.
Supported browser and screenreader combinations
Operating system | Browsers | Screen reader |
---|---|---|
macOS | Safari, Chrome, Edge | VoiceOver |
Windows | Chrome, Firefox, Edge | NVDA |
iOS | Safari | VoiceOver |
Android | Chrome | TalkBack |
📦 Install
To install the component library itself
yarn add suomifi-ui-components
Include required styles from dist/main.css
as best suited for your project. You can, for example, import the stylesheet to your app and let your bundler handle it:
import 'suomifi-ui-components/dist/main.css';
This stylesheet contains part of the global styles for the library as well as Reach UI peer dependency styles.
Include required fonts as best suited for your project. You can, for example, use the following import with your global css.
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&display=swap');
The following fonts and variants are required: Font-family: 'Source Sans Pro', Font-weight: 300, 400, 600
Peer dependencies
You should also install the following peer dependencies.
React version >=16.8.0 and related dependencies and typings.
styled-components version >=5.2.1 and related dependencies and typings.
The aim is to keep dependencies up to date and use the latest available versions. We encourage you to use the latest available versions of peer dependencies.
yarn add styled-components
If using TypeScript, version 3.8 or above is required.
In case TypeScript is used and skipLibCheck compiler option is set to false, also typings for react, react-dom, styled-components and warning are required.
yarn add @types/styled-components @types/warning
🔨 Usage
import { Button } from 'suomifi-ui-components';
ReactDOM.render(<Button />, mountNode);
🌊 Component variants
Components have variant-property for different versions of the current component.
import { Button } from 'suomifi-ui-components';
<Button variant="secondary">This is a seconday button</Button>;
⛱ Extending styles
Components' styles can be customized with Styled Components:
styled(Button)...
or using CSS-ClassName:
<Button className="button--custom">Example</Button>
.fi-button.button--custom {
...;
}
Don't use !important, if really really needed - for specificity hack you can define styles using classNames multiple times .fi-button.button--custom.button--custom {...}
🔮 FAQ
See FAQ.md.
⌨️ Development
See DEVELOPMENT.md.
🤝 Contributing
We welcome all contributions. Please read our CONTRIBUTING.md first.
Licensing
MIT LICENSE