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

Merge remote-tracking branch 'origin/develop' into archived/apiRefactoring-encapsulated

Browse source
This commit is contained in:
Mark Harris 2021-12-14 17:23:33 -05:00
commit 34e203f2fc
18 changed files with 180 additions and 281 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common-components/radio-question/radio-question.spec.js → src/common-components/button-question/button-question.spec.js
View file

@ -1,10 +1,10 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import radioQuestion from "@/common-components/radio-question/radio-question"; import buttonQuestion from "@/common-components/button-question/button-question";
describe("radioQuestion.vue", () => { describe("buttonQuestion.vue", () => {
it("Should render the 'questionText' prop value as a span value for the radio question and the 'answer' values should render as text values for radio components.", async () => { it("Should render the 'questionText' prop value as a span value for the button question and the 'answer' values should render as text values for button components.", async () => {
// Act // Act
const wrapper = shallowMount(radioQuestion); const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({ await wrapper.setProps({
questionText: "Question Text", questionText: "Question Text",
answers: ["2023", "2022", "2021"], answers: ["2023", "2022", "2021"],
@ -16,8 +16,8 @@ describe("radioQuestion.vue", () => {
expect(wrapper.find(".needed_car_info-text").text()).toEqual( expect(wrapper.find(".needed_car_info-text").text()).toEqual(
"Question Text" "Question Text"
); );
const radioButtons = wrapper.findAllComponents('[data-test="radio"]'); const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
expect(radioButtons.length).toBe(3); expect(buttonButtons.length).toBe(3);
expect(wrapper.props().modelValue).toBe("2020"); expect(wrapper.props().modelValue).toBe("2020");
}); });
}); });

14
src/common-components/radio-question/radio-question.vue → src/common-components/button-question/button-question.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="radio_question"> <div class="button_question">
<div class="needed_car_info mt-6 mb-4 d-flex"> <div class="needed_car_info mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{ <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
questionText questionText
@ -8,13 +8,13 @@
<div class="w-100 d-flex justify-content-center"> <div class="w-100 d-flex justify-content-center">
<fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup"> <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
<legend class="sr-only">{{groupName}}</legend> <legend class="sr-only">{{groupName}}</legend>
<radio v-for="answer in answers" :key="answer" <listButton v-for="answer in answers" :key="answer"
:radioID="answer" :buttonID="answer"
@click="chooseAnswer(answer)" @click="chooseAnswer(answer)"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1.5" sizeInRem="1.5"
data-test="radio" data-test="button"
:groupName="groupName" :groupName="groupName"
textPosition="text-start" textPosition="text-start"
isRequired=true isRequired=true
@ -27,9 +27,9 @@
</template> </template>
<script> <script>
import radio from "@/ux-components/radio/radio"; import listButton from "@/ux-components/list-button/list-button";
export default { export default {
name: "radio-question", name: "buttonQuestion",
props: { props: {
questionText: String, questionText: String,
answers: Array, answers: Array,
@ -42,7 +42,7 @@ export default {
}, },
}, },
components: { components: {
radio, listButton,
}, },
}; };
</script> </script>

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

@ -2,30 +2,30 @@
<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="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Card</h4> <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
</div> </div>
</div> </div>
<div class="row g-2"> <div class="row g-2">
<radioCard <listCard
radioLabel="Windshield" buttonLabel="Windshield"
radioImage="windshield-damage.svg" buttonImage="windshield-damage.svg"
altText="Windshield" altText="Windshield"
groupName="damageKey" groupName="damageKey"
radioID="windshield" buttonID="windshield"
/> />
<radioCard <listCard
radioLabel="Side Window" buttonLabel="Side Window"
radioImage="side-window-damage.svg" buttonImage="side-window-damage.svg"
altText="Side Window" altText="Side Window"
groupName="damageKey" groupName="damageKey"
radioID="sidewindow" buttonID="sidewindow"
/> />
<radioCard <listCard
radioLabel="Back Glass" buttonLabel="Back Glass"
radioImage="back-glass-damage.svg" buttonImage="back-glass-damage.svg"
altText="Back Glass" altText="Back Glass"
groupName="damageKey" groupName="damageKey"
radioID="backglass" buttonID="backglass"
/> />
</div> </div>
<div class="row my-4"> <div class="row my-4">
@ -57,27 +57,11 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button</h4> <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<listButton
buttonText="List Button"
errorText="Test error message"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - 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 <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-1-radio-group" aria-labelledby="demo-1-radio-group"
@ -87,10 +71,10 @@
<h3 class="sr-only" id="demo-1-radio-group"> <h3 class="sr-only" id="demo-1-radio-group">
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radio <listButton
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2021" buttonID="2021"
isRequired=true isRequired=true
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
@ -98,10 +82,10 @@
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2020" buttonID="2020"
isRequired=true isRequired=true
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
@ -109,10 +93,10 @@
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2019" buttonID="2019"
isRequired=true isRequired=true
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
@ -124,11 +108,11 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4> <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
</div> </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 group -->
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-2-radio-group" aria-labelledby="demo-2-radio-group"
@ -138,33 +122,33 @@
<h3 class="sr-only" id="demo-2-radio-group"> <h3 class="sr-only" id="demo-2-radio-group">
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radio <listButton
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Chevrolet" buttonID="Chevrolet"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Dodge" buttonID="Dodge"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Ford" buttonID="Ford"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
@ -175,11 +159,11 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4> <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
</div> </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 group -->
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-3-radio-group" aria-labelledby="demo-3-radio-group"
@ -189,33 +173,33 @@
<h3 class="sr-only" id="demo-3-radio-group"> <h3 class="sr-only" id="demo-3-radio-group">
Multi-Line Centered Multi-Line Centered
</h3> </h3>
<radio <listButton
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="Corvette" buttonID="Corvette"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="Testarosa" buttonID="Testarosa"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radio <listButton
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="S600" buttonID="S600"
radioLabelSubCopy="Test sub-headline" buttonLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
@ -226,11 +210,11 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4> <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
</div> </div>
</div> </div>
<div class="row px-3"> <div class="row px-3">
<!-- 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 group -->
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-4-radio-group" aria-labelledby="demo-4-radio-group"
@ -240,11 +224,11 @@
<h3 class="sr-only" id="demo-4-radio-group"> <h3 class="sr-only" id="demo-4-radio-group">
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radioHorizontal <listButtonHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="1" buttonID="1"
radioLabelSubCopy="" buttonLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
@ -253,11 +237,11 @@
v-bind:positionInGroup="1" v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radioHorizontal <listButtonHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="2" buttonID="2"
radioLabelSubCopy="" buttonLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
@ -266,11 +250,11 @@
v-bind:positionInGroup="2" v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
/> />
<radioHorizontal <listButtonHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="3" buttonID="3"
radioLabelSubCopy="" buttonLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
@ -438,25 +422,23 @@
import buttonPrimary from "@/ux-components/button-primary/button-primary"; import buttonPrimary from "@/ux-components/button-primary/button-primary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary"; import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import buttonBack from "@/ux-components/button-back/button-back"; import buttonBack from "@/ux-components/button-back/button-back";
import radioCard from "@/ux-components/radio-card/radio-card"; import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button"; import listButton from "@/ux-components/list-button/list-button";
import radio from "@/ux-components/radio/radio";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import siteHeader from "@/common-components/site-header/site-header"; import siteHeader from "@/common-components/site-header/site-header";
import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
export default { export default {
name: "App", name: "App",
components: { components: {
buttonPrimary, buttonPrimary,
buttonSecondary, buttonSecondary,
buttonBack, buttonBack,
radioCard, listCard,
listButton, listButton,
radio,
alert, alert,
vehicleBanner, vehicleBanner,
radioHorizontal, listButtonHorizontal,
siteHeader, siteHeader,
}, },
data() { data() {

4
src/layouts/vehicle-year/year-question/year-question.spec.js
View file

@ -30,8 +30,8 @@ describe("year-question.vue", () => {
yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null); yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
//Assert //Assert
const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" }); const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
expect(radioQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?"); expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
}); });
}); });

7
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<radioQuestion class="radioQuestion" <buttonQuestion class="radioQuestion"
:questionText="questionText" :questionText="questionText"
:answers="years" :answers="years"
groupName="Choose Vehicle Year" groupName="Choose Vehicle Year"
@ -8,8 +8,7 @@
</template> </template>
<script> <script>
// Components import buttonQuestion from "@/common-components/button-question/button-question";
import radioQuestion from "@/common-components/radio-question/radio-question";
// Supporting files // Supporting files
import store from "@/store"; import store from "@/store";
import { storeActions } from "@/constants/store-actions.js"; import { storeActions } from "@/constants/store-actions.js";
@ -27,7 +26,7 @@ export default {
modelValue: String, modelValue: String,
}, },
components: { components: {
radioQuestion, buttonQuestion,
}, },
methods: { methods: {
loadInitialData() { loadInitialData() {

29
src/styles/common-button-styles.scss
View file

@ -53,33 +53,4 @@
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
} }
} }
&.list-button {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible { // Keyboard focus for accessibility
box-shadow: 0 0 0 2px $blue;
}
&:active {
background: $blue-100;
border: 1px solid $blue;
}
+ label {
display: none;
}
&.error {
border: 1px solid $danger;
~ label {
display: flex;
color: $danger;
}
}
}
} }

