Design System

Online's Design System, simply dubbed Design System (DS), is made by us at dotkom for Online.

The components in DS are designed with consistency in mind, and our main goal is to make it easier for dotkom to develop web pages that adhere to Online's style.

See the components live at: design.online.ntnu.no.

Usage

Before importing and using a component, the <GlobalStyle /> component should be applied to your project, preferably at root-level. This component applies the global style rules and resets which are the baseline for DS. Without it, components will likely not look or act as intended, so this is very important.

import React from 'react';
import { GlobalStyle } from '@dotkomonline/design-system';
import App from './App';

export const Root = () => (
  <>
    <GlobalStyle />
    <App />
  </>
);

After that, importing and using components is as simple as:

import React from 'react';
import { Message } from '@dotkomonline/design-system';

export const SuccessMessage = ({ children }) => <Message type="success">{children}</Message>;

To get the fonts and icons to work you will also need to include them in the head of your application. In your index.html, or your alternative, include this:

<link
  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Serif+Pro|Source+Code+Pro|Material+Icons+Outlined"
  rel="stylesheet"
/>

Development

npm i to install the dependencies.

npm run start to start the storybook environment.

Before contributing

You will need to follow the rules from eslint and prettier. To verify that you follow the rules, run:

npm run lint-check
npm run format-check

If you want to autoformat, use these:

npm run lint
npm run format

If you want to run a chromatic test (UI image diff), use:

CHROMATIC_APP_CODE={get-app-code-from-dotkom} yarn chromatic # This may take som time
# Then, go your last build on https://www.chromaticqa.com/builds?appId=5dea690ec744f30020aaf273 to review changes in UI.

Editor config

We use MDX with Storybook, so we recommend using a plugin for syntax highlighting etc.

As mentioned, we use eslint and prettier to lint our TypeScript. We followed the setup used here. We use Visual Studio Code for development, and the guide provides a handy snippet for your editor configuration:

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "typescript", "autoFix": true },
  { "language": "typescriptreact", "autoFix": true }
],
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false,
},
"[javascriptreact]": {
  "editor.formatOnSave": false,
},
"[typescript]": {
  "editor.formatOnSave": false,
},
"[typescriptreact]": {
  "editor.formatOnSave": false,
},

The snippet above sets up automatic formatting on save! You might need plugins for ESLint and Prettier for this to work.

Publishing to npm

DS will automatically be published to npm when a branch beginning with fix/ producing a patch version change, and a branch beginning with feat/ producing a minor version change.

You can also publish DS manually by incrementing the version number in package.json. Keep in mind that we try to follow semantic versioning in dotkom.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes on time.