1246 lines
39 KiB
Vue
1246 lines
39 KiB
Vue
<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">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="Disabled"
|
|
inputID="test-text-input"
|
|
hasIcon
|
|
imgUrl="~@/assets/img/icons/spinner.svg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="my-4">With icon aligned right</h6>
|
|
<textboxQuestion
|
|
labelText="Text Input Label"
|
|
placeholderText="Disabled"
|
|
inputID="test-text-input"
|
|
hasIcon
|
|
iconRight
|
|
imgUrl="~@/assets/img/icons/spinner.svg"
|
|
/>
|
|
</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><small></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>
|
|
</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 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";
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
buttonMain,
|
|
buttonBack,
|
|
listCard,
|
|
listButton,
|
|
alert,
|
|
listButtonHorizontal,
|
|
checkbox,
|
|
radio,
|
|
textLink,
|
|
textboxQuestion,
|
|
dropdownQuestion,
|
|
},
|
|
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>
|