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 (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.

🔮 FAQ

See FAQ.md.

⌨️ Development

See DEVELOPMENT.md.

🤝 Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first.

Licensing

MIT LICENSE