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

Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

Browse source
This commit is contained in:
Adam Caouette 2021-11-23 15:28:31 -05:00
commit c002b39415
19 changed files with 498 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/assets/img/icons/spinner.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xml:space="preserve">
<path d="M24.01 48c-2.93 0-5.92-.52-8.85-1.58-6.25-2.25-11.33-7.33-13.58-13.57C-1.25 25-.25 16.76 4.34 10.22A24.05 24.05 0 0 1 24 0v2.26c-7.08 0-13.74 3.46-17.81 9.27-4.16 5.91-5.07 13.4-2.49 20.55 2.03 5.62 6.6 10.19 12.22 12.22 7.14 2.58 14.64 1.67 20.56-2.49A21.78 21.78 0 0 0 45.74 24H48c0 7.81-3.82 15.16-10.22 19.66A23.846 23.846 0 0 1 24.01 48z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 446 B

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

@ -1,6 +1,6 @@
<template> <template>
<div class="radio_question"> <div class="radio_question">
<div class="needed_car_info d-flex mt-4 mb-3"> <div class="needed_car_info mt-4 mb-3 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
}}</span> }}</span>
@ -31,4 +31,4 @@ export default {
radio, radio,
}, },
}; };
</script> </script>

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

@ -1,82 +1,230 @@
<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"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
/>
</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" /> loaderColor="blue"
</div> loaderPosition="right"
sizeInRem="1.5"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2020"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
/>
<radioList
groupName="demo"
ariaLabelBy="vehicle-year"
radioID="2019"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
/>
</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 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>
<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> <alert
<p class="small"> alertClass="alert-warning"
This is small body copy using <code>.small</code> class alertHeadline="Warning Alert"
</p> alertCopy="This is an example of a WARNING alert."
<p> v-bind:isDismissible = "false"
<small>This is also small using <code>&lt;small&gt;</code> tag</small> />
</p> </div>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h1>h1 Heading</h1> <alert
</div> alertClass="alert-info"
alertHeadline="Info Alert"
alertCopy="This is an example of a INFO alert."
v-bind:isDismissible = "false"
/>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h2>h2 Heading</h2> <alert
</div> alertClass="alert-danger"
alertHeadline="Danger Alert"
alertCopy="This is an example of a DANGER alert."
v-bind:isDismissible = "false"
/>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<h3>h3 Heading</h3> <alert
</div> alertClass="alert-success"
alertHeadline="No Body Copy Alert"
alertCopy=""
v-bind:isDismissible = "false"
/>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-4">
<div class="col"> <div class="col">
<h4>h4 Heading</h4> <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
</div> </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>
<div class="row my-3"> <div class="row my-3">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
@ -88,30 +236,32 @@
/> />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
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 radioCard from "@/ux-components/radio-card/radio-card"; import radioCard from "@/ux-components/radio-card/radio-card";
import listButton from "@/ux-components/list-button/list-button"; import listButton from "@/ux-components/list-button/list-button";
import radioList from "@/ux-components/radio-list/radio-list"; import radioList from "@/ux-components/radio-list/radio-list";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import alert from "@/ux-components/alert/alert";
export default { import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
export default {
name: "App", name: "App",
components: { components: {
buttonPrimary, buttonPrimary,
buttonSecondary, buttonSecondary,
radioCard, radioCard,
listButton, listButton,
radioList, radioList,
vehicleBanner alert,
vehicleBanner
}, },
data() { data() {
return { return {
years: [2023, 2022, 2021, 2020], years: [2023, 2022, 2021, 2020],
}; };
}, }
}; };
</script> </script>

28
src/layouts/loader-demo/loader-demo.vue Normal file
View file

@ -0,0 +1,28 @@
<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">Loader</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<loader
sizeInRem="10"
loaderColor="blue"
loaderPosition="center"
/>
</div>
</div>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "App",
components: {
loader
}
};
</script>

