1. Design System Overview

Design Tokens

Components

Documentation

Applications

DESIGN SYSTEM

CONSUMERS

2. Components

Requirements

• Resilient
• Technology Agnostic
• Native Support
• Modular
• Easy to use

Status quo

• CTA-Button: sbb.ch
• Code: https://code-ext.sbb.ch/projects/WCMS/repos/sbb-internet-frontend/browse/source/preview/styleguide/links_buttons.hbs

The new Way

• AEM
• Code: https://github.com/lyne-design-system/lyne-getting-started/blob/master/examples/javascript/index.html

4. Current state

Storybook

 

https://lyne-components-storybook.netlify.app/

 

• What is it? What is the purpose?
• Knobs, Actions, a11y, Documentation

Documentation Page

 

https://lyne-documentation.netlify.app/

 

• What could the documentation contain? (https://www.duetds.com/)

Deployments Page

 

https://lyne-documentation.netlify.app/en/deployments

 

• List of all releases

5. update workflow

Versioning

• Design Tokens and Components are versioned
• The process for creating and publishing new versions is completely automated

A. Change a Design token

• Make change in code
• Push to repo
• New version is published automatically
• Design Tokens on npm

B. Use new design tokens

• Install new Design Tokens Package
• Pull Request
• Multiple Tests and Quality Gates

Regression tests: Chromatic

• What is a visual regression test?
• What is chromatic?
• What is the workflow for chromatic?
  • UI Tests: developer
  • UI Review: UI/UX/PO/Stakeholders

• Merge Pull Request

 

Results:

• Latest storybook
• Documentation page
• AEM