jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated files and folders.

Browse source
This commit is contained in:
bmauger 2021-11-19 09:06:22 -05:00
parent d260d00fbd
commit 863d60ee89
4 changed files with 236 additions and 376 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

284
src/layouts/component-test/component-test.vue
View file

@ -1,112 +1,244 @@
<template> <template>
<div class="container-fluid container-shadow p-2 rounded-3"> <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">Radio Card</h4>
</div>
</div>
<div class="row g-2"> <div class="row g-2">
<radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" /> <radioCard
<radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" /> radioLabel="Windshield"
<radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" /> 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 my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonPrimary buttonText="Primary" /> <buttonPrimary
</div> buttonText="Primary"
/>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonSecondary buttonText="Secondary" /> <buttonSecondary
</div> buttonText="Secondary"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<listButton buttonText="List Button" errorText="Test error message" /> <listButton
</div> buttonText="List Button"
errorText="Test error message"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
</div>
</div> </div>
<div class="row"> <div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group --> <!-- 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"> <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. --> <!-- 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"> <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
Select Vehicle Year <radioList
</h3> groupName="demo"
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" /> ariaLabelBy="vehicle-year"
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" /> radioID="2021"
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" /> spinnerColor="blue"
</div> spinnerPosition="right"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2020"
spinnerColor="blue"
spinnerPosition="right"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2019"
spinnerColor="blue"
spinnerPosition="right"
/>
</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>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<a href="#">Text Link</a> <a href="#">Text Link</a>
</div> </div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<p>This is default body copy font size/weight</p> <p>This is default body copy font size/weight</p>
<p class="small"> <p class="small">This is small body copy using <code>.small</code> class</p>
This is small body copy using <code>.small</code> class <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
</p> </div>
<p> </div>
<small>This is also small using <code>&lt;small&gt;</code> tag</small> <div class="row my-4">
</p> <div class="col">
</div> <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h1>h1 Heading</h1> <h1>h1 Heading</h1>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h2>h2 Heading</h2> <h2>h2 Heading</h2>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h3>h3 Heading</h3> <h3>h3 Heading</h3>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h4>h4 Heading</h4> <h4>h4 Heading</h4>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h5>h5 Heading</h5> <h5>h5 Heading</h5>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h6>h6 Heading</h6> <h6>h6 Heading</h6>
</div> </div>
</div> </div>
<div class="my-3"> <div class="row my-4">
<div class="select-car"> <div class="col">
<div class="select-car-form"> <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
<radioQuestion questionText="What year is your vehicle?" :answers="this.years" /> </div>
</div>
</div>
</div> </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> </template>
<script> <script>
import buttonPrimary from "@/ux-components/button-primary/button-primary"; import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary"; import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
import radioCard from "@/ux-components/radio-card/radio-card"; import radioCard from "@/uxComponents/radioCard/radioCard";
import listButton from "@/ux-components/list-button/list-button"; import listButton from "@/uxComponents/listButton/listButton";
import radioList from "@/ux-components/radio-list/radio-list"; import radioList from "@/uxComponents/radioList/radioList";
export default { import alert from "@/uxComponents/alert/alert";
export default {
name: "App", name: "App",
components: { components: {
buttonPrimary, buttonPrimary,
buttonSecondary, buttonSecondary,
radioCard, radioCard,
listButton, listButton,
radioList, radioList,
alert
}, },
data() { data() {
return { return {
years: [2023, 2022, 2021, 2020], years: [2023, 2022, 2021, 2020],
}; };
}, }
}; };
</script> </script>

244
src/layouts/componentTest/componentTest.vue
View file

@ -1,244 +0,0 @@
<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">Radio Card</h4>
</div>
</div>
<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 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"
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonSecondary
buttonText="Secondary"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
</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 my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</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="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"
spinnerColor="blue"
spinnerPosition="right"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2020"
spinnerColor="blue"
spinnerPosition="right"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2019"
spinnerColor="blue"
spinnerPosition="right"
/>
</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>&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>
</template>
<script>
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
import radioCard from "@/uxComponents/radioCard/radioCard";
import listButton from "@/uxComponents/listButton/listButton";
import radioList from "@/uxComponents/radioList/radioList";
import alert from "@/uxComponents/alert/alert";
export default {
name: "App",
components: {
buttonPrimary,
buttonSecondary,
radioCard,
listButton,
radioList,
alert
},
data() {
return {
years: [2023, 2022, 2021, 2020],
};
}
};
</script>

48
src/ux-components/radio-list/radio-list.vue
View file

@ -1,28 +1,36 @@
<template> <template>
<div class="radiogroup radio-list-button d-flex flex-column w-100"> <div class="radiogroup radio-list-button d-flex flex-column w-100">
<input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID" /> <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
<label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2" v-on:click="showLoader()" v-bind:class="[ <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
this.isLoading ? 'button-loader' : 'not-loading', v-on:click="showLoader()"
this.isError ? 'error' : '', v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
]">{{ radioID }}</label> >{{radioID}}</label>
<p class="small">{{ errorMessage }}</p> <p class="small">{{errorMessage}}</p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "radioList", name: "radioList",
props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"], props: [
data() { "groupName",
return { "ariaLabelBy",
isLoading: false, "radioID",
isError: false, "errorMessage",
}; "spinnerColor",
}, "spinnerPosition"
methods: {
showLoader() { ],
this.isLoading = true; data() {
}, return {
isLoading: false,
isError: false
};
},
methods: {
showLoader() {
this.isLoading = true;
}, },
},
}; };
</script> </script>

36
src/uxComponents/radioList/radioList.vue
View file

@ -1,36 +0,0 @@
<template>
<div class="radiogroup radio-list-button d-flex flex-column w-100">
<input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
<label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
v-on:click="showLoader()"
v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
>{{radioID}}</label>
<p class="small">{{errorMessage}}</p>
</div>
</template>
<script>
export default {
name: "radioList",
props: [
"groupName",
"ariaLabelBy",
"radioID",
"errorMessage",
"spinnerColor",
"spinnerPosition"
],
data() {
return {
isLoading: false,
isError: false
};
},
methods: {
showLoader() {
this.isLoading = true;
},
},
};
</script>