virkailija-ui-components

📦 Asennus

npm i @opetushallitus/virkailija-ui-components

Asenna myös tarvittaessa vertaisriippuvuudet react, react-dom ja styled-components:

npm i react react-dom styled-components

✨ Ominaisuudet

• Kokoelma TypeScriptillä toteutettuja modulaarisia react-komponentteja
• Tyylit on toteutettu styled-components-kirjastolla, jonka avulla käytettävien komponenttien tyylit ladataan automaattisesti
• Teema-objektissa määriteltyjä arvoja pystyy muokkaamaan ja niitä pääsee helposti käyttämään komponettien tyyleissä styled-system-kirjaston avulla

🛠️ Käyttö

Teeman määrittäminen

import { ThemeProvider } from 'styled-components';
import createTheme from '@opetushallitus/virkailija-ui-components/createTheme';

const theme = createTheme();

const App = () => <ThemeProvider theme={theme}>/* ... */</ThemeProvider>;

Komponenttien käyttö

import Button from '@opetushallitus/virkailija-ui-components/Button';

ReactDOM.render(<Button />, mountNode);

system-funktiot

import {
  space,
  flexbox,
  color,
  layout,
  typography,
  shadow,
} from '@opetushallitus/virkailija-ui-components/system';

const Box = styled.div`
  ${space}
  ${flexbox}
  ${color}
  ${layout}
  ${typography}
  ${shadow}
`;

ReactDOM.render(<Box p={2} bg="primary.main" color="white" />, mountNode);

Jos kaipaat lisätietoja, lue tarkempi dokumentaatio ja tutustu valmiiseen Box-komponenttiin.