98 lines
3 KiB
Vue
98 lines
3 KiB
Vue
<template>
|
|
<div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]">
|
|
<span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
|
|
<span v-if="doesCopyContainRouterLink(copy)">
|
|
<router-link
|
|
:to="{
|
|
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
|
|
name: 'root',
|
|
}"
|
|
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
|
|
>
|
|
</span>
|
|
<span v-else-if="doesCopyContainTextLink(copy)">
|
|
<textLink
|
|
linkType="text"
|
|
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
|
href="#!"
|
|
@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,
|
|
} 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,
|
|
},
|
|
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>
|