Merge branch 'develop' into feature/CSR-270
This commit is contained in:
Max
commit
6534c5da19
15 changed files with 1011 additions and 1077 deletions
|
|
@ -16,6 +16,7 @@ module.exports = {
|
|||
"!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
|
||||
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
|
||||
"!src/layouts/address-poc/address-poc.vue",
|
||||
"!src/layouts/nested-radio-poc/nested-radio.vue",
|
||||
], //! means exclude from coverage.
|
||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition"
|
||||
:sizeInRem="sizeInRem"
|
||||
:isWide="isWide"
|
||||
:isRequired="isRequired"
|
||||
:buttonImage="answer.AnswerImageUrl"
|
||||
|
|
@ -74,10 +73,6 @@ export default {
|
|||
type: String,
|
||||
default: "right",
|
||||
},
|
||||
sizeInRem: {
|
||||
type: [String, Number],
|
||||
default: 1.5,
|
||||
},
|
||||
isRequired: Boolean,
|
||||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
isPrimary
|
||||
:buttonText="buttonText"
|
||||
loaderColor="white"
|
||||
sizeInRem="1"
|
||||
:class="isDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isDisabled"
|
||||
:isDisabled="isDisabled"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
27
src/layouts/nested-radio-poc/nested-radio.vue
Normal file
27
src/layouts/nested-radio-poc/nested-radio.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<h5>POC</h5>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
||||
export default {
|
||||
name: "nestedRadio",
|
||||
props: {
|
||||
groupName: String,
|
||||
buttonLabel: String,
|
||||
buttonID: String,
|
||||
isRequired: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
screenReaderOnlyText: String,
|
||||
hasError: Boolean,
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
|
@ -11,6 +11,7 @@ import store from "@/store";
|
|||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
|
||||
import FormTest from "@/layouts/form-test/form-test.vue";
|
||||
import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -33,6 +34,11 @@ const routes = [
|
|||
name: "FormTest",
|
||||
component: FormTest,
|
||||
},
|
||||
{
|
||||
path: "/nested-radio", // This is a temporary route for testing.
|
||||
name: "NestedRadio",
|
||||
component: NestedRadio,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
|
|||
|
|
@ -76,26 +76,4 @@ describe("buttonMain.vue", () => {
|
|||
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should return loader size in rem", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonMain, {
|
||||
propsData: {
|
||||
sizeInRem: 1,
|
||||
loaderEnabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.clicked();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("style")).toContain("1rem");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed"
|
||||
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
isDisabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isFloat: Boolean,
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -155,29 +155,6 @@ describe("list-button-horizontal.vue", () => {
|
|||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should return loader size in rem", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
sizeInRem: 1,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("style")).toContain("1rem");
|
||||
});
|
||||
|
||||
it("Should emit button value on click", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="checkValue"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange : ''"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
|
|
@ -39,7 +39,6 @@
|
|||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && !isMultiSelect"
|
||||
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
|
||||
:class="[loaderColor, loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
|
|
@ -64,7 +63,6 @@ export default {
|
|||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isRequired: Boolean,
|
||||
value: {
|
||||
// Field initial value
|
||||
|
|
@ -135,13 +133,16 @@ export default {
|
|||
height: 0;
|
||||
&:focus-visible + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
z-index: 3;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
z-index: 3;
|
||||
}
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
z-index: 2;
|
||||
}
|
||||
&:checked + label p:first-child {
|
||||
font-weight: 500;
|
||||
|
|
@ -158,7 +159,7 @@ export default {
|
|||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
z-index: 3 !important;
|
||||
}
|
||||
+ p {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -153,29 +153,6 @@ describe("list-button.vue", () => {
|
|||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should return loader size in rem", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
sizeInRem: 1,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("style")).toContain("1rem");
|
||||
});
|
||||
|
||||
it("Should emit button value on click", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="checkValue"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange : ''"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
|
||||
>
|
||||
<label
|
||||
tabindex="-1"
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && !isMultiSelect"
|
||||
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
||||
:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
|
|
@ -67,7 +66,6 @@ export default {
|
|||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number,String],
|
||||
value: {
|
||||
// Field initial value
|
||||
type: [String, Number],
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
:data-focus-target="groupName"
|
||||
@click="handleChange(value)"
|
||||
v-model="checkValue"
|
||||
@change="handleCheckChange"
|
||||
@change="handleCheckChange()"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
class="loader"
|
||||
role="alert"
|
||||
aria-label="Loading new page"
|
||||
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
></div>
|
||||
</template>
|
||||
|
|
@ -13,10 +12,6 @@ export default {
|
|||
name: "loader",
|
||||
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
|
||||
props: {
|
||||
sizeInRem: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/* Color options: red, green, blue, white, black */
|
||||
loaderColor: {
|
||||
type: String,
|
||||
|
|
@ -50,8 +45,8 @@ export default {
|
|||
mask: url(../../assets/img/icons/spinner.svg);
|
||||
mask-size: cover;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
animation: rotation 1s infinite linear;
|
||||
@keyframes rotation {
|
||||
100% {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
@change="handleCheckChanged"
|
||||
@change="handleCheckChanged()"
|
||||
/>
|
||||
<label class="d-flex align-items-center" :for="buttonID">
|
||||
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue