Skip to content
Suomi.fi-styleguide in React components
TypeScript JavaScript CSS
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
.styleguidist Replace emotion imports with styled-components imports Aug 15, 2019
src Update snapshot of suomifi-icons update to 0.0.8 Sep 5, 2019
types Declare common interface for ComponentsList May 22, 2019
.browserslistrc
.eslintrc
.gitignore Install styleguidist Dec 3, 2018
.npmrc Add default registry to .npmrc Nov 28, 2018
.nvmrc
.prettierrc
.stylelintrc Install and configure stylelint for CSS-in-JS May 3, 2019
CONTRIBUTING.md
DEVELOPMENT.md Update development guides Jan 14, 2019
FAQ.md
LICENSE Initial commit Nov 6, 2018
README.md Update README description Jun 3, 2019
jest.config.js
jest.setup.js Replace configuration for jest-emotion with jest-styled-components Aug 19, 2019
jest.styleMock.js Replace identity-obj-proxy with just mock out CSS-files Mar 7, 2019
jest.transformer.js
package.json Update suomifi-icons to 0.0.8 Sep 5, 2019
styleguide.config.js Restore option to run Axe with styleguidist server Aug 5, 2019
tsconfig.es2015.json
tsconfig.esm.json Fix typescript builds of not reading type declarations Jan 15, 2019
tsconfig.json Fix tsconfig not finding custom types Dec 17, 2018
tslint.json Install styled-components Aug 14, 2019
webpack.config.js
yarn.lock

README.md

VRK 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 Emotion 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 PRs Welcome

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

Licensing

MIT LICENSE

You can’t perform that action at this time.