@worksafevictoria/wcl7.5 1.0.0 → 1.1.0-beta.10

package/.env

@@ -1,4 +1,6 @@
 CONTENT_API_URL=https://content-staging-v2.api.worksafe.vic.gov.au
 IS_STORYBOOK=TRUE
-SHOW_COOKIE=false
-GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160
+SHOW_COOKIE=true
+GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160
+CARETAKER=false
+SHOW_GLOBAL_NOTICE=true

package/.eslintrc.cjs

@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended'],
+  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended', '@babel/plugin-transform-private-property-in-object'],
   parserOptions: {
     ecmaVersion: 'latest'
   }

package/.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
     'prettier',
     'prettier/vue',
     'plugin:prettier/recommended',
-    'plugin:storybook/recommended'
+    'plugin:storybook/recommended',
+    '@babel/plugin-transform-private-property-in-object'
   ],
   plugins: ['prettier'],
   rules: {

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh
+
+npm test

package/.storybook/main.js

@@ -5,14 +5,16 @@ 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',
     options: {}
   },
   docs: {
-    autodocs: 'tag'
+    autodocs: 'tag',
+    defaultName: 'Documentation'
   }
 }
 export default config

package/.storybook/preview.js

@@ -4,6 +4,16 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import './../src/assets/styles/stylesheet.scss'
 import { setup } from '@storybook/vue3'
 
