@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,480 @@
+@import '../../../includes/scss/all';
+
+//
+// Responsive Custom Height Mixin and set for all elements in one go ;)
+//
+
+// HeroHeader - Default - WSV logo Chevy
+// HeroHeader - Collection - Tringle with or without image
+// HeroHeader - Home - Homepage HeroHeader
+
+//
+// Height Mixin - Used for Default based on ref: 540 @ 1200px
+//
+@mixin defaultVariationHeight {
+  //@include fp('height', 216, 650);
+  height: 540px;
+  // @include mq('lg') {
+  //   height: 540px;
+  // }
+  @include mq('mm') {
+    height: auto;
+  }
+  @include mq('sm') {
+    height: auto;
+  }
+}
+
+//
+// Height Mixin - Collection and Image type based on ref: 640 @ 1200px
+//
+@mixin collectionVariationHeight {
+  //@include fp('height', 216, 900);
+  height: 640px;
+
+  @media only screen and (max-width: 1060px) and (min-width: 981px) {
+    height: 580px;
+  }
+
+  @include mq('mm') {
+    height: auto;
+  }
+}
+
+//
+// Height Mixin - Hero Variation 1080 @ 1200
+//
+@mixin heroVariationHeight {
+  height: 100vh;
+  @include mq('mm') {
+    height: calc(100vh - 70px);
+  }
+}
+
+// Reset Content Wrapper Position
+@mixin resetContentWrapperPosition {
+  @include mq('mm') {
+    position: relative;
+    padding-top: 45px;
+    padding-bottom: 45px;
+    top: 0;
+  }
+}
+
+//
+// Global Config
+//
+.wcl-hero-header {
+  position: relative;
+  top: -90px;
+  margin-bottom: -90px;
+  border-bottom: 2px solid $lightgray;
+
+  @include mq('mm') {
+    position: relative;
+    top: 0px;
+    margin-bottom: 0;
+  }
+
+  &__wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  &__side {
+    @include mq('xs') {
+      padding: 0;
+    }
+  }
+
+  .rtl {
+    @include makeRTL();
+  }
+
+  .rtl-flip {
+    @include makeRTLFlip();
+    .wcl-hero-header__mask {
+      right: 1px;
+    }
+  }
+  // fixes
+  .wcl-hero-header__right.type-collection.rtl-flip {
+    margin-left: 0;
+  }
+
+  &__title {
+    margin-bottom: 12px;
+  }
+
+  &__showmore {
+    position: absolute;
+    bottom: 48px;
+    @include mq('md') {
+      bottom: 96px;
+    }
+    &--link {
+      padding-left: 0px;
+      padding-right: 0px;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+      @include mq('sm') {
+        padding-left: 24px;
+        padding-right: 24px;
+      }
+
+      color: $white !important;
+    }
+    &--text {
+      font-size: 16px;
+      padding-left: 12px;
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  //
+  // Content
+  //
+  &__content-wrapper {
+    width: 100%;
+    position: absolute;
+    margin-top: 90px;
+    @include mq('mm') {
+      margin-top: 0;
+    }
+
+    &__content {
+      @include mq('md') {
+        max-width: 100%;
+        margin: 0;
+        padding: 0 30px;
+      }
+      &-col {
+        max-width: 69%;
+        z-index: 2;
+        @include mq('mm') {
+          max-width: 100%;
+          padding-right: 45px;
+        }
+        @include mq('xs') {
+          padding-right: 0px;
+          padding-left: 0px;
+        }
+
+        &--split {
+          padding-right: 0;
+        }
+
+        .header-rich-text-wrap {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+  //
+  // Masking
+  //
+  &__mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    @include mq('mm') {
+      position: relative;
+    }
+    img {
+      width: 100%;
+      @include mq('mm') {
+        position: absolute;
+      }
+    }
+  }
+
+  &__right {
+    &.type-collection {
+      @media (min-width: 981px) {
+        max-width: 59%;
+        margin-left: 41%;
+      }
+      @media (min-width: 1280px) {
+        max-width: 50%;
+        margin-left: 50%;
+      }
+      @media (min-width: 1499px) {
+        max-width: 45%;
+        margin-left: 55%;
+      }
+      @media (min-width: 1599px) {
+        max-width: 41%;
+        margin-left: 59%;
+      }
+    }
+    padding: 0;
+    @include mq('mm') {
+      // If you want to fade it out
+
+      // position: absolute;
+      // right: 0;
+      // top: 0px;
+      // bottom: 0;
+      // width: 70%;
+      // opacity: 0.15;
+      display: none;
+    }
+  }
+
+  .social-share {
+    padding: 6px 15px;
+
+    @include mq('sm') {
+      padding: 0;
+      background: transparent;
+      height: 56px;
+      display: block;
+      bottom: 0;
+      border-radius: 6px;
+      border-width: 3px;
+      position: relative;
+      margin: {
+        top: 16px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+
+      :deep(.social-share__hr) {
+        display: none;
+      }
+
+      :deep(.social-share__header) {
+        float: left;
+        margin-right: 16px;
+        margin-top: 8px;
+
+        font-weight: 500;
+      }
+
+      :deep(.social-share__button-wrapper) {
+        position: relative;
+        float: left;
+        margin-top: 8px;
+      }
+
+      :deep(.social-share__button-wrapper button) {
+        display: inline;
+      }
+    }
+
+    @include mq('xs') {
+      margin: {
+        left: -15px;
+      }
+    }
+  }
+}
+
+//
+// Config Overrides - Default
+//
+.wcl-hero-header.type-default {
+  @include defaultVariationHeight();
+
+  .wcl-hero-header {
+    &__content-wrapper {
+      @include resetContentWrapperPosition();
+    }
+    &__right {
+      background-position: center right;
+      background-size: cover;
+      text-align: right;
+      overflow: hidden;
+      @include defaultVariationHeight();
+      @include mq('mm') {
+        opacity: 1;
+      }
+      @include mq('xs') {
+        width: 100%;
+      }
+    }
+    &__mask {
+      img {
+        @include defaultVariationHeight();
+      }
+      svg {
+        fill: $lightgray;
+        height: 150%;
+        top: -25%;
+        position: relative;
+      }
+    }
+  }
+
+  &.-with-bg {
+    background: $lightgray;
+    .wcl-hero-header__right {
+      .wcl-hero-header__mask {
+        svg {
+          fill: $white;
+        }
+      }
+    }
+
+    .social-share {
+      @include mq('sm') {
+        // background: $white;
+      }
+    }
+  }
+}
+
+//
+// Config Overrides - Collection
+//
+.wcl-hero-header.type-collection {
+  @include collectionVariationHeight();
+
+  .wcl-hero-header {
+    &__content-wrapper {
+      @include resetContentWrapperPosition();
+    }
+    &__right {
+      background-color: $lightgray;
+      background-size: cover;
+      background-position: top center;
+      @include collectionVariationHeight();
+
+      @include mq('xs') {
+        background-image: none !important;
+        width: 100%;
+      }
+    }
+    &__mask {
+      img {
+        @include collectionVariationHeight();
+      }
+    }
+  }
+}
+
+//
+// Config Overrides - Image
+//
+.wcl-hero-header.type-image {
+  @include collectionVariationHeight();
+
+  .wcl-hero-header {
+    &__content-wrapper {
+      @include resetContentWrapperPosition();
+      &__content {
+        &-col {
+          max-width: 59%;
+          @include mq('mm') {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+    &__right {
+      @include collectionVariationHeight();
+      background-size: cover;
+      background-position: top center;
+    }
+  }
+}
+
+//
+// Config Overrides - Hero
+//
+.wcl-hero-header.type-hero {
+  @include heroVariationHeight();
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  border-bottom: none;
+  display: table;
+  width: 100%;
+
+  .wcl-hero-header {
+    &__wrap {
+      display: table-cell;
+      vertical-align: middle;
+      width: 100%;
+    }
+    &__content-wrapper {
+      position: relative;
+      margin-top: 0px;
+
+      &__content {
+        padding: 0 15px;
+        position: relative;
+        &-col {
+          @include mq('sm') {
+            padding-left: 30px;
+            padding-right: 30px;
+          }
+
+          @include mq('xs') {
+            padding-left: 0;
+            padding-right: 0;
+          }
+
+          .wcl-hero-header__title {
+            background: $white;
+            padding: 12px;
+            display: inline-block;
+          }
+          .header-rich-text-wrap {
+            margin-bottom: 16px;
+
+            :deep(p:last-of-type) {
+              margin-bottom: 0;
+            }
+
+            :deep(p.intro) {
+              background-color: $black;
+              color: $white;
+              padding: 12px;
+              line-height: 28px;
+
+              &.invert {
+                background: $white;
+                color: $black;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.social-share) {
+    top: 22%;
+    @include mq('sm') {
+      background: $white;
+      position: absolute;
+      top: auto;
+      left: 60px;
+      bottom: 15px;
+      width: 215px;
+      margin-left: 0;
+    }
+
+    @include mq('xs') {
+      left: 15px;
+    }
+
+    .social-share__wrap {
+      @include mq('sm') {
+        position: relative;
+        float: left;
+        padding-left: 8px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import ProgressBar from './index.vue'
+
+const mockData = [
+  {
+    value: '1',
+    checked: false,
+    completed: true
+  },
+  {
+    value: '2',
+    checked: true,
+    completed: false
+  },
+  {
+    value: '3',
+    checked: false,
+    completed: false
+  }
+]
+
+export default {
+  title: 'Global/ProgressBar',
+  component: ProgressBar,
+  argTypes: {
+    steeperStyle: {
+      control: 'boolean'
+    },
+    items: {
+      control: 'array'
+    },
+    rtl: {
+      control: 'boolean'
+    }
+  }
+}
+
+export const Steeper = {
+  args: {
+    steeperStyle: true,
+    items: mockData,
+    rtl: false
+  }
+}
+
+export const Default = {
+  args: {
+    steeperStyle: false,
+    items: mockData,
+    rtl: false
+  }
+}

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

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="wcl-progress-bar"
+    :class="{
+      [`wcl-progress-bar--steeper-style`]: steeperStyle,
+      ['wcl-progress-bar--rtl']: rtl
+    }"
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="wcl-progress-bar--list"
+      :class="{
+        [`wcl-progress-bar--steeper-style--list`]: steeperStyle
+      }"
+    >
+      <label
+        :for="item.value"
+        :title="item.value"
+        :class="{ [`checked`]: item.checked, [`completed`]: item.completed }"
+      >
+        {{ getItem(item.value, item.completed) }}<span></span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    steeperStyle: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getItem() {
+      return (value, checked) => {
+        return checked ? '' : value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles.scss';
+</style>

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

@@ -0,0 +1,116 @@
+@import '../../../includes/scss/vars/src/colors.scss';
+
+.wcl-progress-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+
+  &--list {
+    flex: 1;
+    justify-content: center;
+    display: flex;
+
+    &:first-child {
+      justify-content: flex-start;
+    }
+    &:last-child {
+      justify-content: flex-end;
+      text-align: right;
+    }
+    label {
+      display: inline-block;
+      width: 48px;
+      height: 48px;
+      line-height: 40px;
+      text-align: center;
+      background-color: #ffd229;
+      border: 3px solid #ffd229;
+      border-radius: 50%;
+      cursor: pointer;
+      font-weight: 700;
+      font-size: 25px;
+      color: #191919;
+
+      @media screen and (min-width: 992px) {
+        font-size: 24px;
+      }
+      @media screen and (min-width: 1200px) {
+        font-size: 26px;
+      }
+
+      &.checked {
+        background-color: white;
+        border: 3px solid #0074bd;
+        font-size: 25px;
+
+        @media screen and (min-width: 1200px) {
+          font-size: 26px;
+        }
+      }
+      &.completed {
+        background-color: white;
+        border: 3px solid green;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+          background-image: url('../../../assets/icons/tick.svg');
+          background-position: center;
+          background-repeat: no-repeat;
+          filter: invert(43%) sepia(37%) saturate(467%) hue-rotate(60deg) brightness(89%) contrast(97%);
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    
+  }
+
+  &--steeper-style {
+    &--list {
+      position: relative;
+
+      &:first-child::after {
+        border-top: 3px dotted grey;
+        border-radius: 1px;
+        content: "";
+        top: 42%;
+        left: 35px;
+        position: absolute;
+        transform: translateY(-50%);
+        height: auto;
+        width: 135%;
+        z-index: -1;
+      }
+      &:last-child::before {
+          border-top: 3px dotted grey;
+          border-radius: 1px;
+          content: '';
+          top: 42%;
+          right: 35px;
+          position: absolute;
+          transform: translateY(-50%);
+          height: auto;
+          width: 134%;
+          z-index: -1;
+      }
+    }
+    
+  }
+
+  &--rtl {
+    direction: rtl;
+    text-align: right;
+
+    &.wcl-progress-bar--steeper-style {
+      .wcl-progress-bar--steeper-style--list:not(:last-child)::after {
+        left: 0px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import SocialShare from './index.vue'
+
+export default {
+    title: 'Global/SocialShare',
+    component: SocialShare,
+    argTypes: {
+      rtl: {
+        control: 'boolean',
+        table: { disable: true }
+      }
+    }
+  };
+  
+  export const Default = {}
+
+  Default.args = {
+    rtl: false
+  }