<va-tag>: Add new web component

packages/storybook/stories/additional-docs.js

@@ -49,11 +49,4 @@ export const additionalDocs = {
     maturityCategory: CAUTION,
     maturityLevel: AVAILABLE,
   },
-  // MDX
-  'Tag': {
-    guidanceHref: 'tag',
-    guidanceName: 'Tag',
-    maturityCategory: USE,
-    maturityLevel: DEPLOYED,
-  },
 };

packages/storybook/stories/va-tag.stories.tsx

@@ -0,0 +1,36 @@
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+
+const tagDocs = getWebComponentDocs('va-tag');
+
+export default {
+  title: 'Components/Tag',
+  id: 'components/va-tag',
+  component: 'va-tag',
+  decorators: [
+    (Story) => (
+      <div className="vads-u-margin--1">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    componentSubtitle: 'va-tag web component',
+    docs: {
+      page: () => <StoryDocs storyDefault={Default} data={tagDocs} />,
+    },
+  },
+  argTypes: {
+    ...propStructure(tagDocs),
+  }
+};
+
+const Template = (args) => {
+  return (
+    <va-tag text={args.text}></va-tag>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'New',
+};

packages/web-components/src/components.d.ts

@@ -2004,6 +2004,17 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * @componentName Tag
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaTag {
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "text": string;
+    }
     /**
      * @componentName Telephone
      * @maturityCategory use
@@ -3679,6 +3690,17 @@ declare global {
         prototype: HTMLVaTabsElement;
         new (): HTMLVaTabsElement;
     };
+    /**
+     * @componentName Tag
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface HTMLVaTagElement extends Components.VaTag, HTMLStencilElement {
+    }
+    var HTMLVaTagElement: {
+        prototype: HTMLVaTagElement;
+        new (): HTMLVaTagElement;
+    };
     interface HTMLVaTelephoneElementEventMap {
         "component-library-analytics": any;
     }
@@ -3843,6 +3865,7 @@ declare global {
         "va-table-inner": HTMLVaTableInnerElement;
         "va-table-row": HTMLVaTableRowElement;
         "va-tabs": HTMLVaTabsElement;
+        "va-tag": HTMLVaTagElement;
         "va-telephone": HTMLVaTelephoneElement;
         "va-telephone-input": HTMLVaTelephoneInputElement;
         "va-text-input": HTMLVaTextInputElement;
@@ -6136,6 +6159,17 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    /**
+     * @componentName Tag
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaTag {
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "text": string;
+    }
     /**
      * @componentName Telephone
      * @maturityCategory use
@@ -6529,6 +6563,7 @@ declare namespace LocalJSX {
         "va-table-inner": VaTableInner;
         "va-table-row": VaTableRow;
         "va-tabs": VaTabs;
+        "va-tag": VaTag;
         "va-telephone": VaTelephone;
         "va-telephone-input": VaTelephoneInput;
         "va-text-input": VaTextInput;
@@ -6917,6 +6952,12 @@ declare module "@stencil/core" {
              * @maturityLevel candidate
              */
             "va-tabs": LocalJSX.VaTabs & JSXBase.HTMLAttributes<HTMLVaTabsElement>;
+            /**
+             * @componentName Tag
+             * @maturityCategory caution
+             * @maturityLevel candidate
+             */
+            "va-tag": LocalJSX.VaTag & JSXBase.HTMLAttributes<HTMLVaTagElement>;
             /**
              * @componentName Telephone
              * @maturityCategory use

packages/web-components/src/components/va-tag/test/va-tag.e2e.ts

@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { axeCheck } from '../../../testing/test-helpers';
+
+describe('va-tag', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-tag text="Test tag"></va-tag>');
+
+    const element = await page.find('va-tag');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('passes accessibility tests', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-tag></va-tag>');
+
+    await axeCheck(page);
+  });
+
+  it('respect the text prop', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-tag text="Test tag"></va-tag>');
+
+    const element = await page.find('va-tag');
+    expect(element.shadowRoot.innerHTML).toBe('Test tag');
+  });
+});

packages/web-components/src/components/va-tag/va-tag.scss

@@ -0,0 +1,15 @@
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
+
+:host {
+  width: auto;
+  padding: 1px .5rem;
+  border-radius: 2px;
+  color: var(--vads-color-white);
+  font-size: 0.938rem;
+  background-color: var(--vads-color-base-dark);
+  text-transform: uppercase;
+
+  &:only-of-type {
+    margin-right: 0;
+  }
+}

packages/web-components/src/components/va-tag/va-tag.tsx

@@ -0,0 +1,32 @@
+import {
+  Component,
+  Element,
+  Host,
+  Prop,
+  h,
+} from '@stencil/core';
+
+/**
+ * @componentName Tag
+ * @maturityCategory caution
+ * @maturityLevel candidate
+ */
+@Component({
+  tag: 'va-tag',
+  styleUrl: 'va-tag.scss',
+  shadow: true,
+})
+export class VaTag {
+  @Element() el: HTMLElement;
+
+  /**
+   * The text to be displayed in the tag element.
+   */
+  @Prop() text!: string;
+
+  render() {
+    const { text } = this;
+
+    return <Host class="va-tag">{text}</Host>;
+  }
+}