+//Custom fonts
+import './../src/assets/styles/webfonts.css'
+
+// Global Styles
+import './../src/assets/styles/stylesheet.scss'
+
+// Storybook css
+import './../src/assets/styles/storybook.scss'
+
+
 setup((app) => {
   app.component('NuxtLink', {
     props: {
@@ -18,6 +28,11 @@ setup((app) => {
 
 const preview = {
   parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }     
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package/README.md

@@ -27,6 +27,8 @@ This repo is based on Vue 3 in Vite, and Storybook 7.  It contains all the commo
 
     yarn build-storybook
 
+    Note:  When building storybook, there is a dependency on a .nojekyll file in order for Storybook to display stories.
+
 ## Deploy
 
     chmod +x bin/deploy.sh
@@ -56,6 +58,18 @@ This repo is based on Vue 3 in Vite, and Storybook 7.  It contains all the commo
       transpile: ['@worksafevictoria/wcl', 'xxx', 'xxx', 'xxx']
     }
 
+#### Usage Instructions - environment variables
+
+    For environment variables to be recognised, they must be added to the vite.config.js to the existing list under 'define', eg
+
+      .env:
+
+        IS_STORYBOOK=TRUE
+
+      .vite.config.js:
+
+        'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
+
 #### Import example
 
     <template>

package/babel.config.js

@@ -1,8 +1,9 @@
 module.exports = {
-  presets: ['@babel/preset-env'],
-  plugins: [
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }]
-  ]
+  env: {
+    test: {
+      presets: [
+        '@babel/preset-env',
+      ],
+    }
+  }
 }

package/bin/deploy.sh

@@ -14,12 +14,12 @@ rm -rf ../storybook-static
 
 # Build
 cd ..
-yarn build
+yarn build-storybook
 
 # Add CNAME to build
 cd storybook-static
-echo "ws-ui-sb7.wsvdigital.com.au" > ../storybook-static/CNAME
+# echo "ws-ui-sb-7.wsvdigital.com.au" > ../storybook-static/CNAME
 
 # Deploy to GH-Pages
 cd ..
-node node_modules/gh-pages/bin/gh-pages.js -d storybook-static
+node node_modules/gh-pages/bin/gh-pages.js -d storybook-static -t true

package/ci/build/build_validation.yml

@@ -4,14 +4,19 @@
 # Project: Worksafe Public Website - Front End
 # Description: Build Validation for Pull Requests
 ########################################################
+trigger: none 
 
+pr:
+  autoCancel: true
+  drafts: false
+  branches:
+    include:
+      - master
+      - beta
+      
 variables:
   - group: Public Websites - Front End
-resources:
-  repositories:
-    - repository: self
-      type: git
-      ref: refs/heads/beta
+
 jobs:
   - job: Build_Test_Dryrun
     displayName: Build - Test - DryRun
@@ -35,7 +40,7 @@ jobs:
       - task: CmdLine@2
         displayName: Build
         inputs:
-          script: yarn build
+          script: yarn build-storybook
       - task: CmdLine@2
         displayName: Unit Test
         inputs:

package/ci/release/beta.yml

@@ -5,13 +5,14 @@
 # Description: Publish beta release to NPM
 #######################################################
 
+trigger:
+  branches:
+    include:
+      - beta
+
 variables:
   - group: Public Websites - Front End
-resources:
-  repositories:
-    - repository: self
-      type: git
-      ref: refs/heads/beta
+
 stages:
   - stage: publish_npm_beta
     jobs:

package/ci/release/master.yml

@@ -5,13 +5,14 @@
 # Description: Publish latest release to NPM
 #######################################################
 
+trigger:
+  branches:
+    include:
+      - master
+
 variables:
   - group: Public Websites - Front End
-resources:
-  repositories:
-    - repository: self
-      type: git
-      ref: refs/heads/master
+
 stages:
   - stage: publish_npm_beta
     jobs:

package/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: "jsdom",
   moduleFileExtensions: [
     'js',
     'json',
@@ -11,10 +12,11 @@ module.exports = {
   },
   transform: {
     // process `*.vue` files with `vue-jest`
-    '.*\\.(vue)$': 'vue-jest',
+    '.*\\.(vue)$': '@vue/vue3-jest',
     '^.+\\.js$': 'babel-jest',
     '.+\\.(svg)$': '<rootDir>/src/mock/jest.svgtransformer.js'
   },
+  transformIgnorePatterns: [],
   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.0.0",
+  "version": "1.1.0-beta.10",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -20,14 +20,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": "^16.16.x"
-  },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test:unit": "vitest",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "storybook": "storybook dev -p 6006",
@@ -39,7 +32,7 @@
     "deploy": "bin/deploy.sh",
     "test": "jest",
     "test:watch": "yarn test --watch",
-    "_postinstall": "husky install",
+    "_postinstall": "husky init",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable",
     "generate-svgs": "svgpack src/assets/icons/* > src/assets/styles/generated-icons.scss"
@@ -52,7 +45,9 @@
     "bootstrap-vue": "^2.23.1",
     "bootstrap-vue-next": "^0.15.5",
     "date-fns": "^2.30.0",
+    "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"
   },
@@ -60,6 +55,9 @@
     "formiojs": "4.13.13"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.6",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
     "@rushstack/eslint-patch": "^1.3.3",
     "@storybook/addon-a11y": "^7.6.3",
     "@storybook/addon-essentials": "^7.5.1",
@@ -71,21 +69,30 @@
     "@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",
+    "dotenv-webpack": "^8.1.0",
     "eslint": "^8.49.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.17.0",
+    "gh-pages": "^6.1.1",
+    "husky": "^8.0.3",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
+    "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",
     "stylelint": "^15.11.0",
     "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"

package/public/.nojekyll

@@ -0,0 +1 @@
+From Public

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/AppHeader/ModalSearch/index.vue

@@ -17,6 +17,7 @@
       >
       <search
         ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
         :initial-search-query="searchQuery"
         :page-limit="pageLimit"
         :page-number="pageNumber"
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg'
+import Close from '../../../../assets/icons/close.svg?url'
 import Search from '../../../SubComponents/Search/index.vue'
 
 export default {
@@ -45,6 +46,10 @@ export default {
     contentParser: {
       type: Function,
       required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
     }
   },
   data() {

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

@@ -18,45 +18,42 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
+  tags: ['autodocs'],
   data() {
     return {
       appHeaderData
     }
   },
   argTypes: {
-    headerMenu: {
-      control: 'object',
-      defaultValue: appHeaderData
-    },
     contentParser: {
-      control: 'function',
-      defaultValue: contentParser,
       table: { disable: true }
-    },
-    isWorkWell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    authenticated: {
-      control: 'boolean',
-      defaultValue: false
     }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
+const DefaultContent = (args) => ({
   components: { AppHeader },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   template: `
   <div>
   <app-header
-  v-bind="$props"
+  v-bind="args"
   />
     <main>
       <div class="container">
         <div class="row">
           <div class="col">
-            {{$props.mainContent}}
+            {{args.mainContent}}
           </div>
         </div>
       </div>
@@ -65,7 +62,7 @@ const DefaultContent = (args, { argTypes }) => ({
       <div class="container">
         <div class="row">
           <div class="col">
-          {{$props.footerContent}}
+          {{args.footerContent}}
           </div>
         </div>
       </div>
@@ -75,8 +72,3 @@ const DefaultContent = (args, { argTypes }) => ({
 })
 
 export const Default = DefaultContent.bind({})
-
-Default.args = {
-  mainContent: 'Some dummy main content required for this example',
-  footerContent: 'Some dummy footer content required for this example'
-}

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

@@ -416,14 +416,14 @@
 
 <script>
 import ModalSearch from './ModalSearch/index.vue'
-import Close from './../../../assets/icons/close.svg'
-import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg'
-import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg'
-import CaretRight from './../../../assets/icons/caret-right.svg'
-import CaretDown from './../../../assets/icons/caret-down.svg'
-import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg'
-import CaretLeft from './../../../assets/icons/caret-left.svg'
-import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg'
+import Close from './../../../assets/icons/close.svg?component'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import CaretRight from './../../../assets/icons/caret-right.svg?component'
+import CaretDown from './../../../assets/icons/caret-down.svg?component'
+import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg?component'
+import CaretLeft from './../../../assets/icons/caret-left.svg?component'
+import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg?component'
 
 export default {
   components: {
@@ -527,6 +527,7 @@ export default {
       this.windowWidth = window.innerWidth
     },
     firstLevelClick(item, ref) {
+      console.log('in first level click')
       // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === 'desktop') {
         window.scrollTo(0, 0)

package/src/components/Global/Cookies/{index.storieshide.js → index.stories.js}

@@ -1,4 +1,5 @@
 import Cookies from './index.vue'
+
 const defaultValue = {
   header: 'field_cookie_heading',
   content: {
@@ -24,22 +25,10 @@ const defaultValue = {
 export default {
   title: 'Global/Cookies',
   component: Cookies,
-  argTypes: {
-    cookieHeader: {
-      control: 'text',
-      defaultValue: 'Accept and Reject Cookies'
-    },
-    cookieContent: {
-      control: 'object',
-      defaultValue: defaultValue
+  args: {
+    cookieHeader: 'Accept and Reject Cookies',
+    cookieContent: defaultValue
     }
   }
-}
-
-const DefaultCookies = (args, { argTypes }) => ({
-  components: { Cookies },
-  props: Object.keys(argTypes),
-  template: '<cookies v-bind="$props" />'
-})
 
-export const Default = DefaultCookies.bind({})
+export const Default = {}