From 4275f992505741eb9f819a47541af4e3d97f2c55 Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Fri, 13 Dec 2024 13:34:41 -0600 Subject: [PATCH 1/4] Update README with release changes and contribution clarifications (#1436) * adjust placement of sections and update deployment steps * grammar update and move version number section * minor clarifying updates * formatting --- README.md | 194 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 99 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index af3c2ac32..afb05c001 100644 --- a/README.md +++ b/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 `` tag for testing - - 1. Example: - - ``` - - - - - ``` - -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 \ No newline at end of file From 3674442615d871f7de12d21351fed3ec058da78d Mon Sep 17 00:00:00 2001 From: Andrew Steele Date: Mon, 16 Dec 2024 12:58:53 -0500 Subject: [PATCH 2/4] va-alert-sign-in: Modifying headline to use rems (#1438) --- .../src/components/va-alert-sign-in/va-alert-sign-in.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/va-alert-sign-in/va-alert-sign-in.scss b/packages/web-components/src/components/va-alert-sign-in/va-alert-sign-in.scss index 5eb755083..1ce00211f 100644 --- a/packages/web-components/src/components/va-alert-sign-in/va-alert-sign-in.scss +++ b/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); } From 31d3ce26fd10e9887e5f3cb1995adb2c7ac9c0d6 Mon Sep 17 00:00:00 2001 From: Kerry Powell <1776069+powellkerry@users.noreply.github.com> Date: Tue, 17 Dec 2024 08:22:43 -0700 Subject: [PATCH 3/4] va-process-list-item: move status eyebrow into header so that it gets read by screen readers (#1437) * va-process-list-item: move status eyebrow into header so that it gets read by screen readers * update based on accessibility review * Make the eyebrow color 3d4551 for all statuses --- .../va-process-list/test/va-process-list-item.e2e.ts | 8 ++++++-- .../va-process-list/test/va-process-list.e2e.ts | 8 ++++++-- .../va-process-list/va-process-list-item.scss | 11 +++++++++++ .../va-process-list/va-process-list-item.tsx | 12 +++++++----- 4 files changed, 30 insertions(+), 9 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 index d120a1be7..30a1247c0 100644 --- 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,9 @@ describe('va-process-list-item', () => { expect(element).toEqualHtml(` -

Heading

+

+
Heading
+

Some content

 `); @@ -47,7 +49,9 @@ describe('va-process-list-item', () => { expect(element).toEqualHtml(` -

Heading

+

+
Heading
+

Some content

 `); 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 index 052f425f9..c1606dddc 100644 --- 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,16 @@ describe('va-process-list', () => { -

Step one

+

+
Step one
+

Some content

 -

Step two

+

+
Step two
+

Additional content

  • Item one
    • 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 index 155442984..6ab58c6f4 100644 --- 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,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 */ 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 index e783bc22c..4934348b2 100644 --- 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 @@ -57,11 +57,13 @@ export class VaProcessListItem { return ( - { status ? -
    {statusTextMap[status]}
    - : null - } - {header ? {header} : null} + {header || status ? ( + // aria-label hack to avoid header being read twice in voiceOver + + {status ?
    {statusTextMap[status]}
    : null} + {header ?
    {header}
    : null} +     + ): null}     ) From fa3f03e03c02b7ce5da4a880d24948cbc31cdb1e Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Tue, 17 Dec 2024 13:28:08 -0600 Subject: [PATCH 4/4] va-table: add striped variation (#1439) * add striped variation * update story title * update tests * add back va-table element to test markup * remove duplicate class --- .../stories/va-table-uswds.stories.jsx | 22 +++++ packages/web-components/src/components.d.ts | 16 ++++ .../components/va-table/test/va-table.e2e.ts | 83 +++---------------- .../va-table-inner/test/va-table-inner.e2e.ts | 49 +++++------ .../va-table-inner/va-table-inner.tsx | 8 +- .../src/components/va-table/va-table.tsx | 6 ++ 6 files changed, 82 insertions(+), 102 deletions(-) diff --git a/packages/storybook/stories/va-table-uswds.stories.jsx b/packages/storybook/stories/va-table-uswds.stories.jsx index 6dd2b8698..8515666e5 100644 --- a/packages/storybook/stories/va-table-uswds.stories.jsx +++ b/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} > {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); diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 213f73b1e..21d2d9295 100644 --- a/packages/web-components/src/components.d.ts +++ b/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 */ diff --git a/packages/web-components/src/components/va-table/test/va-table.e2e.ts b/packages/web-components/src/components/va-table/test/va-table.e2e.ts index 8ffb29562..29d66a10c 100644 --- a/packages/web-components/src/components/va-table/test/va-table.e2e.ts +++ b/packages/web-components/src/components/va-table/test/va-table.e2e.ts @@ -1,9 +1,10 @@ import { newE2EPage } from '@stencil/core/testing'; -function getTableMarkup(): string { - return ` +function getTableMarkup(props = {}): string { + const defaultProps = {...props, 'table-title': 'My table'}; + return ` `${key}="${value}"`) + .join(' ')}> Document title @@ -62,23 +63,18 @@ function getTableMarkup(): string { `; } -describe('V1 table', () => { - - - it('renders a V1 va-table-inner with va-table-rows inside', async () => { +describe('renders header row', () => { + it('renders a va-table-inner with va-table-rows inside', async () => { const page = await newE2EPage(); await page.setContent(getTableMarkup()); const headerRow = await page.find('va-table-inner >>> va-table-row'); expect(headerRow).toBeDefined(); }); - }); - -describe('V3 table', () => { - - it('renders a V3 va-table-inner with an HTML table inside', async () => { +describe('renders table element', () => { + it('renders a va-table-inner with an HTML table inside', async () => { const page = await newE2EPage(); await page.setContent(getTableMarkup()); const element = await page.find('va-table-inner >>> table'); @@ -88,66 +84,7 @@ describe('V3 table', () => { it('is not stacked by when attribute is set to false', async () => { const page = await newE2EPage(); - await page.setContent(` - - - Document title - - - Description - - - Year - - - - - Declaration of Independence - - - Statement adopted by the Continental Congress declaring independence from the British Empire - - - 1776 - - - - - Bill of Rights - - - The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms - - - 1791 - - - - - Declaration of Sentiments - - - A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. - - - 1848 - - - - - Emancipation Proclamation - - - An executive order granting freedom to slaves in designated southern states. - - - 1863 - - - `); + await page.setContent(getTableMarkup({stacked: 'false'})); const element = await page.find('va-table-inner >>> table'); expect(element).not.toHaveClass('usa-table--stacked'); diff --git a/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts b/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts index 65cf42c86..8bb494a02 100644 --- a/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts +++ b/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts @@ -6,8 +6,11 @@ import { dateSort } from '../../sort/date'; import { _getCompareFunc } from '../../sort/utils'; describe('va-table', () => { - function makeTable() { - return ` + function makeTable(props = {}) { + const defaultProps = {...props, 'table-title': 'this is a caption'}; + return ` `${key}="${value}"`) + .join(' ')}> One Two @@ -61,19 +64,7 @@ describe('va-table', () => { it('is scrollable when attribute is set to true', async () => { const page = await newE2EPage(); - await page.setContent(` - - One - Two - Three - - - - Dog - Cat - Mouse - - `); + await page.setContent(makeTable({scrollable: 'true'})); const table = await page.find('va-table-inner >>> div'); expect(table.getAttribute('tabindex')).toEqual('0'); expect(table).toHaveClass('usa-table-container--scrollable'); @@ -81,19 +72,7 @@ describe('va-table', () => { it('is not stacked by when attribute is set to false', async () => { const page = await newE2EPage(); - await page.setContent(` - - One - Two - Three - - - - Dog - Cat - Mouse - - `); + await page.setContent(makeTable({stacked: 'false'})); const table = await page.find('va-table-inner >>> table'); expect(table).not.toHaveClass('usa-table--stacked'); }); @@ -123,6 +102,20 @@ describe('va-table', () => { expect(columnHeader.getAttribute('scope')).toEqual('col'); expect(rowHeader.getAttribute('scope')).toEqual('row'); }); + + it('is not striped by default', async () => { + const page = await newE2EPage(); + await page.setContent(makeTable()); + const table = await page.find('va-table-inner >>> .usa-table'); + expect(table).not.toHaveClass('usa-table--striped'); + }); + + it('has the USWDS striped class when striped is true', async () => { + const page = await newE2EPage(); + await page.setContent(makeTable({striped: 'true'})); + const table = await page.find('va-table-inner >>> .usa-table'); + expect(table).toHaveClass('usa-table--striped'); + }); }); describe('sorted va-table ', () => { diff --git a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx index 105507d98..a808fe4cb 100644 --- a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx +++ b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx @@ -65,6 +65,11 @@ export class VaTableInner { */ @Prop() scrollable?: boolean = false; + /** + * When active, the table will display alternating row background colors. + */ + @Prop() striped: boolean = false; + /** * If sortable is true, the direction of next sort for the column that was just sorted */ @@ -325,11 +330,12 @@ export class VaTableInner { } render() { - const { tableTitle, tableType, stacked, scrollable } = this; + const { tableTitle, tableType, stacked, scrollable, striped } = this; const classes = classnames({ 'usa-table': true, 'usa-table--stacked': stacked, 'usa-table--borderless': tableType === 'borderless', + 'usa-table--striped': striped, }); return (