nl-design-system/nldesignsystem.nl-storybook

Website van NL Design System in Storybook templates voor visuele regressie tests

nldesignsystem.nl-storybook

This is template of the page "Kleuren" made with web-components where possible. this template is made in storybook.

!note: this is not the official source code of nldesignsystem.nl, you can find it here https://github.com/nl-design-system/documentatie !

For more info about the NL Design System and learn about things happening in our open source community, join the #nl-design-system Slack via praatmee.codefor.nl!

Run storybook

• Install dependencies: pnpm install
• Run storybook: pnpm run storybook

Code of Conduct

We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. Read our Code of Conduct if you haven't already.

License

This project is free and open-source software licensed under the European Union Public License (EUPL) v1.2. Documentation is licensed as Creative Commons Zero 1.0 Universal (CC0-1.0)

For information about proprietary assets in this repository, please carefully read the NOTICE file.

nldesignsystem.nl-storybook's Issues

Todo

• Choose a prefix for your organisation. For example: the main NL Design System uses nl-, The Hague uses denhaag-, and you can choose something unique for you to use.
  • Update: Prefix will be kernteam-
• Modify .stylelintrc.json by replacing the prefix example with the prefix you have chosen, in the following rules: custom-property-pattern, selector-class-pattern, keyframes-name-pattern, scss/dollar-variable-pattern and scss/percent-placeholder-pattern.
• Choose and register an npm organisation on npmjs.com, if you haven't already. This is very important to keep your project secure. The core NL Design System uses @nl-design-system/, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.
• Modify all package.json files to use your npm organisation scope. Don't forget the locally linked packages under devDependencies.
• Modify .npmpackagejsonlintrc.json to require your organisation scope in package names, by configuring the valid-values-name-scope property.
• Modify the imports in /packages/storybook/config/preview.tsx and packages/web-components-stencil/src/button/index.scss to use your prefix.

Configuring the GitHub repository

Things we usually do:

• Generate fine grained personal access token in GitHub, with rights to push npm version commits. Use a name that will be clear when the token expires, for example: nl-design-system/example GH_TOKEN. Choose "All repositories". Expand "Account permissions", then for "Contents" select "Read and write".
• Configure GH_TOKEN in Repository tokens, for use in the publish-npm GitHub Action. You might notice the GITHUB_TOKEN already exists, but the GITHUB_ prefix is used by GitHub itself and the token has read-only rights.
• Go to npmjs.com and create an "Access Token" for "Automation". Use a name that serves as hint where to reset the token when it expires, for example: nl-design-system/example NPM_TOKEN. Do not store the token anywhere, just copy it to GitHub once. You can always generate new tokens, and they will be protected by multi-factor authentication.
• Configure NPM_TOKEN in Repository tokens, for use in the publish-npm GitHub Action.
• Configure GitHub repository settings
  • General settings
    • Uncheck "Allow merge commits"
    • Should already be checked: "Allow squash merging"
    • Should already be checked: "Allow rebase merging"
    • Check "Allow auto-merge"
    • Check "Automatically delete head branches"
  • Branches
    • Add rule to protect main branch. Branch pattern should be exactly main.
      • Check "Require a pull request before merging"
      • Check "Require approvals" with at least one approval.
      • Check "Require approval of the most recent reviewable push"
      • Check "Require status checks to pass before merging"
      • Search for the following status checks, and make them required:
      • Make install a required status check.
      • Make lint a required status check.
      • Make test a required status check.
      • Make build a required status check.
      • Optional: configure Chromatic visual regression tests as a required status check.
      • Check "Require linear history"
    • Add rule to protect gh-pages branch, to prevent someone from deleting it accidentally.
• Enable GitHub Pages to host Storybook
  • Go to Pages, choose "Deploy from a branch" with gh-pages as branch with / (root) as folder. If gh-pages is not in the list, make sure the publish-website action succeeds at least once.
  • In the "Code" tab (the home page of your repository), configure the "About" section. Use "your GitHub Pages website" as "Website" of your repository.
  • Configure "nl-design-system" as one of the topics of your repository.