45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
class="text-block w-100 mt-2"
|
|
:class="[justifyText, typeStyle, fontWeight]"
|
|
v-html="this.TextBlockCopy"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "textBlock",
|
|
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,
|
|
},
|
|
computed: {
|
|
TextBlockCopy() {
|
|
if (this.customText) {
|
|
return this.customText;
|
|
}
|
|
return this.getCmsContent(this.cmsWidgetName, "Text");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.text-block {
|
|
display: flex;
|
|
&.left {
|
|
justify-content: flex-start;
|
|
}
|
|
&.right {
|
|
justify-content: flex-end;
|
|
}
|
|
&.center {
|
|
justify-content: center;
|
|
}
|
|
&.bold {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
</style>
|