diff --git a/packages/storybook/stories/va-featured-content-uswds.stories.jsx b/packages/storybook/stories/va-featured-content-uswds.stories.jsx new file mode 100644 index 000000000..4b695fa76 --- /dev/null +++ b/packages/storybook/stories/va-featured-content-uswds.stories.jsx @@ -0,0 +1,52 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers'; + +const featuredContentDocs = getWebComponentDocs('va-featured-content'); + +export default { + title: 'USWDS/Featured content USWDS', + id: 'uswds/va-featured-content', + parameters: { + componentSubtitle: `va-featured-content web component`, + docs: { + page: () => , + }, + }, +}; +const defaultArgs = { uswds: true }; + +const Template = args => { + const { uswds } = args + return ( + +

+ If I'm a Veteran, can I get VR&E benefits and services? +

+

+ You may be eligible for VR&E benefits and services if you're a + Veteran, and you meet all of the requirements listed below. +

+

+ All of these must be true. You: +

+ + +); +} + +export const Default = Template.bind(null); +Default.args = defaultArgs; +Default.argTypes = propStructure(featuredContentDocs); + diff --git a/packages/storybook/stories/va-featured-content.stories.jsx b/packages/storybook/stories/va-featured-content.stories.jsx index 9edff426c..44486b5d8 100644 --- a/packages/storybook/stories/va-featured-content.stories.jsx +++ b/packages/storybook/stories/va-featured-content.stories.jsx @@ -14,10 +14,12 @@ export default { }, }, }; -const defaultArgs = {}; +const defaultArgs = { uswds: false }; -const Template = ({}) => ( - +const Template = args => { + const { uswds } = args + return ( +

If I'm a Veteran, can I get VR&E benefits and services?

@@ -42,6 +44,9 @@ const Template = ({}) => ( ); +} export const Default = Template.bind(null); +Default.args = defaultArgs; Default.argTypes = propStructure(featuredContentDocs); + diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 54f8e3caa..2e1a7bbfe 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/web-components", - "version": "4.50.1", + "version": "4.51.0", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 4776c5756..6e68eeb7b 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -380,6 +380,10 @@ export namespace Components { "value"?: string; } interface VaFeaturedContent { + /** + * Whether or not the component will use USWDS v3 styling. + */ + "uswds"?: boolean; } interface VaFileInput { /** @@ -2225,6 +2229,10 @@ declare namespace LocalJSX { "value"?: string; } interface VaFeaturedContent { + /** + * Whether or not the component will use USWDS v3 styling. + */ + "uswds"?: boolean; } interface VaFileInput { /** diff --git a/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts b/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts index c7694a151..13a21a11e 100644 --- a/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts +++ b/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing'; import { axeCheck } from '../../../testing/test-helpers'; describe('va-featured-content', () => { - it('renders', async () => { + it('renders v1', async () => { const page = await newE2EPage(); await page.setContent(` @@ -72,4 +72,77 @@ describe('va-featured-content', () => { await axeCheck(page); }); + + it('renders v3', async () => { + const page = await newE2EPage(); + await page.setContent(` + +

+ If I'm a Veteran, can I get VR&E benefits and services? +

+

You may be eligible for VR&E benefits and services if you're a Veteran, and you meet all of the requirements listed below.

+

All of these must be true. You:

+
    +
  • Didn't receive a dishonorable discharge, and
    • +
  • Have a service-connected disability rating of at least 10% from VA, and
    • +
  • Apply for VR&E services
    • +
+ + `); + const element = await page.find('va-featured-content'); + + expect(element).toEqualHtml(` + + +
+
+ + +
+
+ +

If I'm a Veteran, can I get VR&E benefits and services?

+

You may be eligible for VR&E benefits and services if you're a Veteran, and you meet all of the requirements listed below.

+

All of these must be true. You:

+
    +
  • Didn't receive a dishonorable discharge, and
    • +
  • Have a service-connected disability rating of at least 10% from VA, and
    • +
  • Apply for VR&E services
    • +
+ + `); + }); + + it("renders the heading passed to the 'headline' slot", async () => { + const heading = "If I'm a Veteran, can I get VR&E benefits and services?"; + const page = await newE2EPage(); + await page.setContent(` + +

${heading}

+ + `); + const element = await page.find('h3'); + expect(element).not.toBeNull(); + expect(element).toEqualText(heading); + }); + + it('passes an axe check', async () => { + const page = await newE2EPage(); + await page.setContent(` + +

+ If I'm a Veteran, can I get VR&E benefits and services? +

+

You may be eligible for VR&E benefits and services if you're a Veteran, and you meet all of the requirements listed below.

+

All of these must be true. You:

+
    +
  • Didn't receive a dishonorable discharge, and
    • +
  • Have a service-connected disability rating of at least 10% from VA, and
    • +
  • Apply for VR&E services
    • +
+ + `); + + await axeCheck(page); + }); }); diff --git a/packages/web-components/src/components/va-featured-content/va-featured-content.css b/packages/web-components/src/components/va-featured-content/va-featured-content.scss similarity index 74% rename from packages/web-components/src/components/va-featured-content/va-featured-content.css rename to packages/web-components/src/components/va-featured-content/va-featured-content.scss index d41e7bc1d..b96148e95 100644 --- a/packages/web-components/src/components/va-featured-content/va-featured-content.css +++ b/packages/web-components/src/components/va-featured-content/va-featured-content.scss @@ -1,3 +1,13 @@ +@forward 'settings'; + +@use 'usa-summary-box/src/styles/usa-summary-box'; +@import '../../global/formation_overrides'; + +.usa-summary-box { + font-size: 16px; + border-radius: 4px; +} + :host { display: block; } diff --git a/packages/web-components/src/components/va-featured-content/va-featured-content.tsx b/packages/web-components/src/components/va-featured-content/va-featured-content.tsx index 460df87c6..dfd53da2e 100644 --- a/packages/web-components/src/components/va-featured-content/va-featured-content.tsx +++ b/packages/web-components/src/components/va-featured-content/va-featured-content.tsx @@ -1,4 +1,4 @@ -import { Component, Host, h } from '@stencil/core'; +import { Component, Host, h, Prop, Element } from '@stencil/core'; /** * @componentName Featured content @@ -7,18 +7,53 @@ import { Component, Host, h } from '@stencil/core'; */ @Component({ tag: 'va-featured-content', - styleUrl: 'va-featured-content.css', + styleUrl: 'va-featured-content.scss', shadow: true, }) export class VaFeaturedContent { + /** + * Whether or not the component will use USWDS v3 styling. + */ + @Prop() uswds?: boolean = false; + + @Element() el: HTMLElement; + + componentDidLoad() { + if (!this.uswds) { + return + } + // add uswds classes + const nodes = this.el.shadowRoot + .querySelectorAll('slot') + const headline = nodes[0]; + const content = nodes[1]; + + headline.classList.add('usa-summary-box__heading'); + content.classList.add('usa-summary-box__text'); + } + render() { - return ( - -
- - -
- - ); + const { uswds } = this; + if (uswds) { + return ( + +
+
+ + +
+
+ + ); + } else { + return ( + +
+ + +
+ + ); + } } }