Web components: Refactor usa-banner and improve Storybook integration (#189)

* limit custom elements manifest to src/components directory with new config file

* remove chromatic plugin

* remove unused prop

* add storybook helpers to project

* hide argref

* refactor: move translations to constants and improve type safety

* render styles in storybook

* fix icon color

* use enum instead of type alias to get dropdown in storybook

* use template helper

* add await for async event

* use template helper for custom content. Add slotted selector to make the lock icon work like magic

* clean up import

* remove tld prop and add tld to slot

* remove comment

* provide guidance and info about component

* update copy

* formatting file

* add syntax highlighting

* add link

* update icon aria label

Author: ethangardner

.storybook/main.js

@@ -7,7 +7,6 @@ const config = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-docs",
-    "@chromatic-com/storybook",
     "@storybook/addon-a11y",
   ],
   framework: {

.storybook/preview.js

@@ -2,9 +2,13 @@
  * Custom elements for component docs generation.
  */
 import { setCustomElementsManifest } from "@storybook/web-components-vite";
+import { setStorybookHelpersConfig } from "@wc-toolkit/storybook-helpers";
 import customElements from "../custom-elements.json";
 
 setCustomElementsManifest(customElements);
+setStorybookHelpersConfig({
+  hideArgRef: true,
+});
 
 /**
  *

custom-elements-manifest.config.js

@@ -0,0 +1,8 @@
+export default {
+  globs: ["./src/components/**/*.{js,ts}"],
+  exclude: [
+    "./src/components/**/*.spec.{js,ts}",
+    "./src/components/**/*.stories.{js,ts}",
+  ],
+  litelement: true,
+};