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

Merge remote-tracking branch 'origin/develop' into feature/removing-non-mvp-fields

Browse source
This commit is contained in:
Mark Harris 2021-12-02 10:38:32 -05:00
commit f36e83c7ff
8 changed files with 35 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,7 +120,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Chevrolet"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
@ -130,7 +130,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Dodge"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
@ -140,7 +140,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Ford"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
@ -157,7 +157,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Corvette"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
@ -167,7 +167,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Testarosa"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
@ -177,7 +177,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="S600"
radioSubID="Test sub-headline"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"

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

@ -14,6 +14,9 @@
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;

4
src/styles/common-typography-styles.scss
View file

@ -34,7 +34,7 @@ h6,.h6 {
}
label {
line-height: 1.625;
line-height: 1.5;
font-weight: 400;
}
@ -54,4 +54,4 @@ caption {
font-size: 1rem !important;
line-height: 1.4;
font-weight: 500;
}
}

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

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

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

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

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

@ -8,7 +8,7 @@
this.isError ? 'error' : '',
]"
>
<p class="m-0">{{ this.buttonText }}</p>
<span class="m-0">{{ this.buttonText }}</span>
<loader
v-if="display"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"

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

@ -18,7 +18,7 @@ describe("radio.vue", () => {
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("p");
const paragraph = wrapper.find("span");
await label.trigger('click');

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

@ -1,24 +1,17 @@
<template>
<!-- See the component-test.vue page for example implementation -->
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- Example: -->
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
<!-- Example -->
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
<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 flex-column justify-content-center py-3 px-4"
@click='displayComponent'
><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`}"
:class="[this.loaderColor, this.loaderPosition]"
/>
<input type="radio" :id="radioID" :name="groupName" :value="radioID">
<label role="radio" tabindex="0" 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 class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
@ -29,14 +22,14 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "radioList",
props: [
"groupName",
"radioID",
"radioSubID",
"textPosition", /* Use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
"errorMessage",
"loaderColor",
"loaderPosition",
"sizeInRem"
"groupName", /* Required, unique for each radio button GROUP */
"radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
"radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
"textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
"errorMessage", /* Optional */
"loaderColor", /* Optional */
"loaderPosition", /* Optional */
"sizeInRem" /* Optional */
],
data() {
return {