Suomifi-ui-components NPM

suomifi-ui-components

npm NPM

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 (React 18 supported) 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

npm install suomifi-ui-components

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.

npm install 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 add typings for styled-components as well as react and react-dom as required by the React version used.

npm install @types/styled-components @types/react @types/react-dom

🔨 Usage

import { Button } from 'suomifi-ui-components';
<Button>Suomi.fi button</Button>;

🌊 `Component variants`

Components have a variant property for different versions of the 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 you can define styles using classNames multiple times .fi-button.button--custom.button--custom {...} for a specificity hack.