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

package/src/components/Global/Cookies/styles.scss

@@ -1,5 +1,5 @@
 @import '../../../assets/styles/generated-icons.scss';
-@import '../../../includes/scss/all';
+@import './../../../includes/scss/all';
 
 h3.cookie-header {
   font-weight: 700;
@@ -249,7 +249,15 @@ h3.cookie-header {
   color: $black;
 }
 
-.modal-heading {
+.modal {
+  background: rgba(0,0,0,0.5)
+}
+
+.modal-backdrop {
+  display: none;
+}
+
+.modal-heading-text {
   font-size: 26px;
   font-weight: 700;
   line-height: 32px;

package/src/components/Global/DirectoryFilters/SingleTaxonomy/index.vue

@@ -4,62 +4,58 @@
       :has-caret="true"
       :selected="numberOfItems > 0"
       :is-reset="false"
-      @clicked="$bvModal.show(`modal-center-${_uid}`)"
+      @clicked="showMyModal = !showMyModal"
     >
       <span>{{ data.name }}</span>
       <span v-if="numberOfItems > 0">({{ numberOfItems }})</span>
     </filter-button>
-    <b-modal
-      :id="`modal-center-${_uid}`"
-      modal-class="wcl-directory-filters__single-tax__modal"
-      centered
-      scrollable
-      size="xl"
-      :title="data.name"
-      :title-sr-only="true"
-      header-close-label="Close dialog box"
-    >
-      <fieldset>
-        <legend>Filter by {{ data.name }}</legend>
-        <div v-for="term in data.terms" :key="term.tid" class="option">
-          <input
-            :id="`term_${term.tid}`"
-            v-model="selectedFilters[`${data.record_id}`]"
-            type="checkbox"
-            :name="term.name"
-            :value="term"
-            :disabled="term.preselected"
-            @keyup.enter="(e) => e.target.click()"
-          />
-          <label :for="`term_${term.tid}`">{{ term.name }}</label>
+    <div v-if="showMyModal" class="modal fade show wcl-directory-filters__single-tax__modal"
+      tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog"
+      style="display: block;">
+      <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-body">
+              <fieldset>
+                <legend>Filter by {{ data.name }}</legend>
+                <div v-for="term in data.terms" :key="term.tid" class="option">
+                  <input
+                    :id="`term_${term.tid}`"
+                    v-model="selectedFilters[`${data.record_id}`]"
+                    type="checkbox"
+                    :name="term.name"
+                    :value="term"
+                    :disabled="term.preselected"
+                    @keyup.enter="(e) => e.target.click()"
+                  />
+                  <label :for="`term_${term.tid}`">{{ term.name }}</label>
+                </div>
+              </fieldset>
+            </div>
+            <div class="modal-footer">
+                <cta-button
+                  v-if="!loading && results !== 0"
+                  :type="'dark'"
+                  :rtl="false"
+                  :focus-outline="'light'"
+                  :workwell="false"
+                  @clicked="showMyModal = !showMyModal"
+                  >Show <span>{{ results }}</span> {{ resultString }}
+                </cta-button>
+                <strong v-else><span v-show="!loading">No results found</span></strong>
+            </div>
         </div>
-      </fieldset>
-      <template #modal-footer="{ ok }">
-        <!-- Emulate built in modal footer ok and cancel button actions -->
-        <cta-button
-          v-if="!loading && results !== 0"
-          :type="'dark'"
-          :rtl="false"
-          :focus-outline="'light'"
-          :workwell="false"
-          @clicked="ok()"
-          >Show <span>{{ results }}</span> {{ resultString }}</cta-button
-        >
-        <strong v-else><span v-show="!loading">No results found</span></strong>
-      </template>
-    </b-modal>
+    </div>
+  </div>
   </div>
 </template>
 <script>
-import CtaButton from './../../../SubComponents/CtaButton/index.vue'
-import FilterButton from './../../../Common/FilterButton/index.vue'
-import { BModal } from 'bootstrap-vue-next'
+import CtaButton from '../../../SubComponents/CtaButton/index.vue'
+import FilterButton from '../../../Common/FilterButton/index.vue'
 
 export default {
   components: {
     CtaButton,
-    FilterButton,
-    BModal
+    FilterButton
   },
   props: {
     data: {
@@ -82,7 +78,8 @@ export default {
           (term) => term.preselected
         )
       },
-      hasReset: false
+      hasReset: false,
+      showMyModal: false
     }
   },
   computed: {
@@ -92,7 +89,7 @@ export default {
     resultString() {
       let s = 's'
       this.results === 1 ? (s = '') : false
-      return 'Result' + s
+      return 'Result' + s + ' '
     }
   },
   watch: {
@@ -121,7 +118,7 @@ export default {
 }
 </script>
 <style lang="scss">
-//
+  //
 // Global non scoped scss!
 // Modal inner overrides only
 //
@@ -134,13 +131,22 @@ export default {
     padding-left: 8px;
   }
 
+  .modal {
+    background: rgba(0,0,0,0.5);
+  }
+  .modal-backdrop {
+    display: none;
+  }
+
   &__modal {
     .modal-content {
       border-radius: 8px;
     }
+
     .modal-xl {
       max-width: 920px;
     }
+    
     .modal-header {
       position: absolute;
       width: 100%;

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

@@ -0,0 +1,8 @@
+import GlobalNotice from './index.vue'
+
+export default {
+    title: 'Global/GlobalNotice',
+    component: GlobalNotice
+  }
+  
+  export const Default = {}

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

@@ -1,104 +1,72 @@
 <template>
-  <div>
-    <b-modal
-      id="global-notice-modal"
-      ref="globalNoticeModal"
-      :visible="displayGlobal"
-      size="400"
-      class="modal"
-      :no-close-on-backdrop="true"
-      :close-on-backdrop="false"
-      :close-on-esc="false"
-      aria-labelledby="global-notice-modal"
-      role="dialog"
-    >
-      <template #modal-header="{} ">
-        <div>
-          <!-- Emulate built in modal header close button action  -->
-          <a
-            href="#"
-            aria-label="Close"
-            @click="
-              setCookie()
-              $bvModal.hide('global-notice-modal')
-            "
-          >
-            <img
-              :src="IconClose"
-              alt="close icon"
-              class="close-icon"
-              width="16px"
-              height="16px"
-            />
-          </a>
-        </div>
-      </template>
-      <div>
-        <div slot="modal-title" class="modal-heading">
-          Understand changes to the 2023-24 WorkCover premium
-        </div>
-      </div>
+    <div 
+    v-if="displayGlobal"
+    id="global-notice-modal"
+    ref="globalNoticeModal"
+    class="modal show"
+    aria-labelledby="global-notice-modal"
+    role="dialog"
+    tabindex="-1"
+    aria-modal="true"
+    style="display: block;">
 
-      <div class="modal-content global-modal-global-content">
-        <div>
-          Information for employers on changes to premium rates, how premium is
-          calculated and key dates.
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="btn-close" @click="setCookie(), displayGlobal = !displayGlobal" aria-label="close"></button>
         </div>
-        <div class="modal-buttons">
-          <div>
-            <button
-              id="open_page"
-              type="button"
-              role="button"
-              class="modal-buttons isWiderYellow hasIcon justify-content-start "
-              style="order: 1"
-              aria-label="Open information about premium changes"
-              @click="
-                setCookie()
-                goToPage('/2023-24-workcover-premium-changes')
-                $bvModal.hide('global-notice-modal')
-              "
-            >
-              2023-24 premium FAQs
-            </button>
+        <div class="modal-body">
+          <div class="modal-heading">
+            Understand changes to the 2023-24 WorkCover premium
           </div>
           <div>
-            <button
-              id="modal_close"
-              type="button"
-              role="button"
-              class="modal-buttons isWiderGray hasIcon justify-content-start "
-              style="order: 2"
-              data-bs-dismiss="global-notice-modal"
-              aria-label="Close modal and go to WorkSafe website"
-              @click="
-                setCookie()
-                $bvModal.hide('global-notice-modal')
-              "
-            >
-              Continue to WorkSafe
-            </button>
+            Information for employers on changes to premium rates, how premium is
+            calculated and key dates.
+          </div>
+          <div class="modal-buttons">
+            <div>
+              <button
+                id="open_page"
+                type="button"
+                role="button"
+                class="modal-buttons isWiderYellow hasIcon justify-content-start "
+                style="order: 1"
+                aria-label="Open information about premium changes"
+                @click="setCookie(), goToPage('/2023-24-workcover-premium-changes'), displayGlobal = !displayGlobal"
+              >
+                2023-24 premium FAQs
+              </button>
+            </div>
+            <div>
+              <button
+                id="modal_close"
+                type="button"
+                role="button"
+                class="modal-buttons isWiderGray hasIcon justify-content-start "
+                style="order: 2"
+                data-bs-dismiss="global-notice-modal"
+                aria-label="Close modal and go to WorkSafe website"
+                @click="setCookie(), displayGlobal = !displayGlobal"
+              >
+                Continue to WorkSafe
+              </button>
+            </div>
           </div>
         </div>
+        <div style="display: none;" class="modal-footer"></div>
       </div>
-      <div
-        slot="modal-footer"
-        style="display: none;"
-        class="modal-footer"
-      ></div>
-    </b-modal>
+    </div>  
   </div>
 </template>
 
 <script>
-import IconClose from '../../../assets/icons/icon-close.svg'
+
 export default {
   name: 'GlobalNotice',
   data() {
     return {
       currentURL: '',
       displayGlobal: false,
-      IconClose
     }
   },
   mounted() {
@@ -109,7 +77,11 @@ export default {
       localStorage.setItem('globalModalHidden', 'true')
     },
     goToPage(link) {
-      window.open(link, '_self')
+     if (process.env.IS_STORYBOOK === 'TRUE') {
+        alert('Will go to: ' + link + ' and close notice - clear local storage and refresh to redisplay')
+      } else {
+        window.open(link, '_self')
+      }
     },
     checkPage() {
       this.currentURL = window.location.pathname
@@ -131,73 +103,35 @@ export default {
 @import '../../../assets/styles/generated-icons.scss';
 @import '../../../includes/scss/all';
 
-.global-modal {
-  border-bottom: 0 none !important;
-}
-.modal-dialog.modal-400 {
-  width: 400px !important;
-  left: 50%;
-  margin-left: -(200px);
-  top: 50%;
-  margin-top: -240px;
-  box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, 0.24) !important;
-  border-radius: 6px !important;
+// modal and modal backdrop styles required in order to display the overlay behind the modal
 
-  @media only screen and (max-width: 481px) {
-    width: 343px !important;
-    margin-left: -(171px);
-  }
+.modal {
+  background: rgba(0,0,0,0.5)
 }
-.modal-header .close {
+
+.modal-backdrop {
   display: none;
 }
+
 .modal-header {
-  border-bottom: 0 none !important;
-  justify-content: flex-end !important;
-  padding-bottom: 0px !important;
-}
-.close-icon {
-  padding: 0;
+  border: none;
 }
-.modal-footer {
-  border-top: 0 none !important;
-}
-.modal-body {
-  padding-left: 24px;
-  margin-bottom: 0px;
-  padding-bottom: 0 !important;
-}
-
-.modal-content {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  border: none !important;
-  margin-top: 16px;
-  margin-bottom: 0px;
-  padding: 0px 8px;
-
-  &:focus:focus-visible {
-    outline: 0 !important;
-  }
 
-  @media only screen and (max-width: 481px) {
-    padding: 0px;
-  }
-}
 .modal-heading {
   font-size: 26px;
   font-weight: 700;
   line-height: 30px;
   letter-spacing: 0px;
-  margin-bottom: 0px;
-  margin-top: 0px;
-  padding: 0px 8px;
-  @media only screen and (max-width: 481px) {
-    padding: 0px;
-  }
+  margin-bottom: 16px;
 }
 
+.modal-content {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 16px;
+}
+  
 .modal-buttons {
   position: relative;
   text-decoration: none;

package/src/components/Global/HeroHeader/styles.scss

@@ -179,7 +179,8 @@
   // Masking
   //
   &__mask {
-    position: absolute;
+    position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     top: 0;

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

@@ -8,83 +8,64 @@ export default {
   argTypes: {
     background: {
       control: 'select',
-      options: ['grey', 'white', 'yellow'],
-      defaultValue: 'grey'
-    },
-    title: {
-      control: 'text',
-      defaultValue: 'Card Group Auto title'
+      options: ['grey', 'white', 'yellow']
     },
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    bundle: {
-      control: 'object',
-      defaultValue: bundleContent
+      options: ['h2', 'h3']
     },
     columns: {
       control: 'select',
-      options: [4, 3, 2, 1],
-      defaultValue: 3
-    },
-    initialDisplyLimit: {
-      control: 'number',
-      defaultValue: 3
+      options: [4, 3, 2, 1]
     },
     fetchContent: {
       control: 'function',
-      defaultValue: null,
       table: { disable: true }
     },
-    enableBundleFilter: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    showMore: {
-      control: 'boolean',
-      defaultValue: true
+    fetchFilters: {
+      control: 'function',
+      table: { disable: true }
     },
     type: {
       control: 'text',
-      defaultValue: 'auto',
       table: { disable: true }
     },
-    showFilter: {
-      control: 'boolean',
-      defaultValue: true
-    },
     rows: {
       control: 'select',
-      options: [3, 2, 1],
-      defaultValue: 3
-    },
-    hasPreselectedFilters: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    totalResults: {
-      control: 'number',
-      defaultValue: 10
-    },
-    filterResults: {
-      control: 'number',
-      defaultValue: 1
+      options: [3, 2, 1]
     }
+  },
+  args: {
+    background: 'grey',
+    title: 'Card Group Auto title',
+    titleTag: 'h2',
+    bundle: bundleContent,
+    columns: 3,
+    initialDisplyLimit: 3,
+    fetchContent: null,
+    enableBundleFilter: true,
+    showMore: true,
+    type: 'auto',
+    showFilter: true,
+    rows: 3,
+    hasPreselectedFilters: false,
+    totalResults: 10,
+    filterResults: 1
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
+const DefaultContent = (args) => ({
   components: { BrowseContent },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   mounted() {
     this.reset()
   },
   computed: {
     searchResults() {
       return {
-        results: Array(this.totalResults).fill({
+        results: Array(args.totalResults).fill({
           title: 'News Kitchen Sink 11',
           imageSrc: '',
           imageAlt: '',
@@ -96,7 +77,7 @@ const DefaultContent = (args, { argTypes }) => ({
           location: '',
           rtl: false
         }),
-        numFound: this.totalResults
+        numFound: args.totalResults
       }
     }
   },
@@ -125,15 +106,15 @@ const DefaultContent = (args, { argTypes }) => ({
       })
 
       data.results = hasFilters
-        ? data.results.slice(0, this.filterResults)
+        ? data.results.slice(0, args.filterResults)
         : data.results.slice(qs.start, qs.start + qs.rows)
-      data.numFound = hasFilters ? this.filterResults : data.numFound
+      data.numFound = hasFilters ? args.filterResults : data.numFound
 
       return Promise.resolve(data)
     },
     fetchFilters() {
-      return Promise.resolve(
-        this.showFilter
+      const filters = (
+        args.showFilter
           ? [
               {
                 name: 'industry',
@@ -148,7 +129,7 @@ const DefaultContent = (args, { argTypes }) => ({
                     name: 'Aged care'
                   }
                 ].filter((item) =>
-                  this.hasPreselectedFilters ? true : !item.preselected
+                  args.hasPreselectedFilters ? true : !item.preselected
                 ),
                 record_id: 'industry'
               },
@@ -165,13 +146,14 @@ const DefaultContent = (args, { argTypes }) => ({
                     preselected: true
                   }
                 ].filter((item) =>
-                  this.hasPreselectedFilters ? true : !item.preselected
+                  args.hasPreselectedFilters ? true : !item.preselected
                 ),
                 record_id: 'topic'
               }
             ]
           : []
       )
+      return Promise.resolve(filters)
     },
     getBundleAlias(string) {
       return string.charAt(0).toUpperCase() + string.slice(1)
@@ -206,10 +188,10 @@ const DefaultContent = (args, { argTypes }) => ({
   },
   template: `
   <browse-content
-    v-bind="$props"
+    v-bind="args"
     ref="bc"
     :key="rerenderKey"
-    :initial-disply-limit="rows * 3"
+    :initial-disply-limit="args.rows * 3"
     :fetch-content="fetchCards"
     :get-bundle-alias="getBundleAlias"
     :fetch-filters="fetchFilters"

package/src/components/SubComponents/FormInstance/index.vue

@@ -1,8 +1,10 @@
 <template>
-  <h1>Form Instance</h1>
+  <div>
+    <h1>Form Instance</h1>
   <p>
     The .vue and .stories.js files for SubComponents/FormInstance (displayed in Storybook under Form) must be copied from current Storybook 6 branch when time to upgrade them.  They are causing errors preventing Storybook from being rendered and therefore tested.
   </p>
+  </div>
 </template>
 
 <script>

package/src/components/SubComponents/FormInstance/stories/mocks/checkbox.json

@@ -0,0 +1,21 @@
+{
+  "checkbox1": {
+    "#type": "checkbox",
+    "#title": "checkbox1",
+    "#prepopulate": true,
+    "#default_value": true,
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--checkbox1",
+    "#webform_key": "checkbox1",
+    "#webform_element": true,
+    "#input": true,
+    "#return_value": 1,
+    "#title_display": "after",
+    "#required": false,
+    "#description_display": "after",
+    "#id": "edit-checkbox1",
+    "#name": "checkbox1",
+    "#value": true,
+    "#checked": true
+  }
+}