@worksafevictoria/wcl7.5 1.0.0

package/src/components/Global/BackToTop/styles.scss

@@ -0,0 +1,46 @@
+@import '../../../includes/scss/vars/src/colors.scss';
+
+.btbButton {
+    position:fixed;
+    bottom: 16px;
+    right: 16px;
+    width: 167px;
+    height: 64px;
+    color: $white;
+    font-size: 16px;
+    font-style: normal;
+    text-decoration: underline;
+    background: $black;
+    border-radius: 8px;
+    border: solid 0px $black;
+    padding: 5px;
+    z-index: 4; 
+    overflow: hidden;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    &:focus,
+    &:hover {
+        opacity: 0.75;
+    }
+
+    &--iconContainer {
+        width: 30px;
+        height: 30px;
+        background-color:$white;
+        top: 12px;
+        left: 115px;
+        border-radius: 8px;
+        padding: 6px 6px 8px 6px;
+        gap: 4px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-left: 0.75rem;
+        
+    }
+
+    
+}

package/src/components/Global/ContrastMode/index.stories.js

@@ -0,0 +1,39 @@
+import ContrastMode from './index.vue'
+
+export default {
+    title: 'Global/ContrastMode',
+    component: ContrastMode,
+  }
+  
+  const Template = (args) => ({
+    components: { ContrastMode },
+    setup() {
+        return { args };
+      },
+    template: `
+    <div>
+        <contrast-mode v-bind="args" />
+        <br>
+        <br>
+        <div style="background-color: #FBD603; display: block"><h2>This is a demonstration of Contrast Mode</h2></div>
+        <br>
+        <h2>Image</h2>
+        <p>This is an image</p>
+        <img src='https://picsum.photos/900/600/?image=26' width="400" height="200"/>
+        <br>
+        <br>
+        <h2>Background Image</h2>
+        <p>This is a background image</p>
+        <br>
+        <div class="row">
+            <div class="col">
+                <div class="card" style="height:300px; width:600px; background-image:url('https://picsum.photos/900/600/?image=26');">
+                   <h2 style="color:palegreen">Background image example</h2>
+                </div>
+            </div>
+        </div>
+    </div>
+    `
+  })
+  
+  export const Default = Template.bind({})

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