4
src/styles/common-radio-styles.scss → src/styles/common-list-styles.scss
View file

@ -1,5 +1,5 @@
.radiogroup { .list-group {
&.radio-list-button { &.list-button {
input[type="radio"] { input[type="radio"] {
opacity: 0; opacity: 0;
position: fixed; position: fixed;

10
src/ux-components/radio-horizontal/radio-horizontal.spec.js → src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -1,12 +1,12 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import radioHorizontal from "./radio-horizontal"; import listButtonHorizontal from "./list-button-horizontal";
describe("radio.vue", () => { describe("list-button.vue", () => {
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => { it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act // Act
const wrapper = shallowMount(radioHorizontal, { const wrapper = shallowMount(listButtonHorizontal, {
propsData: { propsData: {
radioID: "2023", buttonID: "2023",
groupName: "TestGroup", groupName: "TestGroup",
loaderColor: "blue", loaderColor: "blue",
loaderPosition: "right", loaderPosition: "right",

26
src/ux-components/radio-horizontal/radio-horizontal.vue → src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,11 +1,11 @@
<!-- See the component-test.vue page for example implementation --> <!-- See the component-test.vue page for example implementation -->
<template> <template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. --> <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
<div class="col radiogroup radio-horizontal d-flex flex-column mb-2"> <div class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/> <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'> <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span> <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span> <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" /> <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label> </label>
@ -16,19 +16,19 @@
<script> <script>
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
export default { export default {
name: "radioHorizontal", name: "listButtonHorizontal",
props: { props: {
groupName: String, /* Required, unique for each radio button GROUP */ groupName: String, /* Required, unique for each button GROUP */
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */ buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */ buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */ screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */ textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
errorMessage: String, /* Optional, if there is an error message to be displayed */ errorMessage: String, /* Optional, if there is an error message to be displayed */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */ loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */ loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */ sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */ totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */ positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
}, },
data() { data() {
return { return {
@ -58,7 +58,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.radio-horizontal { .list-button-horizontal {
input[type="radio"] { input[type="radio"] {
opacity: 0; opacity: 0;
position: fixed; position: fixed;

48
src/ux-components/list-button/list-button.spec.js
View file

@ -1 +1,47 @@
test.todo("some test to be written in the future"); import { shallowMount } from "@vue/test-utils";
import listButton from "./list-button";
describe("list-button.vue", () => {
it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
buttonID: "2023",
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
sizeInRem: "1.5",
errorMessage: "null",
},
});
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",
type: "radio",
value: "2023",
name: "TestGroup",
"aria-required": "false",
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false",
});
expect(label.text()).toEqual("2023");
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
});
});

53
src/ux-components/list-button/list-button.vue
View file

@ -1,27 +1,15 @@
<template> <template>
<div class="d-flex flex-column w-100"> <!-- See the component-test.vue page for example implementation -->
<button <div class="list-group list-button d-flex flex-column w-100 mb-2">
class=" <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayComponent()">
btn <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
list-button <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
d-flex <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
align-items-center <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
justify-content-between <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
py-3 </label>
px-4 <p class="small">{{errorMessage}}</p>
" </div>
@click="displayComponent"
v-bind:class="[this.isError ? 'error' : '']"
>
<span class="m-0">{{ this.buttonText }}</span>
<loader
v-if="display"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
</button>
<label class="small mt-1">{{ this.errorText }}</label>
</div>
</template> </template>
<script> <script>
@ -29,16 +17,21 @@ import loader from "@/ux-components/loader/loader";
export default { export default {
name: "listButton", name: "listButton",
props: { props: {
buttonText: String, groupName: String, /* Required, unique for each button GROUP */
errorText: String, buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
loaderColor: String, isRequired: Boolean, /* Optional, default is false */
loaderPosition: String, screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
sizeInRem: [Number, String], buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
errorMessage: String, /* Optional, if there is an error message to be displayed */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
}, },
data() { data() {
return { return {
display: false,
isError: false, isError: false,
display: false,
}; };
}, },
methods: { methods: {
@ -48,6 +41,6 @@ export default {
}, },
components: { components: {
loader, loader,
}, }
}; };
</script> </script>

0
src/ux-components/radio-card/radio-card.spec.js → src/ux-components/list-card/list-card.spec.js
View file

22
src/ux-components/radio-card/radio-card.vue → src/ux-components/list-card/list-card.vue
View file

@ -1,25 +1,25 @@
<template> <template>
<div class="col mb-3 d-flex radio-card"> <div class="col mb-3 d-flex list-card">
<input <input
type="radio" type="radio"
class="position-absolute opacity-0" class="position-absolute opacity-0"
:class="className" :class="className"
:id="radioID" :id="buttonID"
:name="groupName" :name="groupName"
:value="radioLabel" :value="buttonLabel"
v-model="picked" v-model="picked"
:tabindex="tabIndex" :tabindex="tabIndex"
/> />
<label <label
v-bind:for="radioID" v-bind:for="buttonID"
class="rounded-3 d-flex flex-column align-items-center w-100" class="rounded-3 d-flex flex-column align-items-center w-100"
> >
<img <img
class="px-3 pt-3 pb-2 mt-auto" class="px-3 pt-3 pb-2 mt-auto"
v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
v-bind:alt="altText" v-bind:alt="altText"
/> />
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span> <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
</label> </label>
</div> </div>
</template> </template>
@ -28,13 +28,13 @@
<script> <script>
export default { export default {
name: "radioCard", name: "listCard",
props: [ props: [
"groupName", "groupName",
"radioLabel", "buttonLabel",
"radioImage", "buttonImage",
"altText", "altText",
"radioID", "buttonID",
"tabIndex", "tabIndex",
"className", "className",
], ],
@ -46,7 +46,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.radio-card { .list-card {
input[type="radio"] { input[type="radio"] {
&:focus + label { &:focus + label {
background-color: $white; background-color: $white;

1
src/ux-components/loader/loader.vue
View file

@ -62,6 +62,7 @@ export default {
&.center { &.center {
position: absolute; position: absolute;
right: 50%; right: 50%;
transform: translateX(50%);
} }
&.right { &.right {
position: absolute; position: absolute;

47
src/ux-components/radio/radio.spec.js
View file

@ -1,47 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import radio from "./radio";
describe("radio.vue", () => {
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
radioID: "2023",
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
sizeInRem: "1.5",
errorMessage: "null",
},
});
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",
type: "radio",
value: "2023",
name: "TestGroup",
"aria-required": "false",
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false",
});
expect(label.text()).toEqual("2023");
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
});
});

46
src/ux-components/radio/radio.vue
View file

@ -1,46 +0,0 @@
<template>
<!-- See the component-test.vue page for example implementation -->
<div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
<input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
<span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "radioList",
props: {
groupName: String, /* Required, unique for each radio button GROUP */
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
isRequired: Boolean, /* Optional, default is false */
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
errorMessage: String, /* Optional, if there is an error message to be displayed */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
},
data() {
return {
isError: false,
display: false,
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
}
};
</script>

2
vue.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap"; @import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss"; @import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss"; @import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss"; @import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
`, `,
}, },

2
vue.release.config.js
View file

@ -16,7 +16,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap"; @import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss"; @import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss"; @import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss"; @import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
`, `,
}, },