Rename va-featured-content to va-summary-box (#1054)

* Rename featured content to summary box * undo unnecessary changes
department-of-veterans-affairs · Feb 13, 2024 · 60632fc · 60632fc
1 parent 7bab5d6
commit 60632fc
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 61 deletions.
diff --git a/...ies/va-featured-content-uswds.stories.jsx → .../stories/va-summary-box-uswds.stories.jsx b/...ies/va-featured-content-uswds.stories.jsx → .../stories/va-summary-box-uswds.stories.jsx
@@ -2,15 +2,15 @@
 import React from 'react';
 import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 
-const featuredContentDocs = getWebComponentDocs('va-featured-content');
+const summaryBoxDocs = getWebComponentDocs('va-summary-box');
 
 export default {
-  title: 'USWDS/Featured content USWDS',
-  id: 'uswds/va-featured-content',
+  title: 'USWDS/Summary box USWDS',
+  id: 'uswds/va-summary-box',
   parameters: {
-    componentSubtitle: `va-featured-content web component`,
+    componentSubtitle: `va-summary-box web component`,
     docs: {
-      page: () => <StoryDocs data={featuredContentDocs} />,
+      page: () => <StoryDocs data={summaryBoxDocs} />,
     },
   },
 };
@@ -19,7 +19,7 @@ const defaultArgs = { uswds: true };
 const Template = args => {
   const { uswds } = args
   return (
-  <va-featured-content uswds={uswds}>
+  <va-summary-box uswds={uswds}>
     <h3 slot="headline">
       If I'm a Veteran, can I get VR&E benefits and services?
     </h3>
@@ -42,11 +42,11 @@ const Template = args => {
         <a href="#">Apply for VR&amp;E services</a>
       </li>
     </ul>
-  </va-featured-content>
+  </va-summary-box>
 );
 }
 
 export const Default = Template.bind(null);
 Default.args = defaultArgs;
-Default.argTypes = propStructure(featuredContentDocs);
+Default.argTypes = propStructure(summaryBoxDocs);
 
diff --git a/...k/stories/va-featured-content.stories.jsx → ...rybook/stories/va-summary-box.stories.jsx b/...k/stories/va-featured-content.stories.jsx → ...rybook/stories/va-summary-box.stories.jsx
@@ -2,15 +2,15 @@
 import React from 'react';
 import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 
-const featuredContentDocs = getWebComponentDocs('va-featured-content');
+const summaryBoxDocs = getWebComponentDocs('va-summary-box');
 
 export default {
-  title: 'Components/Featured content',
-  id: 'components/va-featured-content',
+  title: 'Components/Summary box',
+  id: 'components/va-summary-box',
   parameters: {
-    componentSubtitle: `va-featured-content web component`,
+    componentSubtitle: `va-summary-box web component`,
     docs: {
-      page: () => <StoryDocs data={featuredContentDocs} />,
+      page: () => <StoryDocs data={summaryBoxDocs} />,
     },
   },
 };
@@ -19,7 +19,7 @@ const defaultArgs = { uswds: false };
 const Template = args => {
   const { uswds } = args
   return (
-  <va-featured-content uswds={uswds}>
+  <va-summary-box uswds={uswds}>
     <h3 slot="headline">
       If I'm a Veteran, can I get VR&E benefits and services?
     </h3>
@@ -42,11 +42,11 @@ const Template = args => {
         <a href="#">Apply for VR&amp;E services</a>
       </li>
     </ul>
-  </va-featured-content>
+  </va-summary-box>
 );
 }
 
 export const Default = Template.bind(null);
 Default.args = defaultArgs;
-Default.argTypes = propStructure(featuredContentDocs);
+Default.argTypes = propStructure(summaryBoxDocs);
 
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.60.0",
+  "version": "5.0.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
@@ -403,12 +403,6 @@ export namespace Components {
          */
         "value"?: string;
     }
-    interface VaFeaturedContent {
-        /**
-          * Whether or not the component will use USWDS v3 styling.
-         */
-        "uswds"?: boolean;
-    }
     interface VaFileInput {
         /**
           * A comma-separated list of unique file type specifiers.
@@ -1173,6 +1167,12 @@ export namespace Components {
          */
         "inputValue": string;
     }
+    interface VaSummaryBox {
+        /**
+          * Whether or not the component will use USWDS v3 styling.
+         */
+        "uswds"?: boolean;
+    }
     interface VaTable {
         /**
           * Whether the initial sort state will be descending or not.
@@ -1617,12 +1617,6 @@ declare global {
         prototype: HTMLVaDateElement;
         new (): HTMLVaDateElement;
     };
-    interface HTMLVaFeaturedContentElement extends Components.VaFeaturedContent, HTMLStencilElement {
-    }
-    var HTMLVaFeaturedContentElement: {
-        prototype: HTMLVaFeaturedContentElement;
-        new (): HTMLVaFeaturedContentElement;
-    };
     interface HTMLVaFileInputElement extends Components.VaFileInput, HTMLStencilElement {
     }
     var HTMLVaFileInputElement: {
@@ -1785,6 +1779,12 @@ declare global {
         prototype: HTMLVaStatementOfTruthElement;
         new (): HTMLVaStatementOfTruthElement;
     };
+    interface HTMLVaSummaryBoxElement extends Components.VaSummaryBox, HTMLStencilElement {
+    }
+    var HTMLVaSummaryBoxElement: {
+        prototype: HTMLVaSummaryBoxElement;
+        new (): HTMLVaSummaryBoxElement;
+    };
     interface HTMLVaTableElement extends Components.VaTable, HTMLStencilElement {
     }
     var HTMLVaTableElement: {
@@ -1831,7 +1831,6 @@ declare global {
         "va-checkbox-group": HTMLVaCheckboxGroupElement;
         "va-crisis-line-modal": HTMLVaCrisisLineModalElement;
         "va-date": HTMLVaDateElement;
-        "va-featured-content": HTMLVaFeaturedContentElement;
         "va-file-input": HTMLVaFileInputElement;
         "va-header-minimal": HTMLVaHeaderMinimalElement;
         "va-icon": HTMLVaIconElement;
@@ -1859,6 +1858,7 @@ declare global {
         "va-segmented-progress-bar": HTMLVaSegmentedProgressBarElement;
         "va-select": HTMLVaSelectElement;
         "va-statement-of-truth": HTMLVaStatementOfTruthElement;
+        "va-summary-box": HTMLVaSummaryBoxElement;
         "va-table": HTMLVaTableElement;
         "va-table-row": HTMLVaTableRowElement;
         "va-telephone": HTMLVaTelephoneElement;
@@ -2344,12 +2344,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface VaFeaturedContent {
-        /**
-          * Whether or not the component will use USWDS v3 styling.
-         */
-        "uswds"?: boolean;
-    }
     interface VaFileInput {
         /**
           * A comma-separated list of unique file type specifiers.
@@ -3258,6 +3252,12 @@ declare namespace LocalJSX {
          */
         "onVaInputChange"?: (event: VaStatementOfTruthCustomEvent<any>) => void;
     }
+    interface VaSummaryBox {
+        /**
+          * Whether or not the component will use USWDS v3 styling.
+         */
+        "uswds"?: boolean;
+    }
     interface VaTable {
         /**
           * Whether the initial sort state will be descending or not.
@@ -3498,7 +3498,6 @@ declare namespace LocalJSX {
         "va-checkbox-group": VaCheckboxGroup;
         "va-crisis-line-modal": VaCrisisLineModal;
         "va-date": VaDate;
-        "va-featured-content": VaFeaturedContent;
         "va-file-input": VaFileInput;
         "va-header-minimal": VaHeaderMinimal;
         "va-icon": VaIcon;
@@ -3526,6 +3525,7 @@ declare namespace LocalJSX {
         "va-segmented-progress-bar": VaSegmentedProgressBar;
         "va-select": VaSelect;
         "va-statement-of-truth": VaStatementOfTruth;
+        "va-summary-box": VaSummaryBox;
         "va-table": VaTable;
         "va-table-row": VaTableRow;
         "va-telephone": VaTelephone;
@@ -3552,7 +3552,6 @@ declare module "@stencil/core" {
             "va-checkbox-group": LocalJSX.VaCheckboxGroup & JSXBase.HTMLAttributes<HTMLVaCheckboxGroupElement>;
             "va-crisis-line-modal": LocalJSX.VaCrisisLineModal & JSXBase.HTMLAttributes<HTMLVaCrisisLineModalElement>;
             "va-date": LocalJSX.VaDate & JSXBase.HTMLAttributes<HTMLVaDateElement>;
-            "va-featured-content": LocalJSX.VaFeaturedContent & JSXBase.HTMLAttributes<HTMLVaFeaturedContentElement>;
             "va-file-input": LocalJSX.VaFileInput & JSXBase.HTMLAttributes<HTMLVaFileInputElement>;
             "va-header-minimal": LocalJSX.VaHeaderMinimal & JSXBase.HTMLAttributes<HTMLVaHeaderMinimalElement>;
             "va-icon": LocalJSX.VaIcon & JSXBase.HTMLAttributes<HTMLVaIconElement>;
@@ -3580,6 +3579,7 @@ declare module "@stencil/core" {
             "va-segmented-progress-bar": LocalJSX.VaSegmentedProgressBar & JSXBase.HTMLAttributes<HTMLVaSegmentedProgressBarElement>;
             "va-select": LocalJSX.VaSelect & JSXBase.HTMLAttributes<HTMLVaSelectElement>;
             "va-statement-of-truth": LocalJSX.VaStatementOfTruth & JSXBase.HTMLAttributes<HTMLVaStatementOfTruthElement>;
+            "va-summary-box": LocalJSX.VaSummaryBox & JSXBase.HTMLAttributes<HTMLVaSummaryBoxElement>;
             "va-table": LocalJSX.VaTable & JSXBase.HTMLAttributes<HTMLVaTableElement>;
             "va-table-row": LocalJSX.VaTableRow & JSXBase.HTMLAttributes<HTMLVaTableRowElement>;
             "va-telephone": LocalJSX.VaTelephone & JSXBase.HTMLAttributes<HTMLVaTelephoneElement>;

diff --git a/...d-content/test/va-featured-content.e2e.ts → ...va-summary-box/test/va-summary-box.e2e.ts b/...d-content/test/va-featured-content.e2e.ts → ...va-summary-box/test/va-summary-box.e2e.ts
@@ -1,11 +1,11 @@
 import { newE2EPage } from '@stencil/core/testing';
 import { axeCheck } from '../../../testing/test-helpers';
 
-describe('va-featured-content', () => {
+describe('va-summary-box', () => {
   it('renders v1', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-featured-content>
+      <va-summary-box>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -16,12 +16,12 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
-    const element = await page.find('va-featured-content');
+    const element = await page.find('va-summary-box');
 
     expect(element).toEqualHtml(`
-      <va-featured-content class="hydrated">
+      <va-summary-box class="hydrated">
         <mock:shadow-root>
           <div class="feature">
             <slot name="headline"></slot>
@@ -36,17 +36,17 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
   });
 
   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>
+      <va-summary-box>
         <h3 slot="headline">${heading}</h3>
-      </va-featured-content>
+      </va-summary-box>
     `);
     const element = await page.find('h3');
     expect(element).not.toBeNull();
@@ -56,7 +56,7 @@ describe('va-featured-content', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-featured-content>
+      <va-summary-box>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -67,7 +67,7 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
 
     await axeCheck(page);
@@ -76,7 +76,7 @@ describe('va-featured-content', () => {
   it('renders v3', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-featured-content uswds>
+      <va-summary-box uswds>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -87,12 +87,12 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
-    const element = await page.find('va-featured-content');
+    const element = await page.find('va-summary-box');
 
     expect(element).toEqualHtml(`
-      <va-featured-content class="hydrated" uswds="">
+      <va-summary-box class="hydrated" uswds="">
         <mock:shadow-root>
           <div class="usa-summary-box" role="region" aria-label="If I'm a Veteran, can I get VR&amp;E benefits and services?">
             <div class="usa-summary-box__body">
@@ -109,17 +109,17 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
   });
 
   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>
+      <va-summary-box uswds>
         <h3 slot="headline">${heading}</h3>
-      </va-featured-content>
+      </va-summary-box>
     `);
     const element = await page.find('h3');
     expect(element).not.toBeNull();
@@ -129,7 +129,7 @@ describe('va-featured-content', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-featured-content uswds>
+      <va-summary-box uswds>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -140,7 +140,7 @@ describe('va-featured-content', () => {
           <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>
+      </va-summary-box>
     `);
 
     await axeCheck(page);

diff --git a/...featured-content/va-featured-content.scss → ...onents/va-summary-box/va-summary-box.scss b/...featured-content/va-featured-content.scss → ...onents/va-summary-box/va-summary-box.scss
diff --git a/...-featured-content/va-featured-content.tsx → ...ponents/va-summary-box/va-summary-box.tsx b/...-featured-content/va-featured-content.tsx → ...ponents/va-summary-box/va-summary-box.tsx
@@ -1,16 +1,16 @@
 import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 
 /**
- * @componentName Featured content
+ * @componentName Summary box
  * @maturityCategory use
  * @maturityLevel deployed
  */
 @Component({
-  tag: 'va-featured-content',
-  styleUrl: 'va-featured-content.scss',
+  tag: 'va-summary-box',
+  styleUrl: 'va-summary-box.scss',
   shadow: true,
 })
-export class VaFeaturedContent {
+export class VaSummaryBox {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */