Circuit - DEHN's design system of the lightning and surge protection professionals

Design System Usage Guidelines

These guidelines provide instructions on how to effectively use the DEHN design system to streamline your development and design process. By following these practices, you can ensure consistency, accessibility, and efficiency in your projects.

Resources

Documentation Pages

Visit the DEHN Design System site for comprehensive documentation. This site covers fundamental design principles, handling responsiveness, accessibility, and more. It also demonstrates components in practical scenarios, helping you understand how to implement them effectively.

Figma Library

For design reference or work, access our Figma library. It contains all the components, offering a visual and interactive way to explore the design system elements and embed them into your design files.

Storybook

Developers can find interactive examples of all components in our Storybook. Access requires credentials, so if you are part of a DEHN product development team and need access, please consult your team lead or a member of the design system team.

Using product specific branches of the Storybook

!MORE TO COME!

Development Setup

Our design system components are built with SCSS and Vue. Below are the recommended tools and configurations to get started.

Recommended IDE Setup

Importing Styles

To import the main styles, including colors, fonts, and headings, use the following in your project:

import '@dehn/design-system-component-library/dist/assets/index.css';

TypeScript Support for .vue Files

TypeScript does not natively support .vue file types. To address this, replace the tsc CLI with vue-tsc for type checking. Additionally, install the Vue - Official extension to ensure your editor recognizes .vue types.

Configuration for Vitest

If you are using Vitest for testing, include the following in your vitest.config.ts:

defineConfig({
  test: {
    server: {
      deps: {
        inline: [/@dehn\/design-system-component-library\/.*/]
      }
    }
  }
});

Nuxt Project Configuration

For Nuxt projects, add the following to your nuxt.config.js:

build: {
    transpile: ["@dehn/design-system-component-library"],
}

Vite Configuration

For further customization, refer to the Vite Configuration Reference.

Project Setup

Follow these commands to set up and manage your project:

Install Dependencies

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile, and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

For development:

npm run test:e2e:dev

For production build (recommended for CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

Run Storybook

npm run storybook

Build for Storybook

npm build-storybook

Build the Package

npm run build-package

Branch Management and Merging

Branch Creation and Management

For branch creation, the Mercury team will handle this process. If you need a new branch, please contact the DevOps specialist from the Mercury team.

Updating Branch Versions

Each team is responsible for updating the version of their branch. When a new branch is created, the package.json file will be set to version 0.0.1, regardless of the version on the main branch. Teams must update this version accordingly to reflect their changes.

Package Publication Workflow

We have a dedicated workflow for package publication that needs to be triggered manually: https://github.com/dehn/design-system-component-library/actions/workflows/branch-publish.yaml. When launching the workflow, specify the branch to publish. This will publish the package to the GitHub registry with the following name format: design-system-component-library-${team}.

Merging to Main

Each team is responsible for merging their changes into the main branch. Be aware that conflicts between branches may arise. To avoid conflicts, teams should pull updates from the main branch before merging.

By following these guidelines and using the provided resources, you can maximize the efficiency and consistency of your work with the DEHN design system.