@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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

@@ -48,7 +48,8 @@
               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
@@ -98,9 +99,7 @@
               >
             </column>
           </row>
-          <template v-if="showSocial && type !== 'hero'">
-            <social-share :rtl="rtl" />
-          </template>
+          <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
         </container>
       </div>
       <!-- Type Default -->
@@ -152,7 +151,7 @@
       </column>
       <!-- No Col needed for type Hero -->
     </row>
-    <social-share v-if="showSocial && type === 'hero'" :rtl="rtl" />
+    <social-share v-show="showSocial && type === 'hero'" :rtl="rtl" />
   </container>
 </template>
 <script>
@@ -178,63 +177,63 @@ export default {
     CtaButton,
     HeroHeaderChevron,
     RichText,
-    Icon
+    Icon,
   },
   props: {
     type: {
       type: String,
-      default: 'default'
+      default: 'default',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     image: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     cta: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     bgColor: {
       type: Boolean,
-      default: false
+      default: false,
     },
     breadcrumbItems: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showBreadcrumb: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showMask: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showSocial: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       socialShareToggle: false,
       HeroHeaderChevron,
-      CaretDown
+      CaretDown,
     }
   },
   computed: {
@@ -271,7 +270,7 @@ export default {
       //   }
       // }
       return this.title
-    }
+    },
     // Will reintroduce if business requirement
     //   strippedDescription() {
     //     let strippedString = this.description.replace(/(<([^>]+)>)/gi, '')
