@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.91

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',
+  },
 }

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

@@ -7,40 +7,44 @@
     class="paragraph--accordion"
     :no-padding-bottom="isStepper"
   >
-    <ol class="accordion-list">
-      <li
-        v-for="(item, index) in accordionList"
-        :key="_uid ? _uid : '' + index"
-        :class="{
-          workwell: isWorkwell,
-          rtl: rtl || item.field_rtl,
-          stepper: isStepper
-        }"
-        class="accordion"
-      >
-        <stepper-item
-          v-if="isStepper"
-          :content="hasContent(item) ? item.field_rich_text.value : ''"
-          :title="item.field_title"
-          class="accordion__item stepper"
-          :rtl="rtl || item.field_rtl"
-          :open="isAccordionOpen(index)"
-          :number="index + 1"
-          :is-work-well="isWorkwell"
-        />
-        <accordion-item
-          v-if="!isStepper"
-          :content="hasContent(item) ? item.field_rich_text.value : ''"
-          :title="item.field_title"
-          class="accordion__item"
-          :rtl="rtl || item.field_rtl"
-          :show-pre-heading="showPreHeading"
-          :pre-heading="item.field_pre_heading || ''"
-          :open="isAccordionOpen(index)"
-          :meta="Array.isArray(item.meta) ? item.meta : []"
-        />
-      </li>
-    </ol>
+    <div>
+      <ol class="accordion-list">
+        <li
+          v-for="(item, index) in accordionList"
+          :key="item.id ? item.id : '' + index"
+          :class="{
+            workwell: isWorkwell,
+            rtl: rtl || item.field_rtl,
+            stepper: isStepper,
+          }"
+          class="accordion"
+        >
+          <stepper-item
+            v-if="isStepper"
+            :itemid="item.id ? item.id : '' + index"
+            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :title="item.field_title"
+            class="accordion__item stepper"
+            :rtl="rtl || item.field_rtl"
+            :open="isAccordionOpen(index)"
+            :number="index + 1"
+            :is-work-well="isWorkwell"
+          />
+          <accordion-item
+            v-if="!isStepper"
+            :itemid="item.id ? item.id : '' + index"
+            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :title="item.field_title"
+            class="accordion__item"
+            :rtl="rtl || item.field_rtl"
+            :show-pre-heading="showPreHeading"
+            :pre-heading="item.field_pre_heading || ''"
+            :open="isAccordionOpen(index)"
+            :meta="Array.isArray(item.meta) ? item.meta : []"
+          />
+        </li>
+      </ol>
+    </div>
   </section-group>
 </template>
 
@@ -55,51 +59,51 @@ export default {
   props: {
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     isStepper: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isWorkwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     accordionList: {
       type: Array,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     size: {
       type: String,
-      default: 'content'
+      default: 'content',
     },
     option: {
       type: String,
-      default: 'open-first'
-    }
+      default: 'open-first',
+    },
   },
   data: () => ({
     OPEN_ALL: 'open-all',
     CLOSE_ALL: 'close-all',
     OPEN_FIRST: 'open-first',
-    accordionOption: null
+    accordionOption: null,
   }),
   computed: {
     isPDF() {
       return typeof this.$isPDF === 'function' ? this.$isPDF() : false
-    }
+    },
   },
   mounted() {
     if (this.option) {
@@ -121,8 +125,8 @@ export default {
     },
     hasContent(item) {
       return item?.field_rich_text?.value
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -3,6 +3,7 @@ import Breakout from './index.vue'
 export default {
   title: 'Paragraphs/Breakout',
   component: Breakout,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

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

@@ -5,6 +5,7 @@ const bundleContent = ['news', 'page']
 export default {
   title: 'Paragraphs/BrowseContent',
   component: { BrowseContent },
+  tags: ['autodocs'],
   argTypes: {
     background: {
       control: 'select',