159 lines
4.2 KiB
Vue
159 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
|
<h5
|
|
class="text-center fw-normal mb-0 subheader-primary"
|
|
:class="headerColor">
|
|
<span>
|
|
{{ content }}
|
|
</span>
|
|
<buttonBack
|
|
v-if="hasBackButton"
|
|
:backButtonAccessibleText="backButtonAccessibleText"
|
|
@clickEvent="clickEvent" />
|
|
</h5>
|
|
</div>
|
|
<div
|
|
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
|
|
:class="justifySubheader">
|
|
<p
|
|
class="fw-normal mb-0"
|
|
:class="alternateFormatting">
|
|
<span v-html="subText"> </span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonBack from '@/iss-components/site-sub-header/button-back/button-back.vue';
|
|
import {
|
|
doesCopyContainRouterLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getRouterLinkHtmlStringFromCopy
|
|
} from '@/helpers/cms-content-helper';
|
|
|
|
import stripRteStyle from '@/helpers/text-helper';
|
|
|
|
export default {
|
|
name: 'site-sub-header',
|
|
components: { buttonBack },
|
|
props: {
|
|
cmsWidgetName: String,
|
|
contentProperty: String,
|
|
darkGraySubText: Boolean,
|
|
hasBackButton: Boolean,
|
|
issContainingPage: String,
|
|
justification: String,
|
|
stripRteStyle: Boolean,
|
|
subContentProperty: String
|
|
},
|
|
emits: ['click-event'],
|
|
computed: {
|
|
content() {
|
|
return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText');
|
|
},
|
|
subText() {
|
|
let subTextFromCms = this.getCmsContent(this.cmsWidgetName,
|
|
this.subContentProperty ?? 'SecondaryText');
|
|
|
|
if (this.stripRteStyle) {
|
|
subTextFromCms = stripRteStyle(subTextFromCms);
|
|
}
|
|
|
|
let subText = '';
|
|
if (this.doesCopyContainRouterLink(subTextFromCms)) {
|
|
splitCopyOnCMSPlaceHolder(subTextFromCms).forEach((sc) => {
|
|
if (this.doesCopyContainRouterLink(sc)) {
|
|
subText += getRouterLinkHtmlStringFromCopy(sc);
|
|
} else {
|
|
subText += sc;
|
|
}
|
|
});
|
|
} else {
|
|
subText = subTextFromCms;
|
|
}
|
|
|
|
return subText ?? '';
|
|
},
|
|
backButtonAccessibleText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'BackButtonAccessibleText');
|
|
},
|
|
headerColor() {
|
|
return this.subText ? 'dark-header' : 'light-header';
|
|
},
|
|
justifySubheader() {
|
|
return this.justification?.toLowerCase() === 'left'
|
|
? 'justify-content-left'
|
|
: 'justify-content-center';
|
|
},
|
|
alternateFormatting() {
|
|
// override for service-packages unique style
|
|
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
|
|
return 'service-packages-subtext mt-4 mb-2 px-5';
|
|
}
|
|
return this.darkGraySubText ? 'dark-gray' : 'light-gray';
|
|
}
|
|
},
|
|
methods: {
|
|
doesCopyContainRouterLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getRouterLinkHtmlStringFromCopy,
|
|
clickEvent() {
|
|
this.$emit('click-event');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dark-header {
|
|
color: $black;
|
|
}
|
|
|
|
.light-header {
|
|
color: $gray-550;
|
|
}
|
|
|
|
h5 {
|
|
line-height: 32px;
|
|
|
|
button {
|
|
color: inherit;
|
|
}
|
|
span {
|
|
color: $black;
|
|
}
|
|
}
|
|
p.light-gray {
|
|
color: $gray-550;
|
|
}
|
|
|
|
p.dark-gray {
|
|
color: $darker-gray;
|
|
}
|
|
|
|
p.service-packages-subtext {
|
|
font-weight: 500 !important;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.subheader-secondary {
|
|
&.justify-content-center {
|
|
p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&.justify-content-left {
|
|
p {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
</style>
|