Merge branch 'main' into patch-5

.github/ISSUE_TEMPLATE/3_experimental_design_request.md

@@ -35,6 +35,11 @@ assignees: caw310
 
 > What would you want to tell other teams about this component or pattern?
 
+## Collaboration Cycle Ticket
+
+> Provide a link to your collaboration cycle ticket. 
+
+
 ## Your team
 
 > Tell us what team you are on. 

.github/workflows/deploy.yml

@@ -18,13 +18,13 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: 14.x
-        cache: 'npm'
+        cache: 'yarn'
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.5 # Not needed with a .ruby-version file
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
-    - run: npm install
-    - run: npm run-script build
+    - run: yarn install
+    - run: yarn run build
     - run: bundle exec jekyll build --config _config.yml,jekyll-configs/${{ matrix.environment.config }}
     - name: Make BUILD.txt file
       # The -e flag enables the interpretation of the \n newline character

.github/workflows/pull-request.yml

@@ -17,11 +17,11 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: 14.x
-        cache: 'npm'
+        cache: 'yarn'
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.5 # Not needed with a .ruby-version file
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
-    - run: npm install
-    - run: npm run-script build
+    - run: yarn install
+    - run: yarn build
     - run: bundle exec jekyll build --config _config.yml,jekyll-configs/${{ matrix.environment.config }}

src/_about/experience-standards.md

@@ -74,9 +74,9 @@ GitHub label: [exp-std-content-errors](https://github.com/department-of-veterans
 
 GitHub label: [exp-std-best-practice](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-best-practice)
 
-#### User encounters consistent, clear design components
+#### User encounters consistent, clear design components and patterns
 
-**There’s an issue when:** User encounters design components that are inconsistent or confusing.
+**There’s an issue when:** User encounters design components or patterns that are inconsistent or confusing.
 
 GitHub label: [exp-std-design-consistency](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-design-consistency)
 
@@ -86,9 +86,9 @@ GitHub label: [exp-std-design-consistency](https://github.com/department-of-vete
 
 GitHub label: [exp-std-content-va](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-content-va)
 
-#### User encounters up-to-date design components
+#### User encounters up-to-date design components and patterns.
 
-**There’s an issue when:** User encounters design components that are out of date.
+**There’s an issue when:** User encounters design components or patterns that are out of date.
 
 GitHub label: [exp-std-design-version](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-design-version)
 
@@ -205,8 +205,8 @@ GitHub label: [exp-std-flow-completion](https://github.com/department-of-veteran
 
 GitHub label: [exp-std-element-comprehension](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-element-comprehension)
 
-#### User experiences predictable interactions with components
+#### User experiences predictable interactions with components and patterns
 
-**There’s an issue when:** User experiences an unexpected interaction with a component.
+**There’s an issue when:** User experiences an unexpected interaction with a component or pattern.
 
 GitHub label: [exp-std-unexpected-interaction](https://github.com/department-of-veterans-affairs/va.gov-team/labels/exp-std-unexpected-interaction)

src/_components/back-to-top.md

@@ -19,28 +19,33 @@ anchors:
 {% include storybook-preview.html height="300px" story="components-va-back-to-top--default" link_text="va-back-to-top" %}
 
 ## Usage
+
 * On large and medium screens, the Back to top component will have the label, “Back to top” with an arrow icon to the left of the label. On small screens, the Back to top component will only have the arrow icon. Use one Back to top component per page.
 
 ### When to use Back to top
+
 * In pages with static content that is more than two screens in length on large and medium screens, or more than four screens in length on small screens.
 
 ### When not to use Back to top
-* In pages with dynamic content.
+
 * In pages with static content that is short in length.
 
 ### Placement
+
 * The Back to top component is anchored to the lower right edge of its parent container (the main content area) on desktop, and the lower right edge of the viewport on smaller screens.
 * In the desktop view there should be at least 5 spacing units (40 pixels) of white space above the Back to top component and 2.5 spacing units (20 pixels) white space below.
 * In smaller screens where the Back to top component is the arrow icon, there should be at least 4 spacing units (32 pixels) of white space above and 2 spacing units (16 pixels) below the component.
 
 ### Behavior
+
 * As the user scrolls down the page, the Back to top component reveals as a sticky element in the lower right edge of the main content area.
 * The Back to top component stays fixed in the lower right edge of the main content area when the user reaches the bottom of the page.
 * Clicking Back to top takes the user to the top of the page.
 
 {% include component-docs.html component_name=page.web-component %}
 
 ## Accessibility considerations
+
 * Animations can be distracting to users with vestibular conditions.
 * Some users may have smooth scrolling turned off in their preferences, which will affect the transition going back to the top of the page.
 * After the user has clicked Back to top, the code should call focus on an element near the top of the page, such as the H1.

src/_content-style-guide/links.md

@@ -128,4 +128,4 @@ You can apply online or mail your [Application for Burial Benefits (VA Form 21P-
 
 * **Use text that tells the reader where the link takes them.** Example: [Check COVID-19 symptoms on the CDC website](https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html)
 * **Consider using an aria-label to create a screen reader-only label.** Aria-labels can be helpful in specialized instances where there's a clear reason to use separate text for people who use screen readers. The aria-label may append or replace text within a link to provide context about where the link goes.
-* **Explain when a link is opening in a new tab with text, not an icon.** Add "(opens in new tab)" to notify users when a link is opening in a new tab. In standard link text, we avoid using the new window icon, since it can cause confusion. Within components that have space constraints, the icon is acceptable.
+* **Explain when a link is opening in a new tab with text, not an icon.** Add "(opens in new tab)" to notify users when a link is opening in a new tab. In standard link text, we avoid using the new window icon, since it can cause confusion. Within components that have space constraints, the icon is acceptable. [Review guidance in the Components section on when to open in a new tab, and when not to]({{ site.baseurl }}/components/link/#behavior)

src/_includes/footer.html

@@ -21,6 +21,9 @@
     </div>
   </div>
 </footer>
-
-
-
+{%- comment %}
+  Create a cache-busting string based on build timestamp.
+{% endcomment -%}
+{%- assign cacheBust = site.time | date:'?v=%s' -%}
+<script src="{{ '/assets/javascripts/site.js' | prepend: site.baseurl | append: cacheBust }}"></script>
+<script src="{{ '/vendor/javascripts/formation.js' | prepend: site.baseurl | append: cacheBust }}"></script>

src/_includes/head.html

@@ -1,3 +1,8 @@
+{%- comment %}
+  Create a cache-busting string based on build timestamp.
+{% endcomment -%}
+{%- assign cacheBust = site.time | date:'?v=%s' -%}
+
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -17,7 +22,7 @@
   {% endif %}
 
   <!-- Web component setup -->
-  <link rel="stylesheet" type="text/css" href="/assets/stylesheets/component-library.css" />
+  <link rel="stylesheet" type="text/css" href="{{ '/assets/stylesheets/component-library.css' | append: cacheBust }}" />
   <script type="module">
     import { defineCustomElements } from "/vendor/javascripts/component-library/loader/index.es2017.js";
     defineCustomElements();
@@ -30,12 +35,11 @@
   <link href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon-152x152.png" rel="apple-touch-icon-precomposed" sizes="144x144">
   <link rel="shortcut icon" href="{{ site.baseurl }}/assets/img/favicons/favicon.ico">
 
-  <link rel="stylesheet" href="{{ site.baseurl }}/formation.min.css">
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/application.css">
-
+  <link rel="stylesheet" href="{{ '/formation.min.css' | prepend: site.baseurl | append: cacheBust }}">
+  <link rel="stylesheet" href="{{ '/assets/stylesheets/application.css' | prepend: site.baseurl | append: cacheBust }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 
-  <script src="{{site.baseurl }}/assets/javascripts/polyfills/array.from.js"></script>
+  <script src="{{ '/assets/javascripts/polyfills/array.from.js' | prepend: site.baseurl | append: cacheBust }}"></script>
 
-</head>
+</head>

src/_layouts/category.html

@@ -47,8 +47,6 @@ <h1 id="{{ page.title }}">{{ page.title }}</h1>
   </div>
 
   {% include footer.html %}
-  <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-  <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
 </body>
 
 </html>

src/_layouts/component.html

@@ -57,9 +57,5 @@ <h1 id="{{ page.title }}">{{ page.title }}</h1>
   </div>
 
   {% include footer.html %}
-  <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-  <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
   </body>
 </html>
-
-

src/_layouts/content-style-guide.html

@@ -49,8 +49,5 @@ <h1 id="{{ page.title }}">{{ page.title }}</h1>
   </div>
 
   {% include footer.html %}
-
-  <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-  <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
   </body>
 </html>

src/_layouts/default.html

@@ -55,7 +55,5 @@
     </div>
 
     {% include footer.html %}
-    <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-    <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
   </body>
 </html>

src/_layouts/documentation.html

@@ -48,8 +48,6 @@ <h1 id="{{ page.title }}">{{ page.title }}</h1>
   </div>
 
   {% include footer.html %}
-  <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-  <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
 </body>
 
 </html>

src/_layouts/pattern.html

@@ -56,7 +56,5 @@ <h1 id="{{ page.title }}">{{ page.title }}</h1>
   </div>
 
   {% include footer.html %}
-  <script src="{{ site.baseurl }}/assets/javascripts/site.js"></script>
-  <script src="{{ site.baseurl }}/vendor/javascripts/formation.js"></script>
   </body>
 </html>

src/_patterns/ask-users-for/a-single-response.md

@@ -116,12 +116,8 @@ The "One thing" can be:
 
 That one decision or question may require more than one input from the user as they fill out a form. However, by following this pattern you can [reduce the cognitive load](https://www.nngroup.com/articles/minimize-cognitive-load/) required to complete the form by focusing the user on a specific question and its answer.
 
-
 {% include content/conditionally-revealed-fields.md %}
 
-
-
-
 ## Code usage
 
 Refer to the following component variations to implement this pattern: