Merge branch 'main' into alert-sign-in-storybook-links

.github/ISSUE_TEMPLATE/1_bug_template.md

@@ -24,7 +24,7 @@ labels: platform-design-system-team, bug
 
 ## Reproducing
 
-- Formation version:
+- CSS Library version:
 - Device: (e.g. iPhone 8, Macbook)
 - Browser: (e.g. Firefox, IE 11)
 

README.md

@@ -1,6 +1,6 @@
 # Vets Design System Documentation
 
-This repo is for VA Design System documentation, aka [design.va.gov](https://design.va.gov). If you are looking for the repo that contains the design system components, see the [component-library](https://github.com/department-of-veterans-affairs/component-library). Additionally, the [Formation package](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/tree/master/packages/formation) inside the [veteran-facing-services-tools repo](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools) contains sitewide VA.gov base styles and utility classes.
+This repo is for VA Design System documentation, aka [design.va.gov](https://design.va.gov). If you are looking for the repo that contains the design system components, see the [component-library](https://github.com/department-of-veterans-affairs/component-library). For sitewide VA.gov base styles and utility classes see the [css-library](https://github.com/department-of-veterans-affairs/component-library/tree/main/packages/css-library) package within component-library.
 
 Min specs:
 
@@ -57,38 +57,9 @@ To add content, you will need to look into `/src` directory. This will be the so
 
 [Read the wiki](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/wiki) to learn how to add new pages to design.va.gov, improve local search, add images, etc.
 
-## Testing updates to the Formation codebase on this site
+## Testing updates to the CSS Library codebase on this site
 
-In order to test new updates to Formation, you will need to work in two different repositories: the repository for this site and `veteran-facing-services-tools`. For the steps below, make sure you are doing your work in a new branch for both repos.
-
-1. Clone the [veteran-facing-services-tools repo](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools) at the same level as the design system documentation site.
-
-   ```
-   my-projects-folder
-   |   ├── vets-design-system-documentation
-   |   ├── veteran-facing-services-tools
-   ```
-
-1. Follow the [setup instructions](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools#setup) to get `veteran-facing-services-tools` running.
-
-1. Change `package.json` in `vets-design-system-documentation` to use a local version. `"@department-of-veterans-affairs/formation": "file:../veteran-facing-services-tools/packages/formation"`
-
-1. Make your changes in `veteran-facing-services-tools` and run `$ npm run build`.
-
-1. Now, in `vets-design-system-documentation`, run the following:
-
-   ```
-   $ yarn
-   $ yarn start
-   ```
-
-While `vets-design-system-documentation` is running and make further updates to `veteran-facing-services-tools`, you will need to run `$ npm run build` in that repo, then `$ yarn build` in `vets-design-system-documentation`.
-
-1. When you have finished your work in `veteran-facing-services-tools`, follow the [instructions](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools#publishing-module-to-npm) to submit a PR and publish to NPM.
-
-1. Once your update has been published to NPM, update `package.json` in `vets-design-system-documentation` from the local version to the new version number.
-
-1. Commit this along with any updates to the documentation site and submit a PR.
+See the Component Library [readme](https://github.com/department-of-veterans-affairs/component-library?tab=readme-ov-file#local-testing-in-vets-website-with-verdaccio) instructions on how to use verdaccio to test changes to CSS Library
 
 ## Deployments
 

_config.yml

@@ -35,8 +35,6 @@ update_documentation_link: https://github.com/department-of-veterans-affairs/vet
 uswds_link: https://designsystem.digital.gov/
 
 # People
-sketch_for_teams_admin: "Kevin Hoffman"
-sketch_library_owner: "Lillian Boot, Barb Denney"
 experimental_reviewer_1: "Matthew Dingee"
 
 # Build settings

config/gulp/build.js

@@ -2,7 +2,6 @@ var gulp = require('gulp');
 //var clean = require('gulp-clean');
 
 gulp.task('build',
-  //gulp.series(
     gulp.series(
       'json',
       'fonts',
@@ -11,5 +10,4 @@ gulp.task('build',
       'css',
       'storybook',
     )
-//  )
 );

package.json

@@ -16,8 +16,7 @@
   "keywords": [
     "Vets.gov",
     "design",
-    "uswds",
-    "formation"
+    "uswds"
   ],
   "author": "Matthew Dingee",
   "license": "ISC",

src/_about/contributing/suggest-an-addition-or-update.html

@@ -95,7 +95,7 @@ <h2 id="update-an-existing-component-or-pattern">
   If you are suggesting a change to something that already exists in the VA.gov Design System, you should go through the <a href="#new-component-or-pattern">New component or pattern</a> process above. 
 </p>
 <ul>
-  <li><strong>Minor cahnges:</strong> If you are requesting a minor change, a change which you feel would be a minor adjustment to current functionality, then you may request an asynchronous review. To do so, complete <a href="#new-component-or-pattern">the process</a> above and indicate in your request that you would like an asynchronous review by the Design System Council.</li>
+  <li><strong>Minor changes:</strong> If you are requesting a minor change, a change which you feel would be a minor adjustment to current functionality, then you may request an asynchronous review. To do so, complete <a href="#new-component-or-pattern">the process</a> above and indicate in your request that you would like an asynchronous review by the Design System Council.</li>
   <li><strong>Bugs:</strong> If the change you are requesting is a bug in a component or pattern <a href="{{ site.github_issues_new }}">file an issue</a>. For example, if the behavior of the component does not match our documentation or a component is not behaving as expected. If the Design System Team feels the matter needs to be addressed by the Design System Council, we'll let you know in the issue.</li>
 </ul>
 

src/_about/developers/index.md

@@ -17,7 +17,7 @@ sub-pages:
 
 ### Parts of the Design System
 
-- [CSS Class library](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/tree/master/packages/formation) contains the styles of the VA.gov Design System
+- [CSS Library](https://github.com/department-of-veterans-affairs/component-library/tree/main/packages/css-library) contains the styles of the VA.gov Design System
 - [Component library](https://github.com/department-of-veterans-affairs/component-library)
 
 **If you are working in the vets-website repository**, you can skip straight to the [frontend developer documentation](https://depo-platform-documentation.scrollhelp.site/developer-docs/Frontend-developer-documentation.687931428.html). Otherwise, proceed below.

src/_about/developers/install.md

@@ -1,15 +1,16 @@
 ---
 layout: documentation
 title: Install
+status: dont-use-deprecated
 permalink: /about/developers/install
 has-parent: /about/developers/
-intro-text: 
+intro-text: "New guidance in coming soon. With the deprecation of Formation and the adoption off CSS Library the design system team is in the process of creating and providing guidance on using CSS Library across different projects."
 anchors:
-  - anchor: Install CSS library into your project
+  - anchor: Install Formation into your project
   - anchor: Load the Web Component library
 ---
 
-## Install CSS library into your project
+## Install Formation into your project
 
 How you implement VA Design System (VADS) styles into your project depends on how your project is structured and your preferences. The easiest way to get started is by using `npm`. For a prototype where you need the Design System styles, you can add a `<link>` tag with the `href` set to `https://unpkg.com/@department-of-veterans-affairs/formation/dist/formation.min.css`.
 
@@ -35,7 +36,7 @@ The example above is what is used on VA.gov, but you can customize this for your
 
 ### Sass functions, variables, and interactive components
 
-If you would like to use the Sass functions, such as for [spacing]({{ site.baseurl }}/foundation/spacing-units#using-the-spacing-tokens), and variables in your project, you can import the files from your project scss. This documentation site imports the CSS library’s Sass files in its [application.scss](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/assets/stylesheets/application.scss#L5).
+If you would like to use the Sass functions, such as for [spacing]({{ site.baseurl }}/foundation/spacing-units#using-the-spacing-tokens), and variables in your project, you can import the files from your project scss. This documentation site imports the Formation Sass files in its [application.scss](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/assets/stylesheets/application.scss#L5).
 
 ## Load the Web Component library
 
@@ -61,4 +62,4 @@ applyPolyfills().then(() => {
   defineCustomElements();
 });
 ```
-1. Make sure this script gets loaded on the HTML page - preferably near the top of the document in the `<head>` tag.
+1. Make sure this script gets loaded on the HTML page - preferably near the top of the document in the `<head>` tag.

src/_about/developers/using-web-components.md

@@ -79,7 +79,7 @@ If either of these are true, we would recommend using the React binding for ease
 - You must pass in a function, object or array to a web component's properties
 - You must use custom events
 
-If you are not sure if you need either of those features, refer to the web component's [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--page) to review its events and properties.
+If you are not sure if you need either of those features, refer to the web component's [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--docs) to review its events and properties.
 
 **Importing a React binding of a web component**
 
@@ -156,7 +156,7 @@ If the Web Component has a custom event that you need to use and you're **not**
 
 The majority of our web components also fire a `component-library-analytics` event used to send component library interactions into analytics data layer events. The [handler for the Google Analytics event](https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/site-wide/component-library-analytics-setup.js) exists in vets-website.
 
-For more information about custom events for specific components, refer to the [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--page).
+For more information about custom events for specific components, refer to the [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--docs).
 
 ## Native Events
 
@@ -202,4 +202,4 @@ Another example using the `blur` event in vanilla JavaScript:
 
 <hr>
 
-For more information about native events in a specific component, refer to the [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--page).
+For more information about native events in a specific component, refer to the [Storybook documentation](https://design.va.gov/storybook/?path=/docs/about-introduction--docs).

src/_components/button/index.md

@@ -24,26 +24,46 @@ anchors:
 
 ## Examples
 
-### Default - Primary
+### Web
+
+#### Default - Primary
 
 {% include storybook-preview.html height="60px" story="uswds-va-button--primary" link_text="va-button--primary" %}
 
-### Default - Secondary
+#### Default - Secondary
 
 {% include storybook-preview.html height="60px" story="uswds-va-button--secondary" link_text="va-button--secondary" %}
 
-### Default - Big
+#### Default - Big
 
 {% include storybook-preview.html height="80px" story="uswds-va-button--big" link_text="va-button--big" %}
 
-### Continue
+#### Continue
 
 {% include storybook-preview.html height="60px" story="uswds-va-button--continue" link_text="va-button--continue" %}
 
-### Back
+#### Back
 
 {% include storybook-preview.html height="60px" story="uswds-va-button--back" link_text="va-button--back" %}
 
+#### Loading
+
+{% include storybook-preview.html height="60px" story="uswds-va-button--loading" link_text="va-button--loading" %}
+
+### Mobile
+
+#### Base - Primary
+
+{% include storybook-preview.html height="100px" story="va-mobile_button--base" link_text="va-mobile__button--base" %}
+
+#### Base - Secondary
+
+{% include storybook-preview.html height="100px" story="va-mobile_button--base-secondary" link_text="va-mobile__button--base-secondary" %}
+
+#### Destructive
+
+{% include storybook-preview.html height="100px" story="va-mobile_button--destructive" link_text="va-mobile__button--base-secondary" %}
+
 ## Usage
 
 <a class="vads-c-action-link--blue" href="https://designsystem.digital.gov/components/button/">Refer to the U.S. Web Design System for usage guidance</a>
@@ -53,7 +73,7 @@ anchors:
 #### When to use a button
 
 * **Actions.** Use buttons for clickable actions you want users to take on a page, such as “Add”, “Close”, “Cancel”, or “Save.” Buttons **do things**, links **go places**. Refer to guidance on [Links vs. buttons](#links-vs-buttons).
-* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window. 
+* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window.
 
 #### When to consider something else
 
@@ -69,8 +89,14 @@ anchors:
 
 ### Choosing between variations
 
-* **Use primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section.
-* **Use secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section.
+* **Use Primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section. Also, use primary buttons to take the user to the next step in a process.
+* **Use Secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section. Also, use secondary buttons for actions that happen on the current page.
+* **Use Big primary buttons for the only action.** Use the big variation of the primary button for the only action on the page.
+* **Use Continue and Back for advancing to the next step and returning to the previous step, respectively.** Note that these buttons can be used as a pair from [button pair]({{ site.baseurl }}/components/button/button-pair). Also, note that the Back button should not be used if it is only navigating rather than taking an action (like submitting data ala the Continue button).
+* **Use Base, primary and secondary, in dark mode in mobile applications.** Use the base variations for dark mode or when primary buttons will not pass the required color contrast ratio.
+* **Use destructive for actions that have serious consequences.** Use the destructive button for any action that cannot be reversed and may result in data loss. Currently used in the mobile app when canceling an appointment and when removing contact information.
+  * Don't rely on the red color alone to communicate the destructive nature of the action. Always ensure the button text clearly communicates what will happen.
+  * Since destructive buttons have serious consequences, always add friction before completing the action. This can be in the form of a native confirmation message (alert or action sheet) in the mobile app or a modal on web.
 
 ### Placement
 
@@ -85,7 +111,6 @@ anchors:
 
 {% include component-example.html alt="Example of a primary button with a secondary link." file="/images/components/button/primary-with-secondary-link.png" caption="An example of a primary button used with a secondary link." reverse=true %}
 
-
 #### Secondary button as radio button
 
 This variation substitutes the large tap target of a button where a radio button would traditionally be used. This serves a similar purpose to the [USWDS Tile variation of a Radio button](https://designsystem.digital.gov/components/radio-buttons/). 

src/_components/form/checkbox.md

@@ -106,6 +106,12 @@ anchors:
 
 {% include storybook-preview.html story="uswds-va-checkbox-group--internationalization" link_text="va-checkbox group internationalization" %}
 
+### Indeterminate
+
+Use the indeterminate state when a checkbox has a sublist of checkbox selections that can change from selected to unselected. 
+
+{% include storybook-preview.html story="uswds-va-checkbox--indeterminate" link_text="va-checkbox group indeterminate" %}
+
 ## Usage
 
 <a class="vads-c-action-link--blue" href="https://designsystem.digital.gov/components/checkbox/">Refer to the U.S. Web Design System for usage guidance</a>

src/_components/form/html/prefill-intro.html

@@ -6,7 +6,8 @@
   uswds
   visible="true"
 >
-  <p class="vads-u-margin-y--0">
-    <strong>Note:</strong> Since you’re signed in to your account, we can prefill part of your application based on your account details. You can also save your application in progress and come back later to finish filling it out.
-  </p>
+  <h3>We've prefilled some of your information</h3>
+  Since you’re signed in, we can prefill part of your application
+  based on your profile details. You can also save your application
+  in progress and come back later to finish filling it out.
 </va-alert>

src/_components/form/prefill.md

@@ -34,31 +34,23 @@ anchors:
   {% include_relative html/prefill-intro.html %}
 </div>
 
-### Step
-
-<div class="site-showcase">
-  {% include_relative html/prefill-step.html %}
-</div>
-
 ## Usage
 
 ### When to use
 
-* **When prefilling information from the user's profile.** These messages communicate to the user that their profile information has been leveraged to pre-populate the form that they are filling out. The Intro variation, used on the Introduction page, also informs the user that their progress will be saved as they complete the form.
+* **When prefilling information from the user's profile.** These messages communicate to the user that their profile information has been leveraged to pre-populate the form that they are filling out and informs the user that their progress will be saved as they complete the form.
 
 ### When to consider something else
 
 * **Unauthenticated users.** Users who are unauthenticated should not see this message as we cannot use their profile data to prefill the form.
 
 ### How this component works
 
-* **Intro variation uses Alert - Informational.** The Intro variation of this component is an instance of the [Alert - Informational]({{ site.baseurl }}/components/alert#informational-alert) component, but without a header.
-* **Step variation uses Alert - Background-only Informational.** The Step variations of this component is an instance of the [Alert - Background-only with icon - Informational]({{ site.baseurl }}/components/alert#background-color-only-alert-with-icon) component.
+* **Uses Alert - Informational.** This component is an instance of the [Alert - Informational]({{ site.baseurl }}/components/alert#informational-alert) component, with specific pre-determined content.
 
 ### Placement
 
-* The Intro variation of this component appears after the subtitle of the form and before the action link to start the form process on the authenticated variation of the [Form - Introduction]({{ site.baseurl }}/templates/forms/introduction#authenticated) page.
-* The Step variation of this component appears after the [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented) component on a step of the form.
+* This component appears after the subtitle of the form and before the action link to start the form process on the authenticated variation of the [Form - Introduction]({{ site.baseurl }}/templates/forms/introduction#authenticated) page.
 
 ## Code usage