@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

package/src/components/Global/HeroHeader/index.vue

@@ -12,14 +12,8 @@
         : false
     "
   >
-    <row
-      v-if="type === 'hero'"
-      class="wcl-hero-header__wrap wcl-hero-header__showmore"
-    >
-      <container
-        class="wcl-hero-header__content-wrapper__content"
-        :class="{ rtl }"
-      >
+    <row v-if="type === 'hero'" class="wcl-hero-header__wrap wcl-hero-header__showmore">
+      <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
         <row>
           <column class="wcl-hero-header__content-wrapper__content-col">
             <div>
@@ -28,7 +22,12 @@
                 class="btn btn-link wcl-hero-header__showmore--link"
                 @click="showMore"
               >
-                <icon width="16px" height="10.61px" :glyph="CaretDown" />
+                <icon
+                  width="16px"
+                  height="10.61px"
+                  :glyph="CaretDown"
+                  icon-alt="expand icon"
+                />
                 <span class="wcl-hero-header__showmore--text">Show more</span>
               </button>
             </div>
@@ -38,18 +37,14 @@
     </row>
     <row class="wcl-hero-header__wrap">
       <div class="wcl-hero-header__content-wrapper">
-        <container
-          class="wcl-hero-header__content-wrapper__content"
-          :class="{ rtl }"
-        >
+        <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
           <row>
             <column
               :xs="generateGridValue(type)"
               class="wcl-hero-header__content-wrapper__content-col"
               :md="7"
               :class="{
-                [`wcl-hero-header__content-wrapper__content-col--split`]:
-                  $slots.side,
+                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side,
               }"
             >
               <breadcrumb
@@ -64,10 +59,7 @@
                 :content="strippedTitle"
                 class="wcl-hero-header__title"
               />
-              <div
-                v-if="subTitle || $slots.description"
-                class="header-rich-text-wrap"
-              >
+              <div v-if="subTitle || $slots.description" class="header-rich-text-wrap">
                 <rich-text
                   v-if="subTitle"
                   :content="subTitle"
@@ -120,9 +112,7 @@
       <column
         v-if="type === 'collection' && showMask"
         :sm="'7'"
-        :style="
-          image && image.url ? `background-image:url(${image.url})` : false
-        "
+        :style="image && image.url ? `background-image:url(${image.url})` : false"
         class="wcl-hero-header__right type-collection"
         :class="{ 'rtl-flip': rtl }"
         :offset-sm="rtl ? 0 : 5"
@@ -131,6 +121,7 @@
           <img
             src="../../../assets/images/hero-header-mask.png"
             role="presentation"
+            alt="hero header mask"
           />
         </div>
       </column>
@@ -143,9 +134,7 @@
         :class="{ 'rtl-flip': rtl }"
         :offset-md="rtl ? 0 : 7"
         :offset-xs="rtl ? 0 : 7"
-        :style="
-          image && image.url ? `background-image:url(${image.url})` : false
-        "
+        :style="image && image.url ? `background-image:url(${image.url})` : false"
       >
         &nbsp;
       </column>
@@ -155,19 +144,19 @@
   </container>
 </template>
 <script>
