va-process-list-item: add HeaderLevel element with part=header for cu…

…stom styling (#1427) * va-process-list-item: add optional slot for header * replace header slot with part=header to be in alignment with other components * remove whitespace changes
department-of-veterans-affairs · Dec 9, 2024 · 2404461 · 2404461
1 parent 4d07eb6
commit 2404461
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts
@@ -30,7 +30,7 @@ describe('va-process-list-item', () => {
     expect(element).toEqualHtml(`
       <va-process-list-item class="hydrated usa-process-list__item" role="listitem" header="Heading">
         <!---->
-        <h3 class="usa-process-list__heading">Heading</h3>
+        <h3 class="usa-process-list__heading" part="header">Heading</h3>
         <p>Some content</p>
       </va-process-list-item>
     `);
@@ -47,7 +47,7 @@ describe('va-process-list-item', () => {
     expect(element).toEqualHtml(`
       <va-process-list-item class="hydrated usa-process-list__item" role="listitem" header="Heading" level="1">
         <!---->
-        <h1 class="usa-process-list__heading">Heading</h1>
+        <h1 class="usa-process-list__heading" part="header">Heading</h1>
         <p>Some content</p>
       </va-process-list-item>
     `);

diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
@@ -49,12 +49,12 @@ describe('va-process-list', () => {
         </mock:shadow-root>
         <va-process-list-item class="hydrated usa-process-list__item" header="Step one" role="listitem">
           <!---->  
-          <h3 class="usa-process-list__heading">Step one</h3>
+          <h3 class="usa-process-list__heading" part="header">Step one</h3>
           <p>Some content</p>
         </va-process-list-item>
         <va-process-list-item class="hydrated usa-process-list__item" header="Step two" role="listitem">
           <!---->
-          <h3 class="usa-process-list__heading">Step two</h3>
+          <h3 class="usa-process-list__heading" part="header">Step two</h3>
           <p>Additional content</p>
           <ul>
             <li>Item one</li>

diff --git a/packages/web-components/src/components/va-process-list/va-process-list-item.tsx b/packages/web-components/src/components/va-process-list/va-process-list-item.tsx
@@ -4,6 +4,7 @@ import {
     Prop,
     h,
   } from '@stencil/core';
+import { getHeaderLevel } from '../../utils/utils';
 
 // Shadow DOM turned off so the va-process-list has visibility into component and can apply styles
 @Component({
@@ -46,7 +47,7 @@ export class VaProcessListItem {
   render() { 
     const {header, level, checkmark, active, pending, statusText} = this;
     // eslint-disable-next-line i18next/no-literal-string
-    const HeaderTag = `h${level}`;
+    const HeaderLevel = getHeaderLevel(level);
     const status = checkmark ? 'checkmark' : active ? 'active' : pending ? 'pending' : null;
     const statusTextMap = {
       checkmark: statusText || 'Complete',
@@ -60,7 +61,7 @@ export class VaProcessListItem {
           <div class="usa-process-list__heading-eyebrow">{statusTextMap[status]}</div>
           : null
         }
-        {header ? <HeaderTag class='usa-process-list__heading'>{header}</HeaderTag> : null}
+        {header ? <HeaderLevel part="header" class='usa-process-list__heading'>{header}</HeaderLevel> : null}
         <slot/>
       </Host>
     )