12
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -32,3 +32,15 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.select-car {
height: calc(100vh - 1rem);
.car_list {
// Height will be determined by overall height of content above list
height: calc(100% - 110px);
width: calc(100% - 1rem);
}
}
</style>

6
src/router/index.js
View file

@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
import { storeActions } from "@/constants/store-actions.js"; import { storeActions } from "@/constants/store-actions.js";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import ComponentTest from "@/layouts/component-test/component-test.vue"; import ComponentTest from "@/layouts/component-test/component-test.vue";
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
import NotFound from "@/layouts/not-found/not-found.vue"; import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store"; import store from "@/store";
@ -16,6 +17,11 @@ const routes = [
name: "ComponentTest", name: "ComponentTest",
component: ComponentTest, component: ComponentTest,
}, },
{
path: "/loader-demo", // This is a temporary route for testing.
name: "LoaderDemo",
component: LoaderDemo,
},
{ {
path: "/", path: "/",
beforeEnter(to, from, next) { beforeEnter(to, from, next) {

29
src/store/store.spec.js
View file

@ -1,4 +1,5 @@
import store from './index' import store from './index'
import globalMethods from '@/global-methods'
describe("Actions", () => { describe("Actions", () => {
it("Should return list of years retrieved", async () => { it("Should return list of years retrieved", async () => {
@ -6,9 +7,14 @@ describe("Actions", () => {
let years = []; let years = [];
// Act // Act
globalMethods.callHttpClient = jest.fn();
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: [2023,2022,2021]});
});
await store.dispatch('getVehicleYears') await store.dispatch('getVehicleYears')
.then( (response) => { .then( (response) => {
years = response.data; years = response.data;
console.log(response);
}); });
// Assert // Assert
@ -20,6 +26,9 @@ describe("Actions", () => {
let makes = []; let makes = [];
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: ['Baic','Honda','Ford']});
});
await store.dispatch('getVehicleMakes', {year: 2023}) await store.dispatch('getVehicleMakes', {year: 2023})
.then( (response) => { .then( (response) => {
makes = response.data; makes = response.data;
@ -34,6 +43,9 @@ describe("Actions", () => {
let models = []; let models = [];
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: ['BJ40 (MEX)','Civic','Accord']});
});
await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'}) await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'})
.then( (response) => { .then( (response) => {
models = response.data; models = response.data;
@ -48,6 +60,9 @@ describe("Actions", () => {
let styles = []; let styles = [];
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: ['4 DOOR UTILITY','2 DOOR']});
});
await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'}) await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'})
.then( (response) => { .then( (response) => {
styles = response.data; styles = response.data;
@ -62,13 +77,18 @@ describe("Actions", () => {
let routeInfo = []; let routeInfo = [];
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: {
Result: 'Route Info Data'
}});
});
await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' }) await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' })
.then( (response) => { .then( (response) => {
routeInfo = response.data.Result; routeInfo = response.data.Result;
}); });
// Assert // Assert
expect(routeInfo).toBe('{"vehicle-year":{"RelativeUrl":"/vehicle-year","LayoutName":"vehicle-year"}}'); expect(routeInfo).toBe('Route Info Data');
}); });
it("Should return page data from url retrieved", async () => { it("Should return page data from url retrieved", async () => {
@ -76,12 +96,17 @@ describe("Actions", () => {
let pageData = []; let pageData = [];
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: {
Result: 'Page Info Data'
}});
});
await store.dispatch('getPageData', { pageName: 'vehicle-year' }) await store.dispatch('getPageData', { pageName: 'vehicle-year' })
.then( (response) => { .then( (response) => {
pageData = response.data.Result; pageData = response.data.Result;
}); });
// Assert // Assert
expect(pageData[0].Type).toBe('PageConfigWidget'); expect(pageData).toBe('Page Info Data');
}); });
}) })

41
src/styles/common-component-styles/ymms-common-styles.scss
View file

