@worksafevictoria/wcl7.5 1.17.0-beta.2 → 1.17.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.17.0-beta.2",
+  "version": "1.17.0-beta.4",
   "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
   "main": "src/index.js",
   "license": "MIT",

package/src/assets/icons/chevron-right-icon.svg

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="1em"
+    height="1em"
+    class="chevron-right-icon"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>

package/src/assets/icons/notepad.svg

@@ -0,0 +1,93 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="800px"
+    height="800px"
+    viewBox="0 0 32 32"
+  >
+    <defs>
+      <clipPath id="clip-notepad">
+        <rect width="32" height="32" />
+      </clipPath>
+    </defs>
+    <g id="notepad" clip-path="url(#clip-notepad)">
+      <g
+        id="Group_3042"
+        data-name="Group 3042"
+        transform="translate(-260 -156)"
+      >
+        <g id="Group_3024" data-name="Group 3024">
+          <g id="Group_3023" data-name="Group 3023">
+            <g id="Group_3022" data-name="Group 3022">
+              <g id="Group_3021" data-name="Group 3021">
+                <path
+                  id="Path_3967"
+                  data-name="Path 3967"
+                  d="M287.632,157.923h-3.559v-.757a1,1,0,0,0-2,0v.757h-2.721v-.757a1,1,0,1,0-2,0v.757h-2.721v-.757a1,1,0,0,0-2,0v.757H269.91v-.757a1,1,0,0,0-2,0v.757h-3.542a1,1,0,0,0-1,1v27.911a1,1,0,0,0,1,1h23.264a1,1,0,0,0,1-1V158.923A1,1,0,0,0,287.632,157.923Zm-1,27.911H265.368V159.923h2.542v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.559Z"
+                  fill="#344952"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+        <g id="Group_3041" data-name="Group 3041">
+          <g id="Group_3028" data-name="Group 3028">
+            <g id="Group_3027" data-name="Group 3027">
+              <g id="Group_3026" data-name="Group 3026">
+                <g id="Group_3025" data-name="Group 3025">
+                  <path
+                    id="Path_3968"
+                    data-name="Path 3968"
+                    d="M283.646,167.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3032" data-name="Group 3032">
+            <g id="Group_3031" data-name="Group 3031">
+              <g id="Group_3030" data-name="Group 3030">
+                <g id="Group_3029" data-name="Group 3029">
+                  <path
+                    id="Path_3969"
+                    data-name="Path 3969"
+                    d="M283.646,171.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3036" data-name="Group 3036">
+            <g id="Group_3035" data-name="Group 3035">
+              <g id="Group_3034" data-name="Group 3034">
+                <g id="Group_3033" data-name="Group 3033">
+                  <path
+                    id="Path_3970"
+                    data-name="Path 3970"
+                    d="M283.646,175.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3040" data-name="Group 3040">
+            <g id="Group_3039" data-name="Group 3039">
+              <g id="Group_3038" data-name="Group 3038">
+                <g id="Group_3037" data-name="Group 3037">
+                  <path
+                    id="Path_3971"
+                    data-name="Path 3971"
+                    d="M275.823,179.92h-7.469a1,1,0,0,1,0-2h7.469a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>

package/src/assets/icons/question.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Question mark">
+  <title>Question Mark</title>
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"
+        font-family="system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif"
+        font-size="20" font-weight="700" fill="#000000">?</text>
+</svg>

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

