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

📦 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 secondary 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