@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="wcl-directory-filters__single-tax">
+    <filter-button
+      :has-caret="true"
+      :selected="numberOfItems > 0"
+      :is-reset="false"
+      @clicked="$bvModal.show(`modal-center-${_uid}`)"
+    >
+      <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>
+      </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>
+</template>
+<script>
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+import FilterButton from './../../../Common/FilterButton/index.vue'
+import { BModal } from 'bootstrap-vue-next'
+
+export default {
+  components: {
+    CtaButton,
+    FilterButton,
+    BModal
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    results: {
+      type: Number,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      selectedFilters: {
+        [this.data.record_id]: this.data.terms.filter(
+          (term) => term.preselected
+        )
+      },
+      hasReset: false
+    }
+  },
+  computed: {
+    numberOfItems() {
+      return this.selectedFilters[this.data.record_id].length
+    },
+    resultString() {
+      let s = 's'
+      this.results === 1 ? (s = '') : false
+      return 'Result' + s
+    }
+  },
+  watch: {
+    selectedFilters: {
+      immediate: false,
+      deep: true,
+      handler() {
+        this.emitSelectedValues()
+      }
+    }
+  },
+  methods: {
+    emitSelectedValues() {
+      if (!this.hasReset) {
+        this.$emit('onFilter', this.selectedFilters)
+      }
+      this.hasReset = false
+    },
+    reset() {
+      this.hasReset = true
+      this.selectedFilters[this.data.record_id] = this.selectedFilters[
+        this.data.record_id
+      ].filter((item) => item.preselected)
+    }
+  }
+}
+</script>
+<style lang="scss">
+//
+// Global non scoped scss!
+// Modal inner overrides only
+//
+// Component styles add in scoped
+// block below
+//
+.wcl-directory-filters__single-tax {
+  // !!keep empty!! //
+  &__caret {
+    padding-left: 8px;
+  }
+
+  &__modal {
+    .modal-content {
+      border-radius: 8px;
+    }
+    .modal-xl {
+      max-width: 920px;
+    }
+    .modal-header {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      right: 0;
+      padding: 32px;
+      border: none;
+      .close {
+        z-index: 1;
+      }
+    }
+    .modal-body {
+      padding: 32px;
+      fieldset {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        legend {
+          font-size: 28px;
+          font-weight: 700;
+          line-height: 32px;
+          letter-spacing: 0px;
+          margin-bottom: 32px;
+        }
+        .option {
+          margin-bottom: 32px;
+          flex-basis: 50%;
+          display: flex;
+          @media screen and (max-width: 600px) {
+            flex-basis: 100%;
+          }
+          input[type='checkbox'] {
+            height: 24px;
+            border: 1px solid #bababa;
+            width: 24px;
+            cursor: pointer;
+          }
+          label {
+            margin: 0px;
+            width: 80%;
+            position: relative;
+            left: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .modal-footer {
+      border: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <row v-if="!loading" class="wcl-directory-filters">
+      <column v-if="bundle" md="4" sm="6">
+        <label class="visually-hidden" for="search-directory"
+          >Search by keyword (Typed keyword automatically filters below
+          results)</label
+        >
+        <b-form-input
+          id="search-directory"
+          v-model="searchQuery"
+          class="search"
+          autocomplete="off"
+          placeholder="Keyword"
+          debounce="500"
+          :style="`background-image: url(${searchIcon})`"
+        ></b-form-input>
+      </column>
+      <column v-if="bundle === 'isp'" md="4" sm="6">
+        <form-address-postcode
+          :show-full-address="false"
+          :input-placeholder="'Suburb or Postcode'"
+          :geocode="true"
+          :reverse-geocode="true"
+          :base-url="baseURL"
+          @suburbChange="emitLocation($event)"
+          @cleared="$emit('locationCleared')"
+        />
+      </column>
+      <column
+        :md="!bundle ? 12 : bundle === 'isp' ? 4 : 8"
+        :sm="!bundle ? 12 : bundle === 'isp' ? 6 : 12"
+        class="wcl-directory-filters_filters"
+      >
+        <single-taxonomy
+          v-for="(t, i) in filters.taxonomies"
+          :key="i"
+          :ref="`${t.record_id}`"
+          :data="t"
+          :results="results"
+          :loading="isFiltering"
+          class="wcl-directory-filters__filterButton"
+          @onFilter="emitFilterOpts($event)"
+        />
+        <filter-button
+          v-if="!hideReset"
+          :is-reset="true"
+          class="wcl-directory-filters__filterButton"
+          @clicked="reset"
+        />
+      </column>
+    </row>
+  </div>
+</template>
+<script>
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import SingleTaxonomy from './SingleTaxonomy/index.vue'
+import FormAddressPostcode from './../../SubComponents/FormAddressPostcode/index.vue'
+import searchIcon from './../../../assets/icons/search.svg?url'
+import FilterButton from './../../Common/FilterButton/index.vue'
+import { BFormInput } from 'bootstrap-vue-next'
+
+export default {
+  name: 'DirectoryFilters',
+  components: {
+    Row,
+    Column,
+    SingleTaxonomy,
+    FormAddressPostcode,
+    FilterButton,
+    BFormInput
+  },
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    bundle: {
+      type: String,
+      default: ''
+    },
+    results: {
+      type: Number,
+      required: true
+    },
+    isFiltering: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      searchQuery: '',
+      loading: true,
+      hideReset: true,
+      searchIcon
+    }
+  },
+  computed: {
+    baseURL() {
+      return window ? window.location.origin : ''
+    }
+  },
+  watch: {
+    searchQuery() {
+      if (this.searchQuery === '') {
+        this.hideReset = true
+      } else {
+        this.hideReset = false
+      }
+      this.$emit('onSearch', this.searchQuery)
+    }
+  },
+  mounted() {
+    // wait for hydration,
+    // then show all boxes together
+    this.loading = false
+  },
+  methods: {
+    emitFilterOpts(ev) {
+      this.hideReset = false
+      const allFiltersUnselected = Object.values(this.$refs).every(
+        (taxonomy) => {
+          return Object.values(taxonomy[0].selectedFilters).every(
+            (filter) => filter.filter((item) => !item.preselected).length === 0
+          )
+        }
+      )
+      if (allFiltersUnselected && !this.searchQuery) {
+        this.hideReset = true
+      }
+      this.$emit('onFilter', ev)
+    },
+    emitSortingOpts() {
+      this.$emit('onSort', this.selectedSort)
+    },
+    emitLocation(ev) {
+      this.$emit('onLocation', ev)
+    },
+    reset() {
+      this.hideReset = true
+      Object.keys(this.$refs).forEach((key) => {
+        this.$refs[key][0].reset()
+      })
+      this.searchQuery = ''
+      this.$emit('onReset')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-directory-filters {
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+  &__filterButton {
+    display: inline-block;
+    padding-right: 16px;
+    line-height: 3;
+    &:last-child {
+      padding-right: 0px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,266 @@
+<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 class="modal-content global-modal-global-content">
+        <div>
+          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')
+                $bvModal.hide('global-notice-modal')
+              "
+            >
+              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()
+                $bvModal.hide('global-notice-modal')
+              "
+            >
+              Continue to WorkSafe
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        slot="modal-footer"
+        style="display: none;"
+        class="modal-footer"
+      ></div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import IconClose from '../../../assets/icons/icon-close.svg'
+export default {
+  name: 'GlobalNotice',
+  data() {
+    return {
+      currentURL: '',
+      displayGlobal: false,
+      IconClose
+    }
+  },
+  mounted() {
+    window.addEventListener('load', this.checkPage())
+  },
+  methods: {
+    setCookie() {
+      localStorage.setItem('globalModalHidden', 'true')
+    },
+    goToPage(link) {
+      window.open(link, '_self')
+    },
+    checkPage() {
+      this.currentURL = window.location.pathname
+      if (this.currentURL === '/2023-24-workcover-premium-changes') {
+        this.setCookie()
+        this.displayGlobal = false
+      } else if (typeof window !== 'undefined') {
+        this.displayGlobal =
+          process.env.SHOW_GLOBAL_NOTICE === 'true' &&
+          !localStorage.getItem('globalModalHidden')
+      } else {
+        this.displayGlobal = process.env.SHOW_GLOBAL_NOTICE === 'true'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@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;
+
+  @media only screen and (max-width: 481px) {
+    width: 343px !important;
+    margin-left: -(171px);
+  }
+}
+.modal-header .close {
+  display: none;
+}
+.modal-header {
+  border-bottom: 0 none !important;
+  justify-content: flex-end !important;
+  padding-bottom: 0px !important;
+}
+.close-icon {
+  padding: 0;
+}
+.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;
+  }
+}
+
+.modal-buttons {
+  position: relative;
+  text-decoration: none;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0px;
+  caret-color: transparent;
+  border: 0;
+  border-radius: 8px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 0;
+  padding-right: 16px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  margin-top: 16px;
+
+  &.hasIcon {
+    span {
+      margin-left: 16px;
+      top: -1px;
+      position: relative;
+      img {
+        width: 16px;
+      }
+    }
+  }
+  &.isWiderYellow {
+    background-color: $yellow;
+    color: $black;
+    width: fit-content;
+    padding-left: 16px;
+    margin-top: 0px;
+
+    &:after {
+      content: arrow-right();
+      margin-left: 16px;
+    }
+  }
+  &.isWiderGray {
+    background-color: $lightgray;
+    color: $black;
+    width: fit-content;
+    padding-left: 16px;
+
+    &:after {
+      content: arrow-right();
+      margin-left: 16px;
+    }
+  }
+  .isWiderYellow:hover,
+  .isWiderGray:hover {
+    background-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      from(rgba(0, 0, 0, 0.15)),
+      to(rgba(0, 0, 0, 0.15))
+    );
+    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+    text-decoration: none;
+  }
+}
+</style>