@worksafevictoria/wcl7.5 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Common/CardGrid/cardgrid.stories.js

@@ -7,51 +7,19 @@ const cardGridTitle = 'Card Grid Title'
 export default {
   title: 'Common/CardGrid',
   component: CardGrid,
+  tags: ['autodocs'],
   argTypes: {
-    cards: {
-      control: 'array'
-    },
     onClick: {},
-    rtl: {
-      control: 'boolean'
-    },
-    title: {
-      control: 'text'
-    },
     titleTag: {
       control: {
         type: 'select',
       },
       options: ['h2', 'h3']
     },
-    subHeading: {
-      control: 'text'
-    },
-    gridColumnSize: {
-      control: 'number'
-    },
-    columnsPerRow: {
-      control: 'number'
-    },
-    forceLgcolumns: {
-      control: 'number'
-    },
-    forceMdcolumns: {
-      control: 'number'
-    },
-    forceSmcolumns: {
-      control: 'number'
-    },
-    size: {
+  size: {
       control: 'select',
         options: ['half-content', 'content', 'page', 'full']
     },
-    isSelectable: {
-      control: 'boolean'
-    },
-    cardIdPrefix: {
-      control: 'text'
-    },
     rowSpacing: {
       control: 'select',
         options: ['large', 'small', 'none']
@@ -76,10 +44,7 @@ export default {
       control: 'select',
       options: ['content', 'block', 'container', 'section']
     },
-    noPaddingTop: {
-      control: 'boolean'
-    },
-    cardHeaderImageType: {
+   cardHeaderImageType: {
       control: 'select',
       options: ['none', 'icon', 'image']
     },
@@ -91,15 +56,6 @@ export default {
       control:'select',
       options: ['small', 'medium', 'large']
     },
-    iconIsBordered: {
-      control: 'boolean'
-    },
-    showDivider: {
-      control: 'boolean'
-    },
-    cardHeaderTitle: {
-      control: 'text'
-    },
     headerSize: {
       control: 'select',
       options: ['medium', 'large', 'extra-large', '2x-extra-large', 'custom']
@@ -108,9 +64,6 @@ export default {
       control:'select',
       options: ['left', 'center', 'right']
     },
-    headerTag: {
-      control: 'text'
-    },
     caret: {
       control:'select',
       options: ['right', 'down', 'up', 'left', 'external', 'none']
@@ -126,12 +79,6 @@ export default {
     borderType: {
       control:'select',
       options: ['thin', 'none', 'shadow']
-    },
-    contentClass: {
-      control: 'text'
-    },
-    cardDescription: {
-      control: 'text'
     }
   }
 }

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

@@ -3,6 +3,7 @@ import AlertStrip from './index.vue'
 export default {
   title: 'Global/AlertStrip',
   component: AlertStrip,
+  tags: ['autodocs'],
   args: {
     isWarning: false,
     desc: 'Refresh the page in order to show alert strip after dismissing it.',

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

@@ -7,6 +7,7 @@ dateInput = dateInput.toString()
 export default {
   title: 'Global/AppFooter',
   component: AppFooter,
+  tags: ['autodocs'],
   data() {
     return {
       footerMenu

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

@@ -3,6 +3,7 @@ import ContrastMode from './index.vue'
 export default {
     title: 'Global/ContrastMode',
     component: ContrastMode,
+    tags: ['autodocs'],
   }
   
   const Template = (args) => ({

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

@@ -31,6 +31,7 @@ const heroTitle = 'HeroHeader hero example'
 export default {
   title: 'Global/HeroHeader',
   component: HeroHeader,
+  tags: ['autodocs'],
   argTypes: {
     type: {
       control: 'string',
@@ -43,7 +44,7 @@ export default {
     description: '<p class="intro">The page subtitle goes in here... The page subtitle goes in here... The page subtitle goes in here...</p><p><a href="#" class="cta-button">class cta-button</a></p>',
     image:  {
         url:
-          'https://content.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+          'https://content-v2.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
         alt: 'Some alt text'
       },
     cta: cta_content,

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/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"

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

@@ -5,30 +5,15 @@ export default {
   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/RelatedInformation/index.stories.js

@@ -4,6 +4,7 @@ import { taxonomyTagsList } from '../../../mock/related-info'
 export default {
   title: 'Paragraphs/RelatedInformation',
   component: RelatedInformation,
+  tags: ['autodocs'],
   argTypes: {
     goToCollectionPage: {
       table: {

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}

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/Tabs/index.stories.js

@@ -48,6 +48,7 @@ const mockData = [
 export default {
   title: 'Paragraphs/Tabs',
   component: Tabs,
+  tags: ['autodocs'],
   args: {
     items: mockData,
     rtl: false,

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

@@ -4,6 +4,7 @@ import { fields, fieldsAr, items, itemsAr } from './Constants'
 export default {
   title: 'Paragraphs/TabulatedData',
   component: TabulatedData,
+  tags: ['autodocs'],
   data() {
     return {
       TabulatedData,

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

@@ -8,6 +8,7 @@ import {
 export default {
   title: 'Paragraphs/TaskFinder',
   component: TaskFinder,
+  tags: ['autodocs'],
   args: {
     taskList: taskFinderTempData,
     title: taskFinderTempTitle,

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

@@ -19,6 +19,7 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
+  tags: ['autodocs'],
   args: {
     content: '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>',
     titleText: 'A sample media item',

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

@@ -106,6 +106,7 @@ const mockData = {
 export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

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

@@ -19,18 +19,12 @@ const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse
 export default {
   title: 'Paragraphs/VideoPlayer',
   component: { VideoMedia,  Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
       options: ['h2', 'h3']
     },
-    mediaTitle: {
-      control: 'text'
-    },
-    mediaDescription: {
-      control: 'text'
-        
-    },
     videoId: {
       control: 'select',
       options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
@@ -38,12 +32,6 @@ export default {
     provider: {
       control: 'select',
       options: [mockData.provider.YouTube, mockData.provider.Vimeo],
-    },
-    transcriptTitle: {
-      control: 'text'
-    },
-    transcript: {
-      control: 'text'
     }
   }
 }

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

@@ -3,6 +3,7 @@ import WebformPara from './index.vue'
 export default {
     title: 'Paragraphs/Webform',
     component: WebformPara,
+    tags: ['autodocs'],
     argTypes: {
       preview: {
         control: 'boolean',
@@ -10,9 +11,6 @@ export default {
           disable: true
         }
       },
-      contentApiUrl: {
-        control: 'text',
-      },
       processID: {
         control: 'text',
         table: {

package/src/components/SubComponents/Breadcrumb/index.stories.js

@@ -4,19 +4,11 @@ import mockData from './constants'
 export default {
   title: 'SubComponents/Breadcrumb',
   component: Breadcrumb,
-  argTypes: {
-    breadcrumbItems: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
-  }
-}
-
-export const Default = {
+  tags: ['autodocs'],
   args: {
     breadcrumbItems: mockData,
     rtl: false
   }
 }
+
+export const Default = {}

package/src/components/SubComponents/CardGroup/index.stories.js

@@ -3,40 +3,11 @@ import CardGroup from './index.vue'
 export default {
   title: 'SubComponents/CardGroup',
   component: { CardGroup },
+  tags: ['autodocs'],
   argTypes: {
-    collectionTitle: {
-      control: 'text'
-    },
-    titleTag: {
-      control: 'text'
-    },
-    cards: {
-      type: 'number'
-    },
     background: {
       control: 'select',
       options: ['grey', 'yellow', 'white']
-    },
-    showImage: {
-      control: 'boolean'
-    },
-    link: {
-      control: 'text'
-    },
-    date: {
-      control: 'text'
-    },
-    location: {
-      control: 'text'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    columns: {
-      type: 'number'
-    },
-    emptyCardsText: {
-      control: 'text'
     }
   }
 }

package/src/components/SubComponents/CtaButton/index.stories.js

@@ -4,6 +4,7 @@ import svg from './../../../assets/icons/instagram.svg?raw'
 export default {
   title: 'SubComponents/CTA',
   component: CtaButton,
+  tags: ['autodocs'],
   argTypes: {
     glyph: {
       control: ['object', 'text'],
@@ -13,30 +14,6 @@ export default {
       control: 'text',
       table: { disable: true }
     },
-    url: {
-      control: 'text'
-    },
-    isCentred: {
-      control: 'boolean'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    slim: {
-      control: 'boolean'
-    },
-    stretch: {
-      control: 'boolean'
-    },
-    textOnly: {
-      control: 'boolean'
-    },
-    workwell: {
-      control: 'boolean'
-    },
-    disabled: {
-      control: 'boolean'
-    },
     isFluid: {
       control: 'boolean',
       table: { disable: true }

package/src/components/SubComponents/FormInstance/style.scss

@@ -171,3 +171,15 @@ button.btn-primary.btn-wizard-nav-previous {
     
   }
 }
+
+// bootstrap 5 CSS changes
+@import "bootstrap";
+select {
+  @extend .form-select;
+}
+.input-group-append {
+  @extend .input-group-text;
+}
+.input-group-append .input-group-text{
+  all: initial;
+}

package/src/components/SubComponents/Icon/index.stories.js

@@ -5,10 +5,8 @@ import svg from '../../../assets/icons/instagram.svg?raw'
 export default {
   title: 'SubComponents/Icon',
   components: Icon,
+  tags: ['autodocs'],
   argTypes: {
-    bordered: {
-      control: 'boolean'
-    },
     glyph: {
       control: ['object', 'text'],
        table: { disable: true }
@@ -17,9 +15,6 @@ export default {
       control: ['number', 'text'],
       table: { disable: true }
     },
-    inverted: {
-      control: 'boolean'
-    },
     width: {
       control: ['number', 'text'],
       table: { disable: true }

package/src/components/SubComponents/MediaPlayer/index.stories.js

@@ -11,16 +11,11 @@ const mockData = {
 export default {
   title: 'SubComponents/MediaPlayer',
   component: { VideoPlayer, Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
-    videoId: {
-      control: 'text',
-    },
     provider: {
       control: 'select',
       options: mockData.provider
-    },
-    rtl: {
-      control: 'boolean'
     }
   }
 }

package/src/components/SubComponents/Pagination/index.stories.js

@@ -3,6 +3,7 @@ import Pagination from './index.vue'
 export default {
   title: 'SubComponents/Pagination',
   component: Pagination,
+  tags: ['autodocs'],
   argTypes: {
     ariaLabel: {
       control: 'text',
@@ -10,9 +11,6 @@ export default {
         disable: true
       }
     },
-    rows: {
-      control: 'number',
-    },
     offset: {
       control: 'number',
       table: {
@@ -31,9 +29,6 @@ export default {
         disable: true
       }
     },
-    maxPages: {
-      control: 'number',
-    },
     pageClicked: { 
       table: { disable: true }
     },

package/src/components/SubComponents/ResourceGroup/List/index.stories.js

@@ -5,6 +5,7 @@ const bundleContent = ['Document', 'Presentation', 'Spreadsheet', 'Resource']
 export default {
   title: 'SubComponents/ResourceGroup',
   component: { ResourceGroup },
+  tags: ['autodocs'],
   argTypes: {
     background: {
       control: 'select',
@@ -32,7 +33,7 @@ export default {
     },
     resourceType: {
       control: 'text',
-     table: { disable: true }
+      table: { disable: true }
     }
   },
   args: {
@@ -50,7 +51,7 @@ export default {
     hasPreselectedFilters: false,
     totalResults: 10,
     filterResults: 1,
-    showLoadMore: false,
+    showLoadMore: true,
     resourceType: 'resource-list'
   }
 }

package/src/components/SubComponents/SingleImage/index.stories.js

@@ -3,26 +3,12 @@ import SingleImage from './index.vue'
 export default {
   title: 'SubComponents/SingleImage',
   component: SingleImage,
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',
       options: ['page', 'content', 'half-content']
-    },
-    caption: {
-      control: 'text'
-    },
-    url: {
-      control: 'text',
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    presentation: {
-      control: 'boolean'
-    },
-    alt: {
-      control: 'text',
-     }
+    }
   }
 }
 

package/src/components/SubComponents/VideoThumbnail/index.stories.js

@@ -17,6 +17,7 @@ const mockData = {
 export default {
   title: 'SubComponents/VideoThumbnail',
   component: { VideoThumbnail },
+  tags: ['autodocs'],
   argTypes: {
     video: {
       control: 'object',