@ -1,41 +0,0 @@
.select-car {
height: calc(100vh - 1rem);
.car_list {
// Height will be determined by overall height of content above list
height: calc(100% - 100px);
width: calc(100% - 1rem);
}
}
// Animations
.slide-enter-from {
opacity: 0;
transform: translateX(30vw);
}
.slide-enter-active, .slide-leave-active {
transition: all .4s;
}
.slide-leave-to {
opacity: 0;
transform: translateX(-30vw);
}
.slide_reverse-enter-from {
opacity: 0;
transform: translateX(-30vw);
}
.slide_reverse-enter-active, .slide_reverse-leave-active {
transition: all .4s;
}
.slide_reverse-leave-to {
opacity: 0;
transform: translateX(30vw);
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: all .5s ease;
}

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

@ -18,7 +18,7 @@
label { label {
position: relative; position: relative;
background: $white; background: $white;
height: 3rem; min-height: 3rem;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
@ -37,23 +37,8 @@
color: $danger; color: $danger;
} }
} }
&.button-loader { //Add spinner. Specify width and height
padding: 0 40px 0 12px; @include loader();
&:after {
content: url(../../assets/img/icons/button-spinner-blue.svg);
position: absolute;
right: 14px;
width: 16px;
height: 16px;
margin-left: 12px;
animation: rotation 1s infinite linear;
@keyframes rotation {
100% {
transform:rotate(360deg);
}
}
}
}
} }
} }
} }

7
src/styles/common-styles.scss
View file

@ -22,10 +22,3 @@ body {
cursor: pointer; cursor: pointer;
} }
} }
//Custom Mixins
//Blue gradient background mixin
@mixin blue-gradient {
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
}

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

@ -43,3 +43,15 @@ caption {
line-height: 1.7; line-height: 1.7;
font-weight: 400; font-weight: 400;
} }
// Font size
.fs-5 {
line-height: 2;
}
.fs-6 {
font-size: 1rem !important;
line-height: 1.4;
font-weight: 500;
}

69
src/styles/mixins/customMixins.scss Normal file
View file

@ -0,0 +1,69 @@
//Custom Mixins
//Blue gradient background mixin
@mixin blue-gradient {
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
}
//Spinner
//Choose color and position
@mixin loader() {
.loader {
display: flex;
//Open an overlay to prevent page interaction
&:before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
z-index: 9999;
cursor: default;
}
//Spinner basics
&:after {
content: '';
mask: url(../../assets/img/icons/spinner.svg);
mask-size: cover;
position: relative;
width: 100%;
height: 100%;
animation: rotation 1s infinite linear;
@keyframes rotation {
100% {
transform:rotate(360deg);
}
}
}
//Spinner position
&.center {
left: 0;
right: 0;
margin: 0 auto;
}
&.right {
margin: 0 0 0 auto;
}
&.left {
margin: 0 auto 0 0;
}
//Spinner color
&:after { //Default spinner color (blue) if no other color is specified from the options below
background-color: $blue;
}
&.red:after {
background-color: $red;
}
&.green:after {
background-color: $green;
}
&.white:after {
background-color: $white;
}
&.black:after {
background-color: $black;
}
}
}

8
src/ux-components/alert/alert.vue
View file

@ -51,6 +51,8 @@ export default {
} }
svg { svg {
fill: $blue-700; fill: $blue-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-danger { &.alert-danger {
@ -59,6 +61,8 @@ export default {
} }
svg { svg {
fill: $red-700; fill: $red-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-warning { &.alert-warning {
@ -67,6 +71,8 @@ export default {
} }
svg { svg {
fill: $yellow-700; fill: $yellow-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-success { &.alert-success {
@ -75,6 +81,8 @@ export default {
} }
svg { svg {
fill: $green-700; fill: $green-700;
width: 1rem;
height: 1rem;
} }
} }
} }

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

@ -1,36 +1,48 @@
<template> <template>
<div class="d-flex flex-column w-100"> <div class="d-flex flex-column w-100">
<button <button
class="btn list-button d-flex align-items-center" class="btn list-button d-flex align-items-center justify-content-between"
v-on:click="showLoader()" @click='displayComponent'
v-bind:class="[ v-bind:class="[
this.isLoading ? 'button-loader' : 'not-loading', this.isLoading ? 'button-loader' : 'not-loading',
this.isError ? 'error' : '', this.isError ? 'error' : '',
]" ]"
> >
{{ this.buttonText }} {{ this.buttonText }}
</button> <loader
<label class="small mt-1">{{ this.errorText }}</label> v-if="display"
</div> 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>
import loader from "@/ux-components/loader/loader";
export default { export default {
name: "listButton", name: "listButton",
props: { props: {
buttonText: String, buttonText: String,
errorText: String, errorText: String,
loaderColor: String,
loaderPosition: String,
sizeInRem: Number
}, },
data() { data() {
return { return {
isLoading: false, display: false,
isError: false, isError: false
}; };
}, },
methods: { methods: {
showLoader() { displayComponent() {
this.isLoading = true; this.display = true;
}, },
}, },
components: {
loader,
},
}; };
</script> </script>

1
src/ux-components/loader/loader.spec.js Normal file
View file

@ -0,0 +1 @@
test.todo("some test to be written in the future");

31
src/ux-components/loader/loader.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="loader"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
v-bind:class="[this.loaderColor, this.loaderPosition]"
></div>
</template>
<script>
export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
props: {
sizeInRem: {
type: Number,
default: 1
},
/* Color options: red, green, blue, white, black */
loaderColor: {
type: String
},
/* Position options: center, right, left (OPTIONAL) */
loaderPosition: {
type: String
}
},
}
</script>
<style lang="scss">
@include loader();
</style>

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

@ -1,28 +1,51 @@
<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"
<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="[ v-bind:id="radioID"
this.isLoading ? 'button-loader' : 'not-loading', v-bind:name="groupName"
this.isError ? 'error' : '', v-bind:value="radioID">
]">{{ radioID }}</label> <label role="radio" tabindex="0" aria-checked="false"
<p class="small">{{ errorMessage }}</p> v-bind:for="radioID"
class="mb-2 d-flex align-items-center justify-content-between p-2"
@click='displayComponent'
>{{radioID}}
<loader
v-if="display"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
</label>
<p class="small">{{errorMessage}}</p>
</div> </div>
</template> </template>
<script> <script>
import loader from "@/ux-components/loader/loader";
export default { export default {
name: "radioList", name: "radioList",
props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"], props: [
data() { "groupName",
return { "ariaLabelBy",
isLoading: false, "radioID",
isError: false, "errorMessage",
}; "loaderColor",
}, "loaderPosition",
methods: { "sizeInRem"
showLoader() {
this.isLoading = true; ],
}, data() {
return {
isError: false,
display: false
};
},
methods: {
displayComponent() {
this.display = true;
}, },
},
components: {
loader,
},
}; };
</script> </script>

2
vue.config.js
View file

@ -13,12 +13,12 @@ module.exports = {
@import "@/styles/ux-variables.scss"; @import "@/styles/ux-variables.scss";
@import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/mixins";
@import "@/styles/mixins/customMixins";
@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-radio-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
@import "@/styles/common-component-styles/ymms-common-styles.scss";
`, `,
}, },
}, },

2
vue.release.config.js
View file

@ -12,12 +12,12 @@ module.exports = {
@import "@/styles/ux-variables.scss"; @import "@/styles/ux-variables.scss";
@import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/mixins";
@import "@/styles/mixins/customMixins";
@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-radio-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
@import "@/styles/common-component-styles/ymms-common-styles.scss";
`, `,
}, },
}, },