@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,78 @@
+.global-alert {
+  display: flex;
+  padding-top: 10px;
+  padding-right: 56px;
+  padding-bottom: 10px;
+  border: none;
+  color: #fff;
+  margin-bottom: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+
+  &__warning {
+    background-color: #da3e26;
+  }
+
+  &__info {
+    background-color: #02819e;
+  }
+
+  &__icon__wrapper {
+    display: flex;
+    width: 72px;
+    .global-alert__icon {
+      height: 36px;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  &__link__wrapper {
+    display: flex;
+    width: calc(100% - 50px);
+  }
+
+  &__link {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+    color: #fff;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0px;
+
+    &:focus {
+      z-index: 0;
+      position: relative;
+      text-decoration: underline;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    ::-ms-backdrop,
+    &__link {
+    overflow-x: hidden;
+    } /* IE11 */
+  }
+}
+
+@media all and (-ms-high-contrast: none) {
+  ::-ms-backdrop,
+  .global-alert {
+    max-width: 100%;
+    overflow-x: hidden;
+  } /* IE11 */
+  @media screen\9, screen and (max-width: 767px) {
+    .global-alert {
+      max-width: 100%;
+      overflow-x: hidden;
+    }
+  }
+}

package/src/components/Global/AppFooter/FooterSocialShare/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="footer-social-share__wrapper"
+    :class="{ 'footer-social-share__wrapper--workwell': isWorkwell }"
+  >
+    <a
+      v-for="(data, index) in socialData"
+      :key="index"
+      :href="data.url"
+      class="footer-social-share footer-social-share__button dark"
+    >
+      <img
+        :height="data.height"
+        :width="data.width"
+        :src="isWorkwell ? data.wwIcon : data.icon"
+        :style="`margin: ${data.margin}`"
+        :alt="`${data.title}`"
+      />
+    </a>
+  </div>
+</template>
+
+<script>
+import facebookIcon from '../../../../assets/icons/AppFooter/facebook-ws-footer.svg?url'
+import twitterIcon from '../../../../assets/icons/AppFooter/twitter-ws-footer.svg?url'
+import linkedInIcon from '../../../../assets/icons/AppFooter/linkedin-ws-footer.svg?url'
+import instagramIcon from '../../../../assets/icons/instagram.svg?url'
+import youtubeIcon from '../../../../assets/icons/AppFooter/youtube-ws-footer.svg?url'
+import wwFacebookIcon from '../../../../assets/icons/AppFooter/facebook-ww-footer.svg?url'
+import wwTwitterIcon from '../../../../assets/icons/AppFooter/twitter-ww-footer.svg?url'
+import wwLinkedInIcon from '../../../../assets/icons/AppFooter/linkedin-ww-footer.svg?url'
+import wwInstagramIcon from '../../../../assets/icons/AppFooter/instagram-ww-footer.svg?url'
+import wwYoutubeIcon from '../../../../assets/icons/AppFooter/youtube-ww-footer.svg?url'
+
+export default {
+  name: 'FooterSocialShare',
+  props: {
+    isWorkwell: {
+      type: Boolean,
+      default: false
+    },
+
+    topics: {
+      type: [Array, null],
+      default: null
+    }
+  },
+  data() {
+    return {
+      sfObj: null,
+      socialData: [
+        {
+          title: 'Facebook',
+          url: 'https://www.facebook.com/worksafevictoria',
+          icon: facebookIcon,
+          wwIcon: wwFacebookIcon,
+          height: 19,
+          width: 11,
+          margin: '6px 11px 7px 10px;'
+        },
+        {
+          title: 'Twitter',
+          url: 'https://twitter.com/WorkSafe_Vic',
+          icon: twitterIcon,
+          wwIcon: wwTwitterIcon,
+          height: 16,
+          width: 19,
+          margin: '8px 6px 8px 7px;'
+        },
+        {
+          title: 'Instagram',
+          url: 'https://www.instagram.com/worksafevic',
+          icon: instagramIcon,
+          wwIcon: wwInstagramIcon,
+          height: 18,
+          width: 18,
+          margin: '7px;'
+        },
+        {
+          title: 'LinkedIn',
+          url: 'https://www.linkedin.com/company/worksafevictoria',
+          icon: linkedInIcon,
+          wwIcon: wwLinkedInIcon,
+          height: 18,
+          width: 17,
+          margin: '6px 7px 8px 8px;'
+        },
+        {
+          title: 'Youtube',
+          url: 'https://www.youtube.com/user/worksafevictoria',
+          icon: youtubeIcon,
+          wwIcon: wwYoutubeIcon,
+          height: 13,
+          width: 19,
+          margin: '10px 7px 9px 6px;'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

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

@@ -0,0 +1,41 @@
+$white: #ffffff !default;
+
+.footer-social-share__wrapper {
+  padding-top: 0.5rem;
+  text-align: right;
+
+  @media screen and (max-width: 539px) {
+    text-align: left;
+    margin-top: 0.5rem;
+  }
+
+  &.footer-social-share__wrapper--workwell {
+    *:focus {
+      outline: 3px solid $white;
+    }
+  }
+
+  .footer-social-share {
+    display: inline-block;
+    margin-left: 0.5rem;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &__button {
+      background: $white;
+      opacity: 0.7;
+      border-radius: 50%;
+
+      &:hover {
+        background: $white;
+        opacity: 1;
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import AppFooter from './index.vue'
+import footerMenu from './storiesConst'
+
+let dateInput = new Date()
+dateInput = dateInput.toString()
+
+export default {
+  title: 'Global/AppFooter',
+  component: AppFooter,
+  data() {
+    return {
+      footerMenu
+    }
+  }
+}
+
+export const Default = {}
+
+Default.args = {
+  footerMenu: footerMenu,
+  changedDate: dateInput,
+  isWorkwell: false,
+  storybook: false
+}