112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="text-block w-100"
|
|
:class="[justifyText, typeStyle, fontWeight, marginTopClass]">
|
|
<span
|
|
v-for="copy in splitCopyOnCMSPlaceHolder(textBlockCopy)"
|
|
:key="copy">
|
|
<span v-if="doesCopyContainRouterLink(copy)">
|
|
<routerLink
|
|
:to="{
|
|
query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
|
|
name: 'root',
|
|
}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</routerLink>
|
|
</span>
|
|
<span v-else-if="doesCopyContainTextLink(copy)">
|
|
<textLink
|
|
linkType="text"
|
|
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
|
:href="getExternalLink(copy)"
|
|
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
|
|
@click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
|
|
</span>
|
|
<span
|
|
v-else
|
|
v-html="copy"></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import textLink from '@/ux-components/text-link/text-link.vue';
|
|
|
|
// Supporting files
|
|
import {
|
|
doesCopyContainRouterLink,
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink
|
|
} from '@/helpers/cms-content-helper';
|
|
import applicationConfig from '@/constants/application-config';
|
|
|
|
export default {
|
|
name: 'text-block',
|
|
components: {
|
|
textLink
|
|
},
|
|
props: {
|
|
customText: String, // used to allow the insert of token values into textblock
|
|
justifyText: String, // left, right, center
|
|
typeStyle: String, // h1-h6, body, small, label, caption
|
|
// (see Figma or Confluence documentation)
|
|
fontWeight: String, // bold=500, default is 400
|
|
cmsWidgetName: String,
|
|
marginTopSizeOverride: Number // override mt-2 with a bootstrap size from 0-5 or auto
|
|
},
|
|
computed: {
|
|
pageQueryString() {
|
|
return applicationConfig.PAGE_QUERYSTRING;
|
|
},
|
|
textBlockCopy() {
|
|
if (this.customText) {
|
|
return this.customText;
|
|
}
|
|
return this.getCmsContent(this.cmsWidgetName, 'Text');
|
|
},
|
|
marginTopClass() {
|
|
if (this.marginTopSizeOverride === 'auto') {
|
|
return 'mt-auto';
|
|
}
|
|
if (this.marginTopSizeOverride >= 0 && this.marginTopSizeOverride <= 5) {
|
|
return `mt-${this.marginTopSizeOverride}`;
|
|
}
|
|
return 'mt-2';
|
|
}
|
|
},
|
|
methods: {
|
|
doesCopyContainRouterLink,
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink,
|
|
navigateWithScenario(scenarioName) {
|
|
this.$router.navigateWithoutSaving(scenarioName, this.$route);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.text-block {
|
|
&.left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
&.right {
|
|
text-align: right;
|
|
}
|
|
&.center {
|
|
text-align: center;
|
|
}
|
|
&.bold {
|
|
font-weight: 500;
|
|
}
|
|
&.dark {
|
|
color: $black;
|
|
}
|
|
}
|
|
</style>
|