@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,93 @@
+import HeroHeader from './index.vue'
+
+const cta_content = {
+  key: 'value'
+}
+
+const breadcrumb_content = [
+  {
+    text: 'Home',
+    to: '/'
+  },
+  {
+    text: 'Go to google',
+    href: 'https://google.com'
+  },
+  {
+    text: 'Another Story',
+    active: true
+  }
+]
+
+const defaultType = 'default'
+const collectionType = 'collection'
+const imageType = 'image'
+const heroType = 'hero'
+const defaultTitle = 'HeroHeader default example'
+const collectionTitle = 'HeroHeader collection example'
+const imageTitle = 'HeroHeader image example'
+const heroTitle = 'HeroHeader hero example'
+
+export default {
+  title: 'Global/HeroHeader',
+  component: HeroHeader,
+  argTypes: {
+    type: {
+      control: 'string',
+      table: { disable: true }
+    }
+  },
+  args: {
+    type: 'default',
+    title: 'HeroHeader default example',
+    description: '<p class="intro">The page subtitle goes in here... The page subtitle goes in here... The page subtitle goes in here...</p><p><a href="#" class="cta-button">class cta-button</a></p>',
+    image:  {
+        url:
+          'https://content.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+        alt: 'Some alt text'
+      },
+    cta: cta_content,
+    bgColor: false,
+    breadcrumbItems: breadcrumb_content,
+    rtl: false,
+    workwell: false,
+    showBreadcrumb: false,
+    showMask: true,
+    showSocial: true,
+  }
+}
+
+const Template = (args) => ({
+  components: { HeroHeader },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="margin-top:90px;">
+    <hero-header v-bind="args" />
+    </div>`
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  type: defaultType,
+  title: defaultTitle
+}
+
+export const Collection = Template.bind({})
+Collection.args = {
+  type: collectionType,
+  title: collectionTitle
+}
+
+export const Image = Template.bind({})
+Image.args = {
+  type: imageType,
+  title: imageTitle
+}
+
+export const Hero = Template.bind({})
+Hero.args = {
+  type: heroType,
+  title: heroTitle
+}

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

@@ -0,0 +1,343 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <container
+    v-if="title"
+    fluid
+    :class="generatedClass"
+    :style="
+      type === 'hero'
+        ? image && image.url
+          ? `background-image:url(${image.url})`
+          : false
+        : false
+    "
+  >
+    <row
+      v-if="type === 'hero'"
+      class="wcl-hero-header__wrap wcl-hero-header__showmore"
+    >
+      <container
+        class="wcl-hero-header__content-wrapper__content"
+        :class="{ rtl }"
+      >
+        <row>
+          <column class="wcl-hero-header__content-wrapper__content-col">
+            <div>
+              <button
+                type="button"
+                class="btn btn-link wcl-hero-header__showmore--link"
+                @click="showMore"
+              >
+                <icon width="16px" height="10.61px" :glyph="CaretDown" />
+                <span class="wcl-hero-header__showmore--text">Show more</span>
+              </button>
+            </div>
+          </column>
+        </row>
+      </container>
+    </row>
+    <row class="wcl-hero-header__wrap">
+      <div class="wcl-hero-header__content-wrapper">
+        <container
+          class="wcl-hero-header__content-wrapper__content"
+          :class="{ rtl }"
+        >
+          <row>
+            <column
+              :xs="generateGridValue(type)"
+              class="wcl-hero-header__content-wrapper__content-col"
+              :md="7"
+              :class="{
+                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side
+              }"
+            >
+              <breadcrumb
+                v-if="showBreadcrumb && type !== 'hero'"
+                :breadcrumb-items="breadcrumbItems"
+                :rtl="rtl"
+              />
+              <rich-text
+                v-if="strippedTitle"
+                ref="title"
+                tag="h1"
+                :content="strippedTitle"
+                class="wcl-hero-header__title"
+              />
+              <div
+                v-if="subTitle || $slots.description"
+                class="header-rich-text-wrap"
+              >
+                <rich-text
+                  v-if="subTitle"
+                  :content="subTitle"
+                  class="header-rich-text-wrap--description"
+                />
+                <slot name="description"></slot>
+              </div>
+            </column>
+            <column
+              v-if="$slots.side"
+              md="4"
+              :offset-md="1"
+              class="wcl-hero-header__side"
+            >
+              <slot name="side"></slot>
+            </column>
+          </row>
+          <row v-if="cta && cta.title">
+            <column :xs="12">
+              <br />
+              <cta-button
+                class="wysiwyg__cta"
+                :url="cta.uri"
+                :alt="cta.alt"
+                :glyph="cta.glyph"
+                :is-centred="cta.isCentred"
+                @clicked="fireGTM()"
+                >{{ cta.title }}</cta-button
+              >
+            </column>
+          </row>
+          <template v-if="showSocial && type !== 'hero'">
+            <social-share :rtl="rtl" />
+          </template>
+        </container>
+      </div>
+      <!-- Type Default -->
+      <column
+        v-if="type === 'default' && showMask"
+        :md="'5'"
+        :xs="'5'"
+        class="wcl-hero-header__right"
+        :class="{ 'rtl-flip': rtl }"
+        :offset-md="rtl ? 0 : 7"
+        :offset-xs="rtl ? 0 : 7"
+      >
+        <div class="wcl-hero-header__mask">
+          <hero-header-chevron />
+        </div>
+      </column>
+      <!-- Type Collection -->
+      <column
+        v-if="type === 'collection' && showMask"
+        :sm="'7'"
+        :style="
+          image && image.url ? `background-image:url(${image.url})` : false
+        "
+        class="wcl-hero-header__right type-collection"
+        :class="{ 'rtl-flip': rtl }"
+        :offset-sm="rtl ? 0 : 5"
+      >
+        <div class="wcl-hero-header__mask">
+          <img
+            src="../../../assets/images/hero-header-mask.png"
+            role="presentation"
+          />
+        </div>
+      </column>
+      <!-- Type Image -->
+      <column
+        v-if="type === 'image'"
+        :md="'5'"
+        :xs="'5'"
+        class="wcl-hero-header__right"
+        :class="{ 'rtl-flip': rtl }"
+        :offset-md="rtl ? 0 : 7"
+        :offset-xs="rtl ? 0 : 7"
+        :style="
+          image && image.url ? `background-image:url(${image.url})` : false
+        "
+      >
+        &nbsp;
+      </column>
+      <!-- No Col needed for type Hero -->
+    </row>
+    <social-share v-if="showSocial && type === 'hero'" :rtl="rtl" />
+  </container>
+</template>
+<script>
+import SocialShare from './../SocialShare/index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import Breadcrumb from './../../SubComponents/Breadcrumb/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import Icon from './../../SubComponents/Icon/index.vue'
+import HeroHeaderChevron from './../../../assets/images/hero-header-chevron.svg?component'
+import CaretDown from './../../../assets/icons/chev-down-white.svg?url'
+import RichText from './../../Paragraphs/RichText/index.vue'
+
+export default {
+  name: 'HeroHeader',
+  components: {
+    Container,
+    Row,
+    Column,
+    Breadcrumb,
+    SocialShare,
+    CtaButton,
+    HeroHeaderChevron,
+    RichText,
+    Icon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    image: {
+      type: Object,
+      default: () => {}
+    },
+    cta: {
+      type: Object,
+      default: () => {}
+    },
+    bgColor: {
+      type: Boolean,
+      default: false
+    },
+    breadcrumbItems: {
+      type: Array,
+      default: () => []
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    },
+    showBreadcrumb: {
+      type: Boolean,
+      default: true
+    },
+    showMask: {
+      type: Boolean,
+      default: true
+    },
+    showSocial: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      socialShareToggle: false,
+      HeroHeaderChevron,
+      CaretDown
+    }
+  },
+  computed: {
+    generatedClass() {
+      let c = `wcl-hero-header type-${this.type}`
+      if (this.bgColor) {
+        c = c + ' -with-bg'
+      }
+      return c
+    },
+    subTitle() {
+      let content = undefined
+      if (this.description) {
+        if (typeof this.description === 'string') {
+          content = this.description
+        } else if (typeof this.description === 'object') {
+          content = this.description.processed
+        }
+      }
+      if (content && !content.startsWith('<') && !this.tag?.startsWith('h')) {
+        content = `<p class="intro">${content}</p>`
+      }
+      return content
+    },
+    strippedTitle() {
+      if (this.type === 'hero' && this.title.length > 122) {
+        return this.title.slice(0, 122) + '...'
+      }
+      // Will reintroduce if business requirement
+      // if (this.title?.includes('.')) {
+      //   const sentences = this.title.split('.')
+      //   if (sentences.length > 1) {
+      //     return sentences.map((sentence) => sentence.trim()).join('.<br/>')
+      //   }
+      // }
+      return this.title
+    }
+    // Will reintroduce if business requirement
+    //   strippedDescription() {
+    //     let strippedString = this.description.replace(/(<([^>]+)>)/gi, '')
+    //     if (strippedString.length > 117) {
+    //       return strippedString.slice(0, 117) + '...'
+    //     }
+    //     return strippedString
+    //   }
+  },
+  mounted() {
+    if (this.$nuxt?.$on) {
+      this.$nuxt.$on('scrollToTop', () => {
+        setTimeout(() => {
+          const title = this.$refs.title
+          if (title) {
+            title.$el.setAttribute('tabindex', 0)
+            title.$el.focus()
+          }
+        }, 500)
+      })
+    }
+  },
+  beforeDestroy() {
+    if (this.$nuxt?.$off) {
+      this.$nuxt.$off('scrollToTop')
+    }
+  },
+  methods: {
+    generateGridValue(type) {
+      switch (type) {
+        //the prop type default
+        case 'default':
+          return '6'
+        case 'image':
+          return '6'
+        default:
+          return '7'
+      }
+    },
+    showMore(ev) {
+      if (ev?.target?.scrollIntoView) {
+        ev.target.scrollIntoView({
+          behavior: 'smooth',
+          alignToTop: true,
+          block: 'start'
+        })
+      }
+    },
+    fireGTM() {
+      let attrs = {
+        label: this.cta.uri,
+        document_title: this.cta.filename
+      }
+      if (this.$gtm) {
+        this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles';
+
+.wysiwyg {
+  :deep(.cta-button:last-child) {
+    margin-bottom: 0px;
+  }
+}
+</style>