105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="text-block w-100"
|
|
:class="[justifyText, typeStyle, fontWeight, marginTopClass]"
|
|
:style="{ 'font-weight': fontWeight }">
|
|
<span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
|
|
<span v-if="doesCopyContainRouterLink(copy)">
|
|
<textLink
|
|
linkType="text"
|
|
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
|
href="javascript:void(0)"
|
|
useLoadingModal
|
|
@click-event="navigateWithScenario(getRouterLinkRouteFromCopy(copy))" />
|
|
</span>
|
|
<span v-else-if="doesCopyContainTextLink(copy)">
|
|
<textLink
|
|
linkType="text"
|
|
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
|
:href="getExternalLink(copy)"
|
|
@click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))"
|
|
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
|
|
</span>
|
|
<span v-else v-html="copy"></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
|
|
// Supporting files
|
|
import {
|
|
doesCopyContainRouterLink,
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink,
|
|
} from "@/helpers/cms-content-helper";
|
|
import { applicationConfig } from "@/constants/application-config";
|
|
|
|
export default {
|
|
name: "textBlock",
|
|
props: {
|
|
customText: String, // used to allow the insert of token values into textblock
|
|
justifyText: String, // right, center (left is default)
|
|
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
|
|
},
|
|
methods: {
|
|
doesCopyContainRouterLink,
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink,
|
|
navigateWithScenario(scenarioName) {
|
|
this.$router.navigateWithoutSaving(scenarioName, this.pageName);
|
|
},
|
|
},
|
|
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";
|
|
},
|
|
},
|
|
components: {
|
|
textLink,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.text-block {
|
|
&.right {
|
|
text-align: right;
|
|
}
|
|
&.center {
|
|
text-align: center;
|
|
}
|
|
&.bold {
|
|
font-weight: 500;
|
|
}
|
|
&.dark {
|
|
color: $black;
|
|
}
|
|
}
|
|
</style>
|