Merge branch 'main' into megzehn-address-update

.gitignore

@@ -9,6 +9,11 @@ node_modules
 tmp_remote_assets
 src/.jekyll-cache
 src/assets/stylesheets/component-library.css
+src/assets/stylesheets/core.css
+src/assets/stylesheets/mobile-typography.css
+src/assets/stylesheets/shame.css
+src/assets/stylesheets/uswds-typography.css
+src/assets/stylesheets/utilities.css
 src/formation.min.css
 src/vendor
 src/_data/component-docs.json

config/gulp/css.js

@@ -17,7 +17,16 @@ gulp.task('copy-web-components-css', function (done) {
   return stream;
 });
 
+gulp.task('copy-css-library-css', function (done) {
+  console.log('copying css-library CSS');
+  var stream = gulp.src('./node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/*.css')
+    .pipe(gulp.dest('src/assets/stylesheets/'));
+
+  return stream;
+});
+
 gulp.task(task, gulp.series(
   'copy-formation-css',
-  'copy-web-components-css'
+  'copy-web-components-css',
+  'copy-css-library-css'
 ));

package.json

@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^47.1.0",
+    "@department-of-veterans-affairs/component-library": "^48.0.2",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",
@@ -38,9 +38,10 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/formation": "^11.0.12",
-    "@department-of-veterans-affairs/css-library": "^0.12.2"
+    "@department-of-veterans-affairs/css-library": "^0.15.0"
   },
   "engines": {
     "npm": "6.14.8"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/_about/experience-standards.md

@@ -122,7 +122,7 @@ GitHub label: [exp-std-form-integrity](https://github.com/department-of-veterans
 
 **There's an issue when:** User does not receive appropriate notification from the VA or VA.gov about the status of their request.
 
-GitHub label: [exp-std-submission-status](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-submission-status)
+GitHub label: [exp-std-notifications](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-notifications)
 
 ### Category: Efficiency
 

src/_components/card.md

@@ -22,32 +22,17 @@ anchors:
 
 ## Examples
 
-### Default - Gray
-
-<div class="site-showcase">
-  {% include_relative html/card.html %}
-</div>
-
-### Default - White with border
+### Default 
 
 {% include storybook-preview.html story="components-va-card--default" link_text="va-card default" %}
 
-### With Drop Shadow
-
-{% include storybook-preview.html story="components-va-card--with-drop-shadow" link_text="va-card default" %}
+### With Background
 
-### Benefit payments
+{% include storybook-preview.html story="components-va-card--with-background" link_text="va-card with background" %}
 
-<div class="site-showcase">
-  {% include_relative html/card-benefit-payments.html %}
-</div>
-
-### Application status (Benefit application drafts)
-
-<div class="site-showcase">
-  {% include_relative html/card-benefit-application-drafts.html %}
-</div>
+### With Drop Shadow
 
+{% include storybook-preview.html story="components-va-card--with-drop-shadow" link_text="va-card with drop shadow" %}
 
 ## Usage
 

src/_components/header/minimal.md

@@ -6,12 +6,12 @@ has-parent: /components/header/
 contributors: Ben Brasso (Agile 6), Ya-ching Tsao (CivicActions), Zach Park (Agile 6), Kristen McConnell (Ad Hoc)
 intro-text: The minimal header can be used when navigating away would prevent the user from easily accomplishing their main task.
 figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=988%3A1384&mode=design&t=jMcVWkPlFhZu3RTh-1
+example-link: https://staging.va.gov/mock-form-minimal-header/
 status: use-with-caution-candidate
 web-component: va-header-minimal
 anchors:
   - anchor: Examples
   - anchor: Usage
-  - anchor: Code usage
   - anchor: Content considerations
   - anchor: Component checklist
 ---
@@ -22,6 +22,10 @@ anchors:
 
 {% include storybook-preview.html story="components-va-header-minimal--default" link_text=page.web-component %}
 
+<a class="vads-c-action-link--blue" href="{{ page.example-link }}">
+  View an example
+</a>
+
 ### With Subheader
 
 {% include storybook-preview.html story="components-va-header-minimal--with-subheader" link_text="View va-header-minimal with subheader variation" %}
@@ -46,8 +50,6 @@ anchors:
 
 * **At the top of the page.** The minimal header appears at the top of the page.
 
-{% include component-docs.html component_name=page.web-component %}
-
 ## Content considerations
 
 * For form titles:

src/_components/index.md

@@ -42,12 +42,13 @@ All teams must now be using the v3 versions of our web-components. The Design Sy
   </div>
 </va-alert>
 
-### Governance rules for using v3-based components
+### Governance rules for using components
 
 v3-based versions of the components are designed to sit alongside our current v1 based components and the foundational elements of the Design System. Teams must use the new versions of our web-components and following these rules:
 
 * Do not mix and match different versions (v1 vs. v3) of the same component on the same page. For example, if you were to use the v3-based version of the [accordion component]({{ site.baseurl }}/components/accordion) on a page, that version must be used throughout that page (and ideally throughout your application as soon as possible).
 * Do not mix and match v1 and v3 based [form components]({{ site.baseurl }}/components/form/) in the same application flow. For example, if you were to use the v3-based version of the radio button component on the first step in an application, that version must be used on all subsequent steps throughout the flow.
+* Most examples of design system components can be found in [Storybook](https://design.va.gov/storybook). If your team is using any component outside of the [design system web components](https://github.com/department-of-veterans-affairs/component-library), that is considered an imposter component and will be listed as a violation at your Staging Review. This includes components that are coded to look and function like design system web components, but do not use the design system code.
 
 {% include components-patterns-templates.md %}
 

src/_components/link/index.md

@@ -47,6 +47,10 @@ anchors:
 
 {% include storybook-preview.html story="components-va-link--download" link_text="download va-link" height="50px" %}
 
+### External
+
+{% include storybook-preview.html story="components-va-link--external" link_text="external va-link" height="50px" %}
+
 ### Video
 
 {% include storybook-preview.html story="components-va-link--video" link_text="video va-link" height="50px" %}
@@ -125,6 +129,7 @@ Refer to the [Content Style Guide on Links]({{ site.baseurl }}/content-style-gui
 - **Keyboard navigation.** The user must be able to navigate to links using the Tab key and activate links using the Enter key.
 - **Purpose and target.** Link text that doesn't indicate a clear purpose or destination makes it harder for everyone--especially screen reader users--to understand where they're getting routed off to.
 - **External links must indicate that they are external.** Follow the methods detailed in [linking to external sites]({{ site.baseurl }}/content-style-guide/links#linking-to-external-sites).
+  - By default, the link component's external link variation will append the text, "(opens in a new tab)", instead of using an icon. This follows [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/G201.html) advice on providing users with both a spoken and visual warning that this link opens in a new tab.
 
 {% include content/links-vs-buttons.md %}
 

src/_components/list.md

@@ -37,11 +37,6 @@ anchors:
 
 ### Additional guidance for VA
 
-### How this component works
-
-* **Use square list-item-type for unordered lists.** The square list item type is preferred.
-* **Two or more items.** Lists with 2 or more items are acceptable.
-
 ### Choosing between variations
 
 * **Use unordered lists when the order of the items is not relevant.** List items in unordered lists can be in any order and are indicated with a black square.
@@ -54,9 +49,7 @@ anchors:
 
 {% include component-example.html alt="List in an accordion." file="/images/components/list/unordered-list-in-accordion.png" caption="An example of an unordered list in an Accordion component." class="x2" %}
 
-{% include component-example.html alt="List in a Summary box." file="/images/components/list/unordered-list-in-summary-box.png" caption="An example of an unordered list in a Summary box component." class="x2" %}
-
-{% include component-example.html alt="List with two connected items." file="/images/components/list/unordered-list-with-and.png" caption="An example of an unordered list where items are concatenated using and." class="x2" %}
+{% include component-example.html alt="List with two connected items." file="/images/components/list/unordered-list-with-and.png" caption="An example of an unordered list in a Summary box where items are concatenated using and." class="x2" %}
 
 {% include component-example.html alt="List of appointments in VA.gov." file="/images/components/list/appointments-list.png" caption="An example of an inline list of appointments where each list item is a row containing appointment details." class="x2" %}
 
@@ -73,10 +66,9 @@ anchors:
 ## Accessibility considerations
 
 * **Unique headings and link text.** For complex list items that are comprised of more than one line of content (e.g. header, description, link, etc.) ensure that any headings and link text within the list are unique.
-* **Under review: Unordered list items will read out as "black square".** We're reviewing whether this potentially unexpected behavior is problematic for users of screen readers and may adjust the list item style type appropriately in future.
 
 ## Related
 
 * [Card]({{ site.baseurl }}/components/card)
 
-{% include _component-checklist.html component_name=page.github-title %}
+{% include _component-checklist.html component_name=page.github-title %}

src/_components/process-list.md

@@ -60,7 +60,7 @@ The Process list appears after a start form link on the form [Introduction page]
 
 ### Instances of this component in production
 
-{% include component-example.html alt="An example of the process list component on an Education benefits application." file="/images/components/process-list/education-apply-for-education-benefits-application-1995-introduction-2022.png" caption="The Education benefits application form 1995 uses a process list on the introduction page of the application." width="50%" %}
+{% include component-example.html alt="An example of the process list component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a process list on the introduction page." width="50%" %}
 
 {% include component-docs.html component_name=page.web-component %}
 
@@ -69,6 +69,7 @@ The Process list appears after a start form link on the form [Introduction page]
 * **List headings should start with a verb.** Examples include "Prepare", "Apply", "Review", etc.
 * **Make headings clear and concise.** You can always write more content in paragraphs and other HTML elements below the heading.
 * **Make process step content clear and concise.** Process list should not be a container for many other components and text. Use plain language and briefly explain the step in the process.
+* **Status eyebrow should match context.** When using the optional status eyebrow, make sure the status matches the context of the process list.  The provided statuses are pending, active, complete.
 
 ## Accessibility considerations
 
@@ -77,5 +78,6 @@ The Process list appears after a start form link on the form [Introduction page]
 ### Additional accessibility considerations for VA
 
 * **Don't use headings alone.** Each step should have both a heading and content that helps describe the step in more detail.
+* **Use eyebrow status for update.** When using a process list that has a status update the eyebrow feature is required for accessibility. 
 
 {% include _component-checklist.html component_name=page.web-component %}

src/_content-style-guide/00_word-list.md

@@ -829,17 +829,11 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
 **Veterans Pension**
 : "Veterans" doesn't take an apostrophe. Lowercase "pension" when writing "VA pension." 
 
-**Veterans Service Officer (VSO)**
-: "Veterans" is plural and doesn't take an apostrophe. Go to [Abbreviations and acronyms]({{ site.baseurl }}/content-style-guide/abbreviations-and-acronyms) for guidance on using abbreviations on VA.gov.
-
 **Veterans Service Organization (VSO)**
-: "Veterans" is plural and doesn't take an apostrophe. Go to [Abbreviations and acronyms](https://design.va.gov/content-style-guide/abbreviations-and-acronyms) for guidance on using abbreviations on VA.gov.
-
-**Veterans Service Representative (VSR)**
-: “Veterans” is plural and doesn't take an apostrophe. Go to [Abbreviations and acronyms](https://design.va.gov/content-style-guide/abbreviations-and-acronyms) for guidance on using abbreviations on VA.gov.
+: "Veterans" is plural and doesn't take an apostrophe. Don't use VSO to reference a Veterans Service Officer. Instead use Veterans Service Organization representative. Or VSO representatitve. Go to [Abbreviations and acronyms](https://design.va.gov/content-style-guide/abbreviations-and-acronyms) for guidance on using abbreviations on VA.gov.
 
-**Vietnam Era: Capitalize**
-: But lowercase "era" when you include "War" in the term ("Vietnam War era"). Go to entry for "era" for additional explanation.
+**Vietnam Era**
+: Capitalize Era in Vietnam Era. But lowercase "era" when you include "War" in the term ("Vietnam War era"). Go to entry for "era" for additional explanation.
 
 **Vocational Rehabilitation Counselor (VRC)**
 : Go to [Abbreviations and acronyms](https://design.va.gov/content-style-guide/abbreviations-and-acronyms) for guidance on using abbreviations on VA.gov.

src/_data/tokens/vads-font-primitive.csv

@@ -15,7 +15,8 @@ vads-font-line-length-5,Primitive,vads-size-line-length-5,,uswds-system-font-lin
 vads-font-line-length-6,Primitive,vads-size-line-length-6,88ex,uswds-system-font-line-length-6,88ex,From USWDS.
 vads-font-line-length-none,Primitive,vads-size-line-length-none,,uswds-system-font-line-length-none,none,From USWDS.
 vads-font-size-2xl,Primitive,vads-font-size-2xl,,uswds-system-font-size-14,40px,
-vads-font-size-base,Primitive,vads-font-size-base,17px,uswds-system-font-size-6,17px,
+font-size-root,Primitive,font-size-root,16px,uswds-system-font-size-6,16px,
+vads-font-size-source-sans-normalized,Primitive,vads-font-size-source-sans-normalized,16.96px,uswds-system-font-size-7,16.96px,
 vads-font-size-lg,Primitive,vads-font-size-lg,,uswds-system-font-size-8,20px,
 vads-font-size-md,Primitive,vads-font-size-md,,uswds-system-font-size-6,17px,
 vads-font-size-sm,Primitive,vads-font-size-sm,,uswds-system-font-size-4,15px,

src/_data/tokens/vads-font-semantic.csv

@@ -6,7 +6,7 @@ vads-font-size-body-large,Semantic,vads-font-size-body-large,uswds-system-font-s
 vads-font-size-body-lead,Semantic,vads-font-size-body-lead,,,vads-font-size-body-large,Lead font size for body text. For lead paragraphs.,20px
 vads-font-size-body-medium,Semantic,vads-font-size-body-medium,uswds-system-font-size-6,17px,,Medium body font size,
 vads-font-size-body-small,Semantic,vads-font-size-body-small,uswds-system-font-size-4,15px,,Smallest body font size,
-vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-base,Eyebrow is an experimental request which adds type above an h1.,17px
+vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-root,Eyebrow is an experimental request which adds type above an h1.,16px
 vads-font-size-heading-level-1,Semantic,vads-font-size-heading-level-1,uswds-system-font-size-14,40px,,Heading level 1. h1 value.,
 vads-font-size-heading-level-2,Semantic,vads-font-size-heading-level-2,uswds-system-font-size-12,32px,,Heading level 2. h2 value. Was 30px,
 vads-font-size-heading-level-3,Semantic,vads-font-size-heading-level-3,uswds-system-font-size-8,20px,,Heading level 3. h3 value.,

src/_data/tokens/vads.tokens.json

@@ -2814,7 +2814,7 @@
             }
           }
         },
-        "vads-font-size-base": {
+        "vads-font-size-root": {
           "type": "dimension",
           "value": "{uswds.font.size.uswds-system-font-size-6}",
           "extensions": {
@@ -2829,6 +2829,21 @@
             }
           }
         },
+        "vads-u-font-size--source-sans-normalized": {
+          "type": "dimension",
+          "value": "{uswds.font.size.uswds-system-font-size-7}",
+          "extensions": {
+            "org.lukasoppermann.figmaDesignTokens": {
+              "mode": "Value",
+              "collection": "vads-primitives",
+              "scopes": [
+                "ALL_SCOPES"
+              ],
+              "variableId": "VariableID:562:4293",
+              "exportKey": "variables"
+            }
+          }
+        },
         "vads-font-size-lg": {
           "type": "dimension",
           "value": "{uswds.font.size.uswds-system-font-size-8}",
@@ -3228,7 +3243,7 @@
       },
       "vads-label-font-size": {
         "type": "color",
-        "value": "{vads-primitives.font.size.vads-font-size-base}",
+        "value": "{vads-primitives.font.size.vads-font-size-root}",
         "extensions": {
           "org.lukasoppermann.figmaDesignTokens": {
             "mode": "Mode 1",

src/_foundation/color-palette.html

@@ -5,7 +5,6 @@
   - anchor: Semantic color tokens
   - anchor: Component color tokens
   - anchor: Primitive color tokens
-  - anchor: v1 colors
 ---
 
 <h1 id="icons">{{ page.title }}</h1>
@@ -108,4 +107,4 @@ <h3 class="vads-u-border-bottom--1px vads-u-border-color--gray-lighter vads-u-ma
       %}
     {% endfor %}
   </div>
-</div>
+</div>

src/_foundation/utilities/html/font-size.html

@@ -1,17 +1,19 @@
 <h2 class="vads-u-font-size--h4">Sizing by name</h2>
 
 <div class="vads-l-row">
-  <div class="vads-l-col usa-bitter">
+  <div class="vads-l-col vads-u-font-family--serif">
     <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
-    <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
+    <p class="vads-u-font-size--root">16px .vads-u-font-size--root</p>
+    <p class="vads-u-font-size--source-sans-normalized">&nbsp;<!-- spacer for alignment --></p>
     <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
     <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
     <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>
     <p class="vads-u-font-size--2xl">40px .vads-u-font-size--2xl</p>
   </div>
-  <div class="vads-l-col usa-sans">
+  <div class="vads-l-col vads-u-font-family--sans">
     <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
     <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
+    <p class="vads-u-font-size--source-sans-normalized">16.96px .vads-u-font-size--source-sans-normalized</p>
     <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
     <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
     <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>