@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import Row from "./../../Containers/Row/index.vue";
-import Column from "./../../Containers/Column/index.vue";
-import SectionGroup from "./../../Containers/SectionGroup/index.vue";
-import { debounce } from "lodash-es";
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import { debounce } from 'lodash-es'
 
 export default {
-  name: "CardGrid",
+  name: 'CardGrid',
   components: { Row, Column, SectionGroup },
   props: {
     title: {
@@ -71,7 +71,7 @@ export default {
     },
     titleTag: {
       type: String,
-      default: "h2",
+      default: 'h2',
     },
     cards: {
       type: Array,
@@ -99,9 +99,9 @@ export default {
     },
     size: {
       type: String,
-      default: "page",
+      default: 'page',
       validator: (value) =>
-        ["half-content", "content", "page", "full"].indexOf(value) >= 0,
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0,
     },
     isSelectable: {
       type: Boolean,
@@ -112,17 +112,24 @@ export default {
     },
     backgroundVariant: {
       type: String,
-      default: "none",
+      default: 'none',
       validator: (value) =>
-        ["none", "light", "dark", "grey", "yellow", "white", "lightblue"].indexOf(
-          value
-        ) >= 0,
+        [
+          'none',
+          'light',
+          'dark',
+          'grey',
+          'yellow',
+          'white',
+          'lightblue',
+          'lavendergray',
+        ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
       type: String,
-      default: "section",
+      default: 'section',
       validator: (value) =>
-        ["content", "block", "container", "section"].indexOf(value) >= 0,
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0,
     },
     noPaddingTop: {
       type: Boolean,
@@ -132,8 +139,8 @@ export default {
     },
     rowSpacing: {
       type: String,
-      default: "large",
-      validator: (value) => ["none", "small", "large"].indexOf(value) >= 0,
+      default: 'large',
+      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0,
     },
     rowClasses: {
       type: String,
@@ -141,12 +148,12 @@ export default {
     },
     columnSpacing: {
       type: String,
-      default: "default",
-      validator: (value) => ["default", "none"].indexOf(value) >= 0,
+      default: 'default',
+      validator: (value) => ['default', 'none'].indexOf(value) >= 0,
     },
     contentClass: {
       type: String,
-      default: "",
+      default: '',
     },
     cardBrowseContent: {
       type: Boolean,
@@ -154,7 +161,7 @@ export default {
     },
     gridId: {
       type: String,
-      default: "default",
+      default: 'default',
     },
   },
   data() {
@@ -162,87 +169,89 @@ export default {
       childCards: [],
       redrawCounter: 0,
       setColumnSizeDebounce: debounce(this.setColumnSize, 500),
-    };
+    }
   },
   computed: {
     largeViewPort() {
       if (this.forceLgColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow;
+        return 12 / this.forceLgColumnsPerRow
       }
       return 12 / this.cards.length > 12 / (this.columnsPerRow || 3)
         ? 12 / this.cards.length
-        : 12 / this.columnsPerRow;
+        : 12 / this.columnsPerRow
     },
     mediumViewPort() {
       if (this.forceMdColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow;
+        return 12 / this.forceLgColumnsPerRow
       }
       if (this.largeViewPort === 6) {
-        return 6;
+        return 6
       }
-      return 4;
+      return 4
     },
     smallViewPort() {
       if (this.forceSmColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow;
+        return 12 / this.forceLgColumnsPerRow
       }
-      return 6;
+      return 6
     },
   },
   watch: {
     cards: {
       handler: function () {
-        this.redrawCounter += 1;
-        this.setColumnSizeDebounce();
+        this.redrawCounter += 1
+        this.setColumnSizeDebounce()
       },
       deep: true,
     },
     columnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce();
+        this.setColumnSizeDebounce()
       },
     },
     forceSmColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce();
+        this.setColumnSizeDebounce()
       },
     },
     forceMdColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce();
+        this.setColumnSizeDebounce()
       },
     },
     forceLgColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce();
+        this.setColumnSizeDebounce()
       },
     },
   },
   mounted() {
-    window.addEventListener("resize", this.setColumnSizeDebounce);
-    this.setColumnSizeDebounce();
+    window.addEventListener('resize', this.setColumnSizeDebounce)
+    this.setColumnSizeDebounce()
   },
   beforeDestroy() {
-    window.removeEventListener("resize", this.setColumnSizeDebounce);
+    window.removeEventListener('resize', this.setColumnSizeDebounce)
   },
   methods: {
     cardTitleSelected(selectedCard, ev) {
-      this.clearCards();
-      selectedCard.selected = !!!selectedCard.selected;
-      const selectedCardModelIndex = this.getChildIndex(selectedCard);
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
 
-      this.$emit("selected-title", {
-        selectedCard: selectedCard.selected ? this.cards[selectedCardModelIndex] : null,
+      this.$emit('selected-title', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
         selectedCardModelIndex,
         ev,
-      });
+      })
     },
     cardSelected(selectedCard, ev) {
-      this.clearCards();
-      selectedCard.selected = !!!selectedCard.selected;
-      const selectedCardModelIndex = this.getChildIndex(selectedCard);
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
 
-      this.$emit("selected", {
+      this.$emit('selected', {
         selectedCard: selectedCard.selected
           ? this.cardBrowseContent
             ? this.childCards[selectedCardModelIndex]
@@ -250,59 +259,59 @@ export default {
           : null,
         selectedCardModelIndex,
         ev,
-      });
+      })
     },
     clearCards(selectedCard) {
       this.childCards.forEach((card) => {
-        card.selected = false;
+        card.selected = false
         if (!selectedCard || selectedCard !== card) {
-          card.selected = false;
+          card.selected = false
         }
-      });
+      })
     },
     getChildIndex(selectedCard) {
-      return this.childCards.findIndex((item) => item === selectedCard);
+      return this.childCards.findIndex((item) => item === selectedCard)
     },
     registerChild(child) {
-      this.childCards.push(child);
-      this.setColumnSizeDebounce();
+      this.childCards.push(child)
+      this.setColumnSizeDebounce()
     },
     deregisterChild(child) {
-      const index = this.childCards.indexOf(child);
+      const index = this.childCards.indexOf(child)
       if (index > -1) {
-        this.childCards.splice(index, 1);
+        this.childCards.splice(index, 1)
       }
     },
     setColumnSize() {
       setTimeout(() => {
-        const columns = this.$refs.cardColumns;
+        const columns = this.$refs.cardColumns
         if (Array.isArray(columns) && columns.length > 0) {
-          const row = this.$refs.cardRow;
-          const elementWidth = columns[0].$el.offsetWidth;
-          const parentWidth = row.$el.offsetWidth;
-          const gridColumnSize = parseInt(parentWidth / elementWidth);
-          const isMobileView = parentWidth < 480;
-          const isTabletView = !isMobileView && parentWidth < 767;
-          this.$emit("isMobileView", isMobileView);
-          this.$emit("isTabletView", isTabletView);
-          this.$emit("isDesktopView", !isTabletView && !isMobileView);
-          this.$emit("isMobileOrTabletView", isMobileView || isTabletView);
-          this.$emit("gridColumnSize", gridColumnSize);
+          const row = this.$refs.cardRow
+          const elementWidth = columns[0].$el.offsetWidth
+          const parentWidth = row.$el.offsetWidth
+          const gridColumnSize = parseInt(parentWidth / elementWidth)
+          const isMobileView = parentWidth < 480
+          const isTabletView = !isMobileView && parentWidth < 767
+          this.$emit('isMobileView', isMobileView)
+          this.$emit('isTabletView', isTabletView)
+          this.$emit('isDesktopView', !isTabletView && !isMobileView)
+          this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
+          this.$emit('gridColumnSize', gridColumnSize)
           this.childCards.forEach((card) =>
-            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView)
-          );
+            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView),
+          )
         }
