112 lines
3.9 KiB
Vue
112 lines
3.9 KiB
Vue
<template>
|
|
<div class="container-fluid container-shadow p-2 rounded-3">
|
|
<div class="row g-2">
|
|
<radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
|
|
<radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
|
|
<radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonPrimary buttonText="Primary" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonSecondary buttonText="Secondary" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<listButton buttonText="List Button" errorText="Test error message" />
|
|
</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="select-year-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="visually-hidden" id="select-year-radio-group">
|
|
Select Vehicle Year
|
|
</h3>
|
|
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
|
|
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
|
|
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
|
|
</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-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-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="my-3">
|
|
<div class="select-car">
|
|
<div class="select-car-form">
|
|
<radioQuestion questionText="What year is your vehicle?" :answers="this.years" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonPrimary from "@/ux-components/button-primary/button-primary";
|
|
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
|
|
import radioCard from "@/ux-components/radio-card/radio-card";
|
|
import listButton from "@/ux-components/list-button/list-button";
|
|
import radioList from "@/ux-components/radio-list/radio-list";
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
buttonPrimary,
|
|
buttonSecondary,
|
|
radioCard,
|
|
listButton,
|
|
radioList,
|
|
},
|
|
data() {
|
|
return {
|
|
years: [2023, 2022, 2021, 2020],
|
|
};
|
|
},
|
|
};
|
|
</script>
|