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

package/src/components/Paragraphs/ListGroup/list-group.stories.js

@@ -4,61 +4,65 @@ import { storyData, storyDataAr } from './Constants'
 export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
+  tags: ['autodocs'],
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)" />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)" />`
 })
 
 export const Default = Template.bind({})

package/src/components/Paragraphs/ListGroup/navigation-card.stories.js

@@ -4,51 +4,55 @@ import { storyData, storyDataAr } from './Constants'
 export default {
   title: 'Paragraphs/NavigationCards',
   component: ListGroup,
+  tags: ['autodocs'],
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h2'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: false
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: true,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h2',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
 const Template = (args, { argTypes }) => ({
   components: { ListGroup },
-  props: Object.keys(argTypes),
+  setup () {
+    return { args }
+  },
   data() {
     return {
       storyData,
@@ -56,9 +60,9 @@ const Template = (args, { argTypes }) => ({
     }
   },
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
   />
 `
 })

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

@@ -3,31 +3,17 @@ import MarketingBanner from './index.vue'
 export default {
   title: 'Paragraphs/MarketingBanner',
   component: MarketingBanner,
+  tags: ['autodocs'],
   argTypes: {
-    image: {
-      control: 'text'
-    },
-    leftText: {
-      control: 'text'
-    },
-    leftBg: {
+   leftBg: {
       control: 'select',
       options: ['yellow', 'black', 'white']
     },
-    rightText: {
-      control: 'text'
-    },
-    rightBg: {
+     rightBg: {
       control: 'select',
       options: ['yellow', 'black', 'white']
     },
-    withLink: {
-      control: 'boolean'
-    },
-    hideLeft: {
-      control: 'boolean'
-    },
-    link: {
+      link: {
       control: 'text',
       table: { disable: true }
     },

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

@@ -106,40 +106,39 @@ const itemListAr = [
 export default {
   title: 'Paragraphs/ProofPoints',
   component: ProofPoints,
+  tags: ['autodocs'],
   argTypes: {
-    title: {
-      control: 'text',
-      defaultValue: 'Section heading'
-    },
     headingTag: {
       control: 'select',
-      options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+      options: ['h2', 'h3']
     },
-    columns: {
+   columns: {
       control: 'select',
-      options: [3, 4],
-      defaultValue: 3
+      options: [3, 4]
     },
     itemList: {
       table: { disable: true }
     },
     type: {
       control: 'select',
-      options: ['default', 'icon', 'image'],
-      defaultValue: 'icon'
+      options: ['default', 'icon', 'image']
     }
+  },
+  args: {
+    title: 'Section heading',
+    headingTag: 'h2',
+    rtl: false,
+    columns: 3,
+    type: 'icon'
   }
 }
 
-const DefaultProofPoint = (args, { argTypes }) => ({
+const DefaultProofPoint = (args) => ({
   components: { ProofPoints },
-  props: Object.keys(argTypes),
-  template: `<proof-points v-bind="$props" :item-list="dynamicItemList" />`,
+  setup() {
+    return { args };
+  },
+  template: `<proof-points v-bind="args" :item-list="dynamicItemList" />`,
   data() {
     return {
       itemListDefault,
@@ -156,9 +155,9 @@ const DefaultProofPoint = (args, { argTypes }) => ({
       }
       return array.map((item) => {
         const clone = JSON.parse(JSON.stringify(item))
-        if (this.type === 'image') {
+        if (args.type === 'image') {
           clone.icon = undefined
-        } else if (this.type === 'icon') {
+        } else if (args.type === 'icon') {
           clone.image = undefined
         } else {
           clone.icon = undefined

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

@@ -4,29 +4,19 @@ import { taxonomyTagsList } from '../../../mock/related-info'
 export default {
   title: 'Paragraphs/RelatedInformation',
   component: RelatedInformation,
+  tags: ['autodocs'],
   argTypes: {
-    showTaxonomies: {
-      control: 'boolean',
-      defaultValue: true
+    goToCollectionPage: {
+      table: {
+        disable: true
+      }
+    }
   },
-  showTaxonomyHeading: {
-    control: 'boolean',
-      defaultValue: true
-  },
-  taxonomies: {
-    control: 'array',
-    defaultValue: taxonomyTagsList
-  }
+  args: {
+    showTaxonomies: true,
+    showTaxonomyHeading: true,
+    taxonomies: taxonomyTagsList
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { RelatedInformation },
-  props: Object.keys(argTypes),
-  template: `
-    <related-information 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}

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

@@ -6,20 +6,22 @@
     <row v-if="showTaxonomyHeading">
       <h2>Related information</h2>
     </row>
-    <row class="related-info-tags">
+    <row>
+      <div class="related-info-tags">
       <button
         v-for="(taxonomy, i) in taxonomies"
         :key="i"
-        class="related-info-tag"
+        class="related-info-tag btn text-nowrap"
         role="button"
         @click="
           goToCollectionPage(
-            taxonomy.field_term_link_to_collection_pg.path.alias
+            taxonomy
           )
         "
       >
         <strong>{{ taxonomy.name }}</strong>
       </button>
+    </div>
     </row>
   </container>
 </template>
@@ -49,9 +51,13 @@ export default {
     }
   },
   methods: {
-    goToCollectionPage(url) {
-      this.$router.push(url)
-      this.$emit('goToCollectionPage')
+    goToCollectionPage(taxonomy) {
+      if (process.env.IS_STORYBOOK === 'TRUE') {
+        alert('Will go to Collection Page at : ' + taxonomy.url )
+      } else {
+        this.$router.push(taxonomy.field_term_link_to_collection_pg.path.alias)
+        this.$emit('goToCollectionPage')
+      }
     }
   }
 }

package/src/components/Paragraphs/RelatedInformation/styles.scss

@@ -15,15 +15,13 @@ h2 {
     position: relative;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
     
     .related-info-tags {
         display: flex;
-        justify-content: flex-start;
+        flex-wrap: wrap;
         gap: 12px;
    }
     .related-info-tag {
-        position: relative;
         text-decoration: none;
         font-style: normal;
         font-size: 16px;

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

@@ -379,7 +379,8 @@ const mockData = {
 
 export default {
   title: 'SubComponents/RichText',
-  component: RichText
+  component: RichText,
+  tags: ['autodocs'],
 }
 
 export const WYSIWYG = {

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

@@ -42,6 +42,7 @@ const arabicItemList = [
 export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
+  tags: ['autodocs'],
   argTypes: {
     itemList: {
       table: {disable: true}
@@ -51,7 +52,8 @@ export default {
     title: 'On this page',
     itemListEnglish:  englishItemList,
     itemListArabic: arabicItemList,
-    rtl: false
+    rtl: false,
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
     }
 }
 const DefaultContent = (args) => ({

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

@@ -1,10 +1,7 @@
 <template>
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
-      <b-list-group
-        v-b-scrollspy="{ offset: 100, method: 'auto' }"
-        class="flex-column"
-      >
+      <b-list-group v-b-scrollspy="scrollSpy" class="flex-column">
         <div class="scrollspy__title">{{ title }}</div>
         <b-list-group-item
           v-for="(item, index) in itemList"
@@ -22,24 +19,41 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
-import { BNavbar, BListGroup, BListGroupItem } from 'bootstrap-vue-next'
+import {
+  BNavbar,
+  BListGroup,
+  BListGroupItem,
+  vBScrollspy,
+} from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
   components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
+  directives: { 'b-scrollspy': vBScrollspy },
   props: {
     title: {
       type: String,
-      default: 'On this page'
+      default: 'On this page',
     },
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    scrollSpy: {
+      type: Object,
+      default: () => {
+        return {
+          element: 'body',
+          offset: 100,
+          method: 'auto',
+          contentQuery: '[id]',
+        }
+      },
+    },
   },
   methods: {
     scrollToAnchor(anchor) {
@@ -47,11 +61,11 @@ export default {
       if (anchorElement) {
         anchorElement.focus()
         anchorElement.scrollIntoView({
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Paragraphs/SelectableCards/Control/index.stories.js

@@ -4,6 +4,7 @@ import { mockSelectableCards } from '../../../../mock/control-selectable-cards'
 export default {
   title: 'Paragraphs/SelectableCards',
   component: SelectableCards,
+  tags: ['autodocs'],
   argTypes: {
     cardType: {
       table: { disable: true }

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

@@ -67,42 +67,45 @@ export default {
     CardGrid,
     CardGridItem,
     CardBody,
-    CardTop
+    CardTop,
+  },
+  emits: {
+    selected: false,
   },
   props: {
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     headingTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     columns: {
       type: Number,
-      default: 4
+      default: 4,
     },
     cardType: {
       type: String,
-      default: null
+      default: null,
     },
     cardTextAlign: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   methods: {
     selectedCardChangeFocus(card) {
@@ -110,7 +113,7 @@ export default {
     },
     clearCard() {
       this.$refs.cardgrid.clearCards()
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -57,6 +57,7 @@ const itemListAr = [
 export default {
   title: 'Paragraphs/Statistics',
   component: Statistics,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

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

@@ -80,6 +80,7 @@ export default {
     border-radius: 10px 10px 10px 10px;
     margin-bottom: 16px;
     border-top: none;
+    opacity: unset;
   }
   :deep(.card-title) {
     line-height: 1.2;

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

@@ -4,33 +4,14 @@ import { tabbedCardsMockLinks } from '../../../mock/tabbed-cards'
 export default {
   title: 'Paragraphs/TabbedCards',
   component: TabbedCards,
-  argTypes: {
-    description: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    heading: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    tabbedCards: {
-      control: 'object',
-      defaultValue: tabbedCardsMockLinks
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  tags: ['autodocs'],
+  args: {
+    description: 'Tabbed cards h2 heading',
+    heading: 'Tabbed cards h2 heading',
+    tabbedCards: tabbedCardsMockLinks,
+    workwell: false,
+    rtl: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { TabbedCards },
-  props: Object.keys(argTypes),
-  template: `
-    <tabbed-cards 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}