DigitalConsumer.FixMyGlass/src/layouts/review/review-block/review-block.vue
2023-11-16 16:04:42 -05:00

70 lines
1.8 KiB
Vue

<template>
<div class="py-3">
<div class="d-flex">
<textBlock
:cmsWidgetName="headerCmsWidgetName"
:customText="customHeaderText"
typeStyle="body small bold dark"
marginTopSizeOverride="0" />
<textLink
linkType="textSmall"
text="Edit"
class="ml-auto"
useLoadingModal
@click-event="linkClicked"
href="javascript:void(0)">
<template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
<span class="sr-only"> {{ screenReaderOnlyText }}</span>
</template>
</textLink>
</div>
<div
class="small review-block-content"
v-for="item in content"
:key="item"
data-test="contentLine"
v-html="item"></div>
</div>
</template>
<script>
import textBlock from "@/digital-components/text-block/text-block";
import textLink from "@/ux-components/text-link/text-link";
export default {
name: "review-block",
props: {
headerCmsWidgetName: String,
customHeaderText: String,
// Specifically an array of strings.
content: Array,
editScreenReaderTextCmsWidgetName: String,
},
data() {
return {};
},
computed: {
screenReaderOnlyText() {
return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, "Text");
},
},
methods: {
linkClicked() {
this.$emit("edit-clicked");
},
},
components: {
textBlock,
textLink,
},
};
</script>
<style lang="scss" scoped>
:deep(.review-block-content > ul) {
margin-bottom: 0rem;
}
.review-block-content {
width: 90%;
}
</style>