@worksafevictoria/wcl7.5 1.9.0-beta.4 → 1.9.0-beta.5

package/src/components/SubComponents/Icon/README.md

@@ -9,8 +9,8 @@ Import the Icon component, and give it the URL path to the SVG file. When webpac
 ```html
 <template>  
   <div id="app">
-    <icon width="100" height="100" :glyph="Logo"></icon>
-    <icon width="100" height="100" :glyph="Close"></icon>
+    <icon width="100" height="100" :glyph="Logo" icon-alt="Logo icon"></icon>
+    <icon width="100" height="100" :glyph="Close" icon-alt="Close icon"></icon>
   </div>
 </template>
 

package/src/components/SubComponents/Icon/example.js

@@ -3,6 +3,7 @@ const template = `
     width="40"
     height="40"
     glyph="icon"
+    icon-alt="icon"
   />
 `
 

package/src/components/SubComponents/Icon/index.stories.js

@@ -29,7 +29,7 @@ const generate = (args) => ({
   },
   template: `
     <div style="margin-top:15px" :style="{background: !args.inverted ? 'white' : 'grey'}">
-      <icon v-bind="args" />
+      <icon v-bind="args" icon-alt="icon" />
     </div>`
 })
 

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

@@ -7,9 +7,9 @@
       aria-hidden="true"
       :class="
         className +
-          (first ? ' icon_first' : '') +
-          (last ? ' icon_last' : '') +
-          (inverted ? ' icon--inverted' : '')
+        (first ? ' icon_first' : '') +
+        (last ? ' icon_last' : '') +
+        (inverted ? ' icon--inverted' : '')
       "
       :width="width"
       :height="height"
@@ -24,104 +24,104 @@
 </template>
 
 <script>
-import { detectBrowser } from '../../../../lib/detect-browser'
+import { detectBrowser } from "../../../../lib/detect-browser";
 // TODO: Add .visually-hidden label prop
 export default {
-  name: 'Icon',
+  name: "Icon",
   props: {
     className: {
       type: String,
-      default: ''
+      default: "",
     },
     glyph: {
       type: [Object, String],
-      required: true
+      required: true,
     },
     width: {
       type: [Number, String],
-      default: 32
+      default: 32,
     },
     height: {
       // height is required in IE
       // undefined type added in case height was going to be handled explicitly, check JobsAtHomeDay for more details
       type: [Number, String],
-      default: 32
+      default: 32,
     },
     first: {
       type: Boolean,
-      default: false
+      default: false,
     },
     last: {
       type: Boolean,
-      default: false
+      default: false,
     },
     inverted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     bordered: {
       type: Boolean,
-      default: false
+      default: false,
     },
     iconAlt: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
     return {
-      renderedSVG: undefined
-    }
+      renderedSVG: undefined,
+    };
   },
   computed: {
     isHtml() {
-      return this.glyph && typeof this.glyph === 'string'
-    }
+      return this.glyph && typeof this.glyph === "string";
+    },
   },
   mounted() {
-    this.renderedSVG = this.getSvg()
+    this.renderedSVG = this.getSvg();
   },
   methods: {
     getSvg() {
       if (this.glyph) {
-        let icon
-        const content = String(this.glyph)
-        const isSVGTag = content.includes('<svg')
+        let icon;
+        const content = String(this.glyph);
+        const isSVGTag = content.includes("<svg");
         if (!isSVGTag) {
-          icon = document.createElement('img')
-          icon.src = content
+          icon = document.createElement("img");
+          icon.src = content;
         } else {
-          if (window && navigator && detectBrowser(navigator) === 'IE') {
-            return this.glyph
+          if (window && navigator && detectBrowser(navigator) === "IE") {
+            return this.glyph;
           } else {
-            const temp = document.createElement('div')
-            temp.innerHTML = content
-            icon = temp.querySelector('svg')
-            icon.removeAttribute('width')
-            icon.removeAttribute('height')
+            const temp = document.createElement("div");
+            temp.innerHTML = content;
+            icon = temp.querySelector("svg");
+            icon.removeAttribute("width");
+            icon.removeAttribute("height");
           }
         }
         if (this.iconAlt) {
-          icon.setAttribute('alt', this.iconAlt)
+          icon.setAttribute("alt", this.iconAlt);
         }
-        icon.setAttribute('width', this.width)
-        icon.setAttribute('height', this.height)
+        icon.setAttribute("width", this.width);
+        icon.setAttribute("height", this.height);
         const customClass =
           this.className +
-          (this.first ? ' icon_first' : '') +
-          (this.last ? ' icon_last' : '') +
-          (this.inverted ? ' icon--inverted' : '')
-        icon.setAttribute('class', 'icon ' + customClass)
-        icon.setAttribute('focusable', false)
-        icon.setAttribute('aria-hidden', true)
-        return icon.outerHTML
+          (this.first ? " icon_first" : "") +
+          (this.last ? " icon_last" : "") +
+          (this.inverted ? " icon--inverted" : "");
+        icon.setAttribute("class", "icon " + customClass);
+        icon.setAttribute("focusable", false);
+        icon.setAttribute("aria-hidden", true);
+        return icon.outerHTML;
       }
-      return null
-    }
-  }
-}
+      return null;
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-@import './styles';
+@import "./styles";
 </style>

package/src/components/SubComponents/ResourceGroup/cardbody.vue

@@ -30,7 +30,7 @@
                   height="12"
                   width="17"
                   class="card_item-menu__title__caret"
-                  alt=""
+                  alt="Card item Menu Title expand icon"
                 />
                 <img
                   v-show="cardMenuIsOpen"
@@ -38,7 +38,7 @@
                   height="12"
                   width="17"
                   class="card_item-menu__title__caret"
-                  alt=""
+                  alt="Card item Menu Title collapse icon"
                 />
                 <h3 class="card_item-menu__title--small">
                   {{ card.dropdownTitle }}
@@ -49,60 +49,48 @@
                   v-if="card.fileType"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileTypeTitle }}
                   <column class="card_item__meta card_item__meta--filetype">
-                    <rich-text
-                      :content="card.fileType"
-                      :without-container="true"
-                    />
+                    <rich-text :content="card.fileType" :without-container="true" />
                   </column>
                 </li>
                 <li
                   v-if="card.fileSize"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileSizeTitle }}
                   <column class="card_item__meta card_item__meta--filesize">
-                    <rich-text
-                      :content="card.fileSize"
-                      :without-container="true"
-                    />
+                    <rich-text :content="card.fileSize" :without-container="true" />
                   </column>
                 </li>
                 <li
                   v-if="card.fileLength"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileLengthTitle }}
                   <column class="card_item__meta card_item__meta--filelength">
-                    <rich-text
-                      :content="card.fileLength"
-                      :without-container="true"
-                    />
+                    <rich-text :content="card.fileLength" :without-container="true" />
                   </column>
                 </li>
                 <li
                   v-if="card.readingLevel"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.readingLevelTitle }}
                   <column class="card_item__meta card_item__meta--readinglevel">
-                    <rich-text
-                      :content="card.readingLevel"
-                      :without-container="true"
-                    />
+                    <rich-text :content="card.readingLevel" :without-container="true" />
                   </column>
                 </li>
               </ul>
@@ -119,30 +107,30 @@
 </template>
 
 <script>
-import Row from '../../Containers/Row/index.vue'
-import Column from '../../Containers/Column/index.vue'
-import CardFooter from './cardfooter.vue'
-import documentsvg from '../../../assets/icons/document.svg?url'
-import CaretUp from '../../../assets/icons/caret-up.svg?url'
-import CaretDown from '../../../assets/icons/caret-down.svg?url'
-import RichText from '../../Paragraphs/RichText/index.vue'
+import Row from "../../Containers/Row/index.vue";
+import Column from "../../Containers/Column/index.vue";
+import CardFooter from "./cardfooter.vue";
+import documentsvg from "../../../assets/icons/document.svg?url";
+import CaretUp from "../../../assets/icons/caret-up.svg?url";
+import CaretDown from "../../../assets/icons/caret-down.svg?url";
+import RichText from "../../Paragraphs/RichText/index.vue";
 
 export default {
   components: {
     Column,
     Row,
     CardFooter,
-    RichText
+    RichText,
   },
   props: {
     card: {
       type: Object,
-      required: true
+      required: true,
     },
     resourceType: {
       type: String,
-      default: 'resource-group'
-    }
+      default: "resource-group",
+    },
   },
   data() {
     return {
@@ -152,36 +140,36 @@ export default {
       documentsvg,
       CaretUp,
       CaretDown,
-      windowWidth: 0
-    }
+      windowWidth: 0,
+    };
   },
   computed: {
     isMobile() {
-      return this.windowWidth < 768
+      return this.windowWidth < 768;
     },
     isResourceGroup() {
-      return this.cardResourseType === 'resource-group' ? true : false
-    }
+      return this.cardResourseType === "resource-group" ? true : false;
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize)
-    })
-    this.onResize()
+      window.addEventListener("resize", this.onResize);
+    });
+    this.onResize();
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
+    window.removeEventListener("resize", this.onResize);
   },
   methods: {
     handleMenuItemClick(menuItem) {
       if (this.isMobile || this.isResourceGroup) {
         for (let i = 0; i < menuItem.length; i++) {
-          let newMenuItem = menuItem[i]
+          let newMenuItem = menuItem[i];
 
-          this.cardMenuIsOpen = !this.cardMenuIsOpen
+          this.cardMenuIsOpen = !this.cardMenuIsOpen;
 
-          newMenuItem.isOpen = false
-          menuItem.splice(i, 1, newMenuItem)
+          newMenuItem.isOpen = false;
+          menuItem.splice(i, 1, newMenuItem);
         }
       }
     },
@@ -189,33 +177,33 @@ export default {
       if (this.isMobile || this.isResourceGroup) {
         if (event.keyCode === 32 || event.keyCode === 13) {
           for (let i = 0; i < menuItem.length; i++) {
-            let newMenuItem = menuItem[i]
-            this.cardMenuIsOpen = !this.cardMenuIsOpen
-            newMenuItem.isOpen = false
-            menuItem.splice(i, 1, newMenuItem)
+            let newMenuItem = menuItem[i];
+            this.cardMenuIsOpen = !this.cardMenuIsOpen;
+            newMenuItem.isOpen = false;
+            menuItem.splice(i, 1, newMenuItem);
           }
         }
       }
     },
     onResize() {
-      this.windowWidth = window.innerWidth
-      let titles = document.getElementsByClassName('card_item-menu__title')
+      this.windowWidth = window.innerWidth;
+      let titles = document.getElementsByClassName("card_item-menu__title");
       if (Array.isArray(titles)) {
         if (this.isMobile || this.isResourceGroup) {
           titles.forEach((t) => {
-            t.setAttribute('tabIndex', '0')
-          })
+            t.setAttribute("tabIndex", "0");
+          });
         } else {
           titles.forEach((t) => {
-            t.removeAttribute('tabIndex')
-          })
+            t.removeAttribute("tabIndex");
+          });
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
-@import './styles';
+@import "../../../includes/scss/all";
+@import "./styles";
 </style>

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

@@ -4,21 +4,23 @@
       <div class="video-thumbnail">
         <img
           :src="videoThumbnail"
-          alt="video thumbnail"
+          :alt="`Thumbnail for video: ${video.mediaTitle}`"
           width="100%"
           class="video-thumbnail__image"
         />
         <img
           :src="VideoPlay"
-          alt="Play button"
+          alt="Video play button"
+          aria-hidden="true"
           class="video-thumbnail__button"
         />
       </div>
     </a>
     <!-- Modal -->
     <b-modal
-      :id="`wcl-video-modal`"
+      :id="`wcl-video-modal-${video.id}`"
       v-model="showModal"
+      title="Video modal"
       scrollable
       class="wcl-video-modal__modal"
       no-footer
@@ -42,18 +44,18 @@
 </template>
 
 <script>
-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'
-import { BModal } from 'bootstrap-vue-next'
-import axios from 'axios'
+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";
+import { BModal } from "bootstrap-vue-next";
+import axios from "axios";
 
 export default {
-  name: 'VideoThumbnail',
+  name: "VideoThumbnail",
   components: {
     VideoMedia,
     IconClose,
-    'b-modal': BModal,
+    "b-modal": BModal,
   },
   props: {
     video: {
@@ -66,42 +68,42 @@ export default {
       VideoPlay,
       IconClose,
       showModal: false,
-      videoThumbnail: '',
-    }
+      videoThumbnail: "",
+    };
   },
   mounted() {
-    this.getVideoThumbnail()
+    this.getVideoThumbnail();
   },
   methods: {
     async getVideoThumbnail(url) {
       try {
-        if (this.video.provider === 'youtube') {
-          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
-          const response = await axios.head(this.videoThumbnail)
+        if (this.video.provider === "youtube") {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`;
+          const response = await axios.head(this.videoThumbnail);
           if (response.status === 200) {
           } else {
-            this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
+            this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
           }
-        } else if (this.video.provider === 'vimeo') {
+        } else if (this.video.provider === "vimeo") {
           let thumbnail = await axios.get(
-            `https://vimeo.com/api/v2/video/${this.video.id}.json`,
-          )
+            `https://vimeo.com/api/v2/video/${this.video.id}.json`
+          );
           if (thumbnail.data) {
-            this.videoThumbnail = thumbnail.data[0].thumbnail_large
+            this.videoThumbnail = thumbnail.data[0].thumbnail_large;
           }
         }
       } catch (error) {
         if (error.response && error.response.status === 404) {
-          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
         } else {
         }
       }
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 // Outside wrapper style
 .wcl-video-thumbnail-wrapper {
   margin-bottom: 32px;
@@ -127,17 +129,17 @@ export default {
         left: 50%;
         //height: 68px;
         //width: 68px;
-        @include fp('height', 65, 68);
-        @include fp('width', 65, 68);
+        @include fp("height", 65, 68);
+        @include fp("width", 65, 68);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 
-        @include mq('sm') {
+        @include mq("sm") {
           height: 80px;
           width: 80px;
         }
 
-        @include mq('xs') {
+        @include mq("xs") {
           height: 64px;
           width: 64px;
         }