450 lines
13 KiB
Vue
450 lines
13 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">List Card</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row g-2">
|
|
<listCard
|
|
radioLabel="Windshield"
|
|
radioImage="windshield-damage.svg"
|
|
altText="Windshield"
|
|
groupName="damageKey"
|
|
radioID="windshield"
|
|
/>
|
|
<listCard
|
|
radioLabel="Side Window"
|
|
radioImage="side-window-damage.svg"
|
|
altText="Side Window"
|
|
groupName="damageKey"
|
|
radioID="sidewindow"
|
|
/>
|
|
<listCard
|
|
radioLabel="Back Glass"
|
|
radioImage="back-glass-damage.svg"
|
|
altText="Back Glass"
|
|
groupName="damageKey"
|
|
radioID="backglass"
|
|
/>
|
|
</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">
|
|
<buttonPrimary
|
|
buttonText="Primary"
|
|
loaderColor="white"
|
|
sizeInRem="1" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonSecondary
|
|
buttonText="Secondary"
|
|
loaderColor="white"
|
|
sizeInRem="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonBack/>
|
|
</div>
|
|
</div>
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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
|
|
groupName="demo-1"
|
|
ariaLabelBy="vehicle-year"
|
|
radioID="2021"
|
|
isRequired=true
|
|
textPosition="text-start"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-1"
|
|
ariaLabelBy="vehicle-year"
|
|
radioID="2020"
|
|
isRequired=true
|
|
textPosition="text-start"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-1"
|
|
ariaLabelBy="vehicle-year"
|
|
radioID="2019"
|
|
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>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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
|
|
groupName="demo-2"
|
|
ariaLabelBy="vehicle-make"
|
|
radioID="Chevrolet"
|
|
radioLabelSubCopy="Test sub-headline"
|
|
textPosition="text-start"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-2"
|
|
ariaLabelBy="vehicle-make"
|
|
radioID="Dodge"
|
|
radioLabelSubCopy="Test sub-headline"
|
|
textPosition="text-start"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-2"
|
|
ariaLabelBy="vehicle-make"
|
|
radioID="Ford"
|
|
radioLabelSubCopy="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>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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
|
|
groupName="demo-3"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="Corvette"
|
|
radioLabelSubCopy="Test sub-headline"
|
|
textPosition="text-center"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-3"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="Testarosa"
|
|
radioLabelSubCopy="Test sub-headline"
|
|
textPosition="text-center"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButton
|
|
groupName="demo-3"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="S600"
|
|
radioLabelSubCopy="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>
|
|
</div>
|
|
</div>
|
|
<div class="row px-3">
|
|
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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
|
|
groupName="demo-4"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="1"
|
|
radioLabelSubCopy=""
|
|
textPosition="text-center"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
v-bind:totalInGroup="3"
|
|
v-bind:positionInGroup="1"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButtonHorizontal
|
|
groupName="demo-4"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="2"
|
|
radioLabelSubCopy=""
|
|
textPosition="text-center"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1"
|
|
v-bind:totalInGroup="3"
|
|
v-bind:positionInGroup="2"
|
|
screenReaderOnlyText="(opens new window)"
|
|
/>
|
|
<listButtonHorizontal
|
|
groupName="demo-4"
|
|
ariaLabelBy="vehicle-model"
|
|
radioID="3"
|
|
radioLabelSubCopy=""
|
|
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 my-4">
|
|
<div class="col">
|
|
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<a href="#">Text Link</a>
|
|
</div>
|
|
</div>
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<h4 class="m-0 p-2 bg-light rounded">Typogrophy</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 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">
|
|
<siteHeader
|
|
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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonPrimary from "@/ux-components/button-primary/button-primary";
|
|
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
|
|
import buttonBack from "@/ux-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 siteHeader from "@/common-components/site-header/site-header";
|
|
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
buttonPrimary,
|
|
buttonSecondary,
|
|
buttonBack,
|
|
listCard,
|
|
listButton,
|
|
alert,
|
|
vehicleBanner,
|
|
listButtonHorizontal,
|
|
siteHeader,
|
|
},
|
|
data() {
|
|
return {
|
|
years: [2023, 2022, 2021, 2020],
|
|
};
|
|
},
|
|
};
|
|
</script>
|