suomifi-ui-components
Suomi.fi-styleguide in React components. Living styleguide (latest release/master-branch): https://vrk-kpa.github.io/suomifi-ui-components/
✨ Features
- React-components (>=16.3) with Typescript support
- Highly modular - all browser/app CSS-resets without global styles
- Should work on all different existing React apps (>=16.3)
- Highly customizable (CSS, CSS-in-JS)
Uses React 16.6.3 with Styled Components and written in TypeScript. Styleguidist for presenting components.
Webpack 4 with awesome-typescript-loader and TSLint.
For testing: React-testing-library run by Jest with ts-jest (code coverage with built-in Istanbul). Code style with Prettier.
📦 Install
yarn add suomifi-ui-components🔨 Usage
import { Button } from 'suomifi-ui-components';
ReactDOM.render(<Button />, mountNode);🌊 Component.variant
Components have variant-property for different versions of the current component. Easiest way to use variant-prop is with (static method) Component.variant.
import { Button } from 'suomifi-ui-components';
<Button.secondary>This is seconday button</Button.secondary>;⛱ Extending styles
Components' styles can be customized with Styled Components / Emotion:
styled(Button)...HOX!!! If you use Styled Components you cannot use Component.variant (static methods) and you need to use variant-property to get variants from the styled(Component).
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 {...}
🕶 Using bare accessible components
Import accessible components without suomi.fi-styles from library 'suomifi-ui-components/components'
import { Button } from 'suomifi-ui-components/components';
ReactDOM.render(<Button />, mountNode);🔮 FAQ
See FAQ.md.
⌨️ Development
See DEVELOPMENT.md.
🤝 Contributing 
We welcome all contributions. Please read our CONTRIBUTING.md first.
Licensing
MIT LICENSE