@@ -0,0 +1,308 @@
+<template>
+  <div class="contrast_slide_container">
+    <div
+      class="contrast_slide_content"
+      :class="{ opened: isClicked, closed: !isClicked }"
+    >
+      <div
+        ref="hoverBar"
+        class="contrast_slide_hoverbar"
+        :class="{ outlined: isClicked }"
+      >
+        <button class="contrast_slide--toggle" @click="toggleBox">
+          <span class="semi-cirlcle"></span>
+          <span>Adjust contrast</span>
+          <span
+            :class="{ 'arrow-up': toggleArrow, 'arrow-down': !toggleArrow }"
+          ></span>
+        </button>
+        <div
+          ref="contrastBox"
+          class="contrast_slide--box"
+          :class="{ clicked: isClicked }"
+        >
+          <div class="contrast_slide-separator"></div>
+          <ul class="contrast_slide--box-list">
+            <li v-for="list in lists" :key="list.value">
+              <label>
+                <input
+                  type="radio"
+                  :name="list.name"
+                  :value="list.value"
+                  :checked="list.value === selectedValue"
+                  @click="handleContrast"
+                />
+                {{ list.label }}
+              </label>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContrastMode',
+
+  data() {
+    return {
+      lists: [
+        {
+          name: 'contrast',
+          value: 'default',
+          label: 'Light contrast (default)'
+        },
+        {
+          name: 'contrast',
+          value: 'high_contrast',
+          label: 'Increased contrast'
+        },
+        { name: 'contrast', value: 'grayscale', label: 'Greyscale' }
+      ],
+      toggleArrow: false,
+      isClicked: false,
+      selectedValue: null
+    }
+  },
+
+  emits: ['toggleBox', 'handleContrast'],
+
+  mounted() {
+    let selectedMode = document
+      .getElementById('contrastStyle')
+      ?.getAttribute('data-sel')
+    this.selectedValue = selectedMode ?? 'default'
+    window.addEventListener('click', this.handleOutsideClick)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('click', this.handleOutsideClick)
+  },
+
+  methods: {
+    handleOutsideClick(event) {
+      const content = this.$refs.hoverBar
+
+      // Check if the click is outside the content
+      if (content && !content.contains(event.target)) {
+        this.isClicked = false
+        this.toggleArrow = false
+      }
+    },
+    toggleBox() {
+      this.isClicked = !this.isClicked // Toggle the 'clicked' class
+      this.toggleArrow = !this.toggleArrow // Toggle the 'Arrow' class
+    },
+    handleContrast(event) {
+      const selMode = event.target.value
+      // the css we are going to inject
+      let cssVar = ''
+      if (selMode === 'high_contrast') {
+        cssVar =
+          'html {filter: invert(100%);' +
+          '-webkit-filter: invert(100%);' +
+          '-moz-filter: invert(100%);' +
+          '-o-filter: invert(100%);' +
+          '-ms-filter: invert(100%); }' +
+          'img {filter: invert(100%);' +
+          'background-color: #BABABA; }' +
+          'section[style*="background-image"],' +
+          'div[style*="background-image"] {filter: invert(100%);}'
+      } else if (selMode === 'grayscale') {
+        cssVar =
+          'html {filter: grayscale(100%);' +
+          '-webkit-filter: grayscale(100%);' +
+          '-moz-filter: grayscale(100%);' +
+          '-o-filter: grayscale(100%);' +
+          '-ms-filter: grayscale(100%);}' +
+          'img {filter: invert(0);}'
+      } else {
+        cssVar = ''
+      }
+      this.setContrast(cssVar, selMode)
+    },
+    setContrast(cssVar, selMode) {
+      const head = document.getElementsByTagName('head')[0]
+
+      // Check if the style with the specified ID already exists
+      let style = document.getElementById('contrastStyle')
+
+      if (!style) {
+        // If style doesn't exist, create a new style element
+        style = document.createElement('style')
+        style.id = 'contrastStyle' // Assign an ID to the style element
+
+        if (style.styleSheet) {
+          style.styleSheet.cssText = cssVar
+        } else {
+          style.appendChild(document.createTextNode(cssVar))
+        }
+        // Inject the CSS to the head
+        head.appendChild(style)
+      } else {
+        // If style already exists, update its CSS
+        style.textContent = cssVar
+      }
+      style.setAttribute('data-sel', selMode) // Set a data attribute on the style element
+      // panel collapsing after making selection
+      this.isClicked = false
+      this.toggleArrow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin opened-slide {
+  left: 100%;
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+.contrast_slide {
+  &_container {
+    background: white;
+    padding: 0;
+    position: fixed;
+    right: 0;
+    top: 100px;
+    z-index: 9999;
+  }
+  &_content {
+    width: 50px;
+    padding: 0;
+    margin: 0;
+    right: 0;
+    position: absolute;
+
+    // &.closed {}
+    &.opened {
+      > .contrast_slide_hoverbar {
+        @include opened-slide;
+      }
+    }
+
+    @media (min-width: 768px) {
+      &:hover {
+        > .contrast_slide_hoverbar {
+          @include opened-slide;
+        }
+      }
+    }
+  }
+
+  &_hoverbar {
+    border: 1px solid #bababa;
+    width: 263px;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: -26%;
+    transition: all 0.4s ease-in-out;
+    /////
+    outline-offset: 2px;
+    border-radius: 3px;
+    box-shadow: none !important;
+
+    &.outlined {
+      outline: solid 3px #da47ff;
+    }
+  }
+
+  &--toggle {
+    background: white;
+    border: none;
+    padding: 12px 16px;
+    text-align: left;
+    width: 100%;
+    &:focus {
+      outline: none !important;
+    }
+    > span {
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+    .semi-cirlcle {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(90deg, black 50%, white 50%);
+      border-radius: 50%;
+      border: 2px solid black;
+    }
+    .arrow-down {
+      width: 0;
+      height: 0;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid black;
+    }
+    .arrow-up {
+      width: 0;
+      height: 0;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid black;
+    }
+  }
+
+  &-separator {
+    border: none;
+    border-top: 1px solid #bababa;
+    display: block;
+    width: 87%;
+    margin: 0 auto;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  &--box {
+    position: relative;
+    display: none;
+
+    &.clicked {
+      display: block;
+    }
+
+    &-list {
+      background: white;
+      list-style: none;
+      margin: 0;
+      padding: 12px 16px;
+    }
+    label {
+      display: block;
+      padding: 6px 0;
+
+      input[type='radio'] {
+        border: 2px solid #bebebe;
+        border-radius: 50%;
+        box-shadow: 0 0 0px 0px #bebebe inset;
+        height: 24px;
+        outline: none;
+        vertical-align: middle;
+        margin-right: 5px;
+        width: 24px;
+        appearance: none;
+
+        &:before {
+          border-radius: 50%;
+          content: '';
+          display: block;
+          margin: 20% auto;
+          height: 60%;
+          width: 60%;
+        }
+        &:checked {
+          border: 2px solid black;
+          &:before {
+            background: black;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Global/Cookies/Constants.js

@@ -0,0 +1,72 @@
+const analyticsCookies = [
+  {
+    name: '_ga',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_ga_*',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_hjAbsoluteSessionInProgress',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_hjFirstSeen',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_hjSessionUser*',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_hjSession_*',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_hjIncludedIn*',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: 'ajs_*',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  }
+]
+
+const marketingCookies = [
+  {
+    name: '_fbp',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: '_gcl_au',
+    domain: '.worksafe.vic.gov.au',
+    path: '/'
+  },
+  {
+    name: 'fr',
+    domain: '.facebook.com',
+    path: '/'
+  },
+  {
+    name: '1P_JAR',
+    domain: '.google.com',
+    path: '/'
+  },
+  {
+    name: 'OGPC',
+    domain: '.google.com',
+    path: '/'
+  }
+]
+
+export { analyticsCookies, marketingCookies }

package/src/components/Global/Cookies/index.storieshide.js

@@ -0,0 +1,45 @@
+import Cookies from './index.vue'
+const defaultValue = {
+  header: 'field_cookie_heading',
+  content: {
+    default: 'field_cookie_content',
+    small: 'field_cookie_content_small'
+  },
+  modal: {
+    heading: 'field_modal_heading',
+    functional: {
+      heading: 'field_functional_heading',
+      description: 'field_functional_description'
+    },
+    analytics: {
+      heading: 'field_analytics_heading',
+      description: 'field_analytics_description'
+    },
+    marketing: {
+      heading: 'field_marketing_heading',
+      description: 'field_marketing_description'
+    }
+  }
+}
+export default {
+  title: 'Global/Cookies',
+  component: Cookies,
+  argTypes: {
+    cookieHeader: {
+      control: 'text',
+      defaultValue: 'Accept and Reject Cookies'
+    },
+    cookieContent: {
+      control: 'object',
+      defaultValue: defaultValue
+    }
+  }
+}
+
+const DefaultCookies = (args, { argTypes }) => ({
+  components: { Cookies },
+  props: Object.keys(argTypes),
+  template: '<cookies v-bind="$props" />'
+})
+
+export const Default = DefaultCookies.bind({})