feat: interactive stories for web components

[gavinbarron]

Closes #

PR Type

• Documentation content changes

Description of the changes

Adds the use of controls and parameters to Storybook. (Formerly known as knobs) Adds an example story for mgt-person that allows for exploratory interactive editing of attributes and css properties. Provides the HTML of the rendered story to allow developers to see what the markup would look like.

PR checklist

• [X] Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• [X] All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• [X] Stories have been added and existing stories have been tested
• [ ] Added appropriate documentation. Docs PR:

• [ ] License header has been added to all new source files (yarn setLicense)
• [X] Contains NO breaking changes

Other information

[microsoft-github-policy-service[bot]]

Thank you for creating a Pull Request @gavinbarron.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• [ ] I have verified a documentation PR has been linked and is approved (or not applicable)
• [ ] I have ran this PR locally and have tested the fix/feature
• [ ] I have verified that stories have been added to storybook (or not applicable)
• [ ] I have tested existing stories in storybook to verify no regression has occured
• [ ] I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions[bot]]

📖 The updated storybook is available here

[github-actions[bot]]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	85%	67%	0	✔
mgt-components.src.components.mgt-contact	63%	100%	0	➖
mgt-components.src.components.mgt-file	62%	100%	0	➖
mgt-components.src.components.mgt-file-list	46%	100%	0	❌
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	86%	0	❌
mgt-components.src.components.mgt-get	22%	100%	0	❌
mgt-components.src.components.mgt-messages	68%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	79%	72%	0	✔
mgt-components.src.components.mgt-person-card	50%	65%	0	➖
mgt-components.src.components.mgt-picker	80%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	87%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	72%	53%	0	➖
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	78%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	78%	12%	0	✔
mgt-element.dist.es6.components.src.components	72%	73%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	73%	0	✔
mgt-element.dist.es6.providers.src.providers	83%	69%	0	✔
mgt-element.dist.es6.src	90%	100%	0	✔
mgt-element.dist.es6.utils.src.utils	64%	76%	0	➖
mgt-element.src	93%	40%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	83%	91%	0	✔
mgt-element.src.utils	71%	90%	0	➖
Summary	64% (13776 / 21450)	66% (395 / 598)	0	➖

[github-actions[bot]]

📖 The updated storybook is available here

[sonarcloud[bot]]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud