Overview of the design system

Tech stack

The design system tries to have as few dependencies as possible. As of now its only relies on react (and react-dom). Both defined as peer-dependencies. The goal is to follow the React-version used in OmniWeb.

Component distribution

Components are published on a private npm-register. The goal is for this process to be automated in a pipeline (Team Accelerate are working on this on GitHub).

All components can typically be installed using the @ntds/COMPONENT_NAME npm-scope.

The source code of the component library is on Norsk Tipping GitHub.

Testing and code quality

For component testing, we use Jest together with React Testing Library.

For code quality we use Eslint with about the same configuration as in OmniWeb.

Documentation and resources

In addition to offer components through a component-library, a design system should also be a learning and documentation resource on how to design, create and use components systematically.

This is to ensure that we build:

• Consistent user experiences
• Accessible solutions
• Knowledge across teams
• Unambiguous language between UX and front-end

Documentation for components

Each component in the design system have its own markdown file where the specifics for that component is documented. Each component should include information about:

• how to import the component
• prop documentation
• basic usage with demo
• showcase of the most useful props
• accessibility concerns