<template>
  <!-- eslint-disable vue/no-v-html -->
  <div class="text-block" data-cy="text-block" v-html="sanitizedText" />
</template>

<script>
export default {
  props: ['value'],

  computed: {
    sanitizedText() {
      // don't need to sanitize the input, server does this
      return this.value.text;
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.text-block {
  margin-bottom: $medium-spacing; // if calc is not supported
  margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
  @include regular-paragraph;

  :deep(ul) {
    @include list-parent;
  }

  :deep(li) {
    @include list-child;
  }
}
</style>
