@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,318 @@
+<template>
+  <b-button-group
+    vertical
+    class="social-share"
+    :class="{ fixed: mobileToggle, right: rtl ? !rightToggle : rightToggle }"
+  >
+    <div class="social-share__wrap">
+      <span class="social-share__header">Share</span>
+      <div class="social-share__button-wrapper">
+        <b-button
+          v-if="showEmail"
+          tabindex="-1"
+          variant="link"
+          class="social-share__button"
+        >
+          <div class="social-share__circle--black">
+            <a
+              tabindex="0"
+              class="social-share__anchor"
+              :href="`mailto:?body=${url}`"
+            >
+              <span class="visually-hidden">Email</span>
+              <img
+                role="presentation"
+                class="social-share__img"
+                :src="emailIcon"
+                alt=""
+              />
+            </a></div
+        ></b-button>
+        <b-button
+          v-if="showFacebook"
+          tabindex="-1"
+          variant="link"
+          class="social-share__button"
+          ><div class="social-share__circle--black">
+            <a
+              tabindex="0"
+              class="social-share__anchor"
+              :href="`https://www.facebook.com/sharer.php?u=${url}`"
+              target="_blank"
+            >
+              <span class="visually-hidden">Facebook</span>
+              <img
+                role="presentation"
+                class="social-share__img"
+                :src="facebookIcon"
+                alt=""
+              />
+            </a></div
+        ></b-button>
+        <b-button
+          v-if="showTwitter"
+          tabindex="-1"
+          variant="link"
+          class="social-share__button"
+          ><div class="social-share__circle--black">
+            <a
+              tabindex="0"
+              class="social-share__anchor"
+              :href="`https://twitter.com/intent/tweet?url=${url}`"
+              target="_blank"
+            >
+              <span class="visually-hidden">Twitter</span>
+              <img
+                role="presentation"
+                class="social-share__img"
+                :src="twitterIcon"
+                alt=""
+              />
+            </a></div
+        ></b-button>
+
+        <hr v-if="showPdf" class="social-share__hr" />
+
+        <b-button
+          v-if="showPdf"
+          tabindex="-1"
+          variant="link"
+          class="social-share__button"
+          @click.prevent="savePdf()"
+          ><div class="social-share__circle--white">
+            <a tabindex="0" class="social-share__anchor" href="#">
+              <span class="visually-hidden">PDF</span>
+              <img
+                role="presentation"
+                class="social-share__img-pdf"
+                :src="officeFilePdfIcon"
+                alt=""
+              />
+            </a></div
+        ></b-button>
+      </div>
+    </div>
+  </b-button-group>
+</template>
+
+<script>
+import emailIcon from '../../../assets/icons/SocialShare/email-white.svg?url'
+import facebookIcon from '../../../assets/icons/SocialShare/facebook-white.svg?url'
+import twitterIcon from '../../../assets/icons/SocialShare/twitter-white.svg?url'
+import officeFilePdfIcon from '../../../assets/icons/SocialShare/office-file-pdf.svg?url'
+import { BButton, BButtonGroup } from 'bootstrap-vue-next'
+
+export default {
+    name: 'SocialShare',
+    components: { BButtonGroup, BButton },
+    props: {
+        rtl: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            url: null,
+            emailIcon,
+            facebookIcon,
+            twitterIcon,
+            officeFilePdfIcon,
+            mobileToggle: false,
+            rightToggle: true
+        };
+    },
+    computed: {
+        showFacebook() {
+            return true;
+        },
+        showTwitter() {
+            return true;
+        },
+        showEmail() {
+            return true;
+        },
+        showPdf() {
+            return this.$canPrint && this.$canPrint();
+        }
+    },
+    mounted() {
+        if (process.client) {
+            this.url = window.location.href;
+        }
+    },
+    methods: {
+        savePdf() {
+            window.printOnLoad = true;
+            let URL = `/pdf${window.location.pathname}`;
+            window.open(URL);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.social-share {
+  background: $white;
+  padding: 4px;
+  border-style: solid;
+  border-color: $lightgray;
+  border-width: 3px 3px 3px 0;
+  border-radius: 0 6px 6px 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+
+  @include mq('sm') {
+    position: relative;
+    top: auto;
+    left: auto;
+    border: 0;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  &__header {
+    font-size: 14px;
+    line-height: 50px;
+    @include mq('sm') {
+      line-height: 40px;
+    }
+  }
+
+  &__button-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin: auto;
+
+    @include mq('sm') {
+      display: block;
+      margin: 0;
+      flex-direction: unset;
+      justify-content: unset;
+      align-content: unset;
+      .social-share__button {
+        float: left;
+        display: inline;
+      }
+    }
+  }
+
+  &__anchor {
+    text-align: center;
+  }
+
+  &__img {
+    height: 1rem;
+    width: 1rem;
+
+    &-bookmark,
+    &-pdf {
+      height: 33.75px;
+      width: 28.42px;
+    }
+  }
+
+  &__hr {
+    background: $lightgray;
+    width: 45px;
+    height: 2px;
+    left: 0px;
+    position: relative;
+
+    @include mq('sm') {
+      display: none;
+    }
+  }
+
+  &__button {
+    position: relative;
+    padding: 0;
+    display: block;
+    border: 0;
+    margin-bottom: 8px;
+
+    @include mq('sm') {
+      margin-right: 8px;
+    }
+    @include mq('xs') {
+      margin-bottom: 0px;
+    }
+    a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+      &:focus {
+        outline-offset: -3px;
+        border-radius: 6px;
+      }
+    }
+  }
+
+  &__vr {
+    border: 0;
+    @include mq('sm') {
+      border-left: 2px solid $lightgray;
+      margin-left: 12px;
+    }
+  }
+
+  &__circle--black,
+  &__circle--white {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &__circle {
+    &--black {
+      background-color: $black;
+    }
+    &--white {
+      background-color: $white;
+    }
+  }
+}
+@include mq('sm') {
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    background-color: $white;
+    width: 100%;
+    top: inherit;
+    border-top: 3px solid $lightgray;
+    display: flex;
+    flex-direction: row;
+    .social-share__button-wrapper {
+      margin: 0;
+      margin-left: 40px;
+    }
+  }
+}
+
+.right {
+  border-width: 3px 0 3px 3px;
+  border-radius: 6px 0 0 6px;
+  left: inherit;
+  right: 0;
+
+  @include mq('sm') {
+    border-radius: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,70 @@
+import Strip from './index.vue'
+
+const stripHeading = 'A full notice or a safety alert title'
+const stripContentMini =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore'
+const stripContentFull =
+  '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p><p><a class="cta-button" href="#">Class cta-button</a><a class="cta-button dark" href="#">Class cta-button dark</a></p>'
+
+  export default {
+    title: 'Global/Strip',
+    component: Strip,
+    argTypes: {
+      stripHeading: {
+        control: 'text'
+      },
+      stripContent: {
+        control: 'text'
+      },
+      rtl: {
+        control: 'boolean'
+      },
+      type: {
+        control: 'text'
+      },
+      mini: {
+        control: 'boolean'
+      }
+    }
+  }
+  
+  export const MiniAlertStrip = {
+    args: {
+      stripContent: stripContentMini,
+      stripHeading: '',
+      type: 'alert',
+      mini: true,
+      rtl: false
+    }
+  }
+  
+  export const MiniNoticeStrip = {
+    args: {
+      stripContent: stripContentMini,
+      stripHeading: '',
+      type: 'notice',
+      mini: true,
+      rtl: false
+    }
+  }
+  export const AlertFull = {
+    args: {
+      stripContent: stripContentFull,
+      stripHeading: stripHeading,
+      type: 'alert',
+      mini: false,
+      rtl: false
+    }
+  }
+  
+  export const InformationFull = {
+    args: {
+      stripContent: stripContentFull,
+      stripHeading: stripHeading,
+      type: 'notice',
+      mini: false,
+      rtl: false
+    }
+  }
+  
+