Welcome to the Hedwig Design System – a comprehensive design system built to streamline the development process across Posten and Bring's projects.
Examples - A kitchen sink of all the components, showing their usage.
Storybook - Similar to the to examples, primarly used when developing the components inside the design system.
Hedwig Design System consists of three packages
@postenbring/hedwig-tokens@postenbring/hedwig-css@postenbring/hedwig-react
Install the @postenbring/hedwig-react and @postenbring/hedwig-css packages
Then import the css package somewhere in your app (only needed once), and use the components.
import "@postenbring/hedwig-css";
import { Box, Button } from "@postenbring/hedwig-react";
export function MyComponent() {
return (
<Box>
<Button>Hello, World</Button>
</Box>
);
}
By default you will get the Posten theme in your app. If you want to use the Bring theme, you have to apply the hds-theme-bring class to a wrapping element in e.g. your index.html or App.tsx file:
function App() {
return (
<div className="hds-theme-bring">
<MyComponent />
</div>
);
}
Check out our component overview in Storybook or the example implementations. Note that these are examples and not necessarily the correct or optimal implementation for your project. It is meant to demonstratet the capabilities of Hedwig.
We welcome anyone who would like to contribute to improving the Hedwig Design System. The core team is responsible for maintaining this repository. However, anyone seeking changes is encouraged to submit a pull request.
Before you begin, ensure you have the following installed:
- Node.js (version 20 or higher)
- pnpm (version 9 or higher)
Check if you have node 20 or higher
node -vIf node is not installed, or you don't have version 20 or higher you need to install it. Download from nodejs.org, or use package manager like fnm, nvm, or asdf.
There are multiple ways to install pnpm, one is through npm:
npm install -g pnpmFollow these steps to get the design system up and running on your local machine for development and testing purposes.
- Clone the repository:
git clone git@github.com:bring/hedwig-design-system.git cd hedwig-design-system - Install dependencies:
pnpm install
To start the development server:
pnpm devStorybook should now be available at localhost:6006. The examples app should be available at localhost:6007.
We use changesets to handle publishing of new package versions. The easiest way to publish a new version is to use the changeset-bot's comments on pull requests, which will help you create and commit a new changeset file. An example of a changeset:
---
"@postenbring/hedwig-css": patch
"@postenbring/hedwig-react": patch
---
:lipstick: Change font size on Button component.
This changeset file will create patch releases of the @postenbring/hedwig-css and @postenbring/hedwig-react packages.
You can also use pnpm changeset in the project root folder, which will guide you through the creation of a changeset file.
Snapshots of a branch is published when a new changeset file is present in a pull request. The snapshot release version is in the format 0.0.0-${branch}-${timestamp}, e.g. @postenbring/hedwig-react@0.0.0-refactor-button-iSIvTK2v-20231121205134. This way, anyone who wants to contribute or request changes can create their own branch and automatically publish a snapshot version to the npm registry for testing purposes. Snapshot versions can be found here: