Merge pull request #376 from Safelite/refactor/linting3
Linting changes to ux-compontents
This commit is contained in:
DavidAtSafelite
GitHub
commit
147b924bc4
19 changed files with 325 additions and 258 deletions
20
jsconfig.json
Normal file
20
jsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -6,8 +6,7 @@ import alert from './alert';
|
|||
describe('alert.vue', () => {
|
||||
it("Should add class 'alert-dismissible' if isDismissible is true", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
alert,
|
||||
const wrapper = shallowMount(alert,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isDismissible: true,
|
||||
|
|
@ -15,8 +14,7 @@ describe('alert.vue', () => {
|
|||
manualCopy: 'testCopy',
|
||||
cmsWidgetName: 'alert'
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
const wrapperDiv = wrapper.find('div');
|
||||
|
||||
|
|
@ -26,8 +24,7 @@ describe('alert.vue', () => {
|
|||
|
||||
it('Should add specified alert class', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
alert,
|
||||
const wrapper = shallowMount(alert,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
alertClass: 'warning',
|
||||
|
|
@ -35,8 +32,7 @@ describe('alert.vue', () => {
|
|||
manualCopy: 'testCopy',
|
||||
cmsWidgetName: 'alert'
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
const wrapperDiv = wrapper.find('div');
|
||||
|
||||
|
|
@ -54,24 +50,21 @@ describe('alert.vue', () => {
|
|||
|
||||
it('Should container a <router-link> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder', () => {
|
||||
// Arrange & Act
|
||||
const wrapper = shallowMount(
|
||||
alert,
|
||||
const wrapper = shallowMount(alert,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
manualHeadline: 'testHeader',
|
||||
manualCopy: 'testCopy with a {routerLink: testName, testLink} inside of it',
|
||||
cmsWidgetName: 'alert'
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
// Assert
|
||||
expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("Should contain 'n+1' <p> tags if the body copy has 'n' <p> tags", () => {
|
||||
// Arrange & Act
|
||||
const wrapper = shallowMount(
|
||||
alert,
|
||||
const wrapper = shallowMount(alert,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
manualHeadline: 'testHeader',
|
||||
|
|
@ -79,22 +72,19 @@ describe('alert.vue', () => {
|
|||
'<p>testCopy with a {routerLink: testName, testLink} inside of it</p><p>and two paragraphs</p>',
|
||||
cmsWidgetName: 'alert'
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
// Assert
|
||||
expect(wrapper.findAll('p').length === 3).toBe(true);
|
||||
});
|
||||
|
||||
it('Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (out of view top)', () => {
|
||||
// Arrange
|
||||
var viewPortHeight = 200;
|
||||
const viewPortHeight = 200;
|
||||
setUpViewPort(viewPortHeight);
|
||||
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => {
|
||||
return { top: -100, bottom: 200 };
|
||||
});
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: -100, bottom: 200 }));
|
||||
|
||||
var mockScrollIntoView = jest.fn();
|
||||
const mockScrollIntoView = jest.fn();
|
||||
Element.prototype.scrollIntoView = mockScrollIntoView;
|
||||
|
||||
// Act
|
||||
|
|
@ -109,14 +99,12 @@ describe('alert.vue', () => {
|
|||
|
||||
it('Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (bottom is hidden behind footer)', () => {
|
||||
// Arrange
|
||||
var viewPortHeight = 240;
|
||||
const viewPortHeight = 240;
|
||||
setUpViewPort(viewPortHeight);
|
||||
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => {
|
||||
return { top: 100, bottom: 200 };
|
||||
});
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: 100, bottom: 200 }));
|
||||
|
||||
var mockScrollIntoView = jest.fn();
|
||||
const mockScrollIntoView = jest.fn();
|
||||
Element.prototype.scrollIntoView = mockScrollIntoView;
|
||||
|
||||
// Act
|
||||
|
|
@ -131,19 +119,16 @@ describe('alert.vue', () => {
|
|||
|
||||
it("Should not call scrollIntoView() when the clientBoundingRect is not entirely in the viewport but 'shouldScrollToOnMount' is false", () => {
|
||||
// Arrange
|
||||
var viewPortHeight = 200;
|
||||
const viewPortHeight = 200;
|
||||
setUpViewPort(viewPortHeight);
|
||||
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => {
|
||||
return { top: -100, bottom: 200 };
|
||||
});
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: -100, bottom: 200 }));
|
||||
|
||||
var mockScrollIntoView = jest.fn();
|
||||
const mockScrollIntoView = jest.fn();
|
||||
Element.prototype.scrollIntoView = mockScrollIntoView;
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
alert,
|
||||
const wrapper = shallowMount(alert,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
shouldScrollToOnMount: false,
|
||||
|
|
@ -151,8 +136,7 @@ describe('alert.vue', () => {
|
|||
manualCopy: 'testCopy',
|
||||
cmsWidgetName: 'alert'
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Assert
|
||||
// This is an implementation detail - we just need to test that the final step of snapping
|
||||
|
|
@ -163,14 +147,12 @@ describe('alert.vue', () => {
|
|||
|
||||
it('Should not call scrollIntoView() when the clientBoundingRect is entirely in the viewport', () => {
|
||||
// Arrange
|
||||
var viewPortHeight = 500;
|
||||
const viewPortHeight = 500;
|
||||
setUpViewPort(viewPortHeight);
|
||||
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => {
|
||||
return { top: 100, bottom: 200 };
|
||||
});
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: 100, bottom: 200 }));
|
||||
|
||||
var mockScrollIntoView = jest.fn();
|
||||
const mockScrollIntoView = jest.fn();
|
||||
Element.prototype.scrollIntoView = mockScrollIntoView;
|
||||
|
||||
// Act
|
||||
|
|
@ -187,18 +169,20 @@ describe('alert.vue', () => {
|
|||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn(),
|
||||
getFooterInfoBoxHeight: jest.fn(() => 50),
|
||||
getFooterInfoBoxHeight: jest.fn(() => 50)
|
||||
},
|
||||
computed: {
|
||||
dynamicStrings: jest.fn(() => {
|
||||
return { ROUTER_LINK: 'routerLink:' };
|
||||
}),
|
||||
dynamicStrings: jest.fn(() => ({ ROUTER_LINK: 'routerLink:' })),
|
||||
cssClassNameForCmsWidget() {
|
||||
return 'widget-name-';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @param height
|
||||
*/
|
||||
function setUpViewPort(height) {
|
||||
Object.defineProperty(global.window, 'innerHeight', {
|
||||
writable: true,
|
||||
|
|
@ -213,6 +197,10 @@ function setUpViewPort(height) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param mountOptionsMockData
|
||||
*/
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = {
|
||||
propsData: {
|
||||
|
|
@ -222,9 +210,7 @@ function setupMocks(mountOptionsMockData = {}) {
|
|||
},
|
||||
mixins: [mockMixin]
|
||||
};
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
return allMountOptions;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,32 +4,47 @@
|
|||
role="alert"
|
||||
:class="[
|
||||
isDismissible ? 'alert-dismissible' : '',
|
||||
this.alertClass,
|
||||
this.cssClassNameForCmsWidget,
|
||||
alertClass,
|
||||
cssClassNameForCmsWidget,
|
||||
]">
|
||||
<p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
|
||||
<template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
|
||||
<p class="m-0 fw-bold alert-heading">
|
||||
{{ alertHeadline }}
|
||||
</p>
|
||||
<template
|
||||
v-for="paragraph in splitAlertCopyForParagraphTag"
|
||||
:key="paragraph">
|
||||
<p
|
||||
class="m-0 text-body small"
|
||||
v-if="!doesCopyContainRouterLink(paragraph)"
|
||||
class="m-0 text-body small"
|
||||
v-html="paragraph"></p>
|
||||
<p class="m-0 text-body small" v-else>
|
||||
<template v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
|
||||
<span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
|
||||
<p
|
||||
v-else
|
||||
class="m-0 text-body small">
|
||||
<template
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)"
|
||||
:key="copy">
|
||||
<span
|
||||
v-if="!doesCopyContainRouterLink(copy)"
|
||||
v-html="copy"></span>
|
||||
<span v-else>
|
||||
<router-link
|
||||
:to="{
|
||||
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
|
||||
name: 'root',
|
||||
}"
|
||||
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
|
||||
>
|
||||
}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
|
||||
</span>
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
<button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close p-2"
|
||||
data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 23.7 23.7"
|
||||
xml:space="preserve">
|
||||
<path
|
||||
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
|
||||
</svg>
|
||||
|
|
@ -93,14 +108,17 @@ export default {
|
|||
return splitCMSCopyOnParagraphTag(this.alertCopy);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.ensureAlertIsInViewPort();
|
||||
},
|
||||
methods: {
|
||||
doesCopyContainRouterLink,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
getRouterLinkRouteFromCopy,
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
ensureAlertIsInViewPort() {
|
||||
if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
|
||||
var footerHeight = this.getFooterInfoBoxHeight();
|
||||
if (this.shouldScrollToOnMount && this.$el.style.display !== 'none') {
|
||||
const footerHeight = this.getFooterInfoBoxHeight();
|
||||
if (!this.isAlertInViewport(footerHeight)) {
|
||||
this.$el.scrollIntoView(true); // 'true' attempts to scroll element to top of viewport
|
||||
}
|
||||
|
|
@ -109,21 +127,18 @@ export default {
|
|||
isAlertInViewport(footerHeight) {
|
||||
const rect = this.$el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top >= 0 &&
|
||||
rect.top >= 0
|
||||
// remove footerHeight from window height to avoid items being hidden behind footer
|
||||
rect.bottom <=
|
||||
(window.innerHeight - footerHeight ||
|
||||
document.documentElement.clientHeight - footerHeight)
|
||||
&& rect.bottom
|
||||
<= (window.innerHeight - footerHeight
|
||||
|| document.documentElement.clientHeight - footerHeight)
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.ensureAlertIsInViewPort();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.alert {
|
||||
button {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import buttonMain from './button-main';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import { nextTick } from 'vue';
|
||||
import buttonMain from './button-main';
|
||||
|
||||
describe('buttonMain.vue', () => {
|
||||
it('Should return btn-primary class', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
const wrapper = shallowMount(buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isPrimary: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Assert
|
||||
const button = wrapper.find('button');
|
||||
|
|
@ -24,14 +22,12 @@ describe('buttonMain.vue', () => {
|
|||
|
||||
it('Should return aria-disabled state', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
const wrapper = shallowMount(buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isDisabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Assert
|
||||
const button = wrapper.find('button');
|
||||
|
|
@ -42,15 +38,13 @@ describe('buttonMain.vue', () => {
|
|||
|
||||
it('Should return loader color', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
const wrapper = shallowMount(buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderColor: 'blue',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Assert
|
||||
|
||||
|
|
@ -67,15 +61,13 @@ describe('buttonMain.vue', () => {
|
|||
|
||||
it('Should return loader position', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
const wrapper = shallowMount(buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Assert
|
||||
|
||||
|
|
@ -91,11 +83,13 @@ describe('buttonMain.vue', () => {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param mountOptionsMockData
|
||||
*/
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
|
||||
return allMountOptions;
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
isLoaderDisplayed ? 'has-loader' : '',
|
||||
]"
|
||||
@click="clicked">
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<span class="m-0">{{ buttonText }}</span>
|
||||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed && !suppressLoader"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||
class="ms-2"
|
||||
:class="[loaderColor, loaderPosition]" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -20,7 +20,10 @@
|
|||
import loader from '@/ux-components/loader/loader';
|
||||
|
||||
export default {
|
||||
name: 'buttonMain',
|
||||
name: 'button-main',
|
||||
components: {
|
||||
loader
|
||||
},
|
||||
props: {
|
||||
isPrimary: Boolean,
|
||||
buttonText: String,
|
||||
|
|
@ -30,6 +33,7 @@ export default {
|
|||
isFloat: Boolean,
|
||||
suppressLoader: Boolean
|
||||
},
|
||||
emits: ['click-event'],
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false
|
||||
|
|
@ -48,14 +52,11 @@ export default {
|
|||
resetButtonStyle() {
|
||||
this.isLoaderDisplayed = false;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.btn {
|
||||
&.btn-primary {
|
||||
position: relative;
|
||||
|
|
@ -90,7 +91,7 @@ export default {
|
|||
&.has-loader {
|
||||
color: $white;
|
||||
background: $blue-700;
|
||||
|
||||
|
||||
}
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import checkbox from './checkbox';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
describe('checkbox.vue', () => {
|
||||
it('Should return checkbox name', async () => {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
<template>
|
||||
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
|
||||
<div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
|
||||
<div
|
||||
class="form-check ui-checkbox"
|
||||
:class="[hasError ? 'has-error' : '']">
|
||||
<input
|
||||
:id="buttonID"
|
||||
:ref="checkboxName"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
aria-checked="false"
|
||||
:name="checkboxName"
|
||||
:id="buttonID"
|
||||
:tabindex="tabIndex"
|
||||
:aria-required="isRequired"
|
||||
:checked="isChecked"
|
||||
@change="handleCheckChange"
|
||||
:ref="checkboxName" />
|
||||
<label class="d-flex align-items-start" :for="buttonID">
|
||||
<p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
@change="handleCheckChange" />
|
||||
<label
|
||||
class="d-flex align-items-start"
|
||||
:for="buttonID">
|
||||
<p
|
||||
v-if="checkboxLabel"
|
||||
class="m-0"
|
||||
v-html="checkboxLabel"></p>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,6 +44,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
handleCheckChange() {
|
||||
this.$emit('update:modelValue', this.$refs[this.checkboxName].checked);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import listButtonHorizontal from './list-button-horizontal';
|
||||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
import listButtonHorizontal from './list-button-horizontal';
|
||||
|
||||
describe('list-button-horizontal.vue', () => {
|
||||
describe('styling/UI', () => {
|
||||
|
|
@ -123,6 +123,11 @@ describe('list-button-horizontal.vue', () => {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param root0
|
||||
* @param root0.mockData
|
||||
*/
|
||||
function setupMocks({ mockData }) {
|
||||
const wrapper = mount(listButtonHorizontal, {
|
||||
...mockData,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
<template>
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
:buttonWrapperClasses="[
|
||||
'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
|
||||
{ strong: isStrongStyling },
|
||||
]"
|
||||
v-model="selectedValue">
|
||||
]">
|
||||
<div
|
||||
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
|
||||
<span class="m-0" :class="textPosition">
|
||||
<span
|
||||
class="m-0"
|
||||
:class="textPosition">
|
||||
{{ buttonLabel }}
|
||||
</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
||||
<span
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="m-0 small"
|
||||
:class="textPosition">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -26,20 +33,20 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
|
|||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
|
||||
export default {
|
||||
name: 'listButtonHorizontal',
|
||||
name: 'list-button-horizontal',
|
||||
components: {
|
||||
baseInputButton
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
computed: {
|
||||
isStrongStyling() {
|
||||
return this.additionalButtonStyling === 'listButtonHorizontalStrong';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseInputButton
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.list-button-horizontal {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import listButton from './list-button';
|
||||
import { GaActions } from '@/constants/analytics';
|
||||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
import listButton from './list-button';
|
||||
|
||||
describe('list-button.vue', () => {
|
||||
describe('loader', () => {
|
||||
|
|
@ -12,7 +12,7 @@ describe('list-button.vue', () => {
|
|||
global: {
|
||||
mocks: {
|
||||
$route: { query: { issPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
GaActions,
|
||||
pushEventToGA: jest.fn()
|
||||
}
|
||||
},
|
||||
|
|
@ -38,7 +38,7 @@ describe('list-button.vue', () => {
|
|||
global: {
|
||||
mocks: {
|
||||
$route: { query: { issPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
GaActions,
|
||||
pushEventToGA: jest.fn()
|
||||
}
|
||||
},
|
||||
|
|
@ -65,7 +65,7 @@ describe('list-button.vue', () => {
|
|||
global: {
|
||||
mocks: {
|
||||
$route: { query: { issPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
GaActions,
|
||||
pushEventToGA: jest.fn()
|
||||
}
|
||||
},
|
||||
|
|
@ -294,6 +294,11 @@ describe('list-button.vue', () => {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param root0
|
||||
* @param root0.mockData
|
||||
*/
|
||||
function setupMocks({ mockData }) {
|
||||
const wrapper = mount(listButton, {
|
||||
...mockData,
|
||||
|
|
|
|||
|
|
@ -1,23 +1,30 @@
|
|||
<template>
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||
v-model="selectedValue">
|
||||
v-model="selectedValue"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
<span class="m-0" :class="textPosition">
|
||||
<span
|
||||
class="m-0"
|
||||
:class="textPosition">
|
||||
{{ buttonLabel }}
|
||||
</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
||||
<span
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="m-0 small"
|
||||
:class="textPosition">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && selectingInitiatesLoad"
|
||||
:class="[this.loaderColor, this.loaderPosition]" />
|
||||
:class="[loaderColor, loaderPosition]" />
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
|
@ -28,7 +35,11 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
|
|||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
|
||||
export default {
|
||||
name: 'listButton',
|
||||
name: 'list-button',
|
||||
components: {
|
||||
loader,
|
||||
baseInputButton
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
props: {
|
||||
loaderColor: String,
|
||||
|
|
@ -51,10 +62,6 @@ export default {
|
|||
this.displayLoader();
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
baseInputButton
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import listCard from './list-card';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
describe('list-card.vue', () => {
|
||||
it('Should return input type checkbox if isMultiSelect is true', () => {
|
||||
|
|
@ -121,7 +120,7 @@ describe('list-card.vue', () => {
|
|||
// Assert
|
||||
const label = wrapper.find('.list-card-content');
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
const { labelClasses } = wrapper.vm;
|
||||
expect(labelClasses).toContain('flex-row');
|
||||
expect(label.classes()).toContain('flex-row');
|
||||
});
|
||||
|
|
@ -146,7 +145,7 @@ describe('list-card.vue', () => {
|
|||
// Assert
|
||||
const label = wrapper.find('.list-card-content');
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
const { labelClasses } = wrapper.vm;
|
||||
expect(labelClasses).toContain('flex-row');
|
||||
expect(label.classes()).toContain('flex-row');
|
||||
expect(labelClasses).toContain('checkboxTop');
|
||||
|
|
@ -172,7 +171,7 @@ describe('list-card.vue', () => {
|
|||
// Assert
|
||||
const label = wrapper.find('.list-card-content');
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
const { labelClasses } = wrapper.vm;
|
||||
expect(labelClasses).toContain('flex-column');
|
||||
expect(label.classes()).toContain('flex-column');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
:buttonWrapperClasses="[
|
||||
'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
|
||||
{ horizontal: isWide },
|
||||
]"
|
||||
v-model="selectedValue">
|
||||
]">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
|
||||
:class="labelClasses">
|
||||
|
|
@ -14,15 +14,26 @@
|
|||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText" />
|
||||
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
|
||||
{{ buttonLabel }}
|
||||
</p>
|
||||
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
|
||||
<p
|
||||
v-if="buttonLabelSubCopy && !isWide"
|
||||
class="fs-7 m-0 order-4 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
<div
|
||||
v-if="isWide"
|
||||
class="order-2">
|
||||
<p class="m-0 small">
|
||||
{{ buttonLabel }}
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -35,11 +46,11 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
|
|||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
|
||||
export default {
|
||||
name: 'listCard',
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
name: 'list-card',
|
||||
components: {
|
||||
baseInputButton
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
computed: {
|
||||
labelClasses() {
|
||||
if (this.isWide) {
|
||||
|
|
@ -48,15 +59,14 @@ export default {
|
|||
classes += ' checkboxTop';
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return 'flex-column pt-4 pb-3';
|
||||
}
|
||||
return 'flex-column pt-4 pb-3';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@mixin list-card-focus($box-shadow-color) {
|
||||
&:focus-visible + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $box-shadow-color;
|
||||
|
|
@ -81,7 +91,8 @@ export default {
|
|||
}
|
||||
|
||||
img {
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure
|
||||
// they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 2.2rem;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
class="loader"
|
||||
role="alert"
|
||||
aria-label="Loading new page"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
|
||||
:class="[loaderColor, loaderPosition]"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.loader {
|
||||
display: flex;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import modalButtonMain from './modal-button-main';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import { nextTick } from 'vue';
|
||||
import modalButtonMain from './modal-button-main';
|
||||
|
||||
describe('modal-button-main.vue', () => {
|
||||
it('Should return btn-primary class', () => {
|
||||
// Arrange/Act
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isPrimary: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
const button = wrapper.find('button');
|
||||
|
||||
// Assert
|
||||
|
|
@ -22,14 +20,12 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it('Should return aria-disabled state', () => {
|
||||
// Arrange/Act
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isDisabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
const button = wrapper.find('button');
|
||||
|
||||
// Assert
|
||||
|
|
@ -38,15 +34,13 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it('Should return loader color', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderColor: 'blue',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
|
|
@ -60,15 +54,13 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it('Should return loader position', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
|
|
@ -81,15 +73,13 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
wrapper.setData({
|
||||
isLoaderDisplayed: true
|
||||
|
|
@ -106,15 +96,13 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
wrapper.setData({
|
||||
isLoaderDisplayed: true
|
||||
|
|
@ -130,16 +118,14 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true,
|
||||
isDisabled: false
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
const buttonElement = wrapper.find('button');
|
||||
|
||||
|
|
@ -154,16 +140,14 @@ describe('modal-button-main.vue', () => {
|
|||
|
||||
it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
const wrapper = shallowMount(modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: 'right',
|
||||
loaderEnabled: true,
|
||||
isDisabled: true
|
||||
}
|
||||
})
|
||||
);
|
||||
}));
|
||||
|
||||
const buttonElement = wrapper.find('button');
|
||||
|
||||
|
|
@ -177,11 +161,13 @@ describe('modal-button-main.vue', () => {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param mountOptionsMockData
|
||||
*/
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
|
||||
return allMountOptions;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
isLoaderDisplayed ? 'has-loader' : '',
|
||||
]"
|
||||
@click="clicked">
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<span class="m-0">{{ buttonText }}</span>
|
||||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed && !suppressLoader"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||
class="ms-2"
|
||||
:class="[loaderColor, loaderPosition]" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,7 +21,10 @@
|
|||
import loader from '@/ux-components/loader/loader';
|
||||
|
||||
export default {
|
||||
name: 'modalButtonMain',
|
||||
name: 'modal-button-main',
|
||||
components: {
|
||||
loader
|
||||
},
|
||||
props: {
|
||||
isPrimary: Boolean,
|
||||
buttonText: String,
|
||||
|
|
@ -31,6 +34,7 @@ export default {
|
|||
isFloat: Boolean,
|
||||
suppressLoader: Boolean
|
||||
},
|
||||
emits: ['click-event'],
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false
|
||||
|
|
@ -41,12 +45,10 @@ export default {
|
|||
this.isLoaderDisplayed = false;
|
||||
},
|
||||
clicked() {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
this.pushEventToGA(this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.buttonText,
|
||||
true
|
||||
);
|
||||
true);
|
||||
if (!this.isDisabled) {
|
||||
this.isLoaderDisplayed = true;
|
||||
this.$emit('click-event');
|
||||
|
|
@ -55,14 +57,11 @@ export default {
|
|||
resetButtonStyle() {
|
||||
this.isLoaderDisplayed = false;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.btn {
|
||||
&.btn-primary {
|
||||
position: relative;
|
||||
|
|
@ -97,7 +96,7 @@ export default {
|
|||
}
|
||||
&.has-loader {
|
||||
color: $white;
|
||||
background: $blue-700;
|
||||
background: $blue-700;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.delay {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ describe('radio.vue', () => {
|
|||
const wrapper = shallowMount(radio, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
$route: { query: { issPage: 'page-name' } }
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
|
|
@ -81,7 +81,8 @@ describe('radio.vue', () => {
|
|||
});
|
||||
wrapper.vm.handleCheckChange();
|
||||
// Assert
|
||||
expect(wrapper.emitted()['isCheckedChanged'][0]).toEqual([{'buttonID': 'List Card Checkbox', value: 'List Card Checkbox', checkValue: false}]);;
|
||||
expect(wrapper.emitted().isCheckedChanged[0])
|
||||
.toEqual([{ buttonID: 'List Card Checkbox', value: 'List Card Checkbox', checkValue: false }]);
|
||||
});
|
||||
|
||||
it('Should set checkValue data if selectedButtonIDs has value(s)', async () => {
|
||||
|
|
@ -89,7 +90,7 @@ describe('radio.vue', () => {
|
|||
const wrapper = shallowMount(radio, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
$route: { query: { issPage: 'page-name' } }
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,31 @@
|
|||
<template>
|
||||
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
|
||||
<div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
|
||||
<label class="d-inline-flex align-items-start form-check-label" :for="buttonID">
|
||||
<div
|
||||
class="ui-radio form-check"
|
||||
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
|
||||
<label
|
||||
class="d-inline-flex align-items-start form-check-label"
|
||||
:for="buttonID">
|
||||
<input
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
aria-checked="false"
|
||||
:name="groupName"
|
||||
:id="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
@change="handleCheckChange"
|
||||
:checked="checkValue"
|
||||
:validationRules="validationRules"
|
||||
/>
|
||||
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{
|
||||
screenReaderOnlyText
|
||||
}}</span>
|
||||
:id="buttonID"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
aria-checked="false"
|
||||
:name="groupName"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
:validationRules="validationRules"
|
||||
@change="handleCheckChange" />
|
||||
<p
|
||||
v-if="buttonLabel"
|
||||
class="m-0">{{ buttonLabel }}</p>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,6 +50,24 @@ export default {
|
|||
validationRules: String,
|
||||
valueToLogType: String
|
||||
},
|
||||
emits: ['isCheckedChanged', 'update:modelValue'],
|
||||
setup(props) {
|
||||
const inputType = 'radio';
|
||||
const {
|
||||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
} = useField(props.groupName, props.validationRules, {
|
||||
type: inputType
|
||||
});
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkValue: Boolean
|
||||
|
|
@ -56,6 +81,9 @@ export default {
|
|||
this.checkValue = false;
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.resetField();
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange() {
|
||||
this.handleChange(this.value);
|
||||
|
|
@ -68,27 +96,6 @@ export default {
|
|||
this.$emit('isCheckedChanged', emitEvent);
|
||||
this.$emit('update:modelValue', emitEvent);
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = 'radio';
|
||||
const {
|
||||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
} = useField(props.groupName, props.validationRules,
|
||||
{
|
||||
type: inputType
|
||||
});
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
};
|
||||
},
|
||||
unmounted() {
|
||||
this.resetField();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,37 @@
|
|||
<template>
|
||||
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">
|
||||
{{text}}<slot name="after-text"></slot>
|
||||
<a
|
||||
v-if="linkType === 'navigation'"
|
||||
class="navigation-link"
|
||||
:href="href"
|
||||
@click="handleClick">
|
||||
{{ text }}<slot name="after-text"></slot>
|
||||
</a>
|
||||
<a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">
|
||||
{{text}}<slot name="after-text"></slot>
|
||||
<a
|
||||
v-else-if="linkType === 'footer'"
|
||||
class="footer-link"
|
||||
:href="href"
|
||||
target="_blank"
|
||||
@click="handleClick">
|
||||
{{ text }}<slot name="after-text"></slot>
|
||||
</a>
|
||||
<a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">
|
||||
{{text}}<slot name="after-text"></slot>
|
||||
<a
|
||||
v-else-if="linkType === 'textSmall'"
|
||||
class="small"
|
||||
:href="href"
|
||||
@click="handleClick">
|
||||
{{ text }}<slot name="after-text"></slot>
|
||||
</a>
|
||||
<a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
|
||||
{{text}}<slot name="after-text"></slot>
|
||||
<a
|
||||
v-else-if="linkType === 'text'"
|
||||
:href="href"
|
||||
@click="handleClick">
|
||||
{{ text }}<slot name="after-text"></slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'textLink',
|
||||
name: 'text-link',
|
||||
props: {
|
||||
linkType: String,
|
||||
text: String,
|
||||
|
|
@ -23,21 +39,20 @@ export default {
|
|||
type: String
|
||||
}
|
||||
},
|
||||
emits: ['click-event'],
|
||||
methods: {
|
||||
handleClick(event) {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
handleClick() {
|
||||
this.pushEventToGA(this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.text,
|
||||
true
|
||||
);
|
||||
true);
|
||||
this.$emit('click-event');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
a {
|
||||
color: $blue;
|
||||
text-underline-offset: 5px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue