@worksafevictoria/wcl7.5 1.0.0

package/src/components/Global/AppFooter/storiesConst.js

@@ -0,0 +1,110 @@
+const footerMenu = [
+  {
+    title: 'Information',
+    below: [
+      {
+        title: 'Laws and regulations',
+        absolute: 'https://content-staging-v2.api.worksafe.vic.gov.au/laws',
+        relative: '/laws'
+      },
+      {
+        title: 'Industries',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/industries',
+        relative: '/industries'
+      },
+      {
+        title: 'Safety topics',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/safety-topics',
+        relative: '/safety-topics'
+      },
+      {
+        title: 'Safety alerts',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/safety-alerts',
+        relative: '/safety-alerts'
+      },
+      {
+        title: 'News',
+        absolute: 'https://content-staging-v2.api.worksafe.vic.gov.au/news',
+        relative: '/news'
+      }
+    ]
+  },
+  {
+    title: 'Services',
+    below: [
+      {
+        title: 'WorkWell',
+        absolute: 'https://www.workwell.vic.gov.au',
+        relative: 'https://www.workwell.vic.gov.au'
+      },
+      {
+        title: 'myWorkSafe',
+        absolute: 'https://www.myworksafe.vic.gov.au',
+        relative: 'https://www.myworksafe.vic.gov.au'
+      },
+      {
+        title: 'Online Employer Services',
+        absolute: 'https://www4.worksafe.vic.gov.au/iam/login.do',
+        relative: 'https://www4.worksafe.vic.gov.au/iam/login.do'
+      },
+      {
+        title: 'Licences',
+        absolute: 'https://content-staging-v2.api.worksafe.vic.gov.au/licences',
+        relative: '/licences'
+      },
+      {
+        title: 'For providers',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/provider-information',
+        relative: '/provider-information'
+      }
+    ]
+  },
+  {
+    title: 'About WorkSafe',
+    absolute:
+      'https://content-staging-v2.api.worksafe.vic.gov.au/resources/information-about-licence-explosives-vehicle',
+    relative: '/resources/information-about-licence-explosives-vehicle',
+    below: [
+      {
+        title: 'About us',
+        absolute: 'https://content-staging-v2.api.worksafe.vic.gov.au/about',
+        relative: '/about'
+      },
+      {
+        title: 'Careers',
+        absolute: 'https://content-staging-v2.api.worksafe.vic.gov.au/careers',
+        relative: '/careers'
+      },
+      {
+        title: 'Data and statistics',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/data-and-statistics',
+        relative: '/data-and-statistics'
+      },
+      {
+        title: 'Accessibility',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/accessibility-statement',
+        relative: '/accessibility-statement'
+      },
+      {
+        title: 'Privacy',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/privacy-statement',
+        relative: '/privacy-statement'
+      },
+      {
+        title: 'Copyright',
+        absolute:
+          'https://content-staging-v2.api.worksafe.vic.gov.au/copyright-disclaimer',
+        relative: '/copyright-disclaimer'
+      }
+    ]
+  }
+]
+
+export default footerMenu

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

