Adding HelpText component

[georgewrmarshall]

Explanation

Adding HelpText component that will eventually be used with TextField and Label to create FormTextField.

More Information

• Fixes [Ext Nav] Create component: HelpText #16151
• Figma Link

Screenshots/Screencaps

After

Screen.Recording.2022-10-27.at.2.34.52.PM.mov

Manual Testing Steps

• Go to the latest build of Storybook in this PR
• Search HelpText in the search bar
• Check story controls
• Check stories
• Check docs

Pre-Merge Checklist

• PR template is filled out
• IF this PR fixes a bug, a test that would have caught the bug has been added
• PR is linked to the appropriate GitHub issue
• PR has been added to the appropriate release Milestone

+ If there are functional changes:

• Manual testing complete & passed
• "Extension QA Board" label has been applied

Acceptance Criteria

• Has a className prop and the PropType descriptions are all the same
• Prop table in MDX docs have the "Accepts all Box component props" description and link
• We are consistent when using the same prop names like size and are suggesting the use of the generalized design-system.js constants e.g. SIZES as the primary option but noting the component consts in the documentation and using them for propType validation and storybook controls only
• Standardize all similar prop names for images imgSrc, imgAlt(html element + attribute) (needs audit)
• We have a story for each component prop and we use the prop name verbatim e.g. size prop would be export const Size = (args) => (
• We have the accompanying documentation for each component prop and we use the prop name verbatim e.g. size prop would be ### Size
• Add mm- prefix to all classNames
• className is kebab case version of the component name
• Spread base components props and reduce duplication of props when props aren't being changed and remain the same for both variant and base components
• Add any "to dos" with a // TODO: comment so we can search for them at a later date e.g. blocking components etc

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [6956541]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2384 ± 131 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	2975	282	620	298
		domContentLoaded	1927	2979	2362	269	129
		load	1966	2979	2384	273	131
		domInteractive	1927	2978	2362	269	129

highlights:

storybook

• ui/components/component-library/help-text/help-text.stories.js