-import SocialShare from './../SocialShare/index.vue'
-import Container from './../../Containers/Container/index.vue'
-import Row from './../../Containers/Row/index.vue'
-import Column from './../../Containers/Column/index.vue'
-import Breadcrumb from './../../SubComponents/Breadcrumb/index.vue'
-import CtaButton from './../../SubComponents/CtaButton/index.vue'
-import Icon from './../../SubComponents/Icon/index.vue'
-import HeroHeaderChevron from './../../../assets/images/hero-header-chevron.svg?component'
-import CaretDown from './../../../assets/icons/chev-down-white.svg?url'
-import RichText from './../../Paragraphs/RichText/index.vue'
+import SocialShare from "./../SocialShare/index.vue";
+import Container from "./../../Containers/Container/index.vue";
+import Row from "./../../Containers/Row/index.vue";
+import Column from "./../../Containers/Column/index.vue";
+import Breadcrumb from "./../../SubComponents/Breadcrumb/index.vue";
+import CtaButton from "./../../SubComponents/CtaButton/index.vue";
+import Icon from "./../../SubComponents/Icon/index.vue";
+import HeroHeaderChevron from "./../../../assets/images/hero-header-chevron.svg?component";
+import CaretDown from "./../../../assets/icons/chev-down-white.svg?url";
+import RichText from "./../../Paragraphs/RichText/index.vue";
 
 export default {
-  name: 'HeroHeader',
+  name: "HeroHeader",
   components: {
     Container,
     Row,
@@ -182,15 +171,15 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: "default",
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     description: {
       type: String,
-      default: '',
+      default: "",
     },
     image: {
       type: Object,
@@ -234,33 +223,33 @@ export default {
       socialShareToggle: false,
       HeroHeaderChevron,
       CaretDown,
-    }
+    };
   },
   computed: {
     generatedClass() {
-      let c = `wcl-hero-header type-${this.type}`
+      let c = `wcl-hero-header type-${this.type}`;
       if (this.bgColor) {
-        c = c + ' -with-bg'
+        c = c + " -with-bg";
       }
-      return c
+      return c;
     },
     subTitle() {
-      let content = undefined
+      let content = undefined;
       if (this.description) {
-        if (typeof this.description === 'string') {
-          content = this.description
-        } else if (typeof this.description === 'object') {
-          content = this.description.processed
+        if (typeof this.description === "string") {
+          content = this.description;
+        } else if (typeof this.description === "object") {
+          content = this.description.processed;
         }
       }
-      if (content && !content.startsWith('<') && !this.tag?.startsWith('h')) {
-        content = `<p class="intro">${content}</p>`
+      if (content && !content.startsWith("<") && !this.tag?.startsWith("h")) {
+        content = `<p class="intro">${content}</p>`;
       }
-      return content
+      return content;
     },
     strippedTitle() {
-      if (this.type === 'hero' && this.title.length > 122) {
-        return this.title.slice(0, 122) + '...'
+      if (this.type === "hero" && this.title.length > 122) {
+        return this.title.slice(0, 122) + "...";
       }
       // Will reintroduce if business requirement
       // if (this.title?.includes('.')) {
@@ -269,7 +258,7 @@ export default {
       //     return sentences.map((sentence) => sentence.trim()).join('.<br/>')
       //   }
       // }
-      return this.title
+      return this.title;
     },
     // Will reintroduce if business requirement
     //   strippedDescription() {
@@ -282,57 +271,57 @@ export default {
   },
   mounted() {
     if (this.$bus) {
-      this.$bus.$on('scrollToTop', () => {
+      this.$bus.$on("scrollToTop", () => {
         setTimeout(() => {
-          const title = this.$refs.title
+          const title = this.$refs.title;
           if (title) {
-            title.$el.setAttribute('tabindex', 0)
-            title.$el.focus()
+            title.$el.setAttribute("tabindex", 0);
+            title.$el.focus();
           }
-        }, 500)
-      })
+        }, 500);
+      });
     }
   },
   beforeDestroy() {
     if (this.$bus) {
-      this.$bus.$off('scrollToTop')
+      this.$bus.$off("scrollToTop");
     }
   },
   methods: {
     generateGridValue(type) {
       switch (type) {
         //the prop type default
-        case 'default':
-          return '6'
-        case 'image':
-          return '6'
+        case "default":
+          return "6";
+        case "image":
+          return "6";
         default:
-          return '7'
+          return "7";
       }
     },
     showMore(ev) {
       if (ev?.target?.scrollIntoView) {
         ev.target.scrollIntoView({
-          behavior: 'smooth',
+          behavior: "smooth",
           alignToTop: true,
-          block: 'start',
-        })
+          block: "start",
+        });
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
         document_title: this.cta.filename,
-      }
+      };
       if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.download", ...attrs });
       }
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import './styles';
+@import "./styles";
 
 .wysiwyg {
   :deep(.cta-button:last-child) {

package/src/components/Global/SocialShare/index.vue

@@ -7,153 +7,138 @@
     <div class="social-share__wrap">
       <span class="social-share__header">Share</span>
       <div class="social-share__button-wrapper">
-        <b-button
+        <a
           v-if="showEmail"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
+          :href="`mailto:?body=${url}`"
+          class="social-share__button social-share__anchor"
         >
           <div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`mailto:?body=${url}`"
-            >
-              <span class="visually-hidden">Email</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="emailIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
-        <b-button
+            <span class="visually-hidden">Email</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="emailIcon"
+              alt="social share email icon"
+            />
+          </div>
+        </a>
+
+        <a
           v-if="showFacebook"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
-          ><div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`https://www.facebook.com/sharer.php?u=${url}`"
-              target="_blank"
-            >
-              <span class="visually-hidden">Facebook</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="facebookIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
-        <b-button
+          :href="`https://www.facebook.com/sharer.php?u=${url}`"
+          class="social-share__button social-share__anchor"
+          target="_blank"
+        >
+          <div class="social-share__circle--black">
+            <span class="visually-hidden">Facebook</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="facebookIcon"
+              alt="social share facebook icon"
+            />
+          </div>
+        </a>
+
+        <a
           v-if="showTwitter"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
-          ><div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`https://twitter.com/intent/tweet?url=${url}`"
-              target="_blank"
-            >
-              <span class="visually-hidden">Twitter</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="twitterIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
+          :href="`https://twitter.com/intent/tweet?url=${url}`"
+          class="social-share__button social-share__anchor"
+          target="_blank"
+        >
+          <div class="social-share__circle--black">
+            <span class="visually-hidden">Twitter</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="twitterIcon"
+              alt="social share twitter icon"
+            />
+          </div>
+        </a>
 
         <hr v-if="showPdf" class="social-share__hr" />
 
-        <b-button
+        <a
           v-if="showPdf"
-          tabindex="-1"
-          variant="link"
+          href="#"
           class="social-share__button"
           @click.prevent="savePdf()"
-          ><div class="social-share__circle--white">
-            <a tabindex="0" class="social-share__anchor" href="#">
-              <span class="visually-hidden">PDF</span>
-              <img
-                role="presentation"
-                class="social-share__img-pdf"
-                :src="officeFilePdfIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
+        >
+          <div class="social-share__circle--white">
+            <span class="visually-hidden">PDF</span>
+            <img
+              role="presentation"
+              class="social-share__img-pdf"
+              :src="officeFilePdfIcon"
+              alt="social share pdf icon"
+            />
+          </div>
+        </a>
       </div>
     </div>
   </b-button-group>
 </template>
 
 <script>
-import emailIcon from '../../../assets/icons/SocialShare/email-white.svg?url'
-import facebookIcon from '../../../assets/icons/SocialShare/facebook-white.svg?url'
-import twitterIcon from '../../../assets/icons/SocialShare/x-icon-white.svg?url'
-import officeFilePdfIcon from '../../../assets/icons/SocialShare/office-file-pdf.svg?url'
-import { BButton, BButtonGroup } from 'bootstrap-vue-next'
+import emailIcon from "../../../assets/icons/SocialShare/email-white.svg?url";
+import facebookIcon from "../../../assets/icons/SocialShare/facebook-white.svg?url";
+import twitterIcon from "../../../assets/icons/SocialShare/x-icon-white.svg?url";
+import officeFilePdfIcon from "../../../assets/icons/SocialShare/office-file-pdf.svg?url";
+import { BButton, BButtonGroup } from "bootstrap-vue-next";
 
 export default {
-    name: 'SocialShare',
-    components: { BButtonGroup, BButton },
-    props: {
-        rtl: {
-            type: Boolean,
-            default: false
-        }
+  name: "SocialShare",
+  components: { BButtonGroup, BButton },
+  props: {
+    rtl: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-        return {
-            url: null,
-            emailIcon,
-            facebookIcon,
-            twitterIcon,
-            officeFilePdfIcon,
-            mobileToggle: false,
-            rightToggle: true
-        };
+  },
+  data() {
+    return {
+      url: null,
+      emailIcon,
+      facebookIcon,
+      twitterIcon,
+      officeFilePdfIcon,
+      mobileToggle: false,
+      rightToggle: true,
+    };
+  },
+  computed: {
+    showFacebook() {
+      return true;
     },
-    computed: {
-        showFacebook() {
-            return true;
-        },
-        showTwitter() {
-            return true;
-        },
-        showEmail() {
-            return true;
-        },
-        showPdf() {
-            return this.$canPrint && this.$canPrint();
-        }
+    showTwitter() {
+      return true;
     },
-    mounted() {
-      let winHref = window.location.href
-          if (winHref.toLowerCase().includes("worksafe")) {
-            this.url = window.location.href;
-        }
+    showEmail() {
+      return true;
     },
-    methods: {
-        savePdf() {
-            window.printOnLoad = true;
-            let URL = `/pdf${window.location.pathname}`;
-            window.open(URL);
-        }
+    showPdf() {
+      return this.$canPrint && this.$canPrint();
+    },
+  },
+  mounted() {
+    let winHref = window.location.href;
+    if (winHref.toLowerCase().includes("worksafe")) {
+      this.url = window.location.href;
     }
-}
+  },
+  methods: {
+    savePdf() {
+      window.printOnLoad = true;
+      let URL = `/pdf${window.location.pathname}`;
+      window.open(URL);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .social-share {
   background: $white;
@@ -167,7 +152,7 @@ export default {
   left: 0;
   z-index: 2;
 
-  @include mq('sm') {
+  @include mq("sm") {
     position: relative;
     top: auto;
     left: auto;
@@ -179,7 +164,7 @@ export default {
   &__header {
     font-size: 14px;
     line-height: 50px;
-    @include mq('sm') {
+    @include mq("sm") {
       line-height: 40px;
     }
   }
@@ -191,7 +176,7 @@ export default {
     align-content: center;
     margin: auto;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: block;
       margin: 0;
       flex-direction: unset;
@@ -226,7 +211,7 @@ export default {
     left: 0px;
     position: relative;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: none;
     }
   }
@@ -238,10 +223,10 @@ export default {
     border: 0;
     margin-bottom: 8px;
 
-    @include mq('sm') {
+    @include mq("sm") {
       margin-right: 8px;
     }
-    @include mq('xs') {
+    @include mq("xs") {
       margin-bottom: 0px;
     }
     a {
@@ -264,7 +249,7 @@ export default {
 
   &__vr {
     border: 0;
-    @include mq('sm') {
+    @include mq("sm") {
       border-left: 2px solid $lightgray;
       margin-left: 12px;
     }
@@ -289,7 +274,7 @@ export default {
     }
   }
 }
-@include mq('sm') {
+@include mq("sm") {
   .fixed {
     position: fixed;
     bottom: 0;
@@ -312,7 +297,7 @@ export default {
   left: inherit;
   right: 0;
 
-  @include mq('sm') {
+  @include mq("sm") {
     border-radius: 0;
   }
 }