@worksafevictoria/wcl7.5 1.10.0 → 1.11.0

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

@@ -13,6 +13,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="button icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -36,6 +37,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="anchor icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -59,6 +61,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="link icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -66,12 +69,12 @@
 </template>
 
 <script>
-import arrowRight from '../../../assets/icons/arrow-right.svg?component'
-import arrowLeft from '../../../assets/icons/arrow-left.svg?component'
-import icon from './../Icon/index.vue'
+import arrowRight from "../../../assets/icons/arrow-right.svg?component";
+import arrowLeft from "../../../assets/icons/arrow-left.svg?component";
+import icon from "./../Icon/index.vue";
 
 export default {
-  name: 'CtaButton',
+  name: "CtaButton",
   components: {
     arrowRight,
     arrowLeft,
@@ -80,18 +83,18 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: "default",
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
+        ["default", "white", "gray", "workwell", "dark"].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: '',
+      default: "",
     },
     alt: {
       type: String,
-      default: '',
+      default: "",
     },
     rtl: {
       type: Boolean,
@@ -138,15 +141,15 @@ export default {
     },
     focusOutline: {
       type: String,
-      default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+      default: "default",
+      validator: (value) => ["default", "light", "dark"].indexOf(value) >= 0,
     },
   },
   data() {
     return {
       arrowRight,
       arrowLeft,
-    }
+    };
   },
   computed: {
     // var r = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -158,81 +161,81 @@ export default {
     // r.test('/myfolder/test.txt'); // false - relative URL
     // r.test('test'); // false - also relative URL
     isAbsolute() {
-      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
-      return r.test(this.url)
+      let r = new RegExp("^(?:[a-z]+:)?//", "i");
+      return r.test(this.url);
     },
     // Some links come out of Drupal in the format `entity:node/551`
     // As an interim solution, make the link go to `node/551` and it
     // will render correctly. Not ideal as it doesn't forward to the
     // friendly link. Should come out of Drupal with a proper alias.
     linkUriProcessed() {
-      if (this.url?.indexOf('entity:') === 0) {
-        return this.url.slice(7)
-      } else if (this.url?.indexOf('internal:') === 0) {
-        return this.url.slice(9)
+      if (this.url?.indexOf("entity:") === 0) {
+        return this.url.slice(7);
+      } else if (this.url?.indexOf("internal:") === 0) {
+        return this.url.slice(9);
       } else {
-        return this.url
+        return this.url;
       }
     },
     generatedClass() {
-      return `wcl-cta ${this.type} ${this.rtl ? 'rtl' : ''} ${
-        this.workwell ? 'workwell' : ''
-      } ${this.isCentred ? 'text-center' : ''} ${
-        this.textOnly ? 'wcl-cta--text-only' : ''
-      } ${this.stretch ? 'wcl-cta--stretch' : ''} ${
-        this.slim ? 'wcl-cta--slim' : ''
-      } ${'wcl-cta--focus-' + this.focusOutline}`
+      return `wcl-cta ${this.type} ${this.rtl ? "rtl" : ""} ${
+        this.workwell ? "workwell" : ""
+      } ${this.isCentred ? "text-center" : ""} ${
+        this.textOnly ? "wcl-cta--text-only" : ""
+      } ${this.stretch ? "wcl-cta--stretch" : ""} ${this.slim ? "wcl-cta--slim" : ""} ${
+        "wcl-cta--focus-" + this.focusOutline
+      }`;
     },
     glyphClass() {
-      const hasArrow = !this.glyph && !this.textOnly
+      const hasArrow = !this.glyph && !this.textOnly;
       return this.isCentred
-        ? { ['wcl-cta__arrow']: hasArrow }
+        ? { ["wcl-cta__arrow"]: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow,
-          }
+            ["wcl-cta__arrow"]: hasArrow,
+          };
     },
     textClass() {
-      return this.isCentred ? {} : {}
+      return this.isCentred ? {} : {};
     },
   },
   methods: {
     clicked() {
-      var theEl = this.$el.getElementsByClassName('wcl-cta__link-text')
-      var attrs
+      var theEl = this.$el.getElementsByClassName("wcl-cta__link-text");
+      var attrs;
       if (theEl && theEl.length > 0) {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: theEl[0]?.innerText?.split('\n')[0],
+          label: theEl[0]?.innerText?.split("\n")[0],
           data: this.url,
-        }
+        };
       } else {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: '',
+          label: "",
           data: this.url,
-        }
+        };
       }
       // push event to gtm
       if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.interaction.cta.click', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.cta.click", ...attrs });
       }
       // navigate to url
       if (!this.url) {
         //donothing
       } else if (this.isAbsolute) {
-        window.open(this.url)
+        window.open(this.url);
       } else {
-        this.$router.push(this.url)
+        this.$router.push(this.url);
       }
-      this.$emit('clicked')
+      this.$emit("clicked");
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 // styles can be found in global src/assets/styles/stylesheet.scss
 // this is because rich text html can dynamically specify cta button class
 .wcl-cta {
@@ -245,12 +248,12 @@ export default {
   &--focus {
     &-light {
       &:focus {
-        @include focus-outline('light');
+        @include focus-outline("light");
       }
     }
     &-dark {
       &:focus {
-        @include focus-outline('dark');
+        @include focus-outline("dark");
       }
     }
   }

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>