@worksafevictoria/wcl7.5 1.1.0-beta.3 → 1.1.0-beta.31

package/.storybook/main.js

@@ -5,7 +5,8 @@ const config = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-a11y'
+    '@storybook/addon-a11y',
+    'storybook-addon-deep-controls'
   ],
   framework: {
     name: '@storybook/vue3-vite',

package/.storybook/preview.js

@@ -28,6 +28,11 @@ setup((app) => {
 
 const preview = {
   parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }     
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package/jest.config.js

@@ -1,23 +1,25 @@
 module.exports = {
   testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   moduleFileExtensions: [
     'js',
     'json',
-    // tell Jest to handle `*.vue` files
     'vue'
   ],
   moduleNameMapper: {
     '\\.(css|less|sass|scss)$': '<rootDir>/src/mock/styleMock.js',
-    '(.*\\.svg)\\?(.*)$': '<rootDir>/src/mock/jest.svgtransformer.js'
+    '(.*\\.(svg))\\?(.*)$': '<rootDir>/src/mock/jest.svgtransformer.js',
+    '\\.(png)$': '<rootDir>/src/mock/jest.fileMock.js'
   },
   transform: {
-    // process `*.vue` files with `vue-jest`
-    '.*\\.(vue)$': '@vue/vue3-jest',
+    '.*\\.vue$': '@vue/vue3-jest',
     '^.+\\.js$': 'babel-jest',
     '.+\\.(svg)$': '<rootDir>/src/mock/jest.svgtransformer.js'
   },
-  transformIgnorePatterns: [],
-  collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/src/**/*.vue'],
+  transformIgnorePatterns:  ['!node_modules/'],
+  // collectCoverage: true, 
+  collectCoverageFrom: [  '<rootDir>/src/**/*.vue'],
   coverageReporters: ['text-summary', 'html', 'lcov', 'clover']
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.31",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -38,15 +38,18 @@
     "generate-svgs": "svgpack src/assets/icons/* > src/assets/styles/generated-icons.scss"
   },
   "dependencies": {
+    "@formio/vue": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@storybook/cli": "^7.6.3",
+    "@storybook/cli": "^7.6.20",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bootstrap-vue": "^2.23.1",
-    "bootstrap-vue-next": "^0.15.5",
+    "bootstrap-vue-next": "^0.23.2",
     "date-fns": "^2.30.0",
+    "formiojs": "4.13.13",
+    "storybook-addon-deep-controls": "^0.6.2",
     "vue": "^3.3.4",
-    "vue-formio": "^4.0.8",
+    "vue-google-charts": "^1.1.0",
     "vue-scrollto": "^2.20.0"
   },
   "resolutions": {
@@ -67,8 +70,8 @@
     "@storybook/vue3-vite": "^7.5.1",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/vue3-jest": "^29.2.6",
     "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.2.6",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.49.0",
@@ -82,7 +85,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.5",
+    "sass": "1.77.6",
     "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",
@@ -90,9 +93,9 @@
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-scss": "^5.3.0",
-    "vue-jest": "^3.0.7",
     "vite": "^4.4.11",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "vue-jest": "^3.0.7"
   }
 }

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/Common/CardGridItem/card-grid-item-icon.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 import Icon from './../../SubComponents/Icon/index.vue'
-import arrowRight from './../../../assets/icons/right-arrow.svg?raw'
+import arrowRight from './../../../assets/icons/right-arrow.svg?component'
 
 export default {
   name: 'CardGridItemIcon',

package/src/components/Common/CardGridItem/index.vue

@@ -67,9 +67,10 @@
             }
           ]"
         >
+        <div>
           <b-card-title
             v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
-            :title-tag="headerTag"
+            :tag="headerTag"
             class="card-grid-item__header"
             :class="{
               [`card-grid-item__header--${headerSize}`]: true,
@@ -99,7 +100,9 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-          <card-grid-item-caret
+        </div>
+          <div>
+            <card-grid-item-caret
             v-if="caretPosition === 'top'"
             :caret="caret"
             :rtl="rtl"
@@ -125,7 +128,10 @@
             :rtl="rtl"
           >
           </card-grid-item-icon>
+
           <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
+          </div>
+
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
@@ -200,7 +206,7 @@ import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardGridItem',
-  components: { CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
+  components: {CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
   props: {
     backgroundVariant: {
       type: String,

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/DirectoryFilters/SingleTaxonomy/index.vue

@@ -159,7 +159,8 @@ export default {
       }
     }
     .modal-body {
-      padding: 32px;
+      padding: 0px 32px 0px;
+      margin-top: 16px;
       fieldset {
         display: flex;
         flex-direction: row;

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

@@ -5,4 +5,10 @@ export default {
     component: GlobalNotice
   }
   
-  export const Default = {}
+  export const Default = {
+    loaders: [
+      () => { 
+        window.localStorage.removeItem('globalModalHidden')
+      }
+    ]
+  }

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

@@ -42,10 +42,9 @@ export default {
     title: 'HeroHeader default example',
     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',
-        alt: 'Some alt text'
-      },
+      url: '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,
     bgColor: false,
     breadcrumbItems: breadcrumb_content,

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

@@ -98,9 +98,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 +150,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>

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

@@ -30,6 +30,7 @@ const mockAccordionItems = [
 export default {
   title: 'Paragraphs/Accordion',
   component: Accordion,
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

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

package/src/components/Paragraphs/Calculator/Constants.js

@@ -29,9 +29,9 @@ export const barItems = [
 
 export const cardTitles = {
   weight: {
-    heading: 'Pick a object?',
+    heading: 'Pick an object?',
     subHeading:
-      '<p>Pick a object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
+      '<p>Pick an object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
     selectHeading: 'How heavy is the object?',
     selectSubHeading: 'Weight in kilograms, max is 500 kg'
   },

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

@@ -12,6 +12,7 @@ import {
 export default {
   title: 'Paragraphs/Calculator',
   component: Calculator,
+  tags: ['autodocs'],
   args: {
     items: barItems,
     titles: cardTitles,