-      });
+      })
     },
     handleFocus(ev) {
-      this.$emit("focussed", ev);
+      this.$emit('focussed', ev)
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "../../../includes/scss/all";
+@import '../../../includes/scss/all';
 .card-grid {
   &__column {
     &--default {

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

@@ -4,7 +4,13 @@
     <BCard
       :id="cardId"
       no-body
-      :tag="buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'div'"
+      :tag="
+        buttonRole === 'radio' || buttonRole === 'none'
+          ? 'div'
+          : isSelectable
+            ? 'button'
+            : 'div'
+      "
       class="card-grid-item__card"
       :class="cardClass"
       :role="buttonRole"
@@ -37,7 +43,7 @@
           {
             rtl: rtl,
             [`card-grid-item__control-radio`]:
-              isSelectable && buttonRole === 'radio',
+              (isSelectable && buttonRole === 'radio') || 'modal-quest',
             [`card-grid-item__selected-radio`]:
               selected && buttonRole === 'radio',
           },
@@ -390,7 +396,7 @@ export default {
         [`card-grid-item__card--hasIcon`]:
           (this.imageSrc || this.glyphSrc) &&
           (this.iconPosition === 'top' || this.iconPosition === 'top-left'),
-        [`card-grid-item__card--selectable`]: this.isSelectable,
+        [`card-grid-item__card--selectable`]: this.isSelectable === true,
         [`card-grid-item__card--selected-inverted--` +
         this.invertOnSelectBackground]:
           this.selected &&
@@ -434,7 +440,7 @@ export default {
   },
   methods: {
     cardClicked(ev) {
-      if (this.isSelectable) {
+      if (this.isSelectable === true) {
         this.parentGrid.cardSelected(this, ev)
       }
 
@@ -822,6 +828,27 @@ export default {
       width: 100%;
       height: 100%;
     }
+    :deep(.card_item__control-modal-quest) {
+      width: 28px;
+      height: 28px;
+      line-height: 32px;
+      text-align: center;
+      border-radius: 50%;
+      background-color: lightgrey;
+      border: 3px solid lightgrey;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    :deep(.card_item__control-modal-quest span) {
+      background-image: url('../../../assets/icons/question.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      filter: invert(1);
+      width: 100%;
+      height: 100%;
+    }
   }
   &__selected-radio {
     :deep(.card_item__control-radio) {

package/src/components/Containers/SectionGroup/index.stories.js

@@ -7,7 +7,7 @@ export default {
   component: SectionGroup,
   argTypes: {
     backgroundImage: {
-      control: 'boolean'
+      control: 'boolean',
     },
     backgroundVariant: {
       control: 'select',
@@ -18,69 +18,70 @@ export default {
         'grey',
         'yellow',
         'white',
-        'lightblue'
-      ]
+        'lightblue',
+        'lavendergray',
+      ],
     },
     applyBackgroundOn: {
       control: 'select',
-      options: ['content', 'block', 'container', 'section']
+      options: ['content', 'block', 'container', 'section'],
     },
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3']
+      options: ['h2', 'h3'],
     },
     footer: {
-      control: 'boolean'
+      control: 'boolean',
     },
     preContent: {
-      control: 'boolean'
+      control: 'boolean',
     },
     headerRight: {
-      control: 'boolean'
+      control: 'boolean',
     },
     size: {
       control: 'select',
-      options: ['half-content', 'content', 'page', 'full']
+      options: ['half-content', 'content', 'page', 'full'],
     },
     headingRightSlot: {
-      control: 'text'
+      control: 'text',
     },
     preContentSlot: {
-      control: 'text'
+      control: 'text',
     },
     contentSlot: {
-      control: 'text'
+      control: 'text',
     },
     footerSlot: {
-      control: 'text'
+      control: 'text',
     },
     top: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     headerTop: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     headerBottom: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     content: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     default: {
       control: 'text',
-      table: { disable: true }
-    }
-  }
-};
+      table: { disable: true },
+    },
+  },
+}
 
 const Template = (args) => ({
   components: { SectionGroup, Row, Column },
   setup() {
-    return { args };
+    return { args }
   },
   template: `
     <div>
@@ -119,10 +120,10 @@ const Template = (args) => ({
   
         {{args.sectionBottom}}
     </div>
-    `
-});
- 
-export const Default =  Template.bind({});
+    `,
+})
+
+export const Default = Template.bind({})
 
 Default.args = {
   noPaddingTop: false,
@@ -144,5 +145,5 @@ Default.args = {
   footer: true,
   preContent: true,
   headerRight: true,
-  size: 'page'
+  size: 'page',
 }

package/src/components/Containers/SectionGroup/index.vue

@@ -114,6 +114,7 @@ export default {
           'white',
           'lightblue',
           'lightred',
+          'lavendergray',
         ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
@@ -180,6 +181,7 @@ export default {
       }
       if (this.backgroundVariant) {
         let bgColour
+        console.log('this.backgroundVariant:-', this.backgroundVariant)
         switch (this.backgroundVariant) {
           case 'grey':
           case 'light':
@@ -200,9 +202,13 @@ export default {
           case 'lightred':
             bgColour = colors.lightred
             break
+          case 'lavendergray':
+            bgColour = colors.lavendergray
+            break
           default:
             bgColour = 'transparent'
         }
+
         styles = {
           ...(styles || {}),
           [`background-color`]: bgColour,

package/src/components/Global/AppHeaderNew/mobile.scss

@@ -4,6 +4,7 @@
   &.isMobile {
     padding: 0;
     width: 100vw;
+    overflow-x: visible;
 
     .app-header {
       &__wrap {