Web components package

[tuomashatakka]

Description

• Add first HDS Web Components component Accordion

Related Issue

• https://helsinkisolutionoffice.atlassian.net/browse/HDS-1434

Motivation

• HDS will receive a wider user audience with Web Components. Web Components are easier to use in WP and Drupal environments than React Components

How Has This Been Tested?

• on the local machine

Unfinished tasks:

• Component tests and running environment (recommended running environment is Web Test runner)
• Documentation Playground (there is a initial branch for this, maybe these two could be merge)
• Documentation
• Readme review
• bug fixes, see notes
• update customized example to bus colour and white text, to be less annoying and more consistent with other HDS examples (accessibility remarks)
• add example of multiple accordions so that behaviour can be evaluated when moving from one accordion to another
• verify close-button focus behaves as in react

Demo

[minevala]

yarn start fails on my machine:

ModuleNotFoundError: Module not found: Error: Package path ./directives/style-map is not exported from package /Users/mikanevalainen/Documents/code/helsinki-design-system/node_modules/lit-html (see exports field in /Users/mikanevalainen/Documents/code/helsinki-design-system/node_modules/lit-html/package.json)

I tried to remove node_modules and reinstall modules but it did not help. Maybe I have some version mismatch or something 🤔

[minevala]

yarn start fails on my machine:

ModuleNotFoundError: Module not found: Error: Package path ./directives/style-map is not exported from package /Users/mikanevalainen/Documents/code/helsinki-design-system/node_modules/lit-html (see exports field in /Users/mikanevalainen/Documents/code/helsinki-design-system/node_modules/lit-html/package.json)

I tried to remove node_modules and reinstall modules but it did not help. Maybe I have some version mismatch or something 🤔

I added a .js-postfix in a lit-module import in the storybook file to fix this. Somehow the lit-modules require the full path in imports 🤷

[harriplappalainen]

It's getting there! 💪

[Jussiles]

I noticed that there are two similar commands with almost identical names start:web-components and start:web-component. Should start:web-component to be removed?