@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,256 @@
+<template>
+  <button v-if="!url" :class="generatedClass" @click="clicked()">
+    <span class="wcl-cta__link-text" :class="textClass"><slot></slot></span>
+    <span
+      v-if="!textOnly"
+      class="wcl-cta__spacer"
+      aria-hidden="true"
+      :class="{ ['wcl-cta__spacer--centered']: isCentred }"
+    ></span>
+    <icon
+      v-if="glyph && !textOnly"
+      :width="glyphWidth"
+      :height="glyphHeight"
+      :glyph="glyph"
+      :class="glyphClass"
+    />
+    <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
+    <arrow-left v-else-if="!textOnly" :class="glyphClass" />
+  </button>
+  <a
+    v-else-if="isAbsolute"
+    :alt="alt"
+    :href="url"
+    :class="generatedClass"
+    @click.prevent="clicked()"
+  >
+    <span class="wcl-cta__link-text" :class="textClass"><slot></slot></span>
+    <span
+      v-if="!textOnly"
+      class="wcl-cta__spacer"
+      :class="{ ['wcl-cta__spacer--centered']: isCentred }"
+    ></span>
+    <icon
+      v-if="glyph && !textOnly"
+      :width="glyphWidth"
+      :height="glyphHeight"
+      :glyph="glyph"
+      :class="glyphClass"
+    />
+    <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
+    <arrow-left v-else-if="!textOnly" :class="glyphClass" />
+  </a>
+  <nuxt-link
+    v-else
+    :alt="alt"
+    :to="linkUriProcessed"
+    :class="generatedClass"
+    @click.prevent="clicked()"
+  >
+    <span class="wcl-cta__link-text" :class="textClass"><slot></slot></span>
+    <span
+      v-if="!textOnly"
+      class="wcl-cta__spacer"
+      :class="{ ['wcl-cta__spacer--centered']: isCentred }"
+    ></span>
+    <icon
+      v-if="glyph && !textOnly"
+      :width="glyphWidth"
+      :height="glyphHeight"
+      :glyph="glyph"
+      :class="glyphClass"
+    />
+    <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
+    <arrow-left v-else-if="!textOnly" :class="glyphClass" />
+  </nuxt-link>
+</template>
+
+<script>
+import arrowRight from '../../../assets/icons/arrow-right.svg?component'
+import arrowLeft from '../../../assets/icons/arrow-left.svg?component'
+import icon from './../Icon/index.vue'
+
+export default {
+  name: 'CtaButton',
+  components: {
+    arrowRight,
+    arrowLeft,
+    icon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) =>
+        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0
+    },
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    glyph: {
+      type: [Object, String],
+      required: false,
+      default: () => null
+    },
+    glyphHeight: {
+      type: Number,
+      required: false,
+      default: 15
+    },
+    glyphWidth: {
+      type: Number,
+      required: false,
+      default: 25
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    },
+    isCentred: {
+      type: Boolean,
+      default: false
+    },
+    textOnly: {
+      type: Boolean,
+      default: false
+    },
+    isFluid: {
+      type: Boolean,
+      default: true
+    },
+    stretch: {
+      type: Boolean,
+      default: false
+    },
+    slim: {
+      type: Boolean,
+      default: false
+    },
+    focusOutline: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0
+    }
+  },
+  data() {
+    return {
+      arrowRight,
+      arrowLeft
+    }
+  },
+  computed: {
+    // var r = new RegExp('^(?:[a-z]+:)?//', 'i');
+    // r.test('http://example.com'); // true - regular http absolute URL
+    // r.test('HTTP://EXAMPLE.COM'); // true - HTTP upper-case absolute URL
+    // r.test('https://www.exmaple.com'); // true - secure http absolute URL
+    // r.test('ftp://example.com/file.txt'); // true - file transfer absolute URL
+    // r.test('//cdn.example.com/lib.js'); // true - protocol-relative absolute URL
+    // r.test('/myfolder/test.txt'); // false - relative URL
+    // r.test('test'); // false - also relative URL
+    isAbsolute() {
+      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
+      return r.test(this.url)
+    },
+    // Some links come out of Drupal in the format `entity:node/551`
+    // As an interim solution, make the link go to `node/551` and it
+    // will render correctly. Not ideal as it doesn't forward to the
+    // friendly link. Should come out of Drupal with a proper alias.
+    linkUriProcessed() {
+      if (this.url?.indexOf('entity:') === 0) {
+        return this.url.slice(7)
+      } else if (this.url?.indexOf('internal:') === 0) {
+        return this.url.slice(9)
+      } else {
+        return this.url
+      }
+    },
+    generatedClass() {
+      return `wcl-cta ${this.type} ${this.rtl ? 'rtl' : ''} ${
+        this.workwell ? 'workwell' : ''
+      } ${this.isCentred ? 'text-center' : ''} ${
+        this.textOnly ? 'wcl-cta--text-only' : ''
+      } ${this.stretch ? 'wcl-cta--stretch' : ''} ${
+        this.slim ? 'wcl-cta--slim' : ''
+      } ${'wcl-cta--focus-' + this.focusOutline}`
+    },
+    glyphClass() {
+      const hasArrow = !this.glyph && !this.textOnly
+      return this.isCentred
+        ? { ['wcl-cta__arrow']: hasArrow }
+        : {
+            ['wcl-cta__arrow']: hasArrow
+          }
+    },
+    textClass() {
+      return this.isCentred ? {} : {}
+    }
+  },
+  methods: {
+    clicked() {
+      var theEl = this.$el.getElementsByClassName('wcl-cta__link-text')
+      var attrs
+      if (theEl && theEl.length > 0) {
+        attrs = {
+          group: this.$store?.state?.page?.content?.title,
+          label: theEl[0]?.innerText?.split('\n')[0],
+          data: this.url
+        }
+      } else {
+        attrs = {
+          group: this.$store?.state?.page?.content?.title,
+          label: '',
+          data: this.url
+        }
+      }
+      // push event to gtm
+      if (this.$gtm) {
+        this.$gtm.push({ event: 'custom.interaction.cta.click', ...attrs })
+      }
+      // navigate to url
+      if (!this.url) {
+        //donothing
+      } else if (this.isAbsolute) {
+        window.open(this.url)
+      } else {
+        this.$router.push(this.url)
+      }
+      this.$emit('clicked')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+// styles can be found in global src/assets/styles/stylesheet.scss
+// this is because rich text html can dynamically specify cta button class
+.wcl-cta {
+  &__arrow {
+    margin-top: 3px;
+  }
+  &--text-only {
+    min-width: auto;
+  }
+  &--focus {
+    &-light {
+      &:focus {
+        @include focus-outline('light');
+      }
+    }
+    &-dark {
+      &:focus {
+        @include focus-outline('dark');
+      }
+    }
+  }
+}
+</style>

package/src/components/SubComponents/FormAddressPostcode/index.stories.js

@@ -0,0 +1,43 @@
+import FormAddressPostcode from './index.vue'
+
+export default {
+  title: 'SubComponents/FormAddressPostcode',
+  component: FormAddressPostcode,
+  argTypes: {
+    showShadow: {
+      control: 'boolean'
+    },
+    inputPlaceholder: {
+      control: 'text'
+    },
+    showFullAddress: {
+      control: 'boolean'
+    },
+    geocode: {
+      control: 'boolean'
+    },
+    reverseGeocode: {
+      control: 'boolean'
+    },
+    baseUrl: {
+      control: 'text'
+    },
+    inputClassName: {
+      control: 'text'
+    }
+  }
+}
+
+
+export const Default = {
+  
+  args: {
+    showShadow: false,
+    inputPlaceholder: 'Search for a suburb or postcode',
+    showFullAddress: false,
+    geocode: false,
+    reverseGeocode: false,
+    baseUrl: 'https://www.worksafe.vic.gov.au',
+    inputClassName: 'class-name'
+  }
+}

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

@@ -0,0 +1,314 @@
+<template>
+  <div class="suburb-postcode-search">
+    <input
+      :id="`suburb-postcode-search-input-${_uid}`"
+      v-model="suburb.text"
+      autocomplete="no"
+      :placeholder="inputPlaceholder"
+      type="text"
+      aria-haspopup="true"
+      aria-controls="sp-suggestions"
+      :class="{
+        'suburb-postcode-search--show-shadow': showShadow,
+        [inputClassName]: true
+      }"
+      @keyup.prevent="searchSuburbPostcodeDebounce($event)"
+    />
+    <div class="suggestion-wrapper">
+      <ul v-if="show" id="sp-suggestions" ref="suggestions">
+        <li
+          v-for="(r, i) in results"
+          :key="i"
+          tabindex="0"
+          @keydown.prevent="handleKeydownforListItem($event, r)"
+          @click.prevent="updateValue(r)"
+        >
+          {{ r.description }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="reverseGeocode && !isIE" class="detect-location">
+      <button :disabled="searchingAddress" @click="getLocation()">
+        Get Location
+      </button>
+      <b-spinner
+        v-if="searchingAddress"
+        small
+        label="Small Spinner"
+      ></b-spinner>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import debounce from 'lodash/debounce'
+import { detectBrowser } from '../../../../lib/detect-browser'
+import { BSpinner } from 'bootstrap-vue-next'
+
+export default {
+  name: 'SuburbPostcodeSearch',
+  components: { BSpinner },
+  props: {
+    showShadow: {
+      type: Boolean,
+      default: false
+    },
+    inputPlaceholder: {
+      type: String,
+      default: 'Search for a suburb or postcode'
+    },
+    showFullAddress: {
+      type: Boolean,
+      default: false
+    },
+    geocode: {
+      type: Boolean,
+      default: false
+    },
+    reverseGeocode: {
+      type: Boolean,
+      default: false
+    },
+    baseUrl: {
+      type: String,
+      default: ''
+    },
+    inputClassName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      suburb: {
+        text: null,
+        value: null,
+        location: null
+      },
+      results: [],
+      show: false,
+      searchSuburbPostcodeDebounce: debounce(this.searchSuburbPostcode, 500, {
+        trailing: true
+      }),
+      options: {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0
+      },
+      searchingAddress: false
+    }
+  },
+  computed: {
+    queryString() {
+      const types = this.showFullAddress ? 'address' : '(regions)'
+      return `input=${this.suburb.text}&types=${types}&components=country:au`
+    },
+    isIE() {
+      return window && navigator && this.detectBrowser(navigator) === 'IE'
+    }
+  },
+  watch: {
+    suburb: {
+      immediate: false,
+      deep: true,
+      handler() {
+        if (!this.suburb.location && this.suburb.text.length === 0) {
+          this.$emit('cleared')
+        }
+      }
+    }
+  },
+  methods: {
+    detectBrowser,
+    async searchSuburbPostcode(e) {
+      // Not enter key
+      if (e.keyCode !== 13) {
+        this.suburb.value = ''
+      }
+
+      // On Arrow Down
+      if (e.keyCode === 40 && this.show === true) {
+        this.$refs.suggestions.children[0].focus()
+      }
+
+      // Trap backspace e.keyCode
+      if (e.keyCode === 8) {
+        this.suburb.text = ''
+        if (this.suburb.location) {
+          delete this.suburb.location
+        }
+      }
+
+      if (this.suburb.text === '') {
+        this.show = false
+      }
+
+      try {
+        const response = await (this?.$axios || axios).get(
+          `${this.baseUrl ||
+            window.origin}/places/api/v1/place/autocomplete/json?${
+            this.queryString
+          }`
+        )
+        const predictions = response?.data?.predictions || []
+        if (
+          !(
+            predictions.length === 1 &&
+            predictions[0].structured_formatting.main_text === this.suburb.value
+          ) &&
+          predictions.length > 0
+        ) {
+          this.results = predictions
+          this.show = true
+        }
+        // this.$emit('suburbChange', this.suburb)
+      } catch (e) {
+        console.log('there was an error in SuburbPostcodeSearch', e)
+      }
+    },
+    handleKeydownforListItem(e, r) {
+      // On Enter
+      if (e.keyCode == 13 && this.show == true) {
+        this.updateValue(r)
+      }
+      // On Arrow Down
+      if (e.keyCode == 40 && this.show == true) {
+        this.focusNext(e)
+      }
+      // On Arrow Up
+      if (e.keyCode == 38 && this.show == true) {
+        this.focusPrevious(e)
+      }
+    },
+    async getLatLng(address) {
+      const geocodedAddress = await (this.$axios || axios).get(
+        `${this.baseUrl}/places/api/v1/geocode/json?address=${address}&components=country:au&sensor=false`
+      )
+      if (geocodedAddress.data?.results[0]) {
+        return Promise.resolve(
+          geocodedAddress.data.results[0].geometry.location
+        )
+      }
+    },
+    async searchAddressByLatLng(lat, lng) {
+      const geocodedAddress = await (this.$axios || axios).get(
+        `${this.baseUrl}/places/api/v1/geocode/json?latlng=${lat},${lng}`
+      )
+      if (geocodedAddress.data?.results[0]) {
+        return Promise.resolve(
+          geocodedAddress.data.results[0].formatted_address
+        )
+      }
+    },
+    async updateValue(v) {
+      this.suburb = {
+        text: v.description,
+        value: v.structured_formatting.main_text
+      }
+      if (this.geocode && this.suburb.value) {
+        this.suburb.location = await this.getLatLng(this.suburb.value)
+      }
+      this.$emit('suburbChange', this.suburb)
+      this.show = false
+      // Next tick is too fast
+      // have to wait for DOM to update
+      let self = this
+      setTimeout(function() {
+        document
+          .getElementById(`suburb-postcode-search-input-${_uid}`)
+          .focus()
+      }, 100)
+    },
+    focusPrevious(e) {
+      if (e.target.previousElementSibling != null) {
+        e.target.previousElementSibling.focus()
+      }
+    },
+    focusNext(e) {
+      if (e.target.nextElementSibling != null) {
+        e.target.nextElementSibling.focus()
+      }
+    },
+    getLocation() {
+      this.searchingAddress = true
+      if (navigator.geolocation) {
+        var self = this
+        return navigator.geolocation.getCurrentPosition(
+          self.findAndUpdateAddress,
+          self.errorFindingLocation,
+          self.options
+        )
+      } else {
+        return false
+      }
+    },
+    async findAndUpdateAddress(pos) {
+      let {
+        coords: { latitude, longitude }
+      } = pos
+      let foundAddress = await this.searchAddressByLatLng(latitude, longitude)
+      this.suburb = {
+        text: foundAddress,
+        value: foundAddress,
+        location: {
+          lat: latitude,
+          lng: longitude
+        }
+      }
+      this.searchingAddress = false
+      this.$emit('suburbChange', this.suburb)
+    },
+    errorFindingLocation(err) {
+      console.warn(err)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.suburb-postcode-search {
+  position: relative;
+
+  input {
+    z-index: 2;
+  }
+
+  .suburb-postcode-search--show-shadow {
+    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .suggestion-wrapper {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.18);
+    border-radius: 0 0 15px 15px;
+    top: 40px;
+    ul {
+      margin: 0;
+      padding: 0;
+      display: block;
+      background: #ffffff;
+      border: 1px solid $gray-alt;
+      border-radius: 0 0 15px 15px;
+      padding-top: 15px;
+      border-top: 0 none;
+
+      li {
+        list-style: none;
+        margin: 0;
+        cursor: pointer;
+        display: block;
+        padding: 10px 16px;
+        font-weight: bold;
+        text-decoration: none;
+
+        &:hover {
+          background: $gray-alt;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/SubComponents/FormInstance/index.stories.js

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

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

@@ -0,0 +1,12 @@
+<template>
+  <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>
+</template>
+
+<script>
+export default {
+    name: 'FormInstance'
+}
+</script>

package/src/components/SubComponents/GoogleSearch/index.stories.js

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