search

digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
84 stars 38 forks source link
components css designsystem react storybook tokens typescript

readme


Designsystemet logo

Designsystemet

📖 About Designsystemet

Designsystemet is a collection of important design elements, components and patterns that can be used to build public services.

Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.

🔗 Links

Storybook - Preview for React components.

Storefront - General documentation about the design system.

Theme - Theme builder.

📦 Packages

@digdir/designsystemet - CLI for Designsystemet.

@digdir/designsystemet-theme - Themes for Designsystemet.

@digdir/designsystemet-css - Styling for components.

@digdir/designsystemet-react - React implementation of Designsystemet components.

🚀 Get started

Follow these steps to get started with the React components.

1. Install the packages

Depending on your needs and technology stack install the relevant packages

npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme 
npm i @digdir/designsystemet-react

1.1 Custom theme

You can create your own theme to use with the Designsystemet packages by going to our theme-builder.

Designsystemet theming is defined using design-tokens. This is done so that you can use Token Studio to sync your theme in code with Designsystemet Figma UI kit, in addition to provide future flexibility.

Run npx @digdir/designsystemet tokens build to build CSS files for your custom theme (from the design-tokens). Using your own built CSS theme file you can skip using the @digdir/designsystemet-theme package.

2. Font

You are free to use any font-family with the components.

The components are designed and developed using the Inter font so variations might occur if a different font is used.

Add the Inter font (optional)

Add the <link> tag in <head>, and set font-family to Inter in your global css file.

The font-feature-settings adds a tail to lowercase L's.

HTML
<link
  rel="stylesheet"
  href="https://altinncdn.no/fonts/inter/inter.css"
/>
CSS
body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}

If you choose to install the font in a different way, remember to include the 400, 500 and 600 font weights.

3. Use a React component

import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';

import { Button } from '@digdir/designsystemet-react';

<Button variant='secondary'>I am a button!</Button>;

@digdir/designsystemet-theme and @digdir/designsystemet-css only needs to be imported once.

4. Add TypeScript types for colors

Because color names depend on which theme is being used, you have to add the following to your tsconfig.json to use all your colors in the components which have a data-color prop:

When using @digdir/designsystemet-theme

{
  // ...other settings
  "compilerOptions": {
    // ...other compilerOptions
    "types": [
      // ...other types
      "@digdir/designsystemet-theme/colors.d.ts"
      ]
  },
}

When using a custom theme

The CLI designsystemet tokens build command will output a colors.d.ts file to your chosen output directory. In the example, replace <your-path> with the actual path you used when running the command.

{
  // ...other settings
  "compilerOptions": {
    // ...other compilerOptions
    "types": [
      // ...other types
      "<your-path>/colors.d.ts"
      ]
  },
}

5. Add editor hints for data-color & data-size on HTML elements (optional)

You may want editor hints for data-color and data-size attributes on HTML elements like <span> or <div>, since these attributes can affect components nested within these elements.

This requires augmenting React's built-in types, and is therefore opt-in. If you want this, add the following to your tsconfig.json:

{
  // ...other settings
  "compilerOptions": {
    // ...other compilerOptions
    "types": [
      // ...other types
      "@digdir/designsystemet-react/react-types.d.ts"
      ]
  },
}

🫶 Contributing

Learn how you can contribute to this project by reading our Code of Conduct and Contributing Guide.

💪 Contributors

We are lucky to have a great group of people who help with the design system.



Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.