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

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"