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

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/README.md

@@ -44,18 +44,18 @@ This repo is based on Vue 3 in Vite, and Storybook 7.  It contains all the commo
 
 ### Usage Instructions - Yarn - recommended
 
-    yarn add @worksafevictoria/wcl
+    yarn add @worksafevictoria/wcl7.5
 
 ### Usage Instructions - npm
 
-    npm i @worksafevictoria/wcl
+    npm i @worksafevictoria/wcl7.5
 
 ### Nuxt - if you have errors after importing
 
     # nuxt.config.js
 
     build {
-      transpile: ['@worksafevictoria/wcl', 'xxx', 'xxx', 'xxx']
+      transpile: ['@worksafevictoria/wcl7.5', 'xxx', 'xxx', 'xxx']
     }
 
 #### Usage Instructions - environment variables
@@ -83,7 +83,7 @@ This repo is based on Vue 3 in Vite, and Storybook 7.  It contains all the commo
     </template>
 
     <script>
-      import { Container, Column, Row, CtaButton } from '@worksafevictoria/wcl'
+      import { Container, Column, Row, CtaButton } from '@worksafevictoria/wcl7.5'
       export default {
         components: { Container, Column, Row, CtaButton }
       }

package/ci/build/build_validation.yml

@@ -4,7 +4,7 @@
 # Project: Worksafe Public Website - Front End
 # Description: Build Validation for Pull Requests
 ########################################################
-trigger: none 
+trigger: none
 
 pr:
   autoCancel: true
@@ -13,7 +13,7 @@ pr:
     include:
       - master
       - beta
-      
+
 variables:
   - group: Public Websites - Front End
 

package/ci/release/beta.yml

@@ -1,14 +1,15 @@
 #######################################################
-# Author: Yavisht Katgara
-# Email: yavisht_katgara@worksafe.vic.gov.au
+# Original Author: Yavisht Katgara
+# Email: WSV-DigitalOperations@worksafetac.onmicrosoft.com
 # Project: Worksafe Public Website - Front End
 # Description: Publish beta release to NPM
 #######################################################
 
-trigger:
+trigger: 
   branches:
     include:
       - beta
+pr: none
 
 variables:
   - group: Public Websites - Front End

package/ci/release/master.yml

@@ -1,14 +1,15 @@
 #######################################################
-# Author: Yavisht Katgara
-# Email: yavisht_katgara@worksafe.vic.gov.au
+# Original Author: Yavisht Katgara
+# Email: WSV-DigitalOperations@worksafetac.onmicrosoft.com
 # Project: Worksafe Public Website - Front End
 # Description: Publish latest release to NPM
 #######################################################
 
-trigger:
+trigger: 
   branches:
     include:
       - master
+pr: none
 
 variables:
   - group: Public Websites - Front End

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',
-    '^.+\\.js$': 'babel-jest',
+    '.*\\.vue$': '@vue/vue3-jest',
+    '^.+\\.[t|j]sx?$': '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.4",
+  "version": "1.1.0-beta.40",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -38,17 +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-google-charts": "^1.1.0",
-    "vue-formio": "^4.0.8",
     "vue-scrollto": "^2.20.0"
   },
   "resolutions": {
@@ -57,7 +58,8 @@
   "devDependencies": {
     "@babel/core": "^7.24.6",
     "@babel/plugin-transform-private-property-in-object": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
     "@rushstack/eslint-patch": "^1.3.3",
     "@storybook/addon-a11y": "^7.6.3",
     "@storybook/addon-essentials": "^7.5.1",
@@ -69,9 +71,10 @@
     "@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",
-    "babel-jest": "^29.2.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
+    "babel-preset-vite": "^1.1.3",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.49.0",
     "eslint-plugin-storybook": "^0.6.15",
@@ -84,7 +87,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",
@@ -92,9 +95,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'
     }
   }
 }
@@ -265,5 +212,5 @@ Default.args = {
     cardPadding: 'small',
     borderType: 'thin',
     contentClass: 'Content Class',
-    cardDescription: 'Card description slot. text 123 Sample text. You can also use description prop.',
+    cardDescription: 'Card Description slot. text 123 Sample text. You can also use description prop.',
   }

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/Containers/HomepageHeader/index.vue

@@ -14,7 +14,7 @@
     class="homepage-header"
   >
     <template v-slot:top>
-      <slot />
+      <slot></slot>
     </template>
 
     <template v-slot:description>
@@ -62,28 +62,35 @@ export default {
   components: {
     Search,
     CtaButton,
-    HeroHeader
+    HeroHeader,
   },
   props: {
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     heroHeader: {
       type: Object,
-      required: true
+      required: true,
     },
     fetchMenu: {
       type: Function,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   console.log("NEVA")
+  //   await this.renderMenu()
+  // },
+  // Temp use of mounted to replace fetch
+  async mounted() {
     await this.renderMenu()
   },
+
   data: () => ({
     links: [],
-    earthIcon
+    earthIcon,
   }),
   methods: {
     async renderMenu() {
@@ -91,11 +98,11 @@ export default {
       this.links = (Array.isArray(menu) ? menu : []).map((item) => {
         return {
           text: item.title,
-          path: item.relative || item.absolute
+          path: item.relative || item.absolute,
         }
       })
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -110,6 +117,7 @@ export default {
         font-size: 32px;
         line-height: 32px;
       }
+
       @media screen and (max-width: 767px) {
         font-size: 36px;
         line-height: 36px;
@@ -134,7 +142,9 @@ export default {
         margin-top: 32px;
       }
     }
+
     margin-left: 0 !important;
+
     &:last-of-type {
       img {
         position: absolute;
@@ -146,9 +156,11 @@ export default {
 
   &__search {
     padding-right: 15px;
+
     @include mq('xs') {
       padding-right: 0;
     }
+
     :deep(.gsc-results-wrapper-visible) {
       display: none !important;
     }
@@ -159,7 +171,9 @@ export default {
     .iebtn {
       bottom: 280px;
       left: 650px;
-    } /* IE11 */
+    }
+
+    /* IE11 */
 
     @media screen\9, screen and (max-width: 1150px) {
       .iebtn {

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