Merge branch 'main' into mc-2517-sql-query-update

department-of-veterans-affairs · Oct 30, 2023 · a993fb5 · a993fb5
2 parents 79ec7d1 + 0752952
commit a993fb5
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 13 deletions.
diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml
@@ -14,6 +14,8 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: main
+      - name: Use secret as an environment variable
+        run: echo "MY_SECRET_KEY=${{ secrets.ENV }}"
       - name: Use Node.js 14.x
         uses: actions/setup-node@v2
         with:
@@ -35,7 +37,7 @@ jobs:
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: "us-gov-west-1"         
+          aws-region: 'us-gov-west-1'
       - name: S3 Sync Storybook build
         run: |
           aws s3 sync ./packages/storybook/storybook-static s3://${{ matrix.bucket }}/storybook --acl public-read --follow-symlinks --delete
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"

diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -30,6 +30,9 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  output: {
+    publicPath: process.env.ENV === 'production' ? '/storybook/' : '/',
+  },
 
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'

diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx
@@ -70,14 +70,14 @@ const Template = ({uswds}) => {
 const StatusTemplate = ({uswds}) => {
   return (
     <va-process-list uswds={uswds}>
-      <va-process-list-item checked header='Checkmark Icon'>  
-        <p>Add the prop <code>checked</code> to the list icon a checkmark.</p>
+      <va-process-list-item checkmark header='Checkmark Icon'>  
+        <p>Add the prop <code>checkmark</code> to make the list icon a checkmark.</p>
       </va-process-list-item>
       <va-process-list-item active header='Active Icon'>
         <p>Add the prop <code>active</code> to make the list icon and header blue.</p>
       </va-process-list-item>
       <va-process-list-item pending header='Pending Icon'>
-        <p>Add the prop <code>pending</code> list item and icon grayed out.</p>
+        <p>Add the prop <code>pending</code> to make the list item and icon grayed out.</p>
       </va-process-list-item>
       <va-process-list-item header='Default Icon' />
     </va-process-list>

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.46.1",
+  "version": "4.46.3",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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
@@ -65,5 +65,41 @@ describe('va-process-list-item', () => {
 
     await axeCheck(page);
   });
+  it('includes sr-only span for checkmark status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" checkmark>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .sr-only');
+    expect(element.innerText).toEqual('Completed:');
+  })
+  it('includes sr-only span for pending status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" pending>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .sr-only');
+    expect(element.innerText).toEqual('Pending:');
+  })
+  it('includes sr-only span for active status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" active>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .sr-only');
+    expect(element.innerText).toEqual('Current Step:');
+  })
 })
 
diff --git a/packages/web-components/src/components/va-process-list/va-process-list-item.scss b/packages/web-components/src/components/va-process-list/va-process-list-item.scss
@@ -8,7 +8,7 @@
   display: list-item;
 }
 va-process-list-item[pending='true'] .usa-process-list__heading {
-  color: var(--color-gray-light);
+  color: var(--color-gray-medium);
 }
 va-process-list-item[active='true'] .usa-process-list__heading {
   color: var(--color-primary);

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
@@ -39,12 +39,17 @@ export class VaProcessListItem {
   @Prop() checkmark?: boolean = false;
 
   render() { 
-    const {header, level} = this;
+    const {header, level, checkmark, active, pending} = this;
     // eslint-disable-next-line i18next/no-literal-string
     const HeaderTag = `h${level}`;
 
     return (
       <Host role="listitem" class='usa-process-list__item'>
+        {
+          checkmark || active || pending ? 
+            <span class='sr-only'>{checkmark ? 'Completed:' : active ? 'Current Step:' : pending ? 'Pending:' : null}</span>
+          : null
+        }
         {header ? <HeaderTag class='usa-process-list__heading'>{header}</HeaderTag> : null}
         <slot/>
       </Host>

diff --git a/packages/web-components/src/components/va-process-list/va-process-list.scss b/packages/web-components/src/components/va-process-list/va-process-list.scss
@@ -9,10 +9,11 @@
   counter-reset: usa-numbered-list;
 }
 
-::slotted(va-process-list-item[checked='true']):before {
+::slotted(va-process-list-item[checkmark='true']):before {
   color: var(--color-green) !important;
   border-color: var(--color-green) !important;
-  content: url(../../assets/green-check.svg) !important;
+  content: url(../../assets/green-check.svg) !important; // Alt text is currently not supported in FF and Safari, This is a fallback declaration (10/27/2023)
+  content: url(../../assets/green-check.svg) / "Completed" !important;
 }
 
 ::slotted(va-process-list-item[active='true']):before {
@@ -21,12 +22,12 @@
 }
 
 ::slotted(va-process-list-item[pending='true']):before {
-  color: var(--color-gray-light) !important;
-  border-color: var(--color-gray-light) !important;
+  color: var(--color-gray-medium) !important;
+  border-color: var(--color-gray-medium) !important;
 }
 
 ::slotted(va-process-list-item[pending='true']) {
-  color: var(--color-gray-light) !important;
+  color: var(--color-gray-medium) !important;
 }
 
 ::slotted(va-process-list-item) {