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

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

@@ -12,7 +12,8 @@ const config = {
     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: {

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.2",
   "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"
@@ -60,6 +53,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 +67,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/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 = {}

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

@@ -17,12 +17,14 @@
           </div>
         </div>
       </column>
+      <!-- Cookie buttons displayed when not xs -->
       <column class="cookie-container__col  hidden-on-xs">
         <div class="cookie-buttons mt-md-3">
           <button
             id="moreBtn"
-            v-b-modal.cookieModal
+            type="button"
             role="button"
+            @click="showCookieModal = !showCookieModal"
             class="cookieBtn moreOptions"
             aria-label="More cookie options"
           >
@@ -34,10 +36,7 @@
             class="cookieBtn yellow hasIcon"
             style="order:1;"
             aria-label="Accept all cookies"
-            @click="
-              clickedCookie('accept')
-              fireGTM()
-            "
+            @click="clickedCookie('accept'), fireGTM()"
           >
             Accept all
           </button>
@@ -47,162 +46,148 @@
             class="cookieBtn black hasIcon"
             style="order:2;"
             aria-label="Reject all cookies"
-            @click="
-              clickedCookie('reject')
-              fireGTM()
-              checkCookie()
-            "
+            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
           >
             Reject all
           </button>
         </div>
       </column>
+      <!-- Cookie buttons displayed when xs -->
       <row class="cookie-links col mt-3 display-on-xs">
         <div>
-          <a id="moreLink" href="#" @click="$bvModal.show('cookieModal')"
+          <a id="moreLink" href="#" @click="showCookieModal = !showCookieModal"
             >More options</a
           >
           <a
             id="acceptAllLink"
             href="#"
-            @click="
-              clickedCookie('accept')
-              fireGTM()
-            "
+            @click="clickedCookie('accept'), fireGTM()"
             >Accept all</a
           >
           <a
             id="rejectAllLink"
             href="#"
-            @click="
-              clickedCookie('reject')
-              fireGTM()
-              checkCookie()
-            "
+            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
             >Reject all</a
           >
         </div>
       </row>
     </row>
-
-    <b-modal
-      id="cookieModal"
-      refs="cookieModal"
-      :visible="visible"
-      role="dialog"
-      scrollable
-      @hidden="reset"
-    >
-      <div slot="modal-title" class="modal-heading">
-        {{ cookieContent.modal.heading }}
-      </div>
-      <div class="modal-content">
-        <fieldset>
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.functional.heading }}</h5>
-            </column>
-            <column>
-              <label for="modal1CB" class="option"
-                >Necessary<span class="sr-only">functional label</span>
-                <input
-                  id="modal1CB"
-                  type="checkbox"
-                  value="functional"
-                  checked
-                  disabled
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.functional.description
-            }}</column>
-          </row>
-          <hr />
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.analytics.heading }}</h5>
-            </column>
-            <column>
-              <label for="modal2CB" class="option"
-                ><span class="sr-only">analytics checkbox</span>
-                <input
-                  id="modal2CB"
-                  type="checkbox"
-                  name="modal2CB"
-                  value="analytics"
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.analytics.description
-            }}</column>
-          </row>
-          <hr />
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.marketing.heading }}</h5>
-            </column>
-            <column text-align="right">
-              <label for="modal3CB" class="option"
-                ><span class="sr-only">marketing checkbox</span>
-                <input
-                  id="modal3CB"
-                  type="checkbox"
-                  name="modal3CB"
-                  value="marketing"
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.marketing.description
-            }}</column>
-          </row>
-        </fieldset>
-      </div>
-      <div slot="modal-footer">
-        <button
-          id="modal_save"
-          type="button"
-          role="button"
-          class="cookieBtn yellow hasIcon"
-          style="order:1;"
-          aria-label="Save cookie settings"
-          @click="
-            clickedCookie('save')
-            fireGTM()
-            checkCookie()
-            $bvModal.hide('cookieModal')
-          "
-        >
-          Save
-        </button>
-        <button
-          id="modal_accept"
-          type="button"
-          role="button"
-          class="cookieBtn black hasIcon"
-          style="order:2;"
-          data-bs-dismiss="cookieModal"
-          aria-label="Accept all cookies"
-          @click="
-            clickedCookie('accept')
-            fireGTM()
-            $bvModal.hide('cookieModal')
-          "
-        >
-          Accept all
-        </button>
-      </div>
-    </b-modal>
+    <!-- Modal -->
+    <div v-if="showCookieModal" class="modal fade show" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="modal-heading-text">
+              {{ cookieContent.modal.heading }}
+            </div>
+            <button type="button" class="btn-close" @click="showCookieModal = !showCookieModal" aria-label="close"></button>
+          </div>
+          <div class="modal-body">
+              <fieldset>
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.functional.heading }}</h5>
+                  </column>
+                  <column>
+                    <label for="modal1CB" class="option">
+                      Necessary<span class="visually-hidden">functional label</span>
+                      <input
+                        id="modal1CB"
+                        type="checkbox"
+                        value="functional"
+                        checked
+                        disabled
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.functional.description}}
+                  </column>
+                </row>
+                <hr />
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.analytics.heading }}</h5>
+                  </column>
+                  <column>
+                    <label for="modal2CB" class="option">
+                      <span class="visually-hidden">analytics checkbox</span>
+                      <input
+                        id="modal2CB"
+                        type="checkbox"
+                        name="modal2CB"
+                        value="analytics"
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.analytics.description}}
+                  </column>
+                </row>
+                <hr />
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.marketing.heading }}</h5>
+                  </column>
+                  <column text-align="right">
+                    <label for="modal3CB" class="option">
+                      <span class="visually-hidden">marketing checkbox</span>
+                      <input
+                        id="modal3CB"
+                        type="checkbox"
+                        name="modal3CB"
+                        value="marketing"
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.marketing.description}}
+                  </column>
+                </row>
+              </fieldset>
+            </div>
+            <div class="modal-footer">
+              <button
+                id="modal_save"
+                type="button"
+                role="button"
+                class="cookieBtn yellow hasIcon"
+                style="order:1;"
+                aria-label="Save cookie settings"
+                @click="clickedCookie('save'), fireGTM(), checkCookie(), showCookieModal = !showCookieModal"
+              >
+                Save
+              </button>
+              <button
+                id="modal_accept"
+                type="button"
+                role="button"
+                class="cookieBtn black hasIcon"
+                style="order:2;"
+                data-bs-dismiss="cookieModal"
+                aria-label="Accept all cookies"
+                @click="clickedCookie('accept'), fireGTM(), showCookieModal = !showCookieModal"
+              >
+                Accept all
+              </button>
+            </div>
+          </div>
+        </div>
+    </div>
   </container>
 </template>
 
 <script>
-import { Container, Row, Column } from '../../../index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
 import { analyticsCookies, marketingCookies } from './Constants'
 
 export default {
@@ -227,7 +212,8 @@ export default {
       modalTitle: this.modalHeading,
       analyticsCookies,
       marketingCookies,
-      screenWidth: 0
+      screenWidth: 0,
+      showCookieModal: false
     }
   },
   computed: {