@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/Accordion/StepperItem/index.vue

@@ -0,0 +1,274 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="subcomponent--accordion-stepper">
+    <b-card
+      v-if="title"
+      class="accordion-stepper"
+      :class="{
+        rtl: rtl
+      }"
+    >
+      <div>
+        <button
+          :id="'accordion' + _uid ? _uid : ''"
+          :aria-expanded="showAccordion ? 'true' : 'false'"
+          class="accordion-stepper__title"
+          :aria-controls="'sect' + _uid ? _uid : ''"
+          @click="toggleAccordion"
+        >
+          <div
+            v-if="number"
+            class="accordion-stepper__stepper-circle"
+            :class="{ workwell: isWorkWell }"
+          >
+            <span> {{ number }}</span>
+          </div>
+
+          <div class="accordion-stepper__titleText">
+            <rich-text
+            :tag="'h3'"
+            :tag-class="'card-title'"
+            :content="title"
+          />
+          </div>
+          
+          <div class="stepper-icon__wrapper">
+            <icon
+              v-show="showAccordion && content"
+              width="18"
+              height="12"
+              class="stepper-icon"
+              :icon-alt="'collapse'"
+              :glyph="CaretUp"
+            />
+            <icon
+              v-show="!showAccordion && content"
+              width="18"
+              height="12"
+              class="stepper-icon"
+              :icon-alt="'expand'"
+              :glyph="CaretDown"
+            />
+          </div>
+        </button>
+        <b-card-body v-if="content">
+          <div
+            v-show="showAccordion"
+            :id="'sect' + _uid ? _uid : ''"
+            class="accordion-stepper__content"
+            role="region"
+            :aria-labelledby="'accordion' + _uid ? _uid : ''"
+          >
+            <rich-text :content="content" />
+          </div>
+        </b-card-body>
+      </div>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import CaretDown from '../../../../assets/icons/caret-down.svg?url'
+import CaretUp from '../../../../assets/icons/caret-up.svg?url'
+import RichText from '../../RichText/index.vue'
+import Icon from '../../../SubComponents/Icon/index.vue'
+import { BCard, BCardBody } from 'bootstrap-vue-next'
+
+export default {
+  name: 'StepperItem',
+  components: {
+    RichText,
+    Icon,
+    BCard,
+    BCardBody
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Item'
+    },
+    content: {
+      type: String,
+      default: null
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    showPreHeading: {
+      type: Boolean,
+      default: false
+    },
+    number: {
+      type: Number,
+      default: null
+    },
+    isWorkWell: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    showAccordion: false,
+    CaretDown,
+    CaretUp
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.showAccordion = this.open
+    })
+  },
+  methods: {
+    toggleAccordion() {
+      this.showAccordion = !this.showAccordion
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../../../includes/scss/all';
+.subcomponent--accordion-stepper {
+  .accordion-stepper {
+    border-radius: 6px;
+    border: none;
+
+    .card-body {
+      padding: 0;
+      min-height: 0;
+
+      button {
+        border-radius: 6px;
+        border: none;
+        padding-left: 0px;
+        padding-right: 0px;
+        text-align: left;
+      }
+    }
+
+    h3.card-title {
+      font-weight: 600;
+    }
+
+    &__title {
+      background: none;
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      font-size: 20px;
+
+      .accordion-stepper__stepper-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: $yellow;
+        display: inline-block;
+        text-align: center;
+        position: absolute;
+        margin-right: 14px;
+        z-index: 2;
+
+        span {
+          margin: 0;
+          position: relative;
+          top: 0;
+          left: 0;
+          transform: translate(-50%, -50%);
+        }
+
+        &.workwell {
+          background-color: $green;
+          color: $white;
+        }
+      }
+
+      .stepper-icon__wrapper {
+        margin-top: -10px;
+        padding-left: 12px;
+        display: inline-block;
+
+        .stepper-icon {
+          width: 16px;
+          height: 11px;
+          img {
+            position: relative;
+            top: 3px;
+          }
+        }
+      }
+
+      .accordion-icon {
+        position: absolute;
+        right: 32px;
+        top: 22px;
+        width: 16px;
+        height: 11px;
+      }
+    }
+    &__titleText {
+      margin-left: 56px;
+    }
+
+    &__pre-heading {
+      display: block;
+      color: $red;
+      font-weight: bold;
+      font-size: 10px;
+      line-height: 20px;
+    }
+
+    &__content {
+      margin-top: 32px;
+      padding: 0 32px 0 56px;
+      ul,
+      ol {
+        padding: 0;
+        margin: {
+          top: 16px;
+          left: 32px;
+        }
+        li {
+          margin-bottom: 16px;
+        }
+      }
+    }
+
+    &.rtl {
+      margin-left: auto;
+
+      * {
+        direction: rtl;
+        text-align: right;
+      }
+
+      .accordion-icon {
+        right: auto;
+        left: 32px;
+      }
+
+      .accordion-stepper__stepper-circle {
+        margin-left: 14px;
+        margin-right: 0;
+        text-align: center;
+      }
+
+      .accordion-stepper__titleText {
+        margin-left: 0;
+        margin-right: 56px;
+      }
+
+      .stepper-icon__wrapper {
+        padding-right: 12px;
+      }
+
+      .accordion-stepper__content {
+        padding: 0 56px 0 32px;
+      }
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/Accordion/index.stories.js

@@ -0,0 +1,84 @@
+import Accordion from './index.vue'
+
+const mockAccordionItems = [
+  {
+    field_title: 'Item one',
+    field_pre_heading: 'preheading text',
+    field_rich_text: {
+      value:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
+    }
+  },
+  {
+    field_title: 'Item two',
+    field_pre_heading: 'preheading text',
+    field_rich_text: {
+      value:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
+    }
+  },
+  {
+    field_title: 'Item three',
+    field_pre_heading: 'preheading text',
+    field_rich_text: {
+      value:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
+    }
+  }
+]
+
+export default {
+  title: 'Paragraphs/Accordion',
+  component: Accordion,
+  argTypes: {
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3', 'h4']
+    },
+    isStepper: {
+      control: 'boolean',
+      table: { disable: true }
+    },
+
+    showPreHeading: {
+      control: 'boolean',
+      table: { disable: true }
+    },
+    option: {
+      control: 'select',
+      options: ['open-all', 'close-all', 'open-first']
+    },
+    size: {
+      control: 'text',
+      table: { disable: true }
+    }
+  }
+}
+
+export const Standard = {
+  args: {
+    titleTag: 'h3',
+    title: 'Section heading',
+    isStepper: false,
+    showPreHeading: false,
+    isWorkwell: false,
+    rtl: false,
+    option: 'open-first',
+    accordionList: mockAccordionItems,
+    size: 'content'
+  }
+}
+
+export const Stepper = {
+  args: {
+    titleTag: 'h2',
+    title: 'Section heading',
+    isStepper: true,
+    showPreHeading: false,
+    isWorkwell: false,
+    rtl: false,
+    option: 'open-first',
+    accordionList: mockAccordionItems,
+    size: 'content'
+  }
+}

package/src/components/Paragraphs/Accordion/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <section-group
+    :rtl="rtl"
+    :title="title"
+    :title-tag="titleTag"
+    :size="size"
+    class="paragraph--accordion"
+    :no-padding-bottom="isStepper"
+  >
+    <ol class="accordion-list">
+      <li
+        v-for="(item, index) in accordionList"
+        :key="_uid ? _uid : '' + index"
+        :class="{
+          workwell: isWorkwell,
+          rtl: rtl || item.field_rtl,
+          stepper: isStepper
+        }"
+        class="accordion"
+      >
+        <stepper-item
+          v-if="isStepper"
+          :content="hasContent(item) ? item.field_rich_text.value : ''"
+          :title="item.field_title"
+          class="accordion__item stepper"
+          :rtl="rtl || item.field_rtl"
+          :open="isAccordionOpen(index)"
+          :number="index + 1"
+          :is-work-well="isWorkwell"
+        />
+        <accordion-item
+          v-if="!isStepper"
+          :content="hasContent(item) ? item.field_rich_text.value : ''"
+          :title="item.field_title"
+          class="accordion__item"
+          :rtl="rtl || item.field_rtl"
+          :show-pre-heading="showPreHeading"
+          :pre-heading="item.field_pre_heading || ''"
+          :open="isAccordionOpen(index)"
+          :meta="Array.isArray(item.meta) ? item.meta : []"
+        />
+      </li>
+    </ol>
+  </section-group>
+</template>
+
+<script>
+import AccordionItem from './AccordionItem/index.vue'
+import StepperItem from './StepperItem/index.vue'
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+
+export default {
+  name: 'Accordion',
+  components: { AccordionItem, SectionGroup, StepperItem },
+  props: {
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    isStepper: {
+      type: Boolean,
+      default: false
+    },
+    showPreHeading: {
+      type: Boolean,
+      default: false
+    },
+    isWorkwell: {
+      type: Boolean,
+      default: false
+    },
+    accordionList: {
+      type: Array,
+      default: null
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'content'
+    },
+    option: {
+      type: String,
+      default: 'open-first'
+    }
+  },
+  data: () => ({
+    OPEN_ALL: 'open-all',
+    CLOSE_ALL: 'close-all',
+    OPEN_FIRST: 'open-first',
+    accordionOption: null
+  }),
+  computed: {
+    isPDF() {
+      return typeof this.$isPDF === 'function' ? this.$isPDF() : false
+    }
+  },
+  mounted() {
+    if (this.option) {
+      this.accordionOption = this.option
+    } else {
+      this.accordionOption = this.CLOSE_ALL
+    }
+  },
+  methods: {
+    isAccordionOpen(index) {
+      if (this.accordionOption === this.OPEN_ALL) {
+        return true
+      } else if (this.accordionOption === this.OPEN_FIRST && index === 0) {
+        return true
+      } else if (this.isPDF) {
+        return true
+      }
+      return false
+    },
+    hasContent(item) {
+      return item?.field_rich_text?.value
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../../includes/scss/all';
+
+.paragraph--accordion {
+  margin-top: -32px;
+  &.section-group--noPaddingBottom {
+    .section-group__container {
+      // adjustment when no title is added
+      padding-top: 5px;
+    }
+  }
+  .accordion__wrapper {
+    position: relative;
+  }
+
+  .accordion-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .accordion {
+    &.stepper {
+      $line-width: 2px;
+      position: relative;
+      $stepperLineBuffer: 15px;
+      &:after {
+        content: '';
+        position: absolute;
+        top: 35px;
+        left: $stepperLineBuffer;
+        height: 100%;
+        border-left: $line-width dotted $yellow;
+      }
+
+      &.workwell:after {
+        border-color: $green;
+      }
+
+      &.rtl:after {
+        right: $stepperLineBuffer;
+        left: auto;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+
+        &:after {
+          content: none;
+        }
+      }
+    }
+
+    &__item {
+      margin-top: 6px;
+
+      &.stepper {
+        &:first-child {
+          margin-top: 0px;
+        }
+        margin-top: 32px;
+        margin-bottom: 32px;
+      }
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/Breakout/index.stories.js

@@ -0,0 +1,39 @@
+import Breakout from './index.vue'
+
+export default {
+  title: 'Paragraphs/Breakout',
+  component: Breakout,
+  argTypes: {
+    headingTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+   size: {
+      control: 'select',
+      options: ['full', 'page', 'content']
+    },
+  },
+  args: {
+    headingTag: 'h2',
+    title: 'h2. Breakout title',
+    body: '<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p><p><a class="cta-button" href="www.google.com">click now</a></p>',
+    bgColor: true,
+    size: 'full',
+    rtl: false,
+    workwell: false
+  }
+}
+
+export const Image = {}
+
+Image.args = {
+  image: { url: 'https://picsum.photos/seed/2/1110/625?grayscale' },
+  bgColor: false
+}
+
+export const Default = {}
+
+Default.args = {
+  image: { url: 'https://picsum.photos/seed/2/1110/625?grayscale' },
+  size: 'page'
+}

package/src/components/Paragraphs/Breakout/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="breakout">
+    <section-group
+      :class="{
+        ['breakout__size--' + size]: true
+      }"
+      :background-image="hasImage ? image.url : ''"
+      :bordered="!hasImage && !bgColor && size !== 'full'"
+      :apply-background-on="
+        size === 'full'
+          ? 'section'
+          : hasImage && size === 'page'
+          ? 'container'
+          : 'block'
+      "
+      :size="
+        !hasImage && size === 'page'
+          ? 'page'
+          : hasImage && size === 'page'
+          ? 'content'
+          : size
+      "
+      :rtl="rtl"
+      :background-variant="bgColor ? 'light' : 'none'"
+      :title="title"
+      :title-tag="headingTag"
+    >
+      <rich-text
+        class="breakout__content"
+        :content="body"
+        :without-container="true"
+      />
+    </section-group>
+  </div>
+</template>
+<script>
+import RichText from '../../Paragraphs/RichText/index.vue'
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+
+export default {
+  components: {
+    RichText,
+    SectionGroup
+  },
+  props: {
+    headingTag: {
+      type: String,
+      default: 'h2'
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    body: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: Object,
+      default: () => {}
+    },
+    size: {
+      type: String,
+      default: 'page',
+      validator: (value) => ['full', 'page', 'content'].indexOf(value) >= 0
+    },
+    bgColor: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    hasImage() {
+      return this.image && 'url' in this.image && !this.bgColor
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.breakout {
+  :deep(.section-group) {
+    .section-group__block {
+      padding: 32px;
+    }
+  }
+
+  :deep(.breakout__size--full) {
+    .section-group__block {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+    .section-group__main,
+    .section-group__content {
+      max-width: 825px;
+    }
+  }
+
+  :deep(.breakout__size--content) {
+    .section-group__main,
+    .section-group__content {
+      max-width: 635px; // computed 571px
+    }
+  }
+}
+</style>