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

Merge branch 'develop' into feature/CSR-121_button-click-function

Browse source
This commit is contained in:
Max 2021-12-01 14:57:39 -05:00
commit a74a61aa02
11 changed files with 130 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common-components/radio-question/radio-question.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="radio_question">
<div class="needed_car_info mt-4 mb-2 d-flex">
<div class="needed_car_info mt-5 mb-2 d-flex">
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
questionText
}}</span>
@ -8,7 +8,7 @@
<div class="w-100 d-flex justify-content-center">
<div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
<h3 class="visually-hidden" id="select-year-radio-group">*</h3>
<radio v-for="answer in answers" :key="answer" class="mb-2"
<radio v-for="answer in answers" :key="answer"
:radioID="answer"
@click="chooseAnswer(answer)"
loaderColor="blue"
@ -35,4 +35,4 @@ export default {
radio,
},
};
</script>
</script>

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

@ -38,7 +38,6 @@
<buttonPrimary
buttonText="Primary"
loaderColor="white"
loaderPosition="right"
sizeInRem="1"
/>
</div>
@ -48,7 +47,6 @@
<buttonSecondary
buttonText="Secondary"
loaderColor="white"
loaderPosition="right"
sizeInRem="1"
/>
</div>
@ -65,43 +63,125 @@
errorText="Test error message"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group - 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="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
<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="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
<h3 class="visually-hidden" id="demo-1-radio-group">Select Vehicle Year</h3>
<radio
groupName="demo"
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2021"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
<radio
groupName="demo"
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2020"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
<radio
groupName="demo"
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2019"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group - 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="visually-hidden" id="demo-2-radio-group">Select Vehicle Year</h3>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Chevrolet"
radioSubID="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Dodge"
radioSubID="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Ford"
radioSubID="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
</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="visually-hidden" id="demo-3-radio-group">Select Vehicle Year</h3>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Corvette"
radioSubID="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Testarosa"
radioSubID="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="S600"
radioSubID="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
</div>
</div>

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

@ -6,7 +6,6 @@
@include blue-gradient;
border: none;
border-radius: $border-radius-lg;
height: 48px;
color: $white;
transition: all 150ms linear;
&:hover {
@ -33,7 +32,6 @@
background: transparent;
border: 1px solid $blue;
border-radius: $border-radius-lg;
height: 48px;
color: $blue;
transition: all 150ms linear;
&:hover {
@ -58,7 +56,6 @@
&.list-button {
position: relative;
background: $white;
height: 48px;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;

1
src/styles/common-radio-styles.scss
View file

@ -18,7 +18,6 @@
label {
position: relative;
background: $white;
min-height: 3rem;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;

17
src/styles/ux-variables.scss
View file

@ -136,17 +136,18 @@ $border-radius-lg: .5rem;//Used for buttons. Can be used for other th
$border-radius-pill: 50rem;
//Spacing
// Seven spacers available instead of the usual 5
// 8 spacers available instead of the usual 5
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 2,
6: $spacer * 2.5,
7: $spacer * 3,
1: $spacer * .25, /* 4px */
2: $spacer * .5, /* 8px */
3: $spacer * .75, /* 12px */
4: $spacer * 1, /* 16px */
5: $spacer * 1.5, /* 24px */
6: $spacer * 2, /* 32px */
7: $spacer * 2.5, /* 40px */
8: $spacer * 3, /* 48px */
);
//Grid breakpoints

4
src/ux-components/button-primary/button-primary.vue
View file

@ -2,10 +2,10 @@
<button
:disabled="isDisabled"
:aria-disabled="isDisabled"
class="btn btn-primary d-flex align-items-center"
class="btn btn-primary d-flex align-items-center py-3 px-4"
@click='displayComponent'
>
{{ this.buttonText }}
<p class="m-0">{{ this.buttonText }}</p>
<loader
class="ms-2"
v-if="display"

4
src/ux-components/button-secondary/button-secondary.vue
View file

@ -2,10 +2,10 @@
<button
:disabled="isDisabled"
:aria-disabled="isDisabled"
class="btn btn-secondary d-flex align-items-center"
class="btn btn-secondary d-flex align-items-center py-3 px-4"
@click='displayComponent'
>
{{ this.buttonText }}
<p class="m-0">{{ this.buttonText }}</p>
<loader
class="ms-2"
v-if="display"

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

@ -1,14 +1,14 @@
<template>
<div class="d-flex flex-column w-100">
<button
class="btn list-button d-flex align-items-center justify-content-between"
class="btn list-button d-flex align-items-center justify-content-between py-3 px-4"
@click='displayComponent'
v-bind:class="[
this.isLoading ? 'button-loader' : 'not-loading',
this.isError ? 'error' : '',
]"
>
{{ this.buttonText }}
<p class="m-0">{{ this.buttonText }}</p>
<loader
v-if="display"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"

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

@ -8,7 +8,7 @@
<script>
export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: {
sizeInRem: {
type: Number,
@ -18,7 +18,7 @@ export default {
loaderColor: {
type: String
},
/* Position options: center, right, left (OPTIONAL) */
/* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
loaderPosition: {
type: String
}
@ -58,15 +58,16 @@ export default {
}
//Spinner position
&.center {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
right: 50%;
}
&.right {
margin: 0 0 0 auto;
position: absolute;
right: 1rem;
}
&.left {
margin: 0 auto 0 0;
position: absolute;
left: 1rem;
}
//Spinner color
&:after { //Default spinner color (blue) if no other color is specified from the options below

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

@ -33,13 +33,13 @@ describe("radio.vue", () => {
role: "radio",
tabindex: "0",
for: "2023",
class: "d-flex align-items-center justify-content-between p-2",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false"
});
expect(label.text()).toEqual('2023');
expect(paragraph.text()).toEqual('null');
expect(paragraph.text()).toEqual('2023');
expect(wrapper.vm.display).toBe(true);

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

@ -1,14 +1,19 @@
<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 mb-2">
<input type="radio"
:id="radioID"
:name="groupName"
:value="radioID">
<label role="radio" tabindex="0" aria-checked="false"
:for="radioID"
class="d-flex align-items-center justify-content-between p-2"
class="d-flex flex-column justify-content-center py-3 px-4"
@click='displayComponent'
>{{radioID}}
><p class="m-0"
:class="[this.textPosition]"
>{{radioID}}</p>
<p class="m-0 small"
:class="[this.textPosition]"
>{{radioSubID}}</p>
<loader
v-if="display"
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
@ -26,6 +31,8 @@ export default {
props: [
"groupName",
"radioID",
"radioSubID",
"textPosition", /* Use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
"errorMessage",
"loaderColor",
"loaderPosition",