KNOWIT VERSION - Bygga miljöer \ pusha till devops

DesignSystem

Use node version 10.16.3

Prereqs

• VSCode
• Yarn: https://yarnpkg.com/en/docs/cli/install 
• Nodejs: https://nodejs.org/en/
• git clone https://dd-git.visualstudio.com/DefaultCollection/Digg/_git/Digg.DesignSystem

Bygga designsystemet

• \Digg.DesignSystem\: yarn install
• \Digg.DesignSystem\packages\digg-design-system\:  yarn build
• \Digg.DesignSystem\packages\digg-design-system\:  yarn link

Starta watch mode, för utveckling

• \Digg.DesignSystem\packages\digg-design-system\:  yarn start

Starta storybook webserver (kör dubbla terminaler i VSCode)

• \Digg.DesignSystem\packages\digg-design-system\: yarn storybook

Deploya designsystemets yarn-paket -> DEVOPS

Deploya designsystemets yarn-paket -> DEVOPS

ESATTO VERSION - Design System

Created for DIGG, the Agency for Digital Government in Sweden.

• TODO: Link to documentation
• TODO: Demo
• TODO: Usage docs

Prerequisites

• node 8+
• yarn

Getting started

Authenticating

Add your token in .npmrc in ~/.npmrc

1. Go to build and releases in VSTS
2. Click on Connect to feed
3. Click on npm
4. At the bottom, generate npm credentials

Installing the package

yarn add @digg/design-system

Developing

For developing the components, we're using Storybook.js as a development environment.

yarn storybook

Building the package

Before the package can be used, it needs to be built.

yarn build
yarn link

This will automatically link the package with yarn link.

Importing the package

import { Button } from '@digg/design-system';

const MyComponent = () => <Button primary>My awesome button</Button>;

Developing

Creating a component

Create a component in src/components/ directory.

Name the file with CamelCase, e.g. MyComponent.

Create the files:

• src/components/MyComponent/MyComponent.tsx
• src/components/MyComponent/MyComponent.test.tsx
• src/components/MyComponent/MyComponent.story.tsx
• src/components/MyComponent/MyComponent.md
• src/components/MyComponent/index.ts

MyComponent.tsx is the main file and this is where your component should live.

Define props using TypeScript interfaces. Use responsive props where necessary. Add comments above your props if you want them to be visible in the documentation.

MyComponent.test.tsx should contain unit tests for your component.

MyComponent.story.tsx should contain all stories for storybook. These are used for development.

MyComponent.md is documentation for the component. Start with the frontmatter

---
component: MyComponent
---

<props-table></props-table>

This will load in the correct component in the documentation. And replace the <props-table></props-table> with a PropsTable component.

Use <example code="<MyComponent prop={true} />"></example> to add code examples.

Base units

The base unit in this project is hardcoded at 8px. This may change in the future. Some props like padding and margin on Box are multiplied with the base. padding={3} = padding: 24px;.

Responsive styles

Many components in the design system has support for responsive props. Inspired by the great styled-system. (The reason why styled-system isn't used is the bad TypeScript support. Maybe we should send a pull request to it instead?)

Example responsive prop:

// Normal prop
<Box padding={2}>Content</Box>
// Responsive prop
<Box padding={[1, 2, 3]}>Content</Box>

The Box component has a padding prop that's responsive. This makes it possible to either send in one value or an array of values.

Every element in the array corresponds to an breakpoint. The breakpoints are defined in the theme.

The code above will generating something like.

.css-qwerty {
  padding: 8px;
}

@media screen and (min-width: {{BREAKPOINT[0]}}) {
  .css-qwerty {
    padding: 16px;
  }
}

@media screen and (min-width: {{BREAKPOINT[1]}}) {
  .css-qwerty {
    padding: 24px;
  }
}

Publishing

Publishing documentation

Until the package is 100% open source, we'll be using surge as a platform for statically hosting. Go into the packages/docs and run yarn deploy

To publish the website you need an invite from any project member. Talk to your project members for access.

Note: This should be changed to github pages ASAP.

Publishing package

yarn build
yarn publish
# Select new version according to semver