@worksafevictoria/wcl7.5 1.14.0-beta.7 → 1.14.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.14.0-beta.7",
+  "version": "1.14.0-beta.9",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/assets/icons/icon-view-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140.743" height="128.766" viewBox="0 0 140.743 128.766"><g transform="translate(0 0)"><path d="M5.986,128.766A5.986,5.986,0,0,1,.45,120.507a.323.323,0,0,1,.083-.056.35.35,0,0,0,.073-.046L117.334,3.677a4.454,4.454,0,0,0,1.036-1.742l.107-.108a5.986,5.986,0,1,1,8.465,8.465L103,34.206a125.465,125.465,0,0,1,25.74,21.55,12.981,12.981,0,0,1,.042,17.348A125.8,125.8,0,0,1,115.556,85.64a118.682,118.682,0,0,1-16.05,11.144,90.43,90.43,0,0,1-17.951,7.984,63.583,63.583,0,0,1-18.927,3.054h-1.8a67.061,67.061,0,0,1-25.8-5.62L10.213,127.02A5.951,5.951,0,0,1,5.986,128.766Zm78.962-75.9a1.515,1.515,0,0,0-1.076.452L50.589,86.6A1.514,1.514,0,0,0,51,89.032,25.738,25.738,0,0,0,69.553,90.17,27.416,27.416,0,0,0,87.511,72.044a25.711,25.711,0,0,0-1.2-18.323,1.51,1.51,0,0,0-1.36-.854Z" transform="translate(8.661 0)" fill="#fff"/><path d="M44.106,51.784a1.461,1.461,0,0,0,.365-1.437A25.83,25.83,0,0,1,43.417,43.4,26.937,26.937,0,0,1,70.355,16.467,25.6,25.6,0,0,1,77.3,17.5a1.461,1.461,0,0,0,1.437-.371L90.354,5.506a1.52,1.52,0,0,0-.6-2.52A62.333,62.333,0,0,0,70.355,0C44.615-.342,18.874,17.664,3.388,34.718a12.87,12.87,0,0,0-.042,17.36,126.959,126.959,0,0,0,20.58,18.138,1.532,1.532,0,0,0,1.951-.174Z" transform="translate(0 21.038)" fill="#fff"/></g></svg>

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

@@ -5,7 +5,7 @@ const mockAccordionItems = [
     field_title: 'Item one',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<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>',
     },
     id: 'id-1',
@@ -14,7 +14,7 @@ const mockAccordionItems = [
     field_title: 'Item two',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<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>',
     },
     id: 'id-2',
@@ -23,7 +23,7 @@ const mockAccordionItems = [
     field_title: 'Item three',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<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>',
     },
     id: 'id-3',

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

@@ -22,7 +22,7 @@
           <stepper-item
             v-if="isStepper"
             :itemid="item.id ? item.id : '' + index"
-            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :content="hasContent(item) ? item.field_rich_text.processed : ''"
             :title="item.field_title"
             class="accordion__item stepper"
             :rtl="rtl || item.field_rtl"
@@ -33,7 +33,7 @@
           <accordion-item
             v-if="!isStepper"
             :itemid="item.id ? item.id : '' + index"
-            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :content="hasContent(item) ? item.field_rich_text.processed : ''"
             :title="item.field_title"
             class="accordion__item"
             :rtl="rtl || item.field_rtl"
@@ -124,7 +124,7 @@ export default {
       return false
     },
     hasContent(item) {
-      return item?.field_rich_text?.value
+      return item?.field_rich_text?.processed
     },
   },
 }

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

@@ -9,19 +9,67 @@
       :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">
+              <img
+                class="icon"
+                :src="IconView"
+                alt="Icon View"
+                aria-hidden="true"
+              />
+              <h2 class="title">
+                {{ mediaAlertTitle }}
+              </h2>
+              <p class="description">
+                {{ mediaAlertDescription }}
+              </p>
+              <CtaButton
+                text-only="true"
+                aria-describedby="gethelp-label"
+                :url="mediaAlertUrl"
+              >
+                Get help
+              </CtaButton>
+              <CtaButton
+                type="gray"
+                text-only="true"
+                aria-describedby="seevideo-label"
+                @click="onSeeVideo"
+              >
+                See video
+              </CtaButton>
+            </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 +78,101 @@
 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'
 
 export default {
   name: 'VideoMedia',
   components: {
+    CtaButton,
     VideoPlayer,
     SectionGroup,
-    Accordion
+    Accordion,
+    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',
+    },
+    mediaAlert: {
+      type: Boolean,
+      default: false,
+    },
+    mediaAlertTitle: {
+      type: String,
+      default: null,
+    },
+    mediaAlertDescription: {
+      type: String,
+      default: null,
+    },
+    mediaAlertUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      IconView,
+      show: this.mediaAlert,
     }
   },
+  watch: {
+    mediaAlert(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 +191,57 @@ 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;
+      }
+      .title {
+        font-size: 39px;
+        font-weight: 700;
+        margin-bottom: 24px;
+      }
+      .description {
+        font-size: 24px;
+        font-weight: 400;
+        text-align: left;
+        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

@@ -27,19 +27,11 @@
       size="xl"
     >
       <div class="wcl-video-modal__video">
-        <p class="visually-hidden">
-          video.triggerWarning = {{ video.alertStrip }} <br />
-          video.triggerWarningContent = {{ video.alertStripDesc }} <br />
-          video.triggerWarningTitle :- {{ video.alertStripTitle }} <br />
-          video.triggerWarningUrl :- {{ video.alertStripUrl }} <br />
-        </p>
-        <AlertStrip
-          v-if="video.alertStrip"
-          :is-warning="true"
-          :desc="video.alertStripDesc"
-          :url="video.alertStripUrl"
-        />
         <video-media
+          :media-alert="video.alertStrip"
+          :media-alert-title="video.alertStripTitle"
+          :media-alert-description="video.alertStripDesc"
+          :media-alert-url="video.alertStripUrl"
           :media-title="video.mediaTitle"
           :media-description="video.mediaDescription"
           :video-id="video.id"
@@ -48,15 +40,14 @@
           :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 AlertStrip from './../../Global/AlertStrip/index.vue'
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
 import VideoPlay from './../../../assets/icons/video-play.svg?url'
 import IconClose from './../../../assets/icons/icon-close.svg?url'
@@ -66,7 +57,6 @@ import axios from 'axios'
 export default {
   name: 'VideoThumbnail',
   components: {
-    AlertStrip,
     VideoMedia,
     IconClose,
     'b-modal': BModal,