c821fc7d83
- Payment method question button now matches Heritage - Recalibration is now its own line item - Some other general updates to structure and formatting of page
101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<template>
|
|
<baseInputButton
|
|
v-bind="$props"
|
|
v-model="selectedValue"
|
|
buttonWrapperClasses="list-group base-input-button list-button d-flex flex-column w-100 no-hover">
|
|
<div class="button-content list-button-content d-flex flex-row">
|
|
<div>
|
|
<span
|
|
v-for="token in tokens"
|
|
:key="token">
|
|
<span v-if="isInlineImageToken(token)">
|
|
<img
|
|
v-if="hasImage"
|
|
:src="buttonImage"
|
|
:alt="getInlineAltText(token)" />
|
|
<span v-else> {{ getInlineAltText(token) }}</span>
|
|
</span>
|
|
<span v-else>
|
|
{{ token }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<img
|
|
v-if="shouldDisplaySideImage"
|
|
:id="buttonImageId"
|
|
class="ms-auto"
|
|
:src="buttonImage"
|
|
:alt="altText" />
|
|
</div>
|
|
</baseInputButton>
|
|
</template>
|
|
|
|
<script>
|
|
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
|
|
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin.js';
|
|
import { splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper.js';
|
|
|
|
const INLINE_IMAGE_TOKEN = 'custom:inlineImage';
|
|
|
|
function isInlineImageToken(token) {
|
|
return token.includes(INLINE_IMAGE_TOKEN);
|
|
}
|
|
|
|
function getInlineAltText(token) {
|
|
const innerTokens = token.split(',');
|
|
|
|
return innerTokens[1] ?? '';
|
|
}
|
|
|
|
export default {
|
|
name: 'payment-method-list-button',
|
|
components: {
|
|
baseInputButton
|
|
},
|
|
mixins: [inputButtonWrapperMixin],
|
|
computed: {
|
|
tokens() {
|
|
return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? '');
|
|
},
|
|
hasImage() {
|
|
return !!this.buttonImage;
|
|
},
|
|
shouldDisplaySideImage() {
|
|
return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
|
|
}
|
|
},
|
|
methods: {
|
|
isInlineImageToken,
|
|
getInlineAltText
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-button {
|
|
outline: none;
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
&:checked + .list-button-content {
|
|
background: $background-color-selected;
|
|
border-color: $heritage-blue-primary;
|
|
font-weight: 600;
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
.list-button-content {
|
|
color: $darker-gray;
|
|
font-weight: 400;
|
|
position: relative;
|
|
background: $white;
|
|
transition: all 150ms linear;
|
|
border-radius: 3.75rem;
|
|
border: 1px solid #CACBCC;
|
|
width: 100%;
|
|
outline: none;
|
|
padding: .625rem 2rem;
|
|
height: 2.875rem;
|
|
margin-bottom: .75rem;
|
|
}
|
|
</style>
|