Merge pull request #2326 from department-of-veterans-affairs/add-mini…

…mal-footer-1339

Adds footer and minimal footer. [Fixes #1339]

src/_components/footer/index.md

@@ -0,0 +1,66 @@
+---
+layout: component
+title: Footer
+permalink: /components/footer/
+intro-text: A footer serves site visitors who arrive at the bottom of a page without finding what they want.
+figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=538-7198&mode=design&t=kPk3dlhnHSGw5X0f-0
+sub-pages:
+  - sub-page: Footer - Minimal
+anchors:
+  - anchor: Examples
+  - anchor: Usage
+---
+
+{% include _site-in-this-section.html %}
+
+<va-alert
+  close-btn-aria-label="Close notification"
+  status="warning"
+  visible
+>
+  <h2 slot="headline">
+    This component is not officially supported
+  </h2>
+  <div>
+    <p className="vads-u-margin-y--0">
+      This component has not yet been built as a component in the Design System. Thus the Design System Team does not officially support this component. The Footer - Minimal variation is supported. Guidance and design assets are provided as is.
+    </p>
+  </div>
+</va-alert>
+
+## Examples
+
+### Default
+
+{% include component-example.html alt="The VA.gov header at mobile viewport width." file="/images/components/footer/footer-mobile.png" caption="At mobile viewport width for unauthenticated users the VA.gov footer collapses the navigation into accordions." class="x2" %}
+
+{% include component-example.html alt="The VA.gov footer at desktop viewport width." file="/images/components/footer/footer-desktop.png" caption="At desktop viewport width for unauthenticated users the VA.gov footer exposes navigation sections and language assistance." %}
+
+## Usage
+
+### When to use Footer
+
+* **The footer is required to provide additional navigation.** Navigation helps users find the information they need across all of VA.gov.
+
+### How this component works
+
+The footer is made up of four parts:
+
+1. [**Crisis Line Modal**](https://design.va.gov/storybook/?path=/docs/components-va-crisis-line-modal--default). The Veterans Crisis Line modal is a button prominently placed over the footer at mobile viewport widths. When interacted with it opens a modal window.
+2. **Navigation**. At mobile the navigation is collapsed into [accordions]({{ site.baseurl }}/components/accordion).
+3. **Identifier**. This portion of the footer holds the VA logo, agency badge, title, and required links. While our version pre-dates the [USWDS component of the same name](https://designsystem.digital.gov/components/identifier/), it provides roughly the same information.
+
+### Behavior
+
+* **BEWARE! The footer is injected on all pages of VA.gov.** It is important for teams working on the footer to be aware that the footer is injected across different Content Management Systems at the VA. Here are some important things to keep in mind when working on the footer:
+  * The footer is not currently a web-component supported by the Design System Team. Instead, it is a shared global React component with logic onto itself.
+  * Web components do not currently load in Microsoft TeamSites, one of the Content Management Systems that the footer is injected into. 
+  * The Sitewide team owns the design of the footer while the Design System Team owns the code of the footer going forward. Thus the Design System Team is currently building out the web-components and will be working with other teams to support web-components in TeamSites.
+
+### Choosing between variations
+
+* **Use the [Footer - Minimal]({{ site.baseurl }}/components/footer/footer-minimal) variation for use cases where navigating away would prevent the user from easily accomplishing their main task.** We use the minimal footer variation when we want to guide the user to task completion and where navigating away from the current task would be counter-productive or potentially lose user input. For example, a form flow is a use case where we want to help the user get through filling out the form without interruption. 
+
+### Placement
+
+* **At the bottom of every page.** The footer appears at the bottom of every page within the va.gov domain, but not all sub-domains.

src/_components/footer/minimal.md

@@ -0,0 +1,43 @@
+---
+layout: component
+title: Footer - Minimal
+permalink: /components/footer/footer-minimal
+has-parent: /components/footer/
+contributors: Ben Brasso (Agile 6), Ya-ching Tsao (CivicActions), Zach Park (Agile 6), Kristen McConnell (Ad Hoc)
+intro-text: The minimal footer 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=538-7198&mode=design&t=kPk3dlhnHSGw5X0f-0
+status: use-with-caution-candidate
+web-component: va-minimal-footer
+anchors:
+  - anchor: Examples
+  - anchor: Usage
+  - anchor: Code usage
+  - anchor: Content considerations
+  - anchor: Component checklist
+---
+
+## Examples
+
+### Default
+
+{% include storybook-preview.html story="components-va-minimal-footer--default" link_text=page.web-component %}
+
+## Usage
+
+### When to use Footer - Minimal
+
+* **Reduce the chance of a user leaving a form, process, or task before completing the required steps.** The minimal footer retains VA branding so that users still know they are on VA.gov. However, it removes elements of the standard footer, such additional navigation, in order to reduce the chances of users leaving a form or process before completing all the required steps and accomplishing their goal. While most forms support finishing the form later, we still prefer to keep users focused on the task at hand.
+* **A tasks that is time-sensitive.** The minimal footer is also appropriate when a user must complete a task in a timely fashion and thus navigating away would put task completion at risk.
+* **An experience outside of the VA.gov site-wide information architecture.** Some experiences do not exist within the information architecture of VA.gov or have already implemented a distinct navigation pattern and thus can also use the minimal footer.
+
+### How this component works
+
+* **Use with the [Header - Minimal]({{ site.baseurl }}/components/header/header-minimal).** The minimal footer should be used in conjunction with the minimal header.
+
+### Placement
+
+* **At the bottom of the page.** The minimal footer appears at the bottom of the page.
+
+{% include component-docs.html component_name=page.web-component %}
+
+{% include _component-checklist.html component_name=page.web-component %}

src/_components/header/minimal.md

@@ -3,7 +3,7 @@ layout: component
 title: Header - Minimal
 permalink: /components/header/header-minimal
 has-parent: /components/header/
-contributor: Ben Brasso (Agile 6), Ya-ching Tsao (CivicActions), Zach Park (Agile 6), Kristen McConnell (Ad Hoc)
+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.
 sketch-link: https://www.sketch.com/s/a52734dd-00d0-44f1-9c9e-ff4016130e5c/p/224585DD-02BA-49EB-91C6-DE20869AA4AC/canvas
 status: use-with-caution-candidate
@@ -36,6 +36,8 @@ anchors:
 
 ### How this component works
 
+* **Use with the [Footer - Minimal]({{ site.baseurl }}/components/footer/footer-minimal).** The minimal header should be used in conjunction with the minimal footer.
+
 ### Behavior
 
 * **Set form title as header and sub-header.** The minimal header has header and subheader props that allow for setting the title of the form and the form number, respectively. Use of this component is intended for form flows and in particular when the h1 of the page is being to ask the user a question in keeping with the One Thing Per Page content principle.

src/_components/template.md

@@ -1,7 +1,7 @@
 ---
 layout: component
 title: Component name (singular)
-contributor: Command separated list of contributor names with (org name) following, if applicable
+contributors: Command separated list of contributor names with (org name) following, if applicable
 draft: true
 intro-text: "This text provides the overall purpose and function of the component."
 github-title: va-component-name - Only use this if the component is not actually a web component and thus just needs a label that matches that format.

src/_data/component-checklist/va-minimal-footer.yml

@@ -0,0 +1,40 @@
+maturity:
+  - name: guidance
+    score: true
+  - name: research
+    score: true
+  - name: stability
+    score: false
+  - name: adoption
+    score: false
+accessibility:
+  - name: accessible-use-of-color
+    score: true
+  - name: accessible-contrast
+    score: true
+  - name: keyboard-interactions
+    score: true
+  - name: content-zoom-tested
+    score: true
+  - name: tested-in-screen-readers
+    score: true
+code-assets:
+  - name: variations 
+    score: true
+  - name: responsive
+    score: true
+  - name: interactive-states
+    score: true
+  - name: tokens
+    score: "n/a"
+  - name: internationalization
+    score: false
+visual-assets:
+  - name: variations
+    score: true
+  - name: responsive
+    score: true
+  - name: interactive-states
+    score: false
+  - name: tokens
+    score: "n/a"

src/_includes/component-resource-links.html

@@ -38,11 +38,18 @@
     {% endif %}
     {% if page.sketch-link %}
     <dd role="definition" class="site-component-resources-links__definition">
-      <a class="site-component-resources-links__link" href="{{page.sketch-link}}" target="_blank" title="View the visual design for this component (internal only)">
+      <a class="site-component-resources-links__link" href="{{page.sketch-link}}" target="_blank" rel="noopener noreferrer" title="View the visual design for this component (internal only)">
         <img aria-hidden="true" src="{{ site.baseurl }}/assets/img/sketch-logo-black.svg" alt="Sketch logo" role="img" class="site-component-resources-links__img">Sketch
       </a>
     </dd>
     {% endif %}
+    {% if page.figma-link %}
+    <dd role="definition" class="site-component-resources-links__definition">
+      <a class="site-component-resources-links__link" href="{{page.figma-link}}" target="_blank" rel="noopener noreferrer" title="View the visual design for this component (internal only)">
+        <img aria-hidden="true" src="{{ site.baseurl }}/assets/img/figma-logo.svg" alt="Figma logo" role="img" class="site-component-resources-links__img">Figma
+      </a>
+    </dd>
+    {% endif %}
     {% if page.code-link %}
     <dd role="definition" class="site-component-resources-links__definition">
       <a class="site-component-resources-links__link" href="{{code-link}}" target="_blank" title="View code for this component or pattern">