131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
class="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"
|
|
@click-event="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';
|
|
|
|
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 subText = this.getCmsContent(
|
|
this.cmsWidgetName,
|
|
this.subContentProperty ?? 'SecondaryText'
|
|
);
|
|
|
|
if (this.stripRteStyle) {
|
|
const regexExp = /[\s*]style="(.*?)"/g;
|
|
subText = subText.replace(regexExp, '');
|
|
}
|
|
|
|
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: {
|
|
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>
|