Update documentation to remove formation and add css-library

.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
 

package.json

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

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/_foundation/breakpoints.md

@@ -43,7 +43,7 @@ $nav-width: 702px;
 
 ## Sass mixins
 
-The CSS library includes the `@media` mixin to make it easier for developers to create breakpoints in their styles.
+The CSS Library includes the `@media` mixin to make it easier for developers to create breakpoints in their styles.
 
 ```scss
 @include media($medium-screen) {

src/_foundation/design-tokens.md

@@ -117,7 +117,7 @@ Component tokens are scoped to a specific component and represent decisions spec
 
 ### Forthcoming design tokens
 
-These tokens are not available in Figma nor are they yet represented in the CSS library. However, they do provide values that teams can coalesce around that will soon be available as tokens in our component-library.
+These tokens are not available in Figma nor are they yet represented in the CSS Library. However, they do provide values that teams can coalesce around that will soon be available as tokens in our component-library.
 
 <va-accordion bordered="false" uswds="true">
   <va-accordion-item header="Elevation" id="second" uswds>

src/_foundation/layout/flexbox-grid.md

@@ -22,7 +22,7 @@ anchors:
 
 ## Grid elements
 
-In addition to the Flexbox grid, the CSS library uses a 12-column, responsive, flexbox grid to provide structure and align content.
+In addition to the Flexbox grid, the CSS Library uses a 12-column, responsive, flexbox grid to provide structure and align content.
 
 The grid consists of three distinct pieces:
 

src/_foundation/spacing-units.md

@@ -44,9 +44,15 @@ The VA follows the USWDS spacing unit tokens and then adds additional semantic t
 
 ## Using the spacing units
 
-In order to keep spacing consistent throughout VA.gov, it is recommended you favor using the `units` functions instead of hard coding pixels (or relative units) for margins and padding.
+In order to keep spacing consistent throughout VA.gov, it is recommended you favor using the unit tokens instead of hard coding pixels (or relative units) for margins and padding.
 
-In order to access the spacing tokens in your project, you will need to import the [base files](https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/tree/master/packages/formation/sass/base) into your project. [Here is how this site is doing that](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/assets/stylesheets/application.scss#L5).
+In order to access the unit tokens in your project, you will need to import the [variables file](https://github.com/department-of-veterans-affairs/component-library/tree/main/packages/css-library/dist/tokens/css/variables.css) into your project. 
+<!-- 
+
+ToDo: uncomment after removing formation imports 
+[Here is how this site is doing that](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/assets/stylesheets/application.scss#L5).
+
+-->
 
 There are two ways of using the spacing tokens in your code.
 

src/_layouts/documentation.html

@@ -30,6 +30,9 @@
           {% if collection_name %}
             {% include _site-section-name.html %}
           {% endif %}
+          {% if page.status %}
+              {% include _status.html %}
+            {% endif %}
           <h1 id="{{ page.title }}">{{ page.title }}</h1>
           {% if page.intro-text %}
           <div class="va-introtext" markdown="1">