Merge branch 'main' into va-table-sort-screen-reader-fix

README.md

@@ -3,14 +3,71 @@
 ![Publishing workflow](https://github.com/department-of-veterans-affairs/component-library/actions/workflows/publish.yml/badge.svg)
 ![Latest version](https://img.shields.io/npm/v/@department-of-veterans-affairs/component-library)
 
-This is a monorepo containing two main packages:
+This is a monorepo containing the following packages:
 
 - `web-components`
 - `react-components`
+- `css-library`
+- `storybook`
+- `design-system-dashboard-cli`
+
+The `core` package is for bundling the `web-components` and `react-components` packages into one for publishing. 
+
+The `storybook` package is for the combined story files from each `*-components` package.
 
-The `core` package is for bundling the two main packages into one for publishing. The `storybook` package is for the combined story files from each `*-components` package.
 The `design-system-dashboard-cli` package is used to gather metrics on design system usage.
 
+# Running Build via Storybook
+
+1. `cd packages/web-components/`
+   1. `yarn install`
+   2. `yarn build`
+   3. `yarn build-bindings` (build React bindings)
+   4. `yarn watch:stencil` (optional)
+2. `cd ../react-components/`
+   1. `yarn install`
+   2. `yarn build`
+3. `cd ../core/`
+   1. `yarn install`
+   2. `yarn build`
+4. `cd ../storybook/`
+   1. `yarn install`
+   2. `yarn storybook`
+
+This will allow you to run Storybook locally to view all components
+
+## Running tests for web components
+
+To run unit tests for all components, the commands are:
+
+```bash
+yarn test
+```
+
+and
+
+```bash
+yarn test.watch
+```
+
+To test a single file, run:
+
+```bash
+npx stencil test --e2e -- src/components/[component-name]/test/[component-name].e2e.ts
+```
+
+Replace `[component-name]` with the name of the component you want to test. Optionally, you can add `--watchAll` after `--e2e` to watch the file for changes. For example:
+
+```bash
+npx stencil test --e2e --watchAll -- src/components/[component-name]/test/[component-name].e2e.ts
+```
+
+Another option is to use wildcards to query for certain tests. For example, to run all tests for the `va-accordion` component, you can run:
+
+```bash
+npx stencil test --e2e  -- src/components/va-accordion/test/va-accordion-*
+```
+
 ## Contributing
 
 ### Branch naming
@@ -24,7 +81,11 @@ This repo uses [`Chromatic`](https://www.chromatic.com/) to streamline reviews b
 
 Our web components have linting which checks for hard-coded user-facing strings. At the moment this linting isn't integrated into CI - so you will only see it if you run `yarn lint` or if your editor has ESLint integration through a plugin.
 
-### Local testing with Verdaccio
+### Local development 
+
+Local development can be done using Storybook by following the complete build steps outlined in [Running Build via Storybook](https://github.com/department-of-veterans-affairs/component-library?tab=readme-ov-file#running-build-via-storybook).
+
+### Local testing in vets-website with Verdaccio
 Contributors are encouraged to test their changes in `vets-website` using [Verdaccio](https://verdaccio.org/). What is Verdaccio? From the website:
 
 > Verdaccio is a simple, zero-config-required local private NPM registry. No need for an entire database just to get started…
@@ -179,6 +240,40 @@ To publish changes from the `web-components` subpackage, make sure the version n
 
 [`yarn version`](https://yarnpkg.com/cli/version) is available to use to make changes in the CLI. To change the version of the package you are working on run one of the following commands: `yarn version major`, `yarn version minor`, or `yarn version patch`. For guidance on which command to use please see below.
 
+
+### Releasing
+
+The Design System Team will create a release minimally at the beginning of each sprint (every other Thursday), and may additionally be performed as-needed when critical bug fixes need to go out. Reach out in `#vfs-platform-support` or `#platform-design-system` Slack channel if you have a need for an unscheduled release.
+
+**For Design System Team only:**
+
+1. If you are unsure if a new release should be created, check with the Release Manager and/or the team first.
+   - The DST Release Manager is the engineer on duty for the weekly support rotation.
+2. Create a new `component-library` PR that updates the package.json version in the **packages that updates have been made**:
+   - `core` (required) - [packages/core/package.json](https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/core/package.json#L4) must be updated for the publishing workflow
+     - `web-components` (if needed)
+     - `css-library` (if needed)
+     - `react-components` (if needed)
+3. From the [repo's homepage](https://github.com/department-of-veterans-affairs/component-library) click on "Releases" in the right-hand sidebar.
+4. Click on the "Draft a new release" button near the top of the page.
+5. Click on the "Choose a tag" drop-down and type the letter `v` followed by the new "core" version number. The target should remain `main`.
+   - Example: `v16.1.0`
+6. For the release title, type the same thing you entered for the tag.
+   - Example: `v16.1.0`
+7. Click on the "Generate release notes" button. 
+   - If the button is disabled, double-check that the tag/version number is correct and hasn't been released before.
+8. Review the release notes for any typos and/or unneeded notes. 
+   - The release notes are intended for public use so they should be professional in tone, easily understandable, and concise.
+9. Ensure the "Set as the latest release" checkbox is checked.
+10. Take a screenshot of the release notes and post in the `#platform-design-system-team` channel on Slack. 
+    - This is to double-check that everything looks good, that there aren't any last-minute additions to the release that need to be included, and for general awareness of what will be released.
+11. Click the "Publish release" button. GitHub Actions will take care of any necessary build and publishing steps.
+    - You can watch to make sure the release is created successfully from the [Github Actions tab](https://github.com/department-of-veterans-affairs/component-library/actions).
+12. Create a PR for the following repositories that updates the `component-library` dependency versions:
+    - [vets-website](https://github.com/department-of-veterans-affairs/vets-website)
+    - [content-build](https://github.com/department-of-veterans-affairs/content-build)
+    - [vets-design-system-documentation](https://github.com/department-of-veterans-affairs/vets-design-system-documentation)
+
 ### How to choose a version number
 
 This repo follows [semantic versioning](https://semver.org/). Here are some examples of which changes correspond to which version (MAJOR, MINOR, or PATCH) increase.
@@ -198,95 +293,4 @@ This repo follows [semantic versioning](https://semver.org/). Here are some exam
 
 - Accessibility fix
 - Styling fix
-- Functionality fix
-
-### Releasing
-
-Releases will occur no less often than at the beginning of each sprint (every other Wednesday), and may additionally be performed as-needed when critical bug fixes need to go out. Please reach out to us via #vfs-platform-support or #platform-design-system if you have a need for an unscheduled release.
-
-**For Design System Team only:**
-
-1. If you are unsure if a new release should be created, check with the Release Manager and/or the rest of the team first, to make sure it's worth the effort at this time.
-2. Get the version number from [`packages/core/package.json`](https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/core/package.json#L4), ensuring it's up-to-date and new. If the core, web-components, and/or react-components packages versions haven't been updated yet, submit a PR to update them prior to performing the release, or things won't work correctly with the automation.
-3. From the [repo's homepage](https://github.com/department-of-veterans-affairs/component-library) click on "Releases" in the right-hand sidebar.
-4. Click on the "Draft a new release" button near the top of the page.
-5. Click on the 'Choose a tag' drop-down and type the letter `v` followed by the new "core" version number (should look like `v16.1.0`). The target should remain `main`.
-6. For the release title, type the same thing you entered for the tag (`v{versionNumber}`).
-7. Click on the "Generate release notes" button. If the button is disabled, double-check that the tag/version number is correct and hasn't been released before.
-8. Review the release notes for any typos and/or unneeded notes. Remember that these release notes are intended for public use, so they should be professional in their tone and appearance.
-9. Take a screenshot of the release notes and post in the `#platform-design-system-team` channel on slack; ask for others to double-check that everything looks good and that there aren't any last-minute additions to the release that need to be included.
-10. Back in GitHub, ensure the "Set as the latest release" checkbox is checked.
-11. Press the "Publish release" button. GitHub Actions will take care of any necessary build and publishing steps.
-12. If [vets-website](https://github.com/department-of-veterans-affairs/vets-website) will need to take advantage of the latest release sooner than later, open a PR to update the dependency version there (update your local copy and then submit a PR to merge the latest version bump).
-13. Finally, go to your local copy of the [vets-design-system-documentation](https://github.com/department-of-veterans-affairs/vets-design-system-documentation) repo and update the version requirement, submitting a PR for that as well.
-
-# Running Build via Storybook
-
-1. `cd packages/web-components/`
-   1. `yarn install`
-   2. `yarn build`
-   3. `yarn build-bindings` (build React bindings)
-   4. `yarn watch:stencil` (optional)
-2. `cd ../react-components/`
-   1. `yarn install`
-   2. `yarn build`
-3. `cd ../core/`
-   1. `yarn install`
-   2. `yarn build`
-4. `cd ../storybook/`
-   1. `yarn install`
-   2. `yarn storybook`
-
-This will allow you to run Storybook locally to view all components
-
-# Stencil Dev Server for Testing IE11
-
-1. Update `stencil.config.ts` line 16 to `buildEs5: true,`
-   1. [More information on buildEs5 in Stencil](https://stenciljs.com/docs/config#buildes5)
-   2. Stencil Dev Server is run in `dev` mode
-2. Within `component-library/packages/web-components/src/index.html` Web Components can be added inside of the `<body>` tag for testing
-
-   1. Example:
-
-   ```
-   <body>
-       <va-progress-bar label="Add a label here" percent={35}></va-progress-bar>
-       <va-segmented-progress-bar current={2} total={6}></va-segmented-progress-bar>
-   </body>
-   ```
-
-3. Run `yarn serve` inside `packages/web-components/` to start the Stencil Dev Server
-
-## Testing
-
-### Running tests for web components
-
-To run unit tests for all components, the commands are:
-
-```bash
-yarn test
-```
-
-and
-
-```bash
-yarn test.watch
-```
-
-To test a single file, run:
-
-```bash
-npx stencil test --e2e -- src/components/[component-name]/test/[component-name].e2e.ts
-```
-
-Replace `[component-name]` with the name of the component you want to test. Optionally, you can add `--watchAll` after `--e2e` to watch the file for changes. For example:
-
-```bash
-npx stencil test --e2e --watchAll -- src/components/[component-name]/test/[component-name].e2e.ts
-```
-
-Another option is to use wildcards to query for certain tests. For example, to run all tests for the `va-accordion` component, you can run:
-
-```bash
-npx stencil test --e2e  -- src/components/va-accordion/test/va-accordion-*
-```
+- Functionality fix

packages/storybook/stories/va-table-uswds.stories.jsx

@@ -47,6 +47,7 @@ const Template = args => {
     sortable,
     columns,
     scrollable,
+    striped,
   } = args;
 
   return (
@@ -56,6 +57,7 @@ const Template = args => {
       stacked={args.stacked}
       table-type={tableType}
       sortable={!!sortable}
+      striped={striped}
     >
       <va-table-row>
         {columns.map((col, i) => (
@@ -406,6 +408,15 @@ Sortable.args = {
   'scrollable': true,
 };
 
+export const Striped = Template.bind(null);
+Striped.args = {
+  'table-title': 'This is a striped table.',
+  'rows': data,
+  'columns': defaultColumns,
+  'striped': true,
+  'table-type': 'bordered',
+};
+
 export const Scrollable = Template.bind(null);
 Scrollable.args = {
   'table-title': 'This is a scrollable table.',
@@ -414,4 +425,15 @@ Scrollable.args = {
   'scrollable': true,
   'stacked': false,
 };
+
+export const ScrollableWithStripes = Template.bind(null);
+ScrollableWithStripes.args = {
+  'table-title': 'This is a striped table that is also scrollable.',
+  'rows': data,
+  'columns': defaultColumns,
+  'striped': true,
+  'table-type': 'bordered',
+  'scrollable': true,
+};
+
 Default.argTypes = propStructure(vaTableDocs);

packages/web-components/src/components.d.ts

@@ -1583,6 +1583,10 @@ export namespace Components {
           * Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted
          */
         "stacked"?: boolean;
+        /**
+          * When active, the table will display alternating row background colors.
+         */
+        "striped": boolean;
         /**
           * The title of the table
          */
@@ -1615,6 +1619,10 @@ export namespace Components {
           * If true convert to a stacked table when screen size is small
          */
         "stacked"?: boolean;
+        /**
+          * When active, the table will display alternating row background colors.
+         */
+        "striped": boolean;
         /**
           * The title of the table
          */
@@ -5012,6 +5020,10 @@ declare namespace LocalJSX {
           * Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted
          */
         "stacked"?: boolean;
+        /**
+          * When active, the table will display alternating row background colors.
+         */
+        "striped"?: boolean;
         /**
           * The title of the table
          */
@@ -5048,6 +5060,10 @@ declare namespace LocalJSX {
           * If true convert to a stacked table when screen size is small
          */
         "stacked"?: boolean;
+        /**
+          * When active, the table will display alternating row background colors.
+         */
+        "striped"?: boolean;
         /**
           * The title of the table
          */

packages/web-components/src/components/va-alert-sign-in/va-alert-sign-in.scss

@@ -26,9 +26,9 @@
 }
 
 :host .headline {
-  font-size: 21.28px; /* 1.33rem */
+  font-size: 1.33rem;
   margin-top: 0;
-  margin-bottom: 8px; /* 0.5rem */
+  margin-bottom: 0.5rem;
   font-family: var(--font-serif);
 }
 

packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts

@@ -30,7 +30,9 @@ 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" part="header">Heading</h3>
+        <h3 class="usa-process-list__heading" part="header">
+          <div>Heading</div>
+        </h3>
         <p>Some content</p>
       </va-process-list-item>
     `);
@@ -47,7 +49,9 @@ 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" part="header">Heading</h1>
+        <h1 class="usa-process-list__heading" part="header">
+          <div>Heading</div>
+        </h1>
         <p>Some content</p>
       </va-process-list-item>
     `);

packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts

@@ -49,12 +49,16 @@ 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" part="header">Step one</h3>
+          <h3 class="usa-process-list__heading" part="header">
+            <div>Step one</div>
+          </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" part="header">Step two</h3>
+          <h3 class="usa-process-list__heading" part="header">
+            <div>Step two</div>
+          </h3>
           <p>Additional content</p>
           <ul>
             <li>Item one</li>

packages/web-components/src/components/va-process-list/va-process-list-item.scss

@@ -8,15 +8,26 @@
 }
 
 .usa-process-list__heading-eyebrow {
+  @extend .usa-process-list__heading; // needed for "source Sans Pro" font-family
   color: var(--vads-color-base-darker);
   text-transform: uppercase;
+  font-weight: normal;
+  font-size: var(--vads-font-size-source-sans-normalized);
 }
 
 va-process-list-item[pending='true'] .usa-process-list__heading {
   color: var(--vads-process-list-color-text-pending-on-light);
+
+  .usa-process-list__heading-eyebrow {
+    color: var(--vads-color-base-darker);
+  }
 }
 va-process-list-item[active='true'] .usa-process-list__heading {
   color: var(--vads-color-primary);
+
+  .usa-process-list__heading-eyebrow {
+    color: var(--vads-color-base-darker);
+  }
 }
 
 /* h6 remains as Source Sans Pro, everything else uses Bitter */