@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,45 @@
+import TaskFinder from './index.vue'
+import {
+  taskFinderTempTitle,
+  taskFinderTempText,
+  taskFinderTempData
+} from '../../../mock/task-finder'
+
+export default {
+  title: 'Paragraphs/TaskFinder',
+  component: TaskFinder,
+  argTypes: {
+    taskList: {
+      control: 'object',
+      defaultValue: taskFinderTempData
+    },
+    title: {
+      control: 'text',
+      defaultValue: taskFinderTempTitle
+    },
+    text: {
+      control: 'text',
+      defaultValue: taskFinderTempText
+    },
+    headingTag: {
+      control: 'text',
+      defaultValue: 'h2'
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    workwell: {
+      control: 'boolean',
+      defaultValue: false
+    }
+  }
+}
+
+const DefaultContent = (args, { argTypes }) => ({
+  components: { TaskFinder },
+  props: Object.keys(argTypes),
+  template: '<task-finder v-bind="$props" :storybook="true"/>'
+})
+
+export const Default = DefaultContent.bind({})

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

@@ -0,0 +1,192 @@
+<template>
+  <section-group
+    v-if="!isPDF"
+    :rtl="rtl"
+    :title="title"
+    :title-tag="headingTag"
+    :background-variant="'grey'"
+    class="task-finder"
+    :class="{ workwell }"
+    @isMobileOrTabletView="(e) => (isMobileOrTabletView = e)"
+  >
+    <template v-slot:content>
+      <row>
+        <column v-if="text" :sm="12" :md="4">
+          <rich-text :content="text" :without-container="true" />
+        </column>
+        <column :sm="12" :md="4">
+          <task-finder-column
+            :cards="taskList"
+            :rtl="rtl"
+            :selected-task="selectedTask"
+            :is-child="false"
+            :is-mobile-or-tablet-view="isMobileOrTabletView"
+            @selected="(task) => taskClick(task, true)"
+          >
+            <task-finder-column
+              v-if="isMobileOrTabletView && selectedTask"
+              :class="'task-finder__mobile task-finder__mobile--rtl-' + !!rtl"
+              :cards="selectedTask.children"
+              :rtl="rtl"
+              :selected-task="selectedTask"
+              :is-mobile-or-tablet-view="isMobileOrTabletView"
+              :is-child="true"
+              @selected="(task) => taskClick(task, false)"
+            >
+            </task-finder-column>
+          </task-finder-column>
+        </column>
+        <column
+          v-if="!isMobileOrTabletView"
+          :sm="12"
+          :md="4"
+          class="task-finder__desktop"
+        >
+          <task-finder-column
+            v-if="selectedTask"
+            :cards="selectedTask.children"
+            :rtl="rtl"
+            :selected-task="selectedTask"
+            :is-mobile-or-tablet-view="isMobileOrTabletView"
+            :is-child="true"
+            @selected="(task) => taskClick(task, false)"
+          >
+          </task-finder-column>
+        </column>
+      </row>
+    </template>
+  </section-group>
+  <task-finder-pdf
+    v-else
+    :title="title"
+    :text="text"
+    :task-list="taskList"
+    :heading-tag="headingTag"
+    :rtl="rtl"
+  />
+</template>
+
+<script>
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import { isAbsoluteUrl, navigateToPath } from './../../../../lib/utility'
+import RichText from './../RichText/index.vue'
+import TaskFinderColumn from './task-finder-column.vue'
+import TaskFinderPdf from './pdf/index.vue'
+
+export default {
+  name: 'TaskFinder',
+  components: {
+    Row,
+    Column,
+    RichText,
+    SectionGroup,
+    TaskFinderColumn,
+    TaskFinderPdf
+  },
+  props: {
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    taskList: {
+      type: Array,
+      default: null
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    headingTag: {
+      type: String,
+      default: 'h2'
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedTask: null,
+      isMobileOrTabletView: false
+    }
+  },
+  computed: {
+    isPDF() {
+      return typeof this.$isPDF === 'function' ? this.$isPDF() : false
+    }
+  },
+  methods: {
+    getCaret(card) {
+      if (card.url && isAbsoluteUrl(card.url)) {
+        return 'external'
+      } else {
+        return 'right'
+      }
+    },
+    taskClick(task, isParent) {
+      if (isParent) {
+        if (this.selectedTask === task?.card?.selectedCard) {
+          this.selectedTask = null
+        } else {
+          this.selectedTask = task?.card?.selectedCard
+        }
+      }
+      if (
+        !task?.card?.selectedCard.children ||
+        task?.card?.selectedCard.children.length < 1
+      ) {
+        navigateToPath.call(
+          this,
+          task?.card?.selectedCard?.url,
+          task?.card?.ev?.ctrlKey === true || task?.card?.ev?.metaKey === true
+        )
+        this.selectedTask = null
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.task-finder {
+  padding-top: 64px !important;
+  padding-bottom: 64px !important;
+
+  :deep(.card-title span) {
+    font-weight: 600;
+  }
+
+  :deep(.section-group__content) {
+    padding-top: 0px !important;
+  }
+
+  :deep(.section-group__content .col-md-4) {
+    position: relative;
+    top: -12px;
+  }
+
+  :deep(.section-group__content .col-md-4:first-of-type) {
+    top: 0;
+  }
+
+  :deep(.section-group__heading) {
+    padding-bottom: 12px !important;
+  }
+
+  &__mobile {
+    &--rtl-true {
+      margin-right: 32px !important;
+    }
+    &--rtl-false {
+      margin-left: 32px !important;
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/TaskFinder/pdf/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <container class="task-finder-pdf">
+    <row>
+      <column sm="12">
+        <component :is="headingTag">{{ title }}</component>
+      </column>
+      <column v-if="text" sm="12">
+        <rich-text :content="text" :without-container="true" />
+      </column>
+      <column sm="12">
+        <ul>
+          <li v-for="(parent, i) in taskList" :key="i">
+            {{ parent.text }} {{ parent.url ? '- ' + getURL(parent.url) : '' }}
+            <ul v-if="parent.children">
+              <li v-for="(child, j) in parent.children" :key="j">
+                {{ child.text }} {{ child.url ? '- ' + getURL(child.url) : '' }}
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </column>
+    </row>
+  </container>
+</template>
+
+<script>
+import { isAbsoluteUrl } from '../../../../../lib/utility'
+import Row from './../../../Containers/Container/index.vue'
+import Container from './../../../Containers/Container/index.vue'
+import Column from './../../../Containers/Column/index.vue'
+import RichText from './../../../Paragraphs/RichText/index.vue'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column,
+    RichText
+  },
+  props: {
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    taskList: {
+      type: Array,
+      default: null
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    headingTag: {
+      type: String,
+      default: 'h2'
+    },
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+
+  methods: {
+    isAbsoluteUrl,
+    getURL(url) {
+      if (!isAbsoluteUrl(url)) {
+        return window.location.origin + url
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.task-finder-pdf {
+  h2 {
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 36px;
+    margin-bottom: 24px;
+    margin-top: 24px;
+  }
+  h3 {
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 32px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+  ul {
+    margin-top: 16px;
+    li {
+      page-break-inside: avoid;
+      margin-bottom: 16px;
+    }
+    ul {
+      margin-top: 0;
+      li {
+        &:first-of-type {
+          margin-top: 8px;
+        }
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/TaskFinder/task-finder-column.vue

@@ -0,0 +1,146 @@
+<template>
+  <card-grid
+    :size="'full'"
+    :cards="cards"
+    :rtl="rtl"
+    :force-lg-columns-per-row="1"
+    :force-md-columns-per-row="1"
+    :force-sm-columns-per-row="1"
+    :is-selectable="true"
+    :row-spacing="'none'"
+    :no-padding-top="true"
+    :no-padding-bottom="true"
+    :column-spacing="'none'"
+    class="task-finder-column"
+    :class="
+      isChild ? 'task-finder-column__child' : 'task-finder-column__parent'
+    "
+    :style="cards.length > 6 ? false : 'overflow-y: auto'"
+    @selected="(card) => $emit('selected', { card })"
+  >
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        :show-divider="false"
+        :header-size="'medium'"
+        :card-header-title="card.text"
+        :rtl="rtl"
+        :caret="getCaret(card)"
+        :caret-position="'top'"
+        :card-padding="'small'"
+        :border-type="'none'"
+        :invert-on-select-background="'yellow'"
+        :background-variant="'transparent'"
+        :link="card.url ? card.url : false"
+      >
+        <template v-slot:beforeCard>
+          <hr v-if="isMobileOrTabletView" />
+        </template>
+        <template v-slot:afterCard>
+          <slot v-if="selectedTask === card" />
+        </template>
+      </card-grid-item>
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGrid from '../../Common/CardGrid/index.vue'
+import CardGridItem from '../../Common/CardGridItem/index.vue'
+import { isAbsoluteUrl } from '../../../../lib/utility'
+
+export default {
+  name: 'TaskFinderColumn',
+  components: {
+    CardGrid,
+    CardGridItem
+  },
+  props: {
+    rtl: {
+      type: Boolean
+    },
+    cards: {
+      type: Array,
+      default: null
+    },
+    selectedTask: {
+      type: Object,
+      default: null
+    },
+    isChild: {
+      type: Boolean
+    },
+    isMobileOrTabletView: {
+      type: Boolean
+    }
+  },
+  methods: {
+    getCaret(card) {
+      if (this.isChild || this.isMobileOrTabletView) {
+        return null
+      }
+      if (card.url && isAbsoluteUrl(card.url)) {
+        return 'external'
+      } else if (Array.isArray(card.children) && card.children.length === 0) {
+        return null
+      } else {
+        if (this.isMobileOrTabletView) {
+          return this.selectedTask === card ? 'up' : 'down'
+        }
+        return 'right'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.task-finder-column__child {
+  height: 375px;
+  overflow-y: scroll;
+
+  //firefox
+  scrollbar-color: $black $gray;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: $gray;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: $black;
+    border: 1px solid $gray;
+  }
+}
+
+.task-finder-column {
+  :deep(.card-grid-item__card) {
+    height: auto !important;
+    padding-top: 16px !important;
+    padding-bottom: 16px !important;
+    margin-bottom: 8px !important;
+    border-radius: 0 !important;
+
+    &:hover {
+      background-color: $orange;
+      opacity: 1;
+    }
+  }
+
+  :deep(.card-grid-item__card &--selected-inverted &--yellow) {
+    background-color: $orange;
+  }
+
+  :deep(.card-grid-item__header) {
+    margin-bottom: 0px !important;
+  }
+
+  :deep(.section-group__content) {
+    padding-top: 0 !important;
+  }
+}
+</style>

package/src/components/Paragraphs/TextMedia/MediaTypes/Image/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <img :src="imageUrl" :alt="imageAlt" />
+</template>
+<script>
+export default {
+  name: 'ImageFrame',
+  props: {
+    imageUrl: {
+      type: String,
+      required: true
+    },
+    imageAlt: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+img {
+  border-radius: 8px;
+  width: 100%;
+}
+</style>

package/src/components/Paragraphs/TextMedia/MediaTypes/Video/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="thumbnail-wrapper">
+    <video-thumbnail class="video-thumbnail" :video="video" />
+  </div>
+</template>
+
+<script>
+import VideoThumbnail from './../../../../SubComponents/VideoThumbnail/index.vue'
+
+export default {
+  name: 'VideoThumbnailFrame',
+  components: {
+    VideoThumbnail
+  },
+  props: {
+    video: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.thumbnail-wrapper {
+  :deep(.wcl-video-thumbnail-wrapper a img.video-thumbnail__image) {
+    max-height: 250px;
+  }
+}
+</style>

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

@@ -0,0 +1,94 @@
+import TextMedia from './index.vue'
+
+const MockImage = {
+  alt: 'some alt text',
+  url: 'https://picsum.photos/445/300/?image=26'
+}
+
+const MockVideo = {
+  id: '3FLapMJUmZQ',
+  mediaTitle: 'Some video title',
+  provider: 'youtube',
+  transcriptTitle: 'Transcript',
+  transcript:
+    '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.',
+  thumbnailQuality: 'max',
+  fixWidth: false
+}
+
+export default {
+  title: 'Paragraphs/Text + Media',
+  component: TextMedia,
+  argTypes: {
+    content: {
+      control: 'text',
+      defaultValue:
+        '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>'
+    },
+    titleText: {
+      control: 'text',
+      defaultValue: 'A sample media item'
+    },
+    titleTag: {
+      control: 'text',
+      defaultValue: 'h3'
+    },
+    hasBgColor: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    flip: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    workwell: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    video: {
+      control: 'object'
+    },
+    image: {
+      control: 'object'
+    },
+    mediaType: {
+      control: 'text'
+    },
+    storybook: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    hideImageMob: {
+      control: 'boolean',
+      defaultValue: false
+    }
+  }
+}
+
+const TextWithImageDefault = (args, { argTypes }) => ({
+  components: { TextMedia },
+  props: Object.keys(argTypes),
+  template: `<text-media v-bind="$props" />`
+})
+
+export const TextWithImage = TextWithImageDefault.bind({})
+TextWithImage.args = {
+  mediaType: 'image',
+  image: MockImage
+}
+
+const TextWithVideoDefault = (args, { argTypes }) => ({
+  components: { TextMedia },
+  props: Object.keys(argTypes),
+  template: `<text-media v-bind="$props" />`
+})
+
+export const TextWithVideo = TextWithVideoDefault.bind({})
+TextWithVideo.args = {
+  mediaType: 'video',
+  video: MockVideo
+}