Electrons - Circuit design system

Design System (Dev) 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.

Branch Management and Merging

Branching strategy

The DEHN Design System uses a multi-branch strategy with main for shared components and dedicated team branches (mercury, vega, sentinel, altair) for team-specific development. Modify existing shared components in main; develop new team-specific components in your team branch. Changes from main automatically sync to team branches, and team components can be promoted to main when needed by other teams.

Full documentation of our branching strategy

Deployment flow

The DEHN Design System uses an automated release process with release-please for both main and team branches. When PRs are merged, release-please creates a release PR that, once approved, generates a git tag triggering automatic Storybook deployment to S3/CloudFront. Package publishing to GitHub Packages is manual via the “Publish from different branches” workflow, with package names determined by the selected branch. Changes from main automatically sync to team branches via pull requests.

Detailed deployment flow

Development Setup

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

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.