114 lines
2.8 KiB
Vue
114 lines
2.8 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">
|
|
<listButton
|
|
buttonText="List Button"
|
|
/>
|
|
</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 "@/uxComponents/buttonPrimary/buttonPrimary";
|
|
import radioCard from "@/uxComponents/radioCard/radioCard";
|
|
import listButton from "@/uxComponents/listButton/listButton";
|
|
import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
buttonPrimary,
|
|
radioCard,
|
|
listButton,
|
|
radioQuestion
|
|
},
|
|
data() {
|
|
return {
|
|
years: [2023, 2022, 2021, 2020],
|
|
};
|
|
}
|
|
};
|
|
</script>
|