@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,405 @@
+<template>
+  <div class="wcl-search">
+    <div class="gcse-search"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    // console.log('Component mounted')
+    this.setupCustomeStyle()
+
+    // Introduce a delay before setting up addEventListener
+    setTimeout(() => {
+      this.setupCustomAttr()
+      this.handleSearchResultLinkTitle()
+    }, 2000) // Adjust the delay time as needed
+  },
+
+  beforeDestroy() {
+    // Remove event listeners before the component is destroyed
+    const targetNode = document.querySelector('input[name="search"]')
+    const buttonNode = document.querySelector('button.gsc-search-button')
+
+    if (targetNode) {
+      // Add keyup.enter event listener
+      targetNode.removeEventListener('keyup', this.handleKeyUp)
+      buttonNode.removeEventListener('click', this.handleKeyUp)
+    }
+    const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
+    paginationNodes.forEach((paginationNode) => {
+      paginationNode.removeEventListener('click', this.handleSearchResultTitle)
+    })
+  },
+
+  methods: {
+    // Method to customize google search style
+    setupCustomeStyle() {
+      const script = document.createElement('script')
+      script.async = true
+      script.src = 'https://cse.google.com/cse.js?cx=53b1506aa03c64160'
+      document.head.appendChild(script)
+
+      // Create a new style element
+      const style = document.createElement('style')
+      style.id = 'searchStyle' // Assign an ID to the style element
+      // The CSS we are going to inject
+      const cssVar = 'table.gssb_c {display: none !important;}'
+      // Inject the style element into the head
+      document.head.appendChild(style)
+      // Set the text content of the style element to the CSS text
+      style.textContent = cssVar
+    },
+
+    // Method to add google search input attributes
+    setupCustomAttr() {
+      console.log('setupCustomInputAttr ...')
+
+      const targetNode = document.querySelector('input[name="search"]')
+      const buttonNode = document.querySelector('button.gsc-search-button')
+
+      if (targetNode) {
+        // Add keyup.enter event listener
+        targetNode.addEventListener('keyup', this.handleKeyUp)
+        buttonNode.addEventListener('click', this.handleKeyUp)
+      }
+
+      this.setupPaginationEvent()
+    },
+
+    setupPaginationEvent() {
+      console.log('setupPaginationEvent ....')
+      // Introduce a delay before setting up addEventListener on pagination
+      setTimeout(() => {
+        this.handleSearchResultLinkTitle()
+        const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
+        console.log('paginationNodes length ..', paginationNodes.length)
+
+        if (paginationNodes && paginationNodes.length > 0) {
+          console.log('FOUND PAGINATION ....', paginationNodes)
+
+          // Loop through each element and add a click event listener
+          paginationNodes.forEach((paginationNode) => {
+            // Check if the click event listener has already been added
+            if (!paginationNode.clickEventListenerAdded) {
+              // Add a click event listener
+              paginationNode.addEventListener(
+                'click',
+                this.handleSearchResultTitle
+              )
+              // Mark that the click event listener has been added
+              paginationNode.clickEventListenerAdded = true
+              console.log('Adding a click event listener')
+            }
+          })
+        }
+      }, 2000) // Adjust the delay time as needed
+    },
+
+    // Method to trim text after '|'
+    handleSearchResultTitle() {
+      //alert('handleSearchResultTitle ....')
+      this.setupPaginationEvent()
+    },
+
+    handleSearchResultLinkTitle() {
+      //alert('handleSearchResultLinkTitle ....')
+      // Get all targetNodes with class "a.gs-title"
+      var targetNodes = document.querySelectorAll('a.gs-title')
+      console.log('search list title targetNodes :- ', targetNodes)
+
+      // Loop through each element and hide the text after the "|"
+      targetNodes.forEach(function(element) {
+        // Get the text content
+        var text = element.textContent || element.innerText
+
+        // Find the index of the "|" symbol
+        var pipeIndex = text.indexOf('|')
+        console.log('text :- ', text)
+        // If the "|" symbol is found, update the text content to display only the part before "|"
+        if (pipeIndex !== -1) {
+          element.textContent = text.substring(0, pipeIndex).trim()
+        }
+      })
+    },
+
+    handleKeyUp(event) {
+      if (event.key === 'Enter' || event.type === 'click') {
+        let keyword = event.key
+          ? event.target.value
+          : document.querySelector('input[name="search"]').value
+
+        // console.log('Enter key pressed. Value:', keyword)
+
+        // Check if the URL does not contain "/search"
+        if (keyword && !window.location.href.includes('/search')) {
+          let origin = window.location.origin
+          let hash = window.location.hash
+          let pathname = 'search'
+          let URL = origin + '/' + pathname + hash
+          // console.log('URL does not contains "/search" ...', URL)
+          window.location.assign(URL)
+        }
+
+        this.setupPaginationEvent
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-search {
+  :deep(form.gsc-search-box) {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: 100%;
+  }
+  :deep(.gsib_a) {
+    padding: 0 !important;
+    height: 56px;
+  }
+  :deep(.gsib_b) {
+    position: absolute;
+    right: 5px;
+    top: 15px;
+  }
+  :deep(.gcsc-more-maybe-branding-root) {
+    display: none;
+  }
+  :deep(table.gsc-input) {
+    position: relative;
+  }
+  :deep(td.gsc-input) {
+    border: none;
+    padding: 0;
+    width: 100%;
+  }
+  :deep(.gsc-input-box) {
+    border: none;
+  }
+  :deep(input.gsc-input) {
+    border-radius: 8px 0px 0px 8px;
+    border: 1px solid $gray !important;
+    border-right: 0 !important;
+    background: none !important;
+    color: #495057;
+    height: 56px !important;
+    position: relative;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 0.375rem 0.75rem !important;
+
+    @media screen and (max-width: 320px) {
+      width: 220px;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  :deep(.gsc-search-button) {
+    display: -ms-flexbox;
+    display: flex;
+    margin-left: 0px;
+    height: 56px;
+    margin-top: 0px;
+  }
+  :deep(button.gsc-search-button) {
+    background: $orange;
+    border: none;
+    border-radius: 0px 8px 8px 0px;
+    color: $black;
+    display: flex;
+    align-items: center;
+    height: 56px !important;
+    font-size: 16px;
+    font-weight: 700;
+    padding-right: 32px;
+    padding-left: 32px;
+
+    &:before {
+      content: 'Search';
+    }
+    @media screen and (max-width: 767px) {
+      margin-top: 6px;
+    }
+    @media screen and (max-width: 320px) {
+      padding-right: 16px;
+      padding-left: 16px;
+    }
+
+    svg {
+      fill: black;
+      height: 18px;
+      width: 18px;
+      margin-left: 10px;
+    }
+
+    :focus {
+      box-shadow: 0px;
+    }
+  }
+
+  :deep(.gsst_a .gscb_a) {
+    color: #191919;
+  }
+  :deep(.gsc-result-info) {
+    color: #191919;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  :deep(.gsc-above-wrapper-area) {
+    padding: 20px 0;
+    border-bottom: none;
+  }
+  /* search list start */
+  :deep(.gsc-url-top) {
+    display: none;
+  }
+  :deep(.gsc-table-result) {
+    line-height: 1.6;
+    padding: 0 5px;
+    font-size: 16px;
+    font-weight: 400;
+    width: 80%;
+    b {
+      color: #191919;
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+  :deep(.gsc-resultsRoot.gsc-tabData) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    &:hover {
+      border: none;
+    }
+  }
+  :deep(.gs-bidi-start-align.gs-snippet) {
+    color: #191919 !important;
+    line-height: 24px;
+  }
+  :deep(.gsc-thumbnail-inside) {
+    position: relative;
+    padding: 0;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      height: 16px;
+      width: 11px;
+      top: 5px;
+      right: 16px;
+      background-repeat: no-repeat;
+      background-image: url(../../../assets/icons/chev-right.svg);
+      background-size: 100%;
+    }
+    div.gs-title {
+      width: 90%;
+      margin-bottom: 12px;
+      overflow: visible;
+    }
+    a.gs-title {
+      color: #191919 !important;
+      font-weight: 700;
+      line-height: 24px;
+      font-size: 20px;
+      border: 3px solid transparent;
+      padding-left: 5px;
+      padding-right: 5px;
+      text-decoration: underline;
+
+      &:hover {
+        border: 3px solid #da47ff;
+        color: #006bff !important;
+        b {
+          color: #006bff !important;
+        }
+      }
+
+      b {
+        color: #191919 !important;
+        font-size: 20px;
+      }
+    }
+  }
+  :deep(.gsc-orderby-label) {
+    font-size: 16px;
+    font-weight: 700;
+    color: #191919;
+  }
+  :deep(.gsc-selected-option-container) {
+    background-color: white;
+    border-radius: 10px;
+    margin-top: 0px;
+    padding-top: 6px;
+    margin-right: 0;
+    margin-left: 4px;
+    padding-left: 20px;
+    padding-bottom: 6px;
+    height: 40px;
+    .gsc-selected-option {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      margin-right: 20px;
+    }
+  }
+  :deep(.gsc-control-cse .gsc-option-selector) {
+    margin-top: 0;
+    margin-right: 10px;
+  }
+  :deep(.gsc-expansionArea > .gsc-webResult.gsc-result) {
+    border: 0;
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: 0;
+    &:first-child {
+      border-top: 1px solid #bababa;
+    }
+    > div {
+      border-bottom: 1px solid #bababa;
+      padding: 32px 0;
+    }
+  }
+
+  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-current-page) {
+    background-color: lightgrey;
+  }
+  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-page) {
+    border: 1px solid grey;
+    color: #333333;
+    padding: 10px 12px;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  :deep(.gsc-results .gsc-cursor-box) {
+    margin-top: 50px;
+  }
+
+  /* search list end */
+  @include mq('xs') {
+    .not-extra-small-screen {
+      display: none;
+    }
+  }
+}
+@media screen and (max-width: 767px) {
+  :deep(.gssb_c) {
+    width: 85% !important;
+  }
+}
+</style>

package/src/components/SubComponents/Icon/README.md

@@ -0,0 +1,40 @@
+# Icon
+
+This component is used to render SVG icons. 
+
+## Usage
+
+Import the Icon component, and give it the URL path to the SVG file. When webpack builds the app, it extracts all those SVG files and puts them in one spritesheet. `<icon>` components will get rendered as an `<svg>` tag with a `<use xlink:href="">` to reference the correct area of the spritesheet.
+
+```html
+<template>  
+  <div id="app">
+    <icon width="100" height="100" :glyph="Logo"></icon>
+    <icon width="100" height="100" :glyph="Close"></icon>
+  </div>
+</template>
+
+<script>  
+import Icon from './components/Icon';  
+import Logo from './assets/logo.svg';  
+import Close from './assets/close.svg';
+
+export default {  
+  name: 'app',
+  components: {
+    Icon,
+  },
+  data () {
+    return { Logo, Close };
+  },
+};
+</script>  
+```
+
+## Implementation
+
+SVGs are rendered to the browser using a spritesheet, to save bandwidth, load times and caching. The npm package `svg-sprite-loader` is used by babel to pull SVG assets out of component folders, bundle them together and use the correct `<use xlink:href>` reference on the rendered `<svg>`.
+
+Hat tip to [joanmira.com](http://joanmira.com/vuejs-first-impression-and-how-to-work-with-svgs/) (note: tutorial a bit out of date, requires webpack 2+ config instead of webpack 1) and [`svg-sprite-loader`](https://github.com/kisenka/svg-sprite-loader).
+
+

package/src/components/SubComponents/Icon/example.js

@@ -0,0 +1,41 @@
+const template = `
+  <icon
+    width="40"
+    height="40"
+    glyph="icon"
+  />
+`
+
+import icon from '../../../assets/icons/success.svg'
+
+export default {
+  component: 'icon',
+  props: {
+    glyph: icon,
+    width: 40,
+    height: 40
+  },
+  layout: {
+    container: true,
+    row: true
+  },
+  snippet: `
+// Example.vue
+<template>
+  <div>${template}</div>
+</template>
+<script>
+import { Icon } from 'worksafe-component-library'
+import icon from '../../../assets/icons/success.svg'
+
+export default {
+  components: { Icon },
+  data () {
+    return {
+      icon
+    }
+  }
+}
+</script>
+  `
+}

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

@@ -0,0 +1,84 @@
+// Layout components for presentation
+import Icon from './index.vue'
+import svg from '../../../assets/icons/instagram.svg?raw'
+
+export default {
+  title: 'SubComponents/Icon',
+  components: Icon,
+  argTypes: {
+    bordered: {
+      control: 'boolean'
+    },
+    glyph: {
+      control: ['object', 'text'],
+       table: { disable: true }
+    },
+    height: {
+      control: ['number', 'text'],
+      table: { disable: true }
+    },
+    inverted: {
+      control: 'boolean'
+    },
+    width: {
+      control: ['number', 'text'],
+      table: { disable: true }
+    }
+  }
+}
+
+const generate = (args) => ({
+  components: { Icon },
+  setup () {
+    return { args }
+  },
+  template: `
+    <div style="margin-top:15px" :style="{background: !args.inverted ? 'white' : 'grey'}">
+      <icon v-bind="args" />
+    </div>`
+})
+
+export const RegularIcon = generate.bind({})
+RegularIcon.args = {
+  glyph: svg,
+  bordered: false,
+  height: 30,
+  inverted: false,
+  width: 30
+}
+
+export const Bordered = generate.bind({})
+Bordered.args = {
+  glyph: svg,
+  bordered: true,
+  height: 30,
+  inverted: false,
+  width: 30
+}
+
+export const LargeIcon = generate.bind({})
+LargeIcon.args = {
+  glyph: svg,
+  width: 120,
+  height: 60,
+  bordered: false,
+  inverted: false
+}
+
+export const Inverted = generate.bind({})
+Inverted.args = {
+  glyph: svg,
+  width: 120,
+  height: 60,
+  inverted: true,
+  bordered: false
+}
+
+export const Url = generate.bind({})
+Url.args = {
+  glyph: 'https://content-staging-v2.api.worksafe.vic.gov.au/core/misc/menu-expanded.png',
+  width: 120,
+  height: 60,
+  bordered: false,
+  inverted: false
+}

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

@@ -0,0 +1,127 @@
+<template>
+  <span :class="bordered ? ' iconWrapper--bordered' : ''">
+    <svg
+      v-if="!isHtml"
+      class="icon"
+      focusable="false"
+      aria-hidden="true"
+      :class="
+        className +
+          (first ? ' icon_first' : '') +
+          (last ? ' icon_last' : '') +
+          (inverted ? ' icon--inverted' : '')
+      "
+      :width="width"
+      :height="height"
+      :viewBox="glyph.viewBox"
+      :alt="iconAlt"
+    >
+      <use :xlink:href="'#' + glyph.id" />
+    </svg>
+    <!-- eslint-disable vue/no-v-html -->
+    <span v-if="isHtml && renderedSVG" v-html="renderedSVG"> </span>
+  </span>
+</template>
+
+<script>
+import { detectBrowser } from '../../../../lib/detect-browser'
+// TODO: Add .visually-hidden label prop
+export default {
+  name: 'Icon',
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    glyph: {
+      type: [Object, String],
+      required: true
+    },
+    width: {
+      type: [Number, String],
+      default: 32
+    },
+    height: {
+      // height is required in IE
+      // undefined type added in case height was going to be handled explicitly, check JobsAtHomeDay for more details
+      type: [Number, String],
+      default: 32
+    },
+    first: {
+      type: Boolean,
+      default: false
+    },
+    last: {
+      type: Boolean,
+      default: false
+    },
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    iconAlt: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      renderedSVG: undefined
+    }
+  },
+  computed: {
+    isHtml() {
+      return this.glyph && typeof this.glyph === 'string'
+    }
+  },
+  mounted() {
+    this.renderedSVG = this.getSvg()
+  },
+  methods: {
+    getSvg() {
+      if (this.glyph) {
+        let icon
+        const content = String(this.glyph)
+        const isSVGTag = content.includes('<svg')
+        if (!isSVGTag) {
+          icon = document.createElement('img')
+          icon.src = content
+        } else {
+          if (window && navigator && detectBrowser(navigator) === 'IE') {
+            return this.glyph
+          } else {
+            const temp = document.createElement('div')
+            temp.innerHTML = content
+            icon = temp.querySelector('svg')
+            icon.removeAttribute('width')
+            icon.removeAttribute('height')
+          }
+        }
+        if (this.iconAlt) {
+          icon.setAttribute('alt', this.iconAlt)
+        }
+        icon.setAttribute('width', this.width)
+        icon.setAttribute('height', this.height)
+        const customClass =
+          this.className +
+          (this.first ? ' icon_first' : '') +
+          (this.last ? ' icon_last' : '') +
+          (this.inverted ? ' icon--inverted' : '')
+        icon.setAttribute('class', 'icon ' + customClass)
+        icon.setAttribute('focusable', false)
+        icon.setAttribute('aria-hidden', true)
+        return icon.outerHTML
+      }
+      return null
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './styles';
+</style>