@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,150 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <section-group
+    class="wcl-media-text"
+    :rtl="rtl"
+    :background-variant="hasBgColor ? 'light' : 'none'"
+    :class="{ flip, hideImageMob }"
+  >
+    <template v-slot:content>
+      <row align-v="center">
+        <column sm="5" :order="flip ? 2 : 1">
+          <media-image
+            v-if="mediaType === 'image' && image"
+            :image-alt="image && image.alt ? image.alt : ''"
+            :image-url="image && image.url"
+          />
+          <media-video
+            v-if="mediaType === 'video'"
+            :video="video"
+            :storybook="storybook"
+          />
+        </column>
+        <column class="wcl-media-text__content" sm="7" :order="flip ? 1 : 2">
+          <rich-text
+            v-if="titleText"
+            class="wcl-media-text__title"
+            :tag="titleTag"
+            :content="titleText"
+          />
+          <div class="wcl-media-text__content-wrap">
+            <rich-text v-if="content" :content="content" />
+          </div>
+        </column>
+      </row>
+    </template>
+  </section-group>
+</template>
+
+<script>
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import MediaImage from './MediaTypes/Image/index.vue'
+import MediaVideo from './MediaTypes/Video/index.vue'
+import RichText from './../RichText/index.vue'
+
+export default {
+  name: 'TextMedia',
+  components: {
+    Row,
+    Column,
+    MediaImage,
+    MediaVideo,
+    RichText,
+    SectionGroup
+  },
+  props: {
+    mediaType: {
+      type: String,
+      required: true
+    },
+    content: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    titleText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    titleTag: {
+      type: String,
+      required: false,
+      default: 'h3'
+    },
+    image: {
+      type: Object,
+      default: () => {}
+    },
+    video: {
+      type: Object,
+      default: () => {}
+    },
+    hasBgColor: {
+      type: Boolean,
+      default: false
+    },
+    flip: {
+      type: Boolean,
+      default: false
+    },
+    hideImageMob: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    },
+    storybook: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-media-text {
+  .wysiwyg {
+    :deep(.cta-button:last-child) {
+      @media screen and (max-width: 540px) {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    :deep(p) {
+      @media screen and (max-width: 540px) {
+        margin-bottom: 32px;
+        &:last-child {
+          margin-bottom: 24px;
+        }
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.hideImageMob {
+    @include mq('xs') {
+      img {
+        display: none;
+      }
+    }
+  }
+
+  &__title {
+    margin-bottom: 24px;
+  }
+}
+</style>

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

@@ -0,0 +1,167 @@
+import Container from '../../Containers/Container/index.vue'
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import VideoGrid from './index.vue'
+
+const mockData = {
+  title: 'Video Grid Title',
+  description:
+    'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+  rtl: false,
+  threeColumns: true,
+  greyBackground: true,
+  cta: {
+    text: 'Click here',
+    url: 'https://www.example.com',
+    workwell: false
+  },
+  videos: [
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: '3FLapMJUmZQ',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'UmgStjXqhz4',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'DV6kvZAEeyA',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'kZi6UZkyHGE',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'EEeDFnoUxio',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'I0pMOrx8HTY',
+      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.',
+      rtl: false,
+      fixWidth: false
+    },
+    {
+      mediaTitle: 'Youtube Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: 'NhpnDBV3QnI',
+      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.',
+      rtl: false,
+      fixWidth: false
+    }
+  ]
+}
+
+export default {
+  title: 'Paragraphs/VideoGrid',
+  component: { VideoGrid, Container, Row, Column },
+  argTypes: {
+    gridTitle: {
+      control: 'text',
+      defaultValue: mockData.title
+    },
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3'],
+      defaultValue: 'h2'
+    },
+    gridDescription: {
+      control: 'text',
+      defaultValue: mockData.description
+    },
+    videoList: {
+      control: 'object',
+      defaultValue: mockData.videos
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: mockData.rtl
+    },
+    threeColumns: {
+      control: 'boolean',
+      defaultValue: mockData.threeColumns
+    },
+    greyBackground: {
+      control: 'boolean',
+      defaultValue: mockData.greyBackground
+    },
+    cta: {
+      control: 'object',
+      defaultValue: mockData.cta
+    }
+  }
+}
+
+const YoutubeContent = (args, { argTypes }) => ({
+  components: { VideoGrid, Container, Row, Column },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      videos: mockData.videos
+    }
+  },
+  template: `
+    <container>
+    <row>
+      <column>
+        <video-grid
+          v-bind="$props"
+        />
+      </column>
+    </row>
+    </container>
+  `
+})
+
+export const Youtube = YoutubeContent.bind({})

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

@@ -0,0 +1,124 @@
+<template>
+  <card-grid
+    :title="gridTitle"
+    :title-tag="titleTag"
+    :rtl="rtl"
+    :sub-heading="gridDescription"
+    :cards="videoList"
+    :columns-per-row="threeColumns ? 3 : 2"
+    :is-selectable="false"
+    :class="`video-grid ${threeColumns ? 'items-3' : 'items-2'}`"
+    :background-variant="greyBackground ? 'light' : 'none'"
+  >
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item :rtl="rtl" :background-variant="'transparent'">
+        <template v-slot:cardDescription>
+          <video-thumbnail :video="card" />
+          <p class="video-grid__cellTitle">{{ card.mediaTitle }}</p>
+        </template>
+      </card-grid-item>
+    </template>
+    <template v-if="cta" v-slot:cardGridFooter>
+      <column>
+        <cta-button
+          :url="cta.url"
+          :type="cta.type"
+          :alt="cta.alt"
+          :rtl="rtl"
+          :workwell="cta.workwell"
+          :class="`m-0 float-${!rtl ? 'right' : 'left'}`"
+          >{{ cta.text }}</cta-button
+        >
+      </column>
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import VideoThumbnail from './../../SubComponents/VideoThumbnail/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+
+export default {
+  name: 'VideoGrid',
+  components: {
+    CtaButton,
+    VideoThumbnail,
+    Column,
+    CardGrid,
+    CardGridItem
+  },
+  props: {
+    gridTitle: {
+      type: String,
+      default: null
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    gridDescription: {
+      type: String,
+      default: null
+    },
+    videoList: {
+      type: Array,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    threeColumns: {
+      type: Boolean,
+      default: false
+    },
+    greyBackground: {
+      type: Boolean,
+      default: false
+    },
+    cta: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-video-thumbnail-wrapper {
+  margin-bottom: 0px;
+}
+
+.video-grid {
+  &__cellTitle {
+    margin-top: 12px;
+    margin-bottom: 0px;
+    font-weight: 600;
+  }
+
+  &.items-2 {
+    :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
+      max-height: 304px;
+      @include mq('mm') {
+        max-height: auto;
+      }
+    }
+  }
+  &.items-3 {
+    :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
+      max-height: 200px;
+      @include mq('mm') {
+        max-height: auto;
+      }
+    }
+    :deep(.video-thumbnail) {
+      min-height: auto;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,95 @@
+import Container from '../../Containers/Container/index.vue'
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import VideoMedia from './index.vue'
+
+const mockData = {
+  videoId: { YouTube: '3FLapMJUmZQ', Vimeo: '60139366' },
+  provider: { YouTube: 'youtube', Vimeo: 'vimeo' },
+  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.'
+}
+
+const youtubeTitle = 'YouTube title'
+const vimeoTitle = 'Vimeo title'
+const fixWidthTitle = 'FixWidth title'
+const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.'
+
+export default {
+  title: 'Paragraphs/VideoPlayer',
+  component: { VideoMedia,  Container, Row, Column },
+  argTypes: {
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+    mediaTitle: {
+      control: 'text'
+    },
+    mediaDescription: {
+      control: 'text'
+        
+    },
+    videoId: {
+      control: 'select',
+      options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
+    },
+    provider: {
+      control: 'select',
+      options: [mockData.provider.YouTube, mockData.provider.Vimeo],
+    },
+    transcriptTitle: {
+      control: 'text'
+    },
+    transcript: {
+      control: 'text'
+    }
+  }
+}
+
+const Template = (args) => ({
+  components: {VideoMedia, Container, Row, Column},
+  setup () {
+    return { args }
+  },
+  template: '<video-media v-bind="args"/>'
+})
+
+export const Youtube = Template.bind({})
+
+Youtube.args = {
+  titleTag: 'h2',
+  videoId: mockData.videoId.YouTube,
+  mediaTitle: youtubeTitle,
+  mediaDescription: mediaDesc,
+  provider: mockData.provider.YouTube,
+  transcriptTitle: mockData.transcriptTitle,
+  transcript: mockData.transcript
+}
+
+
+export const Vimeo = Template.bind({})
+
+Vimeo.args =  {
+  titleTag: 'h2',
+  videoId: mockData.videoId.Vimeo,
+  mediaTitle: vimeoTitle,
+  mediaDescription: mediaDesc,
+  provider: mockData.provider.Vimeo,
+  transcriptTitle: mockData.transcriptTitle,
+  transcript: mockData.transcript
+}
+
+export const FixWidth = Template.bind({})
+
+  FixWidth.args = {
+    titleTag: 'h2',
+    videoId: mockData.videoId.Vimeo,
+    mediaTitle: fixWidthTitle,
+    mediaDescription: mediaDesc,
+    provider: mockData.provider.Vimeo,
+    transcriptTitle: mockData.transcriptTitle,
+    transcript: mockData.transcript,
+    fixWidth: true
+  }

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="video-media">
+    <section-group
+      :rtl="rtl"
+      :title="mediaTitle"
+      :title-tag="titleTag"
+      :sub-heading="mediaDescription"
+      :no-padding-bottom="true"
+      :size="fixWidth ? 'content' : 'page'"
+      @isMobileOrTabletView="(e) => (isMobileOrTabletView = e)"
+    >
+      <div>
+        <video-player
+          :provider="provider"
+          :video-id="videoId"
+          class="video-media__video-player"
+          :rtl="rtl"
+        />
+      </div>
+    </section-group>
+    <accordion
+      :accordion-list="accordion"
+      :option="'close-all'"
+      class="video-media__transcript"
+    />
+  </div>
+</template>
+
+<script>
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import VideoPlayer from '../../SubComponents/MediaPlayer/index.vue'
+import Accordion from '../Accordion/index.vue'
+
+export default {
+  name: 'VideoMedia',
+  components: {
+    VideoPlayer,
+    SectionGroup,
+    Accordion
+  },
+  props: {
+    mediaTitle: {
+      type: String,
+      default: null
+    },
+    mediaDescription: {
+      type: String,
+      default: null
+    },
+    provider: {
+      type: String,
+      required: true
+    },
+    videoId: {
+      type: String,
+      required: true
+    },
+    transcriptTitle: {
+      type: String,
+      default: null
+    },
+    transcript: {
+      type: String,
+      default: null
+    },
+    fixWidth: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    }
+  },
+  computed: {
+    accordion() {
+      return [
+        {
+          field_title: this.transcriptTitle,
+          field_rich_text: {
+            value: this.transcript
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.video-media {
+  &__transcript {
+    padding: 0;
+    margin-top: 12px;
+  }
+
+  :deep(.section-group--size-content .video-player) {
+    @include fp(min-height, 250, 411);
+  }
+
+  :deep(.section-group--size-page .video-player) {
+    @include fp(min-height, 250, 625);
+  }
+}
+</style>