From 965d327b5da07ea9a36f5a5c1acfbd757b4a850e Mon Sep 17 00:00:00 2001 From: Ryan Munsch Date: Thu, 9 Oct 2025 11:11:50 -0400 Subject: [PATCH 1/4] Replace USWDS/CSS library tag with new component --- packages/storybook/stories/additional-docs.js | 7 ---- packages/storybook/stories/tag.mdx | 21 ---------- packages/storybook/stories/tag.stories.js | 9 ---- packages/storybook/stories/va-tag.stories.tsx | 36 ++++++++++++++++ packages/web-components/src/components.d.ts | 41 +++++++++++++++++++ .../src/components/va-tag/test/va-tag.e2e.ts | 27 ++++++++++++ .../src/components/va-tag/va-tag.scss | 15 +++++++ .../src/components/va-tag/va-tag.tsx | 32 +++++++++++++++ 8 files changed, 151 insertions(+), 37 deletions(-) delete mode 100644 packages/storybook/stories/tag.mdx delete mode 100644 packages/storybook/stories/tag.stories.js create mode 100644 packages/storybook/stories/va-tag.stories.tsx create mode 100644 packages/web-components/src/components/va-tag/test/va-tag.e2e.ts create mode 100644 packages/web-components/src/components/va-tag/va-tag.scss create mode 100644 packages/web-components/src/components/va-tag/va-tag.tsx diff --git a/packages/storybook/stories/additional-docs.js b/packages/storybook/stories/additional-docs.js index ec83589a78..9ea9d78d9a 100644 --- a/packages/storybook/stories/additional-docs.js +++ b/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, - }, }; diff --git a/packages/storybook/stories/tag.mdx b/packages/storybook/stories/tag.mdx deleted file mode 100644 index 3ed6ae863a..0000000000 --- a/packages/storybook/stories/tag.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import { Canvas, Meta, Story, Subtitle, Title } from '@storybook/addon-docs/blocks'; -import { Guidance, MaturityScale } from './wc-helpers'; -import { additionalDocs } from './additional-docs'; -import * as TagStories from './tag.stories'; - - - -Tag -Tag component class - - - - - -## Stories - -### Default - - - - diff --git a/packages/storybook/stories/tag.stories.js b/packages/storybook/stories/tag.stories.js deleted file mode 100644 index 6eeb2f6cc4..0000000000 --- a/packages/storybook/stories/tag.stories.js +++ /dev/null @@ -1,9 +0,0 @@ -export default { - title: 'Components/Tag', - id: 'components/tag', -}; - -export const Default = { - render: () => New, - name: 'Default', -}; diff --git a/packages/storybook/stories/va-tag.stories.tsx b/packages/storybook/stories/va-tag.stories.tsx new file mode 100644 index 0000000000..3d1f04f3e3 --- /dev/null +++ b/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) => ( +
+ +
+ ), + ], + parameters: { + componentSubtitle: 'va-tag web component', + docs: { + page: () => , + }, + }, + argTypes: { + ...propStructure(tagDocs), + } +}; + +const Template = (args) => { + return ( + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + text: 'New', +}; diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 8b501e3f9f..b414a3e731 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -1996,6 +1996,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 @@ -3671,6 +3682,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; } @@ -3835,6 +3857,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; @@ -6120,6 +6143,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 @@ -6513,6 +6547,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; @@ -6901,6 +6936,12 @@ declare module "@stencil/core" { * @maturityLevel candidate */ "va-tabs": LocalJSX.VaTabs & JSXBase.HTMLAttributes; + /** + * @componentName Tag + * @maturityCategory caution + * @maturityLevel candidate + */ + "va-tag": LocalJSX.VaTag & JSXBase.HTMLAttributes; /** * @componentName Telephone * @maturityCategory use diff --git a/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts b/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts new file mode 100644 index 0000000000..e1ad76cc4a --- /dev/null +++ b/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(''); + + const element = await page.find('va-tag'); + expect(element).toHaveClass('hydrated'); + }); + + it('passes accessibility tests', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + await axeCheck(page); + }); + + it('respect the text prop', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('va-tag'); + expect(element.shadowRoot.innerHTML).toBe('Test tag'); + }); +}); diff --git a/packages/web-components/src/components/va-tag/va-tag.scss b/packages/web-components/src/components/va-tag/va-tag.scss new file mode 100644 index 0000000000..dc3c5c65ac --- /dev/null +++ b/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; + } +} diff --git a/packages/web-components/src/components/va-tag/va-tag.tsx b/packages/web-components/src/components/va-tag/va-tag.tsx new file mode 100644 index 0000000000..34405fe55f --- /dev/null +++ b/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 {text}; + } +} From f41a849209a47839c82af19f4c7ec71c8160e757 Mon Sep 17 00:00:00 2001 From: Ryan Munsch Date: Thu, 9 Oct 2025 13:31:09 -0400 Subject: [PATCH 2/4] va-tag: Use nested span el and remove unnecessary sass import --- .../src/components/va-tag/va-tag.scss | 16 ++-------------- .../src/components/va-tag/va-tag.tsx | 6 +++++- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/web-components/src/components/va-tag/va-tag.scss b/packages/web-components/src/components/va-tag/va-tag.scss index dc3c5c65ac..f4c0a699a5 100644 --- a/packages/web-components/src/components/va-tag/va-tag.scss +++ b/packages/web-components/src/components/va-tag/va-tag.scss @@ -1,15 +1,3 @@ -@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss'; +@forward 'settings'; -: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; - } -} +@use 'usa-tag/src/styles/usa-tag'; diff --git a/packages/web-components/src/components/va-tag/va-tag.tsx b/packages/web-components/src/components/va-tag/va-tag.tsx index 34405fe55f..16a8d00a13 100644 --- a/packages/web-components/src/components/va-tag/va-tag.tsx +++ b/packages/web-components/src/components/va-tag/va-tag.tsx @@ -27,6 +27,10 @@ export class VaTag { render() { const { text } = this; - return {text}; + return ( + + {text} + + ); } } From c7a8a5341d91605d0b7d4a3a0778b6baf76d4439 Mon Sep 17 00:00:00 2001 From: Ryan Munsch Date: Thu, 9 Oct 2025 13:36:22 -0400 Subject: [PATCH 3/4] Update va-tag unit test to reflect DOM structure change --- .../web-components/src/components/va-tag/test/va-tag.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts b/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts index e1ad76cc4a..c85cf25e3b 100644 --- a/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts +++ b/packages/web-components/src/components/va-tag/test/va-tag.e2e.ts @@ -22,6 +22,6 @@ describe('va-tag', () => { await page.setContent(''); const element = await page.find('va-tag'); - expect(element.shadowRoot.innerHTML).toBe('Test tag'); + expect(element.shadowRoot.querySelector('span').innerHTML).toBe('Test tag'); }); }); From 2f255cdac3b352eaf2c0bf9f112ad009fb1cfdda Mon Sep 17 00:00:00 2001 From: Ryan Munsch Date: Fri, 10 Oct 2025 11:12:20 -0400 Subject: [PATCH 4/4] Add old version of Tag to deprecated on Storybook --- packages/storybook/stories/additional-docs.js | 7 +++++++ packages/storybook/stories/tag.mdx | 21 +++++++++++++++++++ packages/storybook/stories/tag.stories.js | 12 +++++++++++ 3 files changed, 40 insertions(+) create mode 100644 packages/storybook/stories/tag.mdx create mode 100644 packages/storybook/stories/tag.stories.js diff --git a/packages/storybook/stories/additional-docs.js b/packages/storybook/stories/additional-docs.js index 9ea9d78d9a..4da059fc00 100644 --- a/packages/storybook/stories/additional-docs.js +++ b/packages/storybook/stories/additional-docs.js @@ -49,4 +49,11 @@ export const additionalDocs = { maturityCategory: CAUTION, maturityLevel: AVAILABLE, }, + // MDX + 'Tag': { + guidanceHref: 'tag', + guidanceName: 'Tag', + maturityCategory: DONT_USE, + maturityLevel: DEPRECATED, + }, }; diff --git a/packages/storybook/stories/tag.mdx b/packages/storybook/stories/tag.mdx new file mode 100644 index 0000000000..60e3dc32d0 --- /dev/null +++ b/packages/storybook/stories/tag.mdx @@ -0,0 +1,21 @@ +import { Canvas, Meta, Story, Subtitle, Title } from '@storybook/addon-docs/blocks'; +import { Guidance, MaturityScale } from './wc-helpers'; +import { additionalDocs } from './additional-docs'; +import * as TagStories from './tag.stories'; + + + +Tag +Tag component class + + + + + +## Stories + +### Default + + + + \ No newline at end of file diff --git a/packages/storybook/stories/tag.stories.js b/packages/storybook/stories/tag.stories.js new file mode 100644 index 0000000000..30b6ccba30 --- /dev/null +++ b/packages/storybook/stories/tag.stories.js @@ -0,0 +1,12 @@ +export default { + title: 'Deprecated/Tag', + id: 'components/tag', + parameters: { + chromatic: { disableSnapshot: true }, + }, +}; + +export const Default = { + render: () => New, + name: 'Default', +}; \ No newline at end of file