Hedwig Design System

Welcome to the Hedwig Design System – a comprehensive design system built to streamline the development process across Posten and Bring's projects.

✨ Usage

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

Getting started

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>
  );
}

Inspiration

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.

🧑‍💻 Contributing

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.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 20 or higher)
• pnpm (version 9 or higher)

Check node

Check if you have node 20 or higher

node -v

Install node

If 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.

Install pnpm

There are multiple ways to install pnpm, one is through npm:

npm install -g pnpm

Getting Started

Follow these steps to get the design system up and running on your local machine for development and testing purposes.

Installation

1. Clone the repository:

   git clone [email protected]:bring/hedwig-design-system.git
   cd hedwig-design-system

2. Install dependencies:

   pnpm install

Development

To start the development server:

pnpm dev

Storybook should now be available at localhost:6006. The examples app should be available at localhost:6007.

Publishing

Releases

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 releases

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/[email protected]. 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:

• hedwig-react
• hedwig-css
• hedwig-tokens