1. Current state

Storybook

 

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

 

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

Documentation Page

 

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

 

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

Deployments Page

 

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

 

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

2. Excursus: 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

npm and versioning

 

• What is npm?
• What is semantic versioning?

3. Create and publish component

 

Manual Worfklow: create a new component

 

• New Component added
• Open Pull Request
• Multiple quality gates before merge:
  • automated checks
  • automated tests
  • PR review

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

Automated Workflow: publish a new component

 

• Current versions:
  • npm
  • github
  • deployments
  • storybook
  • documentation
• PR is merged
• What is Travis? What is CI/CD?
• What is Travis doing when a PR is merged?
• Look at updated versions

4. Documentation page

Headless CMS

Static Site Generator

DatoCMS

• 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

6. Excursus: Netlify

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

Static vs. Dynamic hosting

JAM Stack