department-of-veterans-affairs/vets-website

View on GitHub
src/applications/ds-playground/pages/V1V3Page.jsx

Summary

Maintainability
F
3 wks
Test Coverage
/**
 * This page is for testing the compatibility of running v1 and v3 components on the same page.
 */

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
  VaButton,
  VaButtonPair,
  VaCheckbox,
  VaCheckboxGroup,
  VaMemorableDate,
  VaModal,
  VaPrivacyAgreement,
  VaRadio,
  VaRadioOption,
  VaSelect,
  VaTextarea,
  VaTextInput,
  VaAlert,
  VaSegmentedProgressBar,
  VaAdditionalInfo,
  VaAccordion,
  VaAccordionItem,
  VaBreadcrumbs,
  VaProcessList,
  VaProcessListItem,
} from '@department-of-veterans-affairs/web-components/react-bindings';

export default function V1V3Page() {
  /** @param {import('react').FormEvent | import('@department-of-veterans-affairs/web-components/dist/types/components').VaSelectCustomEvent } evt */
  function updateValue(evt) {
    const { value, name } = /** @type {HTMLInputElement} */ (evt.target);
    const display = document.getElementById(`${name}Value`);
    if (display) display.innerText = value;
  }

  /**
   * @param {{value: string}} value
   * @param {string} id
   */
  function updateRadioValue({ value }, id) {
    const display = document.getElementById(`${id}RadioValue`);
    if (display) display.innerText = value;
  }
  updateRadioValue({ value: 'Radio One' }, 'v1');
  updateRadioValue({ value: 'Radio One' }, 'v3');

  const checkboxValueStore = { v1: [], v3: [] };

  /**
   * @param {string} id
   * @param {string} value
   */
  const handleClick = (id, value) => {
    const el = document.getElementById(id);
    if (el) el.innerHTML = `${value} button was clicked!`;
  };

  /**
   * @param {string} id
   */
  const updateCheckboxValue = (e, id) => {
    const { value, checked } = e.srcElement;
    const valueStore = checkboxValueStore[id];
    if (checked) {
      valueStore.push(value);
    } else {
      const index = valueStore.indexOf(value);
      valueStore.splice(index, 1);
    }
    const display = document.getElementById(`${id}CheckboxValue`);
    if (display) display.innerText = valueStore.sort().join(', ');
  };

  /**
   * @param {string} id
   * @param {string} agreementComponentId
   */
  const updatePrivacyAgreementValue = (e, id, agreementComponentId) => {
    const { checked } = e.srcElement;
    let valueString = `Agreement checked`;
    const el = document.querySelector(`#${agreementComponentId}`);
    if (el) {
      if (checked) {
        el.setAttribute('show-error', '');
      } else {
        valueString = `Agreement un-checked`;
        el.setAttribute('show-error', 'true');
      }
    }
    const display = document.getElementById(id);
    if (display) display.innerText = valueString;
  };

  const ValueDisplay = ({ id, label }) => {
    return (
      <p>
        <b>{label} Value:</b> <span id={id} />
      </p>
    );
  };
  ValueDisplay.propTypes = { id: PropTypes.string, label: PropTypes.string };

  const [isVisibleV1, setIsVisibleV1] = useState(false);
  const onCloseEventV1 = () => setIsVisibleV1(!isVisibleV1);
  const openModalV1 = () => setIsVisibleV1(true);

  const [isVisibleV3, setIsVisibleV3] = useState(false);
  const onCloseEventV3 = () => setIsVisibleV3(!isVisibleV3);
  const openModalV3 = () => setIsVisibleV3(true);

  return (
    <>
      <div className="vads-l-grid-container desktop-lg:vads-u-padding-x--0">
        <div className="vads-l-row">
          <h1>V1 and V3 Side-by-Side Demo</h1>
        </div>

        {/* Text Input Comparison */}
        <div className="vads-l-row vads-u-padding-y--2">
          <h3>Text input component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--gray-light-alt medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaTextInput
                name="v1Input"
                label="V1 Input"
                hint="This is a hint"
                onInput={e => updateValue(e)}
              />
              <ValueDisplay label="V1 Input" id="v1InputValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaTextInput
                uswds
                name="v3Input"
                label="V3 Input"
                hint="This is a hint"
                onInput={e => updateValue(e)}
              />
              <ValueDisplay label="V3 Input" id="v3InputValue" />
            </div>
          </div>
        </div>

        {/* Number Input Comparison */}
        <div className="vads-l-row">
          <h3>Number input component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--gray-light-alt medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaTextInput
                name="v1NumberInput"
                label="V1 Number Input"
                hint="This is a hint"
                inputmode="numeric"
                onInput={e => updateValue(e)}
              />
              <ValueDisplay label="V1 Number Input" id="v1NumberInputValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1 vads-u-border-color--primary">
              <VaTextInput
                uswds
                name="v3NumberInput"
                label="V3 Number Input"
                hint="This is a hint"
                inputmode="numeric"
                onInput={e => updateValue(e)}
              />
              <ValueDisplay label="V3 Number Input" id="v3NumberInputValue" />
            </div>
          </div>
        </div>

        {/* Select Comparison */}
        <div className="vads-l-row">
          <h3>Select component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaSelect
                name="v1Select"
                label="V1 Select"
                onVaSelect={updateValue}
              >
                <option value=""> </option>
                <option value="Select One">Select One</option>
                <option value="Select Two">Select Two</option>
                <option value="Select Three">Select Three</option>
              </VaSelect>
              <ValueDisplay label="V1 Select" id="v1SelectValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaSelect
                uswds
                name="v3Select"
                label="V3 Select"
                onVaSelect={updateValue}
              >
                <option value="Select One">Select One</option>
                <option value="Select Two">Select Two</option>
                <option value="Select Three">Select Three</option>
              </VaSelect>
              <ValueDisplay label="V3 Select" id="v3SelectValue" />
            </div>
          </div>
        </div>

        {/* Radio Comparison */}
        <div className="vads-l-row">
          <h3>Radio component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaRadio
                label="V1 Radio"
                onVaValueChange={e => updateRadioValue(e.detail, 'v1')}
              >
                <VaRadioOption
                  label="Radio One"
                  name="v1RadioOptOne"
                  value="Radio One"
                  checked
                />
                <VaRadioOption
                  label="Radio Two"
                  name="v1RadioOptTwo"
                  value="Radio Two"
                />
                <VaRadioOption
                  label="Radio Three"
                  name="v1RadioOptThree"
                  value="Radio Three"
                />
              </VaRadio>
              <ValueDisplay label="V1 Radio" id="v1RadioValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaRadio
                uswds
                label="V3 Radio"
                onVaValueChange={e => updateRadioValue(e.detail, 'v3')}
              >
                <VaRadioOption
                  uswds
                  label="Radio One"
                  name="v3RadioOptOne"
                  value="Radio One"
                  checked
                />
                <VaRadioOption
                  uswds
                  label="Radio Two"
                  name="v3RadioOptTwo"
                  value="Radio Two"
                />
                <VaRadioOption
                  uswds
                  label="Radio Three"
                  name="v3RadioOptThree"
                  value="Radio Three"
                />
              </VaRadio>
              <ValueDisplay label="V3 Radio" id="v3RadioValue" />
            </div>
          </div>
        </div>

        {/* Checkbox Comparison */}
        <div className="vads-l-row">
          <h3>Checkbox component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaCheckboxGroup
                label="V1 Checkbox Group"
                onVaChange={e => updateCheckboxValue(e, 'v1')}
              >
                <VaCheckbox label="Checkbox 1" value="Checkbox 1" />
                <VaCheckbox label="Checkbox 2" value="Checkbox 2" />
                <VaCheckbox label="Checkbox 3" value="Checkbox 3" />
              </VaCheckboxGroup>
              <ValueDisplay label="V1 Checkbox Group" id="v1CheckboxValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaCheckboxGroup
                uswds
                label="V3 Checkbox Group"
                onVaChange={e => updateCheckboxValue(e, 'v3')}
              >
                <VaCheckbox uswds label="Checkbox 1" value="Checkbox 1" />
                <VaCheckbox uswds label="Checkbox 2" value="Checkbox 2" />
                <VaCheckbox uswds label="Checkbox 3" value="Checkbox 3" />
              </VaCheckboxGroup>
              <ValueDisplay label="V3 Checkbox Group" id="v3CheckboxValue" />
            </div>
          </div>
        </div>

        {/* Memorable Date Comparison */}
        <div className="vads-l-row">
          <h3>Memorable date component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaMemorableDate
                name="v1MemorableDate"
                label="V1 Memorable date"
                hint="This is a hint"
                onDateBlur={e => updateValue(e)}
                onDateChange={e => updateValue(e)}
              />
              <ValueDisplay
                label="V1 Memorable date"
                id="v1MemorableDateValue"
              />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaMemorableDate
                name="v3MemorableDate"
                label="V3 Memorable date"
                hint="This is a hint"
                onDateBlur={e => updateValue(e)}
                onDateChange={e => updateValue(e)}
                uswds
              />
              <ValueDisplay
                label="V3 Memorable date"
                id="v3MemorableDateValue"
              />
            </div>
          </div>
        </div>

        {/* TextArea Comparison */}
        <div className="vads-l-row">
          <h3>Textarea component</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaTextarea
                name="v1TextArea"
                label="V1 Text Area"
                hint="This is a hint"
                onInput={e => updateValue(e)}
              />
              <ValueDisplay label="V1 Text Area" id="v1TextAreaValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaTextarea
                name="v3TextArea"
                label="V3 Text Area"
                hint="This is a hint"
                onInput={e => updateValue(e)}
                uswds
              />
              <ValueDisplay label="V3 Text Area" id="v3TextAreaValue" />
            </div>
          </div>
        </div>

        {/* Button pair Comparison */}
        <div className="vads-l-row">
          <h3>Button pair</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaButtonPair
                continue
                onPrimaryClick={() =>
                  handleClick('v1ButtonPairValue', 'V1 continue')
                }
                onSecondaryClick={() =>
                  handleClick('v1ButtonPairValue', 'V1 back')
                }
              />
              <ValueDisplay label="V1 button pair" id="v1ButtonPairValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaButtonPair
                continue
                onPrimaryClick={() =>
                  handleClick('v3ButtonPairValue', 'V3 continue')
                }
                onSecondaryClick={() =>
                  handleClick('v3ButtonPairValue', 'V3 back')
                }
                uswds
              />
              <ValueDisplay label="V3 button pair" id="v3ButtonPairValue" />
            </div>
          </div>
        </div>

        {/* Button Comparison */}
        <div className="vads-l-row">
          <h3>Button</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaButton
                onClick={() => handleClick('v1ButtonValue', 'V1 edit')}
                text="Edit"
              />
              <ValueDisplay label="V1 button" id="v1ButtonValue" />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaButton
                onClick={() => handleClick('v3ButtonValue', 'V3 edit')}
                text="Edit"
                uswds
              />
              <ValueDisplay label="V3 button" id="v3ButtonValue" />
            </div>
          </div>
        </div>

        {/* Modal Comparison */}
        <div className="vads-l-row">
          <h3>Modal</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaButton
                onClick={openModalV1}
                text="Click here to open V1 modal"
              />
              <VaModal
                modalTitle="Are you sure you want to continue?"
                primaryButtonText="Continue without saving"
                secondaryButtonText="Go back"
                onCloseEvent={onCloseEventV1}
                onPrimaryButtonClick={onCloseEventV1}
                onSecondaryButtonClick={onCloseEventV1}
                visible={isVisibleV1}
              >
                <p>You have unsaved changes that will be lost.</p>
              </VaModal>
            </div>

            <div className="vads-l-col--6 vads-u-margin--1">
              <VaButton
                onClick={openModalV3}
                text="Click here to open V3 modal"
                uswds
              />
              <VaModal
                modalTitle="Are you sure you want to continue?"
                primaryButtonText="Continue without saving"
                secondaryButtonText="Go back"
                onCloseEvent={onCloseEventV3}
                onPrimaryButtonClick={onCloseEventV3}
                onSecondaryButtonClick={onCloseEventV3}
                visible={isVisibleV3}
                uswds
              >
                <p>You have unsaved changes that will be lost.</p>
              </VaModal>
            </div>
          </div>
        </div>

        {/* Privacy Agreement Comparison */}
        <div className="vads-l-row">
          <h3>Privacy Agreement</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaPrivacyAgreement
                id="v1PrivacyAgreement"
                onVaChange={e =>
                  updatePrivacyAgreementValue(
                    e,
                    'v1PrivacyAgreementValue',
                    'v1PrivacyAgreement',
                  )
                }
              />
              <ValueDisplay
                label="V1 Privacy Agreement"
                id="v1PrivacyAgreementValue"
              />
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaPrivacyAgreement
                id="v3PrivacyAgreement"
                onVaChange={e =>
                  updatePrivacyAgreementValue(
                    e,
                    'v3PrivacyAgreementValue',
                    'v3PrivacyAgreement',
                  )
                }
                uswds
              />
              <ValueDisplay
                label="V3 Privacy Agreement"
                id="v3PrivacyAgreementValue"
              />
            </div>
          </div>
        </div>

        {/* Alert Comparison */}
        <div className="vads-l-row">
          <h3>Alert</h3>
          <div className="vads-l-col--12 vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <h4>Statuses</h4>
              <VaAlert
                status="info"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
              >
                <h2 slot="headline">Info Alert</h2>
                <div>
                  <p>This is an info alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="error"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
              >
                <h2 slot="headline">Error Alert</h2>
                <div>
                  <p>This is an error alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="success"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
              >
                <h2 slot="headline">Success Alert</h2>
                <div>
                  <p>This is a success alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="warning"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
              >
                <h2 slot="headline">Warning Alert</h2>
                <div>
                  <p>This is a warning alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="continue"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
              >
                <h2 slot="headline">Continue Alert</h2>
                <div>
                  <p>This is a continue alert</p>
                </div>
              </VaAlert>
              <br />
              <h4>Not Closable</h4>
              <VaAlert status="continue" showIcon="true">
                <h2 slot="headline">Alert - Not Closable</h2>
                <div>
                  <p>This is an alert that cannot be closed</p>
                </div>
              </VaAlert>
              <h4>Background Only with Icon</h4>
              <VaAlert status="continue" showIcon="true" backgroundOnly="true">
                <h2 slot="headline">Alert - Background Only With Icon</h2>
                <div>
                  <p>This is an alert with only a background and icon</p>
                </div>
              </VaAlert>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <h4>Statuses</h4>
              <VaAlert
                status="info"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
                uswds="true"
              >
                <h2 slot="headline">Info Alert</h2>
                <div>
                  <p>This is an info alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="error"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
                uswds="true"
              >
                <h2 slot="headline">Error Alert</h2>
                <div>
                  <p>This is an error alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="success"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
                uswds="true"
              >
                <h2 slot="headline">Success Alert</h2>
                <div>
                  <p>This is a success alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="warning"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
                uswds="true"
              >
                <h2 slot="headline">Warning Alert</h2>
                <div>
                  <p>This is a warning alert</p>
                </div>
              </VaAlert>
              <br />
              <VaAlert
                status="continue"
                showIcon="true"
                closeBtnAriaLabel="Close"
                closeable="true"
                uswds="true"
              >
                <h2 slot="headline">Continue Alert</h2>
                <div>
                  <p>This is a continue alert</p>
                </div>
              </VaAlert>
              <br />
              <h4>Not Closable</h4>
              <VaAlert status="continue" showIcon="true" uswds="true">
                <h2 slot="headline">Alert - Not Closable</h2>
                <div>
                  <p>This is an alert that cannot be closed</p>
                </div>
              </VaAlert>
              <h4>Background Only with Icon</h4>
              <VaAlert
                status="continue"
                showIcon="true"
                backgroundOnly="true"
                uswds="true"
              >
                <h2 slot="headline">Alert - Background Only With Icon</h2>
                <div>
                  <p>This is an alert with only a background and icon</p>
                </div>
              </VaAlert>
              <br />
              <h4>Slim Alerts</h4>
              <VaAlert status="info" slim="true" uswds="true">
                <p className="vads-u-margin-y--0">This is a slim info alert</p>
              </VaAlert>
              <br />
              <VaAlert status="error" slim="true" uswds="true">
                <p className="vads-u-margin-y--0">This is a slim error alert</p>
              </VaAlert>
              <br />
              <VaAlert status="success" slim="true" uswds="true">
                <p className="vads-u-margin-y--0">
                  This is a slim success alert
                </p>
              </VaAlert>
              <br />
              <VaAlert status="warning" slim="true" uswds="true">
                <p className="vads-u-margin-y--0">
                  This is a slim warning alert
                </p>
              </VaAlert>
              <br />
              <VaAlert status="continue" slim="true" uswds="true">
                <p className="vads-u-margin-y--0">
                  This is a slim continue alert
                </p>
              </VaAlert>
            </div>
          </div>
        </div>

        {/* Progress bar - segmented */}
        <div className="vads-l-row">
          <h3>Progress bar - segmented</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaSegmentedProgressBar
                current={2}
                label="V1 VA Benefits"
                total={5}
              />
              <div
                className="schemaform-chapter-progress"
                style={{
                  paddingLeft: '2rem',
                }}
              >
                <div className="nav-header">
                  <h2
                    className="vads-u-font-size--h4"
                    id="nav-form-header"
                    tabIndex="-1"
                  >
                    Step 2 of 5: VA Benefits
                  </h2>
                </div>
              </div>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaSegmentedProgressBar
                centered-labels
                counters="small"
                current={2}
                heading-text="V3 VA Benefits"
                label="Label is here"
                labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"
                total={5}
                uswds
              />
            </div>
          </div>
        </div>

        {/* Additional Info Comparison */}
        <div className="vads-l-row">
          <h3>Additional Info</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaAdditionalInfo trigger="Expand Additional Information">
                <div>Here are some items</div>
                <ul>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                </ul>
              </VaAdditionalInfo>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaAdditionalInfo trigger="Expand Additional Information" uswds>
                <div>Here are some items</div>
                <ul>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                </ul>
              </VaAdditionalInfo>
            </div>
          </div>
        </div>

        {/* Accordion Comparison */}
        <div className="vads-l-row">
          <h3>Accordion</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaAccordion open-single>
                <VaAccordionItem id="first">
                  <h6 slot="headline">First Amendment Headline</h6>
                  Congress shall make no law respecting an establishment of
                  religion, or prohibiting the free exercise thereof; or
                  abridging the freedom of speech, or of the press; or the right
                  of the people peaceably to assemble, and to petition the
                  Government for a redress of grievances.
                </VaAccordionItem>
                <VaAccordionItem header="Second Amendment" id="second">
                  A well regulated Militia, being necessary to the security of a
                  free State, the right of the people to keep and bear Arms,
                  shall not be infringed.
                </VaAccordionItem>
                <VaAccordionItem header="Third Amendment" id="third">
                  No Soldier shall, in time of peace be quartered in any house,
                  without the consent of the Owner, nor in time of war, but in a
                  manner to be prescribed by law.
                </VaAccordionItem>
              </VaAccordion>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaAccordion uswds open-single>
                <VaAccordionItem header="First Amendment" id="first" uswds>
                  <p>
                    Congress shall make no law respecting an establishment of
                    religion, or prohibiting the free exercise thereof; or
                    abridging the freedom of speech, or of the press; or the
                    right of the people peaceably to assemble, and to petition
                    the Government for a redress of grievances.
                  </p>
                </VaAccordionItem>
                <VaAccordionItem header="Second Amendment" id="second" uswds>
                  <p>
                    A well regulated Militia, being necessary to the security of
                    a free State, the right of the people to keep and bear Arms,
                    shall not be infringed.
                  </p>
                </VaAccordionItem>
                <VaAccordionItem header="Third Amendment" id="third" uswds>
                  <p>
                    No Soldier shall, in time of peace be quartered in any
                    house, without the consent of the Owner, nor in time of war,
                    but in a manner to be prescribed by law.
                  </p>
                </VaAccordionItem>
              </VaAccordion>
            </div>
          </div>
        </div>

        {/* Breadcrumb */}
        <div className="vads-l-row">
          <h3>Breadcrumbs</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaBreadcrumbs label="Breadcrumb">
                <a href="#home">Home</a>
                <a href="#one">Level one</a>
                <a href="#two">Level two</a>
              </VaBreadcrumbs>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaBreadcrumbs
                breadcrumbList={[
                  {
                    href: '#one',
                    label: 'Level one',
                  },
                  {
                    href: '#two',
                    label: 'Level two',
                  },
                  {
                    href: '#three',
                    label: 'Level three',
                  },
                ]}
                label="Breadcrumb"
                uswds
              />
            </div>
          </div>
        </div>

        {/* Process List Comparison */}
        <div className="vads-l-row">
          <h3>Process List</h3>
          <div className="vads-l-col--12 vads-u-align-items--center vads-u-border-bottom--1px vads-u-border-color--primary medium-screen:vads-u-display--flex">
            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaProcessList>
                <li>
                  <h3>Check to be sure you can request a Board Appeal</h3>
                  <p>
                    You can request a Board Appeal up to 1 year from the date on
                    your decision notice. (Exception: if you have a contested
                    claim, you have only 60 days from the date on your decision
                    notice to request a Board Appeal.)
                  </p>
                  <p>
                    You can request a Board Appeal for these claim decisions:
                  </p>
                  <ul>
                    <li>An initial claim</li>
                    <li>A Supplemental Claim</li>
                    <li>A Higher-Level Review</li>
                  </ul>
                  <p>
                    <strong>Note: </strong>
                    You can’t request a Board Appeal if you’ve already requested
                    one for this same claim.
                  </p>
                </li>
                <li>
                  <h3>Gather your information</h3>
                  <p>Here’s what you’ll need to apply:</p>
                  <ul>
                    <li>Your mailing address</li>
                    <li>
                      The VA decision date for each issue you’d like us to
                      review (this is the date on the decision notice you got in
                      the mail)
                    </li>
                  </ul>
                </li>
                <li>
                  <h3>Start your request</h3>
                  <p>
                    We’ll take you through each step of the process. It should
                    take about 30 minutes.
                  </p>
                </li>
              </VaProcessList>
            </div>

            <div className="vads-l-col--12 small-screen:vads-l-col--6 vads-u-margin--1">
              <VaProcessList uswds>
                <VaProcessListItem>
                  <h3>Check to be sure you can request a Board Appeal</h3>
                  <p>
                    You can request a Board Appeal up to 1 year from the date on
                    your decision notice. (Exception: if you have a contested
                    claim, you have only 60 days from the date on your decision
                    notice to request a Board Appeal.)
                  </p>
                  <p>
                    You can request a Board Appeal for these claim decisions:
                  </p>
                  <ul>
                    <li>An initial claim</li>
                    <li>A Supplemental Claim</li>
                    <li>A Higher-Level Review</li>
                  </ul>
                  <p>
                    <strong>Note: </strong>
                    You can’t request a Board Appeal if you’ve already requested
                    one for this same claim.
                  </p>
                </VaProcessListItem>
                <VaProcessListItem>
                  <h3>Gather your information</h3>
                  <p>Here’s what you’ll need to apply:</p>
                  <ul>
                    <li>Your mailing address</li>
                    <li>
                      The VA decision date for each issue you’d like us to
                      review (this is the date on the decision notice you got in
                      the mail)
                    </li>
                  </ul>
                </VaProcessListItem>
                <VaProcessListItem>
                  <h3>Start your request</h3>
                  <p>
                    We’ll take you through each step of the process. It should
                    take about 30 minutes.
                  </p>
                </VaProcessListItem>
              </VaProcessList>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}