@worksafevictoria/wcl7.5 1.14.0-beta.1 → 1.14.0-beta.11

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

@@ -1,14 +1,28 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <section-group
-    class="wcl-media-text"
     :rtl="rtl"
     :background-variant="hasBgColor ? 'light' : 'none'"
-    :class="{ flip, hideImageMob }"
+    :class="[
+      'wcl-media-text',
+      flip,
+      hideImageMob,
+      mediaType && `wcl-media-text__${mediaType}`,
+    ]"
   >
     <template v-slot:content>
-      <row align-v="center">
-        <column class="wcl-media-text__image" sm="5" :order="flip ? 2 : 1">
+      <row align-v="center" :class="`wcl-media-text__${mediaType}--row`">
+        <column
+          :class="[
+            mediaType === 'icon'
+              ? 'wcl-media-text__icon'
+              : 'wcl-media-text__image',
+            mediaType === 'icon' &&
+              `wcl-media-text__${mediaType}--row--${mediaType}`,
+          ]"
+          sm="5"
+          :order="flip ? 2 : 1"
+        >
           <media-image
             v-if="mediaType === 'image' && image"
             :image-alt="image && image.alt ? image.alt : ''"
@@ -19,6 +33,16 @@
             :video="video"
             :storybook="storybook"
           />
+          <div class="wcl-media-text__icon-inner">
+            <Icon
+              v-if="mediaType === 'icon'"
+              :class="glyphClass"
+              :glyph="glyph"
+              :icon-alt="'icon alt'"
+              :height="glyphHeight"
+              :width="glyphWidth"
+            />
+          </div>
         </column>
         <column class="wcl-media-text__content" sm="7" :order="flip ? 1 : 2">
           <rich-text
