  <template>
    <div class="container-fluid container-shadow p-2 rounded-3">
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
        </div>
      </div>
      <div class="row my-2">
        <div class="col">
          <menuModal/>
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
        </div>
      </div>
      <div class="row my-2">
        <div class="col">
          <vinInformation/>
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <textboxQuestion
            labelText="Text Input Label"
            placeholderText="Placeholder"
            inputID="test-text-input"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">Disabled</h6>
          <textboxQuestion
            labelText="Text Input Label"
            placeholderText="Disabled"
            inputID="test-text-input"
            isDisabled
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">With icon aligned left</h6>
          <textboxQuestion
            labelText="Text Input Label"
            placeholderText="Text Input Label"
            inputID="test-text-input"
            hasIcon
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">With icon aligned right</h6>
          <textboxQuestion
            labelText="Text Input Label"
            placeholderText="Text Input Label"
            inputID="test-text-input"
            hasIcon
            iconRight
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">With Error</h6>
          <textboxQuestion
            labelText="Text Input Label"
            placeholderText="Placeholder"
            inputID="test-text-input"
            hasError
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (Select)</h4>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <dropdownQuestion
            labelText="Dropdown Label"
            inputID="test-dropdown-input-1"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">Disabled</h6>
          <dropdownQuestion
            labelText="Dropdown Label"
            inputID="test-dropdown-input-2"
            isDisabled
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h6 class="my-4">With Error (class="has-error"):</h6>
          <dropdownQuestion
            labelText="Dropdown Label"
            inputID="test-dropdown-input-3"
            class="has-error"
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <checkbox
          checkboxName="demo checkbox"
          buttonID="checkbox-1"
          tabIndex="1"
          checkboxLabel="I'm a checkbox"
          />
          <p class="mt-3 mb-0">With Error:</p>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <checkbox
          checkboxName="demo checkbox"
          buttonID="checkbox-2"
          tabIndex="1"
          checkboxLabel="Error!"
          hasError
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <radio
          groupName="radio-demo-2"
          buttonLabel="I'm a radio button!"
          buttonID="radio-button-a"
          isRequired
          value="I'm a radio button!"
          screenReaderOnlyText="Model Value 1"
          />
          <radio
          groupName="radio-demo-2"
          buttonLabel="I'm also a radio button!"
          buttonID="radio-button-b"
          isRequired
          value="I'm also a radio button!"
          screenReaderOnlyText="Model Value 2"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <p class="mt-3 mb-0">With Error:</p>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <radio
          groupName="radio-demo-3"
          buttonLabel="Error!"
          buttonID="radio-button-c"
          isRequired
          value="Error!"
          screenReaderOnlyText="Model Value 1"
          hasError
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
        </div>
      </div>
      <div class="row">
        <div class="col my-3 d-flex align-items-center">
          <buttonMain
          isPrimary
          buttonText="Primary"
          loaderColor="white"

          />
        </div>
      </div>
      <div class="row">
        <div class="col my-3 d-flex align-items-center">
          <buttonMain
          isPrimary
          buttonText="Primary Disabled"
          loaderColor="white"

          disabled
          />
        </div>
      </div>
      <div class="row">
        <div class="col my-3 d-flex align-items-center">
          <buttonMain
          buttonText="Secondary"
          loaderColor="white"

          />
        </div>
      </div>
      <div class="row">
        <div class="col my-3 d-flex align-items-center">
          <buttonMain
          buttonText="Secondary Disabled"
          loaderColor="white"

          disabled
          />
        </div>
      </div>
      <div class="row">
        <div class="col my-3 d-flex align-items-center">
          <buttonBack
          backButtonAccessibleText="Back button label"
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Links</h4>
        </div>
      </div>
      <div class="row">
        <div class="col my-3">
          <textLink
          linkType=navigation
          text="Navigation Link"
          href="#!"
          /><br><br>
          <textLink
          linkType="text"
          text="Default Link"
          href="#!"
          /><br><br>
          <textLink
          linkType=textSmall
          text="Small Link"
          href="#!"
          /><br><br>
          <textLink
          linkType=footer
          text="Footer Link"
          href="https://google.com"
          />
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
          <h6 class="mx-0 px-0 my-0">Functioning as Checkbox</h6>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <fieldset>
            <legend class="sr-only">Functioning as Checkbox</legend>
            <listCard
            isMultiSelect
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Checkbox 1"
            groupID="checkbox-demo-1"
            buttonLabelSubCopy="Description"
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Checkbox No Description</h6>
          <fieldset>
            <legend class="sr-only">Checkbox no Description</legend>
            <listCard
            isMultiSelect
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Checkbox 2"
            groupID="checkbox-demo-1a"
            buttonLabelSubCopy=""
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 mt-4 mb-0">Checkbox with Error</h6>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <fieldset>
            <legend class="sr-only">Checkbox with Error</legend>
            <listCard
            isMultiSelect
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Checkbox 3"
            groupID="checkbox-demo-1e"
            buttonLabelSubCopy="Description"
            hasError
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Functioning as Radio Button</h6>
          <fieldset>
            <legend class="sr-only">Functioning as Radio Button</legend>
            <listCard
            isRadio
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Radio Button"
            groupID="radio-demo-2b"
            buttonLabelSubCopy="Description"
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
          <fieldset>
            <legend class="sr-only">Radio Button no Description</legend>
            <listCard
            isRadio
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Radio Button b"
            groupID="radio-demo-2b"
            buttonLabelSubCopy=""
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <fieldset>
            <legend class="sr-only">Radio Button with Error</legend>
            <listCard
            isRadio
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Radio Button c"
            groupID="radio-demo-2b"
            buttonLabelSubCopy="Description"
            hasError
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Horizontal as Checkbox</h6>
          <fieldset>
            <legend class="sr-only">Horizontal Checkbox</legend>
            <listCard
            isMultiSelect
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Horizontal Checkbox"
            groupID="checkbox-demo-3"
            buttonLabelSubCopy="Description"
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Checkbox no Description</h6>
          <fieldset>
            <legend class="sr-only">Checkbox no Description</legend>
            <listCard
            isMultiSelect
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Side Window"
            altText=""
            buttonID="List Card Horizontal Checkbox b"
            groupID="checkbox-demo-3b"
            buttonLabelSubCopy=""
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <fieldset>
            <legend class="sr-only">Horizontal with Error</legend>
            <listCard
            isMultiSelect
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Side Window"
            altText=""
            buttonID="List Card Horizontal Checkbox d"
            groupID="checkbox-demo-3d"
            buttonLabelSubCopy=""
            hasError
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Horizontal as Radio Button</h6>
          <fieldset>
            <legend class="sr-only">Horizontal Radio Button</legend>
            <listCard
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Rear Window"
            altText=""
            buttonID="List Card Horizontal Radio Button"
            groupID="radio-demo-4"
            buttonLabelSubCopy="Description"
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
          <fieldset>
            <legend class="sr-only">Radio Button no Description</legend>
            <listCard
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Horizontal Radio Button b"
            groupID="radio-demo-4b"
            buttonLabelSubCopy=""
            />
          </fieldset>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
          <fieldset>
            <legend class="sr-only">Horizontal with Error</legend>
            <listCard
            isWide
            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
            buttonLabel="Windshield"
            altText=""
            buttonID="List Card Horizontal Radio Button e"
            groupID="radio-demo-4e"
            buttonLabelSubCopy=""
            hasError
            />
          </fieldset>
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
          <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
        </div>
      </div>
      <div class="row">
        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
        <div
        role="radiogroup"
        aria-labelledby="demo-1-radio-group"
        class="col my-3 d-flex align-items-center flex-column"
        >
        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
        <h3 class="sr-only" id="demo-1-radio-group">Select Vehicle Year</h3>
        <listButton
        isMultiSelect
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2021"
        buttonLabel="2021"
        isRequired="true"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        screenReaderOnlyText=" opens new window"
        />
        <listButton
        isMultiSelect
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2020"
        buttonLabel="2020"
        isRequired="true"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        screenReaderOnlyText=" opens new window"
        />
        <listButton
        isMultiSelect
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2019"
        buttonLabel="2019"
        isRequired="true"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        screenReaderOnlyText=" opens new window"
        />
        <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
        <small class="d-flex align-self-start">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
        <listButton
        isMultiSelect
        groupName="demo-2"
        ariaLabelBy="vehicle-year"
        buttonID="2019b"
        buttonLabel="2019"
        isRequired="true"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        screenReaderOnlyText=" opens new window"
        hasError
        />
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
      role="checkbox"
      aria-labelledby="demo-1-checkbox-group"
      class="col my-3 d-flex flex-column"
      >
      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
      <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
      <listButton
      groupName="demo-1-checkbox"
      ariaLabelBy="vehicle-year"
      buttonID="2018"
      buttonLabel="2018"
      isRequired="true"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-1-checkbox"
      ariaLabelBy="vehicle-year"
      buttonID="2017"
      buttonLabel="2017"
      isRequired="true"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-1-checkbox"
      ariaLabelBy="vehicle-year"
      buttonID="2016"
      buttonLabel="2016"
      isRequired="true"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
      <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
      <listButton
      groupName="demo-1-checkbox"
      ariaLabelBy="vehicle-year"
      buttonID="2016"
      buttonLabel="2016"
      isRequired="true"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      hasError
      />
    </div>
  </div>
  <div class="row my-4">
    <div class="col">
      <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
    </div>
  </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
      role="radiogroup"
      aria-labelledby="demo-2-radio-group"
      class="col my-3 d-flex align-items-center flex-column"
      >
      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
      <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
      <listButton
      isMultiSelect
      groupName="demo-2"
      ariaLabelBy="vehicle-make"
      buttonID="Chevrolet"
      buttonLabel="Chevrolet"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      isMultiSelect
      groupName="demo-2"
      ariaLabelBy="vehicle-make"
      buttonID="Dodge"
      buttonLabel="Dodge"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      isMultiSelect
      groupName="demo-2"
      ariaLabelBy="vehicle-make"
      buttonID="Ford"
      buttonLabel="Ford"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
    </div>
  </div>
  <div class="row">
    <div class="col">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
      <div
      role="radiogroup"
      aria-labelledby="demo-2-checkbox-group"
      class="col my-3 d-flex align-items-center flex-column"
      >
      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
      <h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
      <listButton
      groupName="demo-2-checkbox"
      ariaLabelBy="vehicle-make"
      buttonID="Honda"
      buttonLabel="Honda"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-2-checkbox"
      ariaLabelBy="vehicle-make"
      buttonID="Acura"
      buttonLabel="Acura"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-2-checkbox"
      ariaLabelBy="vehicle-make"
      buttonID="Infiniti"
      buttonLabel="Infiniti"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-start"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
    </div>
  </div>
  </div>
  <div class="row my-4">
    <div class="col">
      <h4 class="m-0 p-2 bg-light rounded">
        List Button - Multi-Line Centered
      </h4>
      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
    </div>
  </div>
  <div class="row">
    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
    <div
    role="radiogroup"
    aria-labelledby="demo-3-radio-group"
    class="col my-3 d-flex align-items-center flex-column"
    >
    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
    <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
    <listButton
    isMultiSelect
    groupName="demo-3"
    ariaLabelBy="vehicle-model"
    buttonID="Corvette"
    buttonLabel="Corvette"
    buttonLabelSubCopy="Test sub-headline"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    screenReaderOnlyText=" opens new window"
    />
    <listButton
    isMultiSelect
    groupName="demo-3"
    ariaLabelBy="vehicle-model"
    buttonID="Testarosa"
    buttonLabel="Testarosa"
    buttonLabelSubCopy="Test sub-headline"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    screenReaderOnlyText=" opens new window"
    />
    <listButton
    isMultiSelect
    groupName="demo-3"
    ariaLabelBy="vehicle-model"
    buttonID="S600"
    buttonLabel="S600"
    buttonLabelSubCopy="Test sub-headline"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    screenReaderOnlyText=" opens new window"
    />
  </div>
  </div>
  <div class="row">
    <div class="col">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
      <div
      role="radiogroup"
      aria-labelledby="demo-3-checkbox-group"
      class="col my-3 d-flex align-items-center flex-column"
      >
      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
      <h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
      <listButton
      groupName="demo-3-checkbox"
      ariaLabelBy="vehicle-model"
      buttonID="Accord"
      buttonLabel="Accord"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-center"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-3-checkbox"
      ariaLabelBy="vehicle-model"
      buttonID="Civic"
      buttonLabel="Civic"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-center"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
      <listButton
      groupName="demo-3-checkbox"
      ariaLabelBy="vehicle-model"
      buttonID="Ridgeline"
      buttonLabel="Ridgeline"
      buttonLabelSubCopy="Test sub-headline"
      textPosition="text-center"
      loaderColor="blue"
      loaderPosition="right"
      screenReaderOnlyText=" opens new window"
      />
    </div>
  </div>
  </div>
  <div class="row my-4">
    <div class="col">
      <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
    </div>
  </div>
  <div class="row px-3">
    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
    <div
    role="radiogroup"
    aria-labelledby="demo-4-radio-group"
    class="d-flex flex-row p-0"
    >
    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4"
    ariaLabelBy="vehicle-model"
    buttonID="1"
    buttonLabel="1"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="1"
    screenReaderOnlyText=" opens new window"
    />
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4"
    ariaLabelBy="vehicle-model"
    buttonID="2"
    buttonLabel="2"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="2"
    screenReaderOnlyText=" opens new window"
    />
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4"
    ariaLabelBy="vehicle-model"
    buttonID="3"
    buttonLabel="3"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="3"
    screenReaderOnlyText=" opens new window"
    />
  </div>
  </div>
  <div class="row px-3">
    <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
    <small class="p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
    <div
    role="radiogroup"
    aria-labelledby="demo-4-radio-group"
    class="d-flex flex-row p-0"
    >
    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4b"
    ariaLabelBy="vehicle-model"
    buttonID="1b"
    buttonLabel="1"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="1"
    screenReaderOnlyText=" opens new window"
    hasError
    />
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4b"
    ariaLabelBy="vehicle-model"
    buttonID="2b"
    buttonLabel="2"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="2"
    screenReaderOnlyText=" opens new window"
    hasError
    />
    <listButtonHorizontal
    isMultiSelect
    groupName="demo-4b"
    ariaLabelBy="vehicle-model"
    buttonID="3b"
    buttonLabel="3"
    textPosition="text-center"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="3"
    screenReaderOnlyText=" opens new window"
    hasError
    />
  </div>
  </div>
  <div class="row px-3">
    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
    <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
    <div
    role="radiogroup"
    aria-labelledby="demo-4-checkbox-group"
    class="d-flex flex-row p-0"
    >
    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
    <listButtonHorizontal
    groupName="demo-4-checkbox"
    ariaLabelBy="vehicle-model"
    buttonID="4"
    buttonLabel="4"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="1"
    screenReaderOnlyText=" opens new window"
    />
    <listButtonHorizontal
    groupName="demo-4-checkbox"
    ariaLabelBy="vehicle-model"
    buttonID="5"
    buttonLabel="5"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="2"
    screenReaderOnlyText=" opens new window"
    />
    <listButtonHorizontal
    groupName="demo-4-checkbox"
    ariaLabelBy="vehicle-model"
    buttonID="6"
    buttonLabel="6"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="3"
    screenReaderOnlyText=" opens new window"
    />
  </div>
  </div>
  <div class="row px-3">
    <h6 class="mx-0 mt-4 mb-0 p-0 d-flex align-self-start">Radio Button with Error</h6>
    <small class="m-0 p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
    <div
    role="radiogroup"
    aria-labelledby="demo-4-checkbox-group"
    class="d-flex flex-row p-0"
    >
    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
    <listButtonHorizontal
    groupName="demo-4-checkboxc"
    ariaLabelBy="vehicle-model"
    buttonID="4c"
    buttonLabel="4"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="1"
    screenReaderOnlyText=" opens new window"
    hasError
    />
    <listButtonHorizontal
    groupName="demo-4-checkboxc"
    ariaLabelBy="vehicle-model"
    buttonID="5c"
    buttonLabel="5"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="2"
    screenReaderOnlyText=" opens new window"
    hasError
    />
    <listButtonHorizontal
    groupName="demo-4-checkboxc"
    ariaLabelBy="vehicle-model"
    buttonID="6c"
    buttonLabel="6"
    textPosition="text-center"
    loaderEnabled="true"
    loaderColor="blue"
    loaderPosition="right"
    v-bind:totalInGroup="3"
    v-bind:positionInGroup="3"
    screenReaderOnlyText=" opens new window"
    hasError
    />
  </div>
  </div>
  <div class="row my-4">
    <div class="col">
      <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <p>This is default body copy font size/weight</p>
      <p class="small">
        This is small body copy using <code>.small</code> class
      </p>
      <p>
        <small>This is also small using <code>&lt;small&gt;</code> tag</small>
      </p>
    </div>
  </div>
  <div class="row my-4">
    <div class="col">
      <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h1>h1 Heading</h1>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h2>h2 Heading</h2>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h3>h3 Heading</h3>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h4>h4 Heading</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h5>h5 Heading</h5>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <h6>h6 Heading</h6>
    </div>
  </div>
  </div>
  </template>

  <script>
  import buttonMain from "@/ux-components/button-main/button-main";
  import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
  import listCard from "@/ux-components/list-card/list-card";
  import listButton from "@/ux-components/list-button/list-button";
  import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
  import checkbox from "@/ux-components/checkbox/checkbox";
  import radio from "@/ux-components/radio/radio";
  import textLink from "@/ux-components/text-link/text-link";
  import textboxQuestion from "@/common-components/textbox-question/textbox-question";
  import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
  import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
  import menuModal from "@/common-components/funnel-header/menu-modal/menu-modal";
  export default {
    name: "App",
    components: {
      buttonMain,
      buttonBack,
      listCard,
      listButton,
      listButtonHorizontal,
      checkbox,
      radio,
      textLink,
      textboxQuestion,
      dropdownQuestion,
      vinInformation,
      menuModal,
    },
    data() {
      return {
        years: [2023, 2022, 2021, 2020],
        checkboxAnswers: [
          "Checkbox Answer 1",
          "Checkbox Answer 2",
          "Checkbox Answer 3",
        ],
        radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
        horizontalCheckboxAnswers: [
          "HCB Answer 1",
          "HCB Answer 2",
          "HCB Answer 3",
        ],
        horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
        listCardCheckBox: [
          {
            Name: "List-Card-CB",
            Text: "List Card CB",
            SubText: "checkbox",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listCardRadio: [
          {
            Name: "List-Card-R",
            Text: "List Card R",
            SubText: "Radio",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listCardCheckBoxHorizontalSubText: [
          {
            Name: "List-Card-CBHst",
            Text: "List Card CBHst",
            SubText: "With Subtext",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listCardCheckBoxHorizontal: [
          {
            Name: "List-Card-CBH",
            Text: "List Card CBH",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listRadioHorizontalSubText: [
          {
            Name: "List-Card-RHst",
            Text: "List Card RHst",
            SubText: "With Subtext",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listRadioHorizontal: [
          {
            Name: "List-Card-RH",
            Text: "List Card RH",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
        listCardGroup: [
          {
            Name: "Side-Window-1",
            Text: "Side Window",
            SubText: "With Subtext",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
          {
            Name: "Side-Window-2",
            Text: "Side Window",
            SubText: "With Subtext that is more than one line",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
          {
            Name: "Side-Window-3",
            Text: "Side Window",
            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
          },
        ],
      };
    },
  };
  </script>
