@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

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

@@ -1,6 +1,7 @@
 import ScrollSpy from './index.vue'
+import { BCol, BRow, BContainer } from 'bootstrap-vue-next'
 
-const itemList = [
+const englishItemList = [
   {
     text: 'Section one heading',
     id: 'item-1'
@@ -41,31 +42,25 @@ const arabicItemList = [
 export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
+  tags: ['autodocs'],
   argTypes: {
-    title: {
-      control: 'text',
-      defaultValue: 'On this page'
-    },
     itemList: {
-      control: 'array'
-    },
-    itemListEnglish: {
-      control: 'array',
-      defaultValue: itemList
-    },
-    itemListArabic: {
-      control: 'array',
-      defaultValue: arabicItemList
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+      table: {disable: true}
+    }
+  },
+  args: {
+    title: 'On this page',
+    itemListEnglish:  englishItemList,
+    itemListArabic: arabicItemList,
+    rtl: false,
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
     }
-  }
 }
-const DefaultContent = (args, { argTypes }) => ({
-  components: { ScrollSpy },
-  props: Object.keys(argTypes),
+const DefaultContent = (args) => ({
+  components: { ScrollSpy, BCol, BRow, BContainer },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       text: `
@@ -79,7 +74,7 @@ const DefaultContent = (args, { argTypes }) => ({
           ipsum commodo tempor sunt in proident.
         `,
       arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
-      itemList,
+      englishItemList,
       arabicItemList
     }
   },
@@ -126,7 +121,7 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="itemListEnglish" />
+      <scroll-spy v-bind="args" :item-list="args.itemListEnglish" />
       </b-col>
     </b-row>
 
@@ -174,11 +169,10 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="arabicItemList" />
+      <scroll-spy v-bind="args" :item-list="args.arabicItemList" />
       </b-col>
     </b-row>
     </b-container>`
 })
 
 export const Default = DefaultContent.bind({})
-Default.parameters = { controls: { exclude: ['itemList'] } }

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

@@ -2,7 +2,7 @@
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
       <b-list-group
-        v-b-scrollspy="{ offset: 100, method: 'auto' }"
+        v-b-scrollspy="scrollSpy"
         class="flex-column"
       >
         <div class="scrollspy__title">{{ title }}</div>
@@ -22,10 +22,12 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import { BNavbar, BListGroup, BListGroupItem, vBScrollspy } from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
-  components: { SectionGroup },
+  components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
+  directives: { 'b-scrollspy':vBScrollspy },
   props: {
     title: {
       type: String,
@@ -38,6 +40,10 @@ export default {
     rtl: {
       type: Boolean,
       default: false
+    },
+    scrollSpy: {
+      type: Object,
+      default: () => {return{ element: 'body', offset: 100, method: 'auto' }}
     }
   },
   methods: {

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/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/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 = {}