@@ -43,6 +67,7 @@ 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'
+import Icon from './../../SubComponents/Icon/index.vue'
 
 export default {
   name: 'TextMedia',
@@ -53,6 +78,7 @@ export default {
     MediaVideo,
     RichText,
     SectionGroup,
+    Icon,
   },
   props: {
     mediaType: {
@@ -106,6 +132,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    glyph: {
+      type: [Object, String],
+      required: false,
+      default: () => null,
+    },
+    glyphHeight: {
+      type: Number,
+      required: false,
+      default: 15,
+    },
+    glyphWidth: {
+      type: Number,
+      required: false,
+      default: 25,
+    },
   },
 }
 </script>
@@ -114,6 +155,7 @@ export default {
 @import '../../../includes/scss/all';
 
 .wcl-media-text {
+  /* WYSIWYG adjustments */
   .wysiwyg {
     :deep(.cta-button:last-child) {
       @media screen and (max-width: 540px) {
@@ -135,9 +177,10 @@ export default {
     }
   }
 
-  // &__image {
-  //   flex: 0 0 36%;
-  // }
+  /* variants */
+  &.rtl {
+    text-align: left;
+  }
 
   &.hideImageMob {
     @include mq('xs') {
@@ -147,8 +190,63 @@ export default {
     }
   }
 
-  &__title {
-    margin-bottom: 24px;
+  /* ICON COLUMN – card look + perfect centering */
+  &__icon {
+    &--row {
+      &--icon {
+        /* the column becomes the card */
+        background: #e6e6e6;
+        border: 4px solid #9e9e9e;
+        border-radius: 16px;
+        padding: 24px;
+        box-sizing: border-box;
+        min-height: clamp(220px, 32vw, 225px);
+
+        /* center whatever is inside (your .wcl-media-text__icon-inner) */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* inner wrapper fills the card so centering works reliably */
+      &-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center; /* vertical */
+        justify-content: center; /* horizontal */
+        line-height: 0; /* kill inline gaps for SVG */
+
+        /* the actual Icon (SVG) sizing/containment */
+        svg,
+        img,
+        .icon {
+          display: block;
+          max-width: 100%;
+          max-height: 100%;
+          width: clamp(80px, 14vw, 140px);
+          height: auto;
+          margin: 0;
+          color: #1a1a1a; /* SVG with currentColor will render dark */
+          fill: currentColor; /* in case the SVG honors fill */
+        }
+      }
+
+      /* HOVER STATES (this is the key) */
+      &:hover {
+        .wcl-media-text__icon--row--icon {
+          background: #fff !important;
+          border-color: #9e9e9e; /* grey border */
+        }
+        .wcl-media-text__content {
+          /* If CTA lives in the content column, this will catch it under scoped CSS */
+          :deep(.cta-button) {
+            background-color: #fff;
+            border: 1px solid #9e9e9e;
+          }
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -9,19 +9,68 @@
       :size="fixWidth ? 'content' : 'page'"
       @isMobileOrTabletView="(e) => (isMobileOrTabletView = e)"
     >
-      <div>
-        <video-player
-          :provider="provider"
-          :video-id="videoId"
-          class="video-media__video-player"
-          :rtl="rtl"
-        />
-      </div>
+      <BOverlay
+        v-model:show="show"
+        no-center
+        variant="dark"
+        opacity="1"
+        @shown="onShown"
+        @hidden="onHidden"
+      >
+        <div>
+          <video-player
+            :provider="provider"
+            :video-id="videoId"
+            class="video-media__video-player"
+            :rtl="rtl"
+          />
+        </div>
+
+        <!-- video overlay slot... -->
+        <template #overlay>
+          <div class="wcl-video-modal__overlay" role="dialog" aria-modal="true">
+            <div class="wcl-video-modal__panel">
+              <div class="wcl-video-modal__panel--image">
+                <img
+                  class="icon"
+                  :src="IconView"
+                  alt="Icon View"
+                  aria-hidden="true"
+                />
+              </div>
+              <div class="wcl-video-modal__panel--content">
+                <rich-text :content="mediaWarningContent" />
+              </div>
+              <div class="wcl-video-modal__panel--button">
+                <CtaButton
+                  text-only="true"
+                  aria-describedby="gethelp-label"
+                  :url="mediaWarningLinkUrl"
+                >
+                  {{ mediaWarningLinkTitle }}
+                </CtaButton>
+                <CtaButton
+                  type="gray"
+                  text-only="true"
+                  aria-describedby="seevideo-label"
+                  @click="onSeeVideo"
+                >
+                  See video
+                </CtaButton>
+              </div>
+            </div>
+          </div>
+        </template>
+      </BOverlay>
     </section-group>
+
+    <!-- Only visible when overlay is NOT visible -->
     <accordion
+      v-show="!show"
       :accordion-list="accordion"
       :option="'close-all'"
       class="video-media__transcript"
+      :aria-hidden="show ? 'true' : null"
     />
   </div>
 </template>
@@ -30,64 +79,103 @@
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
 import VideoPlayer from '../../SubComponents/MediaPlayer/index.vue'
 import Accordion from '../Accordion/index.vue'
+import IconView from './../../../assets/icons/icon-view-off.svg?url'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import RichText from './../../Paragraphs/RichText/index.vue'
 
 export default {
   name: 'VideoMedia',
   components: {
+    CtaButton,
     VideoPlayer,
     SectionGroup,
-    Accordion
+    Accordion,
+    RichText,
+    IconView,
   },
   props: {
     mediaTitle: {
       type: String,
-      default: null
+      default: null,
     },
     mediaDescription: {
       type: String,
-      default: null
+      default: null,
     },
     provider: {
       type: String,
-      required: true
+      required: true,
     },
     videoId: {
       type: String,
-      required: true
+      required: true,
     },
     transcriptTitle: {
       type: String,
-      default: null
+      default: null,
     },
     transcript: {
       type: String,
-      default: null
+      default: null,
     },
     fixWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
+    },
+    mediaWarning: {
+      type: Boolean,
+      default: false,
+    },
+    mediaWarningContent: {
+      type: String,
+      default: null,
+    },
+    mediaWarningLinkTitle: {
+      type: String,
+      default: null,
+    },
+    mediaWarningLinkUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      IconView,
+      show: this.mediaWarning,
     }
   },
+  watch: {
+    mediaWarning(v) {
+      this.show = v
+    },
+  },
   computed: {
     accordion() {
       return [
         {
           field_title: this.transcriptTitle,
           field_rich_text: {
-            value: this.transcript
-          }
-        }
+            value: this.transcript,
+          },
+        },
       ]
-    }
-  }
+    },
+  },
+  methods: {
+    onSeeVideo() {
+      this.show = false
+      this.$emit('update:alert', false) // or emit nothing if parent doesn't care
+    },
+  },
 }
 </script>
 
@@ -106,5 +194,51 @@ export default {
   :deep(.section-group--size-page .video-player) {
     @include fp(min-height, 250, 625);
   }
+
+  /* Center *within the wrapper*, not the window */
+  .wcl-video-modal {
+    &__overlay {
+      position: absolute; /* absolute to .b-overlay-wrap */
+      inset: 0; /* fill the wrapper */
+      z-index: 10; /* above the video */
+      display: grid; /* simple centering */
+      place-items: center; /* vertical + horizontal center */
+      padding: 1rem;
+      text-align: center;
+      /* Optional dim */
+      background: rgba(0, 0, 0, 0.6);
+      overflow: auto; /* scroll if content taller than video area */
+    }
+
+    /* The centered card */
+    &__panel {
+      color: white;
+      width: min(756px, 100%);
+      border-radius: 12px;
+      // padding: 1.25rem 1.5rem;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+
+      /* Tidy content */
+      img {
+        width: 110px;
+        margin-bottom: 30px;
+      }
+
+      &--content {
+        margin-bottom: 30px;
+      }
+
+      .wcl-cta {
+        margin-bottom: 0;
+        @media (max-width: 388px) {
+          display: block;
+          width: 100%;
+          margin-left: 0 !important;
+          margin-bottom: 10px;
+          width: 100%;
+        }
+      }
+    }
+  }
 }
 </style>

package/src/components/SubComponents/VideoThumbnail/index.vue

@@ -28,6 +28,10 @@
     >
       <div class="wcl-video-modal__video">
         <video-media
+          :media-warning="video.warning"
+          :media-warning-content="video.warningContent"
+          :media-warning-link-title="video.warningLinkTitle"
+          :media-warning-link-url="video.warningLinkUrl"
           :media-title="video.mediaTitle"
           :media-description="video.mediaDescription"
           :video-id="video.id"
@@ -36,13 +40,13 @@
           :transcript-title="video.transcriptTitle"
           :fix-width="video.fixWidth"
           :rtl="video.rtl"
+          :aria-hidden="video.alertStrip ? 'true' : null"
         />
       </div>
       <template #footer><div></div></template>
     </BModal>
   </div>
 </template>
-
 <script>
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
 import VideoPlay from './../../../assets/icons/video-play.svg?url'