@@ -282,8 +281,8 @@ export default {
     //   }
   },
   mounted() {
-    if (this.$nuxt?.$on) {
-      this.$nuxt.$on('scrollToTop', () => {
+    if (this.$bus) {
+      this.$bus.$on('scrollToTop', () => {
         setTimeout(() => {
           const title = this.$refs.title
           if (title) {
@@ -295,8 +294,8 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.$nuxt?.$off) {
-      this.$nuxt.$off('scrollToTop')
+    if (this.$bus) {
+      this.$bus.$off('scrollToTop')
     }
   },
   methods: {
@@ -316,20 +315,20 @@ export default {
         ev.target.scrollIntoView({
           behavior: 'smooth',
           alignToTop: true,
-          block: 'start'
+          block: 'start',
         })
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
-        document_title: this.cta.filename
+        document_title: this.cta.filename,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Global/ProgressBar/index.stories.js

@@ -21,31 +21,21 @@ const mockData = [
 export default {
   title: 'Global/ProgressBar',
   component: ProgressBar,
-  argTypes: {
-    steeperStyle: {
-      control: 'boolean'
-    },
-    items: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
+  tags: ['autodocs'],
+  args: {
+    items: mockData,
+    rtl: false
   }
 }
 
 export const Steeper = {
   args: {
-    steeperStyle: true,
-    items: mockData,
-    rtl: false
+    steeperStyle: true
   }
 }
 
 export const Default = {
   args: {
-    steeperStyle: false,
-    items: mockData,
-    rtl: false
+    steeperStyle: false
   }
 }

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

@@ -98,7 +98,7 @@
 <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/twitter-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'
 
@@ -137,7 +137,8 @@ export default {
         }
     },
     mounted() {
-        if (process.client) {
+      let winHref = window.location.href
+          if (winHref.toLowerCase().includes("worksafe")) {
             this.url = window.location.href;
         }
     },

package/src/components/Global/Strip/index.stories.js

@@ -9,23 +9,7 @@ const stripContentFull =
   export default {
     title: 'Global/Strip',
     component: Strip,
-    argTypes: {
-      stripHeading: {
-        control: 'text'
-      },
-      stripContent: {
-        control: 'text'
-      },
-      rtl: {
-        control: 'boolean'
-      },
-      type: {
-        control: 'text'
-      },
-      mini: {
-        control: 'boolean'
-      }
-    }
+    tags: ['autodocs'],
   }
   
   export const MiniAlertStrip = {

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

@@ -12,7 +12,7 @@
       @dismissed="handleDismissed()"
     >
       <div
-        :role="mini ? 'link' : false"
+        :role="mini ? 'link' : null"
         :class="type + '-strip__inner-wrap'"
         :tabindex="mini ? 0 : false"
         :style="mini ? 'cursor: pointer;' : false"
@@ -286,7 +286,7 @@ export default {
     &__content {
       &--left {
         .alert-strip__heading {
-          display: inline-block;
+          display: block; //inline-block;
           margin-bottom: 16px;
         }
       }
@@ -331,11 +331,15 @@ export default {
 
       a {
         color: $black;
-
-        &:focus {
+        text-decoration: none;
+      }
+      a:hover {   
           text-decoration: underline;
         }
-      }
+      a:focus {
+          text-decoration: underline;
+        }
+    
     }
     &__icon {
       &--caret {

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

@@ -6,15 +6,15 @@
       class="accordion-item"
       :class="{
         rtl: rtl,
-        '--with-pre-heading': preHeading && showPreHeading
+        '--with-pre-heading': preHeading && showPreHeading,
       }"
     >
       <a
-        :id="'accordion' + _uid ? _uid : ''"
+        :id="'accordion' + itemid"
         role="button"
         :aria-expanded="showAccordion ? 'true' : 'false'"
         class="accordion-item__title"
-        :aria-controls="'sect' + _uid ? _uid : ''"
+        :aria-controls="'sect' + itemid"
         tabindex="0"
         @click.prevent="toggleAccordion"
         @keypress.enter="toggleAccordion"
@@ -33,7 +33,7 @@
           :icon-alt="'collapse'"
           :glyph="CaretUp"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
         <icon
@@ -44,17 +44,17 @@
           :icon-alt="'expand'"
           :glyph="CaretDown"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
       </a>
       <b-card-body v-if="content">
         <div
           v-show="showAccordion"
-          :id="'sect' + _uid ? _uid : ''"
+          :id="'sect' + itemid"
           class="accordion-item__content"
           role="region"
-          :aria-labelledby="'accordion' + _uid ? _uid : ''"
+          :aria-labelledby="'accordion' + itemid"
         >
           <rich-text :content="content" />
         </div>
@@ -76,42 +76,46 @@ export default {
     RichText,
     Icon,
     BCard,
-    BCardBody
+    BCardBody,
   },
   props: {
     title: {
       type: String,
-      default: 'Item'
+      default: 'Item',
     },
     preHeading: {
       type: String,
-      default: 'PRE-HEADING'
+      default: 'PRE-HEADING',
     },
     content: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     open: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     meta: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
+    itemid: {
+      type: String,
+      default: 'Item',
+    },
   },
   data: () => ({
     showAccordion: false,
     CaretDown,
-    CaretUp
+    CaretUp,
   }),
   mounted() {
     this.$nextTick(() => {
@@ -122,12 +126,16 @@ export default {
     toggleAccordion() {
       this.showAccordion = !this.showAccordion
       if (this.showAccordion) {
-        this.$root.$emit('accordionItemOpen', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
+        }
       } else {
-        this.$root.$emit('accordionItemClose', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
+        }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -5,15 +5,15 @@
       v-if="title"
       class="accordion-stepper"
       :class="{
-        rtl: rtl
+        rtl: rtl,
       }"
     >
       <div>
         <button
-          :id="'accordion' + _uid ? _uid : ''"
+          :id="'accordion' + itemid"
           :aria-expanded="showAccordion ? 'true' : 'false'"
           class="accordion-stepper__title"
-          :aria-controls="'sect' + _uid ? _uid : ''"
+          :aria-controls="'sect' + itemid"
           @click="toggleAccordion"
         >
           <div
@@ -25,13 +25,9 @@
           </div>
 
           <div class="accordion-stepper__titleText">
-            <rich-text
-            :tag="'h3'"
-            :tag-class="'card-title'"
-            :content="title"
-          />
+            <rich-text :tag="'h3'" :tag-class="'card-title'" :content="title" />
           </div>
-          
+
           <div class="stepper-icon__wrapper">
             <icon
               v-show="showAccordion && content"
@@ -54,10 +50,10 @@
         <b-card-body v-if="content">
           <div
             v-show="showAccordion"
-            :id="'sect' + _uid ? _uid : ''"
+            :id="'sect' + itemid"
             class="accordion-stepper__content"
             role="region"
-            :aria-labelledby="'accordion' + _uid ? _uid : ''"
+            :aria-labelledby="'accordion' + itemid"
           >
             <rich-text :content="content" />
           </div>
@@ -80,42 +76,46 @@ export default {
     RichText,
     Icon,
     BCard,
-    BCardBody
+    BCardBody,
   },
   props: {
     title: {
       type: String,
-      default: 'Item'
+      default: 'Item',
     },
     content: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     open: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     number: {
       type: Number,
-      default: null
+      default: null,
     },
     isWorkWell: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    itemid: {
+      type: String,
+      default: 'Item',
+    },
   },
   data: () => ({
     showAccordion: false,
     CaretDown,
-    CaretUp
+    CaretUp,
   }),
   mounted() {
     this.$nextTick(() => {
@@ -125,8 +125,8 @@ export default {
   methods: {
     toggleAccordion() {
       this.showAccordion = !this.showAccordion
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -6,53 +6,57 @@ const mockAccordionItems = [
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<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>'
-    }
+        '<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',
   },
   {
     field_title: 'Item two',
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<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>'
-    }
+        '<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',
   },
   {
     field_title: 'Item three',
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<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>'
-    }
-  }
+        '<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',
+  },
 ]
 
 export default {
   title: 'Paragraphs/Accordion',
   component: Accordion,
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3', 'h4']
+      options: ['h2', 'h3', 'h4'],
     },
     isStepper: {
       control: 'boolean',
-      table: { disable: true }
+      table: { disable: true },
     },
 
     showPreHeading: {
       control: 'boolean',
-      table: { disable: true }
+      table: { disable: true },
     },
     option: {
       control: 'select',
-      options: ['open-all', 'close-all', 'open-first']
+      options: ['open-all', 'close-all', 'open-first'],
     },
     size: {
       control: 'text',
-      table: { disable: true }
-    }
-  }
+      table: { disable: true },
+    },
+  },
 }
 
 export const Standard = {
@@ -65,8 +69,8 @@ export const Standard = {
     rtl: false,
     option: 'open-first',
     accordionList: mockAccordionItems,
-    size: 'content'
-  }
+    size: 'content',
+  },
 }
 
 export const Stepper = {
@@ -79,6 +83,6 @@ export const Stepper = {
     rtl: false,
     option: 'open-first',
     accordionList: mockAccordionItems,
-    size: 'content'
-  }
+    size: 'content',
+  },
 }