3. Current state

Storybook

 

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

 

• What is it? What is the purpose?
• Knobs, Actions, a11y
• Analogy WCMS: previewserver.sbb.ch -> select build

Documentation Page

 

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

 

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

Deployments Page

 

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

 

• List of all releases
• Analogy WCMS: previewserver.sbb.ch

4. Use components

The outside view

 

How can consumers use the components?

 

Generic Implementation

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

 

ImplementatioN in AEM

https://test-www.sbb.ch/content/relaunchtest/sbb/de/lyne-poc.html

5. Create and publish component

 

CREATE

Manual Worfklow: create a new component

 

• Pull Request for a new component
• Multiple quality gates before merge:
  • PR review
  • Automated tests
  • CodeCov
  • Automated checks

PUBLISH

Automated Workflow: publish a new component

 

• Merge PR
• Current versions:
  • npm
  • GitHub
  • Deployments
  • Storybook
  • Documentation
• What is Travis? What is CI/CD?
• What is Travis doing when a PR is merged?
• Look at updated versions

6. Documentation page

Static Site Generator

DatoCMS

https://lyne-documentation-2307.admin.datocms.com/editor

 

• Models and contents
• Use case: manage design tokens
• Example: add new component, add new component variant
• Show deployed documentation page

Lifecycle

 

Documenation is updated, when:

• There are changes in Dato
• When a new release of lyne-components is published

7. Excursus: Netlify

• Where do we host our pages?
• Key benefits of netlify
  • Static hosting -> static files on CDN
  • Easy rollback

Static vs. Dynamic hosting

8. Update a component

• Make code change
• Pull Request for improvement
• Regression Test

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