Frameless Design System based on the NL Design System architecture.
EUPL-1.2 License
This design system is based on the NL Design System architecture.
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!
In your own repository: remove the "Getting started" section below!
This template contains all relevant linting rules used by the NL Design System repository. It also contains the Storybook setup with two example components and two example general documentation page. Feel free to add or modify those documentation pages and use the example components as an initial template to create your own storybook components.
You need to have the following tools installed to run Storybook locally:
pnpm
, npm install -g pnpm
nl-
, The Hague uses denhaag-
, and you can choose something unique for you to use..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
.@nl-design-system/
, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.package.json
files to use your npm organisation scope. Don't forget the locally linked packages under devDependencies
. Find and replace all occurences of @example/
in your project with @your-organisation/
. Run pnpm install
to install each package in under the new organisation directory in each node_modules/
..npmpackagejsonlintrc.json
to require your organisation scope in package names, by configuring the valid-values-name-scope
property./packages/storybook/config/preview.tsx
and packages/web-components-stencil/src/button/index.scss
to use your prefix.proprietary/design-tokens/style-dictionary.config.json
to output .yourprefix-theme
instead of .example-theme
.preview.tsx
to use yourprefix-theme
instead of example-theme
as default theme for Storybook stories.pnpm install
npm run storybook
In .storybook/customTheme.js
the theme used by NL Design System can be found. By changing those properties one can style the storybook to match ones brand. Checkout https://storybook.js.org/docs/react/configure/theming to learn more about all the possible configurations to brand this storybook.
src/demo-empty-component
an example story of a documentation first (or documentation only) component can be found.x.stories.mdx
to component-name.stories.mdx
Meta
component in component-name.stories.mdx
README.md
docs/accessibility-guidelines
or docs/content-guidelines
.component-name.stories.mdx
by adding part of the Figma url to the Figma component <Figma title="Link" url="file/..." />
Add global tokens to /brand.css
. Add tags to make them appear in the Storybook Design token addon. For example @tokens Colors
and @presenter Color
. See https://storybook.js.org/addons/@tommyem/storybook-design-token for more details.
In src/demo-link-component
an example story and web-component can be found. All steps below are represented in this demo-link.stories.mdx
example.
To add a component implementation to storybook, we use the <component-name>-stories.mdx
which already contains the documentation pages or create one with placeholder documentation by following step 1-3 from the Adding UX and other documentation without a component implementation
chapter.
sanatize
package to prevent unsafe content and injections. Place this Template
function above the Meta
componentargTypes
property of the Meta
component in stories.mdx
.Argstable
component in your stories.mdx
status
to the Meta
parameters. The options and colors can be found in storybook/config/preview.tsx
Things we usually do:
nl-design-system/example GH_TOKEN
. Choose "All repositories". For "Resource owner" choose the user or organisation of the repository. For "Repository access" choose "Only select repositories", and select only your repository. Expand "Account permissions", then for "Contents" select "Read and write".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.nl-design-system/example NPM_TOKEN
. For "Permissions", allow only "Only select packages and scopes" and choose the scope of your npm packages. 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.NPM_TOKEN
in Repository tokens, for use in the publish-npm
GitHub Action.main
branch. Branch pattern should be exactly main
.
install
a required status check.lint
a required status check.test
a required status check.build
a required status check.gh-pages
branch, to prevent someone from deleting it accidentally.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.If you get this the following error, you still need to configure NPM_TOKEN
in your repository settings. Use "Generate New Token" in Access Tokens of npmjs.com to create a new automation tokne. Use "New repository secret" in GitHub Repository Secrets to configure it.
Run actions/checkout
Error: Input required and not supplied: token
In your own repository: remove the "Getting started" section above!
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.
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.