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.

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

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