Add v3 va-featured-content component (#956)

* add v3 featured content * version bump * add uswds classes * PR feedback * update test
department-of-veterans-affairs · Dec 5, 2023 · 5bee292 · 5bee292
1 parent 15682dd
commit 5bee292
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 15 deletions.
diff --git a/packages/storybook/stories/va-featured-content-uswds.stories.jsx 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: () => <StoryDocs data={featuredContentDocs} />,
+    },
+  },
+};
+const defaultArgs = { uswds: true };
+
+const Template = args => {
+  const { uswds } = args
+  return (
+  <va-featured-content uswds={uswds}>
+    <h3 slot="headline">
+      If I'm a Veteran, can I get VR&E benefits and services?
+    </h3>
+    <p>
+      You may be eligible for VR&amp;E benefits and services if you're a
+      Veteran, and you meet all of the requirements listed below.
+    </p>
+    <p>
+      <strong>All of these must be true. You:</strong>
+    </p>
+    <ul>
+      <li>
+        Didn't receive a dishonorable discharge, <strong>and</strong>
+      </li>
+      <li>
+        Have a service-connected disability rating of at least 10% from VA,
+        <strong> and</strong>
+      </li>
+      <li>
+        <a href="#">Apply for VR&amp;E services</a>
+      </li>
+    </ul>
+  </va-featured-content>
+);
+}
+
+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
@@ -14,10 +14,12 @@ export default {
     },
   },
 };
-const defaultArgs = {};
+const defaultArgs = { uswds: false };
 
-const Template = ({}) => (
-  <va-featured-content>
+const Template = args => {
+  const { uswds } = args
+  return (
+  <va-featured-content uswds={uswds}>
     <h3 slot="headline">
       If I'm a Veteran, can I get VR&E benefits and services?
     </h3>
@@ -42,6 +44,9 @@ const Template = ({}) => (
     </ul>
   </va-featured-content>
 );
+}
 
 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
@@ -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
@@ -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
@@ -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(`
       <va-featured-content>
@@ -72,4 +72,77 @@ describe('va-featured-content', () => {
 
     await axeCheck(page);
   });
+
+  it('renders v3', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-featured-content uswds>
+        <h3 slot="headline">
+          If I'm a Veteran, can I get VR&E benefits and services?
+        </h3>
+        <p>You may be eligible for VR&amp;E benefits and services if you're a Veteran, and you meet all of the requirements listed below.</p>
+        <p><strong>All of these must be true. You:</strong></p>
+        <ul>
+          <li>Didn't receive a dishonorable discharge, <strong>and</strong></li>
+          <li>Have a service-connected disability rating of at least 10% from VA, <strong>and</strong></li>
+          <li><a href="#">Apply for VR&amp;E services</a></li>
+        </ul>
+      </va-featured-content>
+    `);
+    const element = await page.find('va-featured-content');
+
+    expect(element).toEqualHtml(`
+      <va-featured-content class="hydrated" uswds="">
+        <mock:shadow-root>
+          <div class="usa-summary-box" role="region">
+            <div class="usa-summary-box__body">
+              <slot class="usa-summary-box__heading" name="headline"></slot>
+              <slot class="usa-summary-box__text"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3 slot="headline">If I'm a Veteran, can I get VR&amp;E benefits and services?</h3>
+        <p>You may be eligible for VR&amp;E benefits and services if you're a Veteran, and you meet all of the requirements listed below.</p>
+        <p><strong>All of these must be true. You:</strong></p>
+        <ul>
+          <li>Didn't receive a dishonorable discharge, <strong>and</strong></li>
+          <li>Have a service-connected disability rating of at least 10% from VA, <strong>and</strong></li>
+          <li><a href="#">Apply for VR&amp;E services</a></li>
+        </ul>
+      </va-featured-content>
+    `);
+  });
+
+  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(`
+      <va-featured-content uswds>
+        <h3 slot="headline">${heading}</h3>
+      </va-featured-content>
+    `);
+    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(`
+      <va-featured-content uswds>
+        <h3 slot="headline">
+          If I'm a Veteran, can I get VR&E benefits and services?
+        </h3>
+        <p>You may be eligible for VR&amp;E benefits and services if you're a Veteran, and you meet all of the requirements listed below.</p>
+        <p><strong>All of these must be true. You:</strong></p>
+        <ul>
+          <li>Didn't receive a dishonorable discharge, <strong>and</strong></li>
+          <li>Have a service-connected disability rating of at least 10% from VA, <strong>and</strong></li>
+          <li><a href="#">Apply for VR&amp;E services</a></li>
+        </ul>
+      </va-featured-content>
+    `);
+
+    await axeCheck(page);
+  });
 });
diff --git a/...-featured-content/va-featured-content.css → ...featured-content/va-featured-content.scss b/...-featured-content/va-featured-content.css → ...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
@@ -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 (
-      <Host>
-        <div class="feature">
-          <slot name="headline"></slot>
-          <slot />
-        </div>
-      </Host>
-    );
+    const { uswds } = this;
+    if (uswds) {
+      return (
+        <Host>
+          <div class="usa-summary-box" role="region">
+            <div class="usa-summary-box__body">
+              <slot name="headline"></slot>
+              <slot />
+            </div>
+          </div>
+        </Host>
+      );
+    } else {
+      return (
+        <Host>
+          <div class="feature">
+            <slot name="headline"></slot>
+            <slot />
+          </div>
+        </Host>
+      );
+    }
   }
 }