@@ -0,0 +1,393 @@
+$gray-alt: #bababa !default;
+$white: #ffffff !default;
+$black: #000000 !default;
+$nero: #191919 !default;
+$whitesmoke: #f3f3f3 !default;
+
+.app-footer {
+  position: relative;
+  z-index: 3;
+  .nolink {
+    cursor: default;
+  }
+  *:focus {
+    outline-offset: 3px;
+    opacity: 1;
+    text-decoration: none;
+  }
+
+  &__page-info {
+    background: $gray-alt;
+    padding: 30px 0;
+
+    &__reviewed-date {
+      text-align: right;
+    }
+
+    &__back-to-top {
+      text-align: right;
+
+      .back-to-top-icon {
+        margin-left: 18px;
+      }
+
+      a {
+        color: $black;
+      }
+    }
+
+    &.app-footer__page-info--workwell {
+      background: #dbefdd;
+    }
+
+    &:deep(.fullscreen) {
+      @media screen and (max-width: 540px) {
+        display: none;
+      }
+    }
+      
+    &:deep(.mobilescreen) {
+      @media screen and (min-width: 541px) {
+        display: none !important;
+      }
+      @media screen and (max-width: 540px) {
+        display: block;
+       margin-bottom: 15px;
+      }
+    }
+  }
+
+  &__feedback-form {
+    background: $whitesmoke;
+    padding: 30px 0;
+    
+    &__feedback-content {
+      width: 635px;
+      @media screen and (max-width: 575px) {
+          width: 100%;
+        }
+
+    }
+  }
+
+  &__main {
+    background: $nero;
+
+    &.app-footer__main--workwell {
+      background: #356041;
+      *:focus {
+        outline: 3px solid $white !important;
+      }
+    }
+
+    &__social-share {
+      border-bottom: rgba(255, 255, 255, 0.5) solid 2px;
+      padding: 36px 0 26px;
+    }
+
+    p,
+    li,
+    a {
+      color: $white;
+      opacity: 0.85;
+    }
+
+    &__menu {
+      padding-top: 18px;
+      padding-bottom: 45px;
+
+      @media screen and (max-width: 979px) {
+        padding-top: 0;
+      }
+
+      @media screen and (max-width: 767px) {
+        padding-bottom: 0;
+      }
+
+      ul,
+      li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      ul.submenu {
+        &.isOpen {
+          margin-top: 16px;
+        }
+        li {
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .app-footer-menu {
+        @media screen and (max-width: 767px) {
+          border-bottom: rgba(255, 255, 255, 0.5) solid 2px;
+        }
+
+        &__title {
+          position: relative;
+          padding: 29px 0 24px;
+
+          @media screen and (max-width: 767px) {
+            cursor: pointer;
+          }
+
+          h3,
+          h2 {
+            //styleName: Heading/H3 card-title;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 24px;
+            letter-spacing: 0px;
+            display: inline-block;
+            margin-top: 0;
+            margin-bottom: 32px;
+            @media screen and (max-width: 767px) {
+              margin-bottom: 0;
+            }
+          }
+
+          a {
+            text-decoration: none;
+          }
+
+          &--link {
+            //styleName: Heading/H3 card-title;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 24px;
+            letter-spacing: 0px;
+
+            opacity: 1;
+            display: inline;
+          }
+
+          &__caret {
+            position: absolute;
+            right: 0;
+
+            filter: invert(100%) sepia(100%) saturate(25%) hue-rotate(56deg)
+              brightness(108%) contrast(106%);
+
+            @media screen and (min-width: 768px) {
+              display: none;
+            }
+          }
+        }
+
+        &__item {
+          margin: 0.5rem 0 1rem;
+          font-size: 16px;
+
+          &--icon {
+            margin-left: 0.75rem;
+          }
+
+          &--link,
+          &.app-footer-menu__item--tel {
+            //styleName: Link/Footer;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 24px;
+            letter-spacing: 0px;
+          }
+
+          & ~ .app-footer-menu__item {
+            margin-top: inherit;
+          }
+          @media screen and (max-width: 767px) {
+            &--hide {
+              display: none !important;
+            }
+
+            &:last-of-type {
+              margin-bottom: 31px;
+            }
+          }
+          &--link {
+            &:hover {
+              opacity: 1;
+            }
+            @media screen and (max-width: 767px) {
+              display: block;
+            }
+          }
+        }
+        &__address {
+          margin-top: 0;
+          //styleName: Paragraph/Body;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+          letter-spacing: 0px;
+        }
+      }
+    }
+
+    &__subscribe {
+      border-top: rgba(255, 255, 255, 0.5) solid 2px;
+      padding-top: 64px;
+      padding-bottom: 4.25rem;
+
+      &__flag {
+        margin: {
+          right: 1rem;
+          bottom: 32px;
+        }
+      }
+
+      p {
+        //styleName: Paragraph/Body;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0px;
+      }
+
+      &--icon {
+        margin-left: 16px;
+        :deep(path) {
+          fill: white;
+        }
+      }
+
+      @media screen and (max-width: 767px) {
+        padding-bottom: 7rem;
+        border-top: none;
+
+        .app-footer__main__empty-col {
+          display: none;
+        }
+
+        .app-footer__main-vic-gov-icon {
+          margin-top: 2.875rem;
+        }
+      }
+
+      &-col {
+        @media screen and (max-width: 767px) {
+          padding-top: 46px;
+        }
+
+        @media screen and (max-width: 540px) {
+          padding-top: 21px;
+        }
+
+        &__text {
+          margin-top: 32px;
+        }
+
+        &__worksafe-icon {
+          margin-right: 27px;
+
+          @media screen and (max-width: 851px) {
+            margin-right: 4px;
+          }
+        }
+
+        &__btn {
+          color: $white;
+          font-size: 1rem;
+          font-weight: bold;
+          background: $nero;
+          padding: 16px;
+          border-radius: 8px;
+          border: solid 2px $white;
+
+          &:hover {
+            cursor: pointer;
+          }
+
+          &:focus,
+          &:hover {
+            opacity: 0.75;
+          }
+
+          &.app-footer__main__subscribe-btn--workwell {
+            background: #356041;
+          }
+        }
+      }
+    }
+  }
+}
+
+input[type="radio"] {
+  height: 24px;
+  width: 24px;
+  vertical-align: middle;
+  border: 1px solid $gray-alt;
+  border-radius: 60px;
+  cursor: pointer;
+
+  &:focus,
+  &:hover {
+    opacity: 0.75;
+  }
+}
+
+input[type="radio"]+label {
+  margin-right: 10px;
+  margin-left: 5px;
+}
+
+input[type="radio"]:checked {
+  accent-color: $black;
+}
+
+.feedback-buttons {
+  height: 56px;
+}
+
+.feedback-cancel {
+  color: $black;
+  text-decoration: underline;
+  font-weight: 600;
+  line-height: 52px;
+  vertical-align: middle;
+  border: none;
+}
+
+img.feedback-tick {
+  width: 16px;
+  height: 16px;
+  margin-right: 16px;
+  margin-bottom: 5px;
+  top: -1px;
+  position: relative;
+}
+
+textarea.feedback-textarea {
+  width: 100%;
+  height: 96px;
+  border: 1px solid $gray-alt;
+  border-radius: 8px;
+  resize: none;
+  box-sizing: border-box;
+  margin-top: 16px;
+  margin-bottom: 14px;
+}
+
+.fullscreen {
+  @media screen and (max-width: 540px) {
+    display: none;
+  }
+}
+  
+.mobilescreen {
+  @media screen and (min-width: 541px) {
+    display: none !important;
+  }
+  @media screen and (max-width: 540px) {
+    display: block;
+    margin-bottom: 15px;
+  }
+}

package/src/components/Global/AppHeader/ModalSearch/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="app-search" @keyup.esc="$emit('closed')">
+    <!-- Do not change the position of elements as they are used for keyboard nav -->
+    <button
+      ref="closeSearchButton"
+      class="close app-search__close-btn"
+      @click="$emit('closed')"
+    >
+      Close menu
+      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+    </button>
+    <form @submit.prevent>
+      <label
+        class="app-search__label font-weight-bold"
+        for="app-search--search-input-box"
+        >Search WorkSafe</label
+      >
+      <search
+        ref="searchInputBox"
+        :initial-search-query="searchQuery"
+        :page-limit="pageLimit"
+        :page-number="pageNumber"
+        :content-parser="contentParser"
+        :is-typeahead="false"
+        @loading="(e) => (searchResults = null)"
+        @results="(e) => (searchResults = e)"
+        @selected="$emit('closed')"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import Close from '../../../../assets/icons/close.svg'
+import Search from '../../../SubComponents/Search/index.vue'
+
+export default {
+  name: 'ModalSearch',
+  components: { Search },
+  props: {
+    searchQuery: {
+      type: String,
+      default: ''
+    },
+    contentParser: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      pageLimit: 20,
+      pageNumber: 1,
+      searchResults: null,
+      Close
+    }
+  },
+  mounted() {
+    this.$refs.searchInputBox.$el.querySelector('input').focus()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

package/src/components/Global/AppHeader/ModalSearch/styles.scss

@@ -0,0 +1,43 @@
+@import '../includes';
+@import '../../../../includes/scss/vars/src/colors.scss';
+
+.app-search {
+  position: relative;
+
+  @include fp('padding-left', 16, 60, $start: 320, $end: 980);
+  @include fp('padding-right', 16, 60, $start: 320, $end: 980);
+
+  & > &__close-btn {
+    position: absolute;
+    font-size: 16px;
+    color: $app-menu-black;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    top: -32px;
+    @include fp('right', 16, 60, $start: 320, $end: 980);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    span {
+      font-size: 24px;
+      padding-left: 16px;
+    }
+
+    .app-search__close-icon {
+      margin-left: 16px;
+    }
+  }
+
+  &__label {
+    font-size: 18px;
+    line-height: 1.56;
+    display: block;
+    margin-bottom: 8px;
+    margin-top: 56px;
+    color: $app-menu-black;
+  }
+}

package/src/components/Global/AppHeader/includes.scss

@@ -0,0 +1,68 @@
+//
+// Not importing variables and mixins because needs to be
+// as portable as it can for v2 migrate
+//
+// TODO for v2:
+//
+// [] hook up with includes
+//
+
+//
+// Fluid Properties
+// Usage : h1 { @include fp(font-size, 50, 100); //50px at 320, 100px at 1920;}
+//
+$app-menu-yellow: #fdcd59;
+$app-menu-gold: #fecc56;
+$primary-color: $app-menu-gold;
+$app-menu-white: #ffffff;
+$app-menu-black: #191919;
+$app-menu-green: #356041;
+$app-menu-border-color: rgba(255, 255, 255, 0.3);
+
+$app-header-background-colour: $app-menu-black !default;
+$app-header-text-colour: $app-menu-black !default;
+$app-header-hover: $app-menu-gold !default;
+$app-header-active: $app-menu-yellow !default;
+
+@if ($primary-color == #478157) {
+  $app-header-background-colour: $app-menu-green !global;
+  $app-header-outline-colour: $app-menu-white !global;
+  $app-header-hover: $app-menu-white !global;
+  $app-header-active: $app-menu-white !global;
+}
+
+@mixin fp(
+  $property,
+  $min,
+  $max,
+  $start: 320,
+  $end: 1920,
+  $clip: true,
+  $clipAtStart: true,
+  $clipAtEnd: true
+) {
+  $multiplier: calc($max - $min / $end - $start) * 100;
+  $adder: calc($min * $end - $max * $start / $end - $start);
+  $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
+  @if $clip and $clipAtStart {
+    @media (max-width: #{$start + 0px}) {
+      #{$property}: $min + 0px;
+    }
+  }
+  @if $clip and $clipAtEnd {
+    @media (min-width: #{$end + 0px}) {
+      #{$property}: $max + 0px;
+    }
+  }
+  #{$property}: $formula;
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}