README
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
- Go to build and releases in VSTS
- Click on Connect to feed
- Click on npm
- 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