<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">Checkbox</h4>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <checkbox
          checkboxName="demo checkbox"
          buttonID="checkbox-1"
          tabIndex="1"
          checkboxLabel="I'm a checkbox"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
        <p class="m-0">Sample radio button group</p>
      </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!"
          modelValue="Model Value 1"
          screenReaderOnlyText="Model Value 1"
        />
      </div>
      <div class="col">
        <radio
          groupName="radio-demo-2"
          buttonLabel="I'm also a radio button!"
          buttonID="radio-button-b"
          isRequired
          value="I'm also a radio button!"
          modelValue="Model Value 2"
          screenReaderOnlyText="Model Value 2"
        />
      </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"
          sizeInRem="1"
        />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
      </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-2 my-0">Functioning as Checkbox in Column Layout</h6>
      </div>
    </div>
    <fieldset>
      <legend class="sr-only">Functioning as Checkbox</legend>
      <div class="row g-2">
        <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"
        />
        <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-1"
          buttonLabelSubCopy="Description with more than one line"
        />
        <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-1"
          buttonLabelSubCopy=""
        />
      </div>
    </fieldset>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
        <h6 class="mx-2 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"
            groupID="checkbox-demo-1"
            buttonLabelSubCopy="Description"
          />
        </fieldset>
      </div>
    </div>
    <div class="row g-2">
      <div class="col">
        <h6 class="mx-2 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 b"
            groupID="checkbox-demo-1a"
            buttonLabelSubCopy=""
          />
        </fieldset>
      </div>
    </div>
    <div class="row g-2">
      <div class="col">
        <h6 class="mx-2 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-2"
            buttonLabelSubCopy="Description"
          />
        </fieldset>
      </div>
    </div>
    <div class="row g-2">
      <div class="col">
        <h6 class="mx-2 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-2 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-2 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-2 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-2 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 my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
        <h6 class="mx-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </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-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </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-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <h6 class="mx-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </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-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <h6 class="mx-2 my-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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          screenReaderOnlyText=" opens new window"
        />
      </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-2 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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          v-bind:totalInGroup="3"
          v-bind:positionInGroup="3"
          screenReaderOnlyText=" opens new window"
        />
      </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-2 my-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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          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"
          sizeInRem="1"
          v-bind:totalInGroup="3"
          v-bind:positionInGroup="3"
          screenReaderOnlyText=" opens new window"
        />
      </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 class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-success"
          alertHeadline="Dismissible Alert"
          alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
          v-bind:isDismissible="true"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-danger"
          alertHeadline="NON-Dismissible Alert"
          alertCopy="This is an example of a NON-DISMISSIBLE alert."
          v-bind:isDismissible="false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-warning"
          alertHeadline="Warning Alert"
          alertCopy="This is an example of a WARNING alert."
          v-bind:isDismissible="false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-info"
          alertHeadline="Info Alert"
          alertCopy="This is an example of a INFO alert."
          v-bind:isDismissible="false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-danger"
          alertHeadline="Danger Alert"
          alertCopy="This is an example of a DANGER alert."
          v-bind:isDismissible="false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
          alertClass="alert-success"
          alertHeadline="No Body Copy Alert"
          alertCopy=""
          v-bind:isDismissible="false"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
        <funnelHeader
          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
        <vehicleBanner
        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
         :displayGenericVehicleImage=true
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <buttonQuestion
        :answers="checkboxAnswers"
        :isMultiSelect="true"
        ariaLabelBy="checkbox"
        groupName="checkbox-list"
        questionText="List Button as checkbox"
        />
        <buttonQuestion
        :answers="radioAnswers"
        ariaLabelBy="radio"
        groupName="radio-list"
        questionText="List Button as radio"
        />
        <buttonQuestion
        :answers="horizontalCheckboxAnswers"
        buttonType="listButtonHorizontal"
        :isMultiSelect="true"
        isColumn
        ariaLabelBy="checkbox"
        groupName="checkbox-list-horizontal"
        questionText="List Button Horizontal as checkbox"
        />
        <buttonQuestion
        :answers="horizontalRadioAnswers"
        buttonType="listButtonHorizontal"
        isColumn
        ariaLabelBy="radio"
        groupName="radio-list-horizontal"
        questionText="List Button Horizontal as radio"
        sizeInRem="1"
        />
        <buttonQuestion
        :answers="listCardCheckBox"
        buttonType="listCard"
        isMultiSelect
        ariaLabelBy="check_card"
        groupName="check-list-card"
        questionText="List Card as checkbox"
        />
        <buttonQuestion
        :answers="listCardRadio"
        buttonType="listCard"
        ariaLabelBy="radio_card"
        groupName="radio-card"
        questionText="List Card as radio"
        />
        <buttonQuestion
        isMultiSelect
        isWide
        :answers="listCardCheckBoxHorizontal"
        buttonType="listCard"
        ariaLabelBy="horizontal_check_card"
        groupName="horizontal_check-card"
        questionText="List Card Horizontal as checkbox"
        />
        <buttonQuestion
        isMultiSelect
        isWide
        :answers="listCardCheckBoxHorizontalSubText"
        buttonType="listCard"
        ariaLabelBy="horizontal_check_card-st"
        groupName="horizontal_check-card-st"
        questionText="With Subtext"
        />
        <buttonQuestion
        isWide
        :answers="listRadioHorizontal"
        buttonType="listCard"
        ariaLabelBy="horizontal_radio_card"
        groupName="horizontal_cradio-card"
        questionText="List Card Horizontal as radio"
        />
        <buttonQuestion
        isWide
        :answers="listRadioHorizontalSubText"
        buttonType="listCard"
        ariaLabelBy="horizontal_radio_card-st"
        groupName="horizontal_cradio-card-st"
        questionText="With Subtext"
        />
        <buttonQuestion
        isMultiSelect
        isRow
        :answers="listCardGroup"
        buttonType="listCard"
        ariaLabelBy="horizontal_radio_card-group"
        groupName="horizontal_cradio-card-group"
        questionText="In column layout"
        />
      </div>
    </div>
  </div>
</template>

<script>
import buttonMain from "@/ux-components/button-main/button-main";
import buttonBack from "@/common-components/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
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";
export default {
  name: "App",
  components: {
    buttonMain,
    buttonBack,
    listCard,
    listButton,
    alert,
    vehicleBanner,
    listButtonHorizontal,
    checkbox,
    radio,
    funnelHeader,
    textLink
  },
  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>
