@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.11

package/src/includes/scss/vars/src/colors.scss

@@ -20,6 +20,21 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+// Functional colours
+$wsv-fun-dark-green: #576D2F;
+$wsv-fun-dark-blue: #104f77;
+$wsv-fun-dark-purple: #55356b;
+$wsv-fun-dark-red: #760031;
+$wsv-fun-dark-brown: #763b00;
+$wsv-fun-dark-caramel: #cb7c2d;
+$wsv-fun-light-teal: #7ac2b5;
+$wsv-fun-light-blue: #8ecade;
+$wsv-fun-light-purple: #9871a8;
+$wsv-fun-light-fuchsia: #f16a7e;
+$wsv-fun-light-green: #edeb72;
+$wsv-fun-light-brown: #dbc38b;
+
+
 
 $theme-colors: (
   'gold': $gold,
@@ -43,7 +58,20 @@ $theme-colors: (
   'yellow': $yellow,
   'lightyellow': $lightyellow,
   'outline': $outline,
-  'outline-dark': $outline-dark
+  'outline-dark': $outline-dark,
+  // Functional colours
+  'wsv-fun-dark-green':$wsv-fun-dark-green,
+  'wsv-fun-dark-blue':$wsv-fun-dark-blue,
+  'wsv-fun-dark-purple':$wsv-fun-dark-purple,
+  'wsv-fun-dark-red':$wsv-fun-dark-red,
+  'wsv-fun-dark-brown':$wsv-fun-dark-brown,
+  'wsv-fun-dark-caramel':$wsv-fun-dark-caramel,
+  'wsv-fun-light-teal':$wsv-fun-light-teal,
+  'wsv-fun-light-blue':$wsv-fun-light-blue,
+  'wsv-fun-light-purple':$wsv-fun-light-purple,
+  'wsv-fun-light-fuchsia':$wsv-fun-light-fuchsia,
+  'wsv-fun-light-green':$wsv-fun-light-green,
+  'wsv-fun-light-brown':$wsv-fun-light-brown
 );
 
 :export {

package/src/index.js

@@ -1,17 +1,17 @@
 // Global Components
-import Container from './components/Containers/Container'
-import Row from './components/Containers/Row'
-import Column from './components/Containers/Column'
-import HomepageHeader from './components/Containers/HomepageHeader'
-import Subheader from './components/Containers/Subheader'
-import SectionGroup from './components/Containers/SectionGroup'
+import Container from './components/Containers/Container/index.vue'
+import Row from './components/Containers/Row/index.vue'
+import Column from './components/Containers/Column/index.vue'
+import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
+import Subheader from './components/Containers/Subheader/index.vue'
+import SectionGroup from './components/Containers/SectionGroup/index.vue'
 
-import AppHeader from './components/Global/AppHeader'
-import AppFooter from './components/Global/AppFooter'
-import HeroHeader from './components/Global/HeroHeader'
-import SocialShare from './components/Global/SocialShare'
-import Strip from './components/Global/Strip'
-import AlertStrip from './components/Global/AlertStrip'
+import AppHeader from './components/Global/AppHeader/index.vue'
+import AppFooter from './components/Global/AppFooter/index.vue'
+import HeroHeader from './components/Global/HeroHeader/index.vue'
+import SocialShare from './components/Global/SocialShare/index.vue'
+import Strip from './components/Global/Strip/index.vue'
+import AlertStrip from './components/Global/AlertStrip/index.vue'
 import CardGrid from './components/Common/CardGrid/index.vue'
 import CardGridItem from './components/Common/CardGridItem/index.vue'
 import Cookies from './components/Global/Cookies/index.vue'
@@ -20,35 +20,36 @@ import GlobalNotice from './components/Global/GlobalNotice/index.vue'
 import ContrastMode from './components/Global/ContrastMode/index.vue'
 
 // Paragraphs
-import RichText from './components/Paragraphs/RichText'
-import TextMedia from './components/Paragraphs/TextMedia'
-import Accordion from './components/Paragraphs/Accordion'
-import TabbedCards from './components/Paragraphs/TabbedCards'
-import BrowseContent from './components/Paragraphs/BrowseContent'
-import TaskFinder from './components/Paragraphs/TaskFinder'
-import ListGroup from './components/Paragraphs/ListGroup'
-import ScrollSpy from './components/Paragraphs/ScrollSpy'
-import Directory from './components/Paragraphs/Directory'
-import SelectableCards from './components/Paragraphs/SelectableCards'
-import VideoMedia from './components/Paragraphs/VideoPlayer'
-import VideoGrid from './components/Paragraphs/VideoGrid'
-import Statistics from './components/Paragraphs/Statistics'
-import ProofPoints from './components/Paragraphs/ProofPoints'
-import TabulatedData from './components/Paragraphs/TabulatedData'
-import Breakout from './components/Paragraphs/Breakout'
-import Tabs from './components/Paragraphs/Tabs'
-import MarketingBanner from './components/Paragraphs/MarketingBanner'
-import RelatedInformation from './components/Paragraphs/RelatedInformation'
-import Calculator from './components/Paragraphs/Calculator'
+import RichText from './components/Paragraphs/RichText/index.vue'
+import TextMedia from './components/Paragraphs/TextMedia/index.vue'
+import Accordion from './components/Paragraphs/Accordion/index.vue'
+import TabbedCards from './components/Paragraphs/TabbedCards/index.vue'
+import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
+import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
+import ListGroup from './components/Paragraphs/ListGroup/index.vue'
+import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
+import Directory from './components/Paragraphs/Directory/index.vue'
+import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
+import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
+import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
+import Statistics from './components/Paragraphs/Statistics/index.vue'
+import ProofPoints from './components/Paragraphs/ProofPoints/index.vue'
+import TabulatedData from './components/Paragraphs/TabulatedData/index.vue'
+import Breakout from './components/Paragraphs/Breakout/index.vue'
+import Tabs from './components/Paragraphs/Tabs/index.vue'
+import MarketingBanner from './components/Paragraphs/MarketingBanner/index.vue'
+import RelatedInformation from './components/Paragraphs/RelatedInformation/index.vue'
+import Calculator from './components/Paragraphs/Calculator/index.vue'
+import Chart from './components/Paragraphs/Chart/index.vue'
 
 // SubComponents
-import FormAddressPostcode from './components/SubComponents/FormAddressPostcode'
-import CtaButton from './components/SubComponents/CtaButton'
-import Pagination from './components/SubComponents/Pagination'
-import SingleImage from './components/SubComponents/SingleImage'
-import Loading from './components/SubComponents/Loading'
-import Icon from './components/SubComponents/Icon'
-import Breadcrumb from './components/SubComponents/Breadcrumb'
+import FormAddressPostcode from './components/SubComponents/FormAddressPostcode/index.vue'
+import CtaButton from './components/SubComponents/CtaButton/index.vue'
+import Pagination from './components/SubComponents/Pagination/index.vue'
+import SingleImage from './components/SubComponents/SingleImage/index.vue'
+import Loading from './components/SubComponents/Loading/index.vue'
+import Icon from './components/SubComponents/Icon/index.vue'
+import Breadcrumb from './components/SubComponents/Breadcrumb/index.vue'
 import CardGroup from './components/SubComponents/CardGroup/index.vue'
 import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
@@ -98,7 +99,8 @@ export {
   Tabs,
   MarketingBanner,
   RelatedInformation,
-  Calculator
+  Calculator,
+  Chart
 }
 
 // Export Sub Components

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

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

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

@@ -1,405 +0,0 @@
-<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>