@worksafevictoria/wcl7.5 1.0.0

package/src/components/Common/FilterButton/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="filterButton">
+    <cta-button
+      v-if="!isReset"
+      :type="selected ? 'gray' : 'white'"
+      :text-only="!hasCaret"
+      class="filterButton__button"
+      :slim="true"
+      :glyph="hasCaret ? CaretDown : undefined"
+      :glyph-height="18"
+      :glyph-width="18"
+      :aria-pressed="selected ? 'true' : 'false'"
+      @clicked="$emit('clicked')"
+      ><slot></slot>
+    </cta-button>
+    <cta-button
+      v-else
+      :glyph="refreshIcon"
+      :glyph-height="20"
+      :glyph-width="25"
+      class="filterButton__button filterButton__button--reset"
+      :slim="true"
+      @clicked="$emit('clicked')"
+      ><span class="hidden-on-xs">Reset</span></cta-button
+    >
+  </div>
+</template>
+
+<script>
+import CtaButton from '../../SubComponents/CtaButton/index.vue'
+import CaretDown from '../../../assets/icons/caret-down.svg?url'
+import refreshIcon from '../../../assets/icons/refresh.svg?url'
+export default {
+  components: {
+    CtaButton
+  },
+  props: {
+    hasCaret: {
+      type: Boolean
+    },
+    selected: {
+      type: Boolean
+    },
+    isReset: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      refreshIcon,
+      CaretDown
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.filterButton {
+  &__button {
+    margin-right: 0px !important;
+    :deep(.wcl-cta__link-text) {
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+    :deep(img.icon) {
+      width: 18px;
+      height: 10.8px;
+    }
+    &--reset {
+      :deep(.wcl-cta__spacer) {
+        @include mq('xs') {
+          display: none;
+        }
+      }
+
+      :deep(.hidden-on-xs) {
+        @include mq('xs') {
+          display: none;
+        }
+      }
+      &:hover,
+      &:focus {
+        :deep(img) {
+          transform: rotate(-360deg);
+          transition: transform 1s;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Containers/Column/index.stories.js

@@ -0,0 +1,35 @@
+import Container from './../Container/index.vue'
+import Row from './../Row/index.vue'
+import Column from './index.vue'
+
+export default {
+  title: 'Containers/Column',
+  component: Column,
+  render: () => ({
+    components: {Column, Container, Row},
+     template: `
+     <container class="bv-example-row">
+     <!-- Stack the columns on mobile by making one full-width and the other half-width -->
+     <row>
+       <column class="col-12 col-md-8">cols="12" md="8"</column>
+       <column class="col-6 col-md-4">cols="6" md="4"</column>
+     </row>
+
+     <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+     <row>
+       <column class="col-6 col-md-4">cols="6" md="4"</column>
+       <column class="col-6 col-md-4">cols="6" md="4"</column>
+       <column class="col-6 col-md-4">cols="6" md="4"</column>
+     </row>
+
+     <!-- Columns are always 50% wide, on mobile and desktop -->
+     <row>
+       <column class="col-6">cols="6"</column>
+       <column class="col-6">cols="6"</column>
+     </row>
+   </container>
+  `,
+    }),
+};
+
+export const Default = {}

package/src/components/Containers/Column/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <b-col v-bind="$attrs">
+    <slot></slot>
+  </b-col>
+</template>
+
+<script>
+import { BCol } from 'bootstrap-vue-next';
+
+export default {
+name: 'Column',
+components: { BCol }
+}
+</script>

package/src/components/Containers/Container/index.stories.js

@@ -0,0 +1,13 @@
+import Container from './index.vue'
+
+export default {
+  title: 'Containers/Container',
+  component: Container
+}
+
+export const Default = {
+    args: {
+        default: 'This is some content'
+      }
+}
+

package/src/components/Containers/Container/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <b-container v-bind="$attrs">
+    <slot></slot>
+  </b-container>
+</template>
+
+
+<script>
+import { BContainer } from 'bootstrap-vue-next';
+
+export default {
+name: 'Container',
+components: { BContainer }
+}
+</script>

package/src/components/Containers/HomepageHeader/index.stories.js

@@ -0,0 +1,78 @@
+import HomepageHeader from './index.vue'
+
+const header = {
+  title: 'This is sentence 1. This is sentence 2.',
+  description: 'description text'
+}
+
+const fetchMenu = () =>
+  Promise.resolve([
+    {
+      title: 'Report an incident',
+      relative: '/report-incident'
+    },
+    {
+      title: 'Report a case of COVID-19',
+      relative: '/report-confirmed-positive-case-covid-19'
+    },
+    {
+      title: 'Make a claim',
+      relative: '/before-claim'
+    },
+    {
+      title: 'Apply for a licence',
+      relative: '/apply-for-licence'
+    },
+    {
+      title: 'Pay or renew your insurance',
+      relative: '/pay-or-renew-your-workcover-insurance-premium'
+    }
+  ])
+
+const contentParser = () => {
+  return Promise.resolve({
+    results: [
+      {
+        title: 'Content title 1',
+        description: 'Content description 2'
+      }
+    ],
+    offset: 0,
+    numFound: 1000
+  })
+}
+
+export default {
+  title: 'Containers/HomepageHeader',
+  component: HomepageHeader,
+  argTypes: {
+    fetchMenu: {
+      control: 'function',
+      table: { disable: true }
+    },
+    contentParser: {
+      control: 'function',
+      table: { disable: true }
+    }
+  },
+  args: {
+    heroHeader: header,
+    fetchMenu: fetchMenu,
+    contentParser: contentParser
+  }
+}
+
+const DefaultHH = (args) => ({
+  components: { HomepageHeader },
+  setup() {
+    return { args };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$refs.hh.renderMenu()
+    })
+  },
+  template: '<homepage-header v-bind="args" ref="hh" />'
+})
+
+export const Default = DefaultHH.bind({})

package/src/components/Containers/HomepageHeader/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <hero-header
+    :breadcrumb-items="heroHeader.breadcrumbs"
+    :show-breadcrumb="false"
+    :image="null"
+    :title="heroHeader.title"
+    :description="null"
+    :bg-color="null"
+    :type="'collection'"
+    :rtl="false"
+    :cta="null"
+    :show-social="false"
+    :show-mask="false"
+    class="homepage-header"
+  >
+    <template v-slot:top>
+      <slot />
+    </template>
+
+    <template v-slot:description>
+      <search
+        :page-limit="3"
+        :page-number="1"
+        :is-typeahead="true"
+        :content-parser="contentParser"
+        class="homepage-header__search"
+      />
+    </template>
+
+    <template v-slot:side>
+      <div>
+        <cta-button
+          v-for="(link, i) in links"
+          :key="i"
+          class="iebtn"
+          :url="link.path"
+          type="dark"
+          :stretch="true"
+          >{{ link.text }}</cta-button
+        >
+        <cta-button
+          class="iebtn"
+          url="/choose-your-language"
+          type="dark"
+          :stretch="true"
+          :glyph="earthIcon"
+          :is-centred="false"
+          >Choose your language</cta-button
+        >
+      </div>
+    </template>
+  </hero-header>
+</template>
+<script>
+import Search from './../../SubComponents/Search/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import HeroHeader from './../../Global/HeroHeader/index.vue'
+import earthIcon from './../../../assets/icons/earth.svg?url'
+
+export default {
+  name: 'HomepageHeader',
+  components: {
+    Search,
+    CtaButton,
+    HeroHeader
+  },
+  props: {
+    contentParser: {
+      type: Function,
+      required: true
+    },
+    heroHeader: {
+      type: Object,
+      required: true
+    },
+    fetchMenu: {
+      type: Function,
+      required: true
+    }
+  },
+  async fetch() {
+    await this.renderMenu()
+  },
+  data: () => ({
+    links: [],
+    earthIcon
+  }),
+  methods: {
+    async renderMenu() {
+      const menu = await this.fetchMenu()
+      this.links = (Array.isArray(menu) ? menu : []).map((item) => {
+        return {
+          text: item.title,
+          path: item.relative || item.absolute
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.homepage-header {
+  border-bottom: none !important;
+
+  :deep(.wysiwyg) {
+    h1 {
+      @media screen and (max-width: 390px) {
+        font-size: 32px;
+        line-height: 32px;
+      }
+      @media screen and (max-width: 767px) {
+        font-size: 36px;
+        line-height: 36px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  :deep(.wcl-hero-header__content-wrapper) {
+    @include fp('top', 75, 250);
+    margin-top: 0;
+  }
+
+  :deep(.wcl-hero-header__wrap) {
+    display: block;
+    align-items: normal;
+  }
+
+  :deep(.wcl-cta) {
+    @include mq('mm') {
+      &:first-of-type {
+        margin-top: 32px;
+      }
+    }
+    margin-left: 0 !important;
+    &:last-of-type {
+      img {
+        position: absolute;
+        right: 16px;
+        top: 19px;
+      }
+    }
+  }
+
+  &__search {
+    padding-right: 15px;
+    @include mq('xs') {
+      padding-right: 0;
+    }
+    :deep(.gsc-results-wrapper-visible) {
+      display: none !important;
+    }
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    ::-ms-backdrop,
+    .iebtn {
+      bottom: 280px;
+      left: 650px;
+    } /* IE11 */
+
+    @media screen\9, screen and (max-width: 1150px) {
+      .iebtn {
+        bottom: 330px;
+        left: 480px;
+      }
+    }
+
+    @media screen\9, screen and (max-width: 950px) {
+      .iebtn {
+        bottom: 350px;
+        left: 450px;
+      }
+    }
+
+    @media screen\9, screen and (max-width: 767px) {
+      .iebtn {
+        left: 2px;
+        top: 10px;
+      }
+    }
+  }
+}
+</style>

package/src/components/Containers/Row/index.stories.js

@@ -0,0 +1,12 @@
+import Row from './index.vue'
+
+export default {
+  title: 'Containers/Row',
+  component: Row
+}
+
+export const Default = {
+  args: {
+    default: 'This is a row'
+  }
+}

package/src/components/Containers/Row/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <b-row v-bind="$attrs">
+    <slot></slot>
+  </b-row>
+</template>
+
+<script>
+import { BRow } from 'bootstrap-vue-next';
+
+export default {
+name: 'Row',
+components: { BRow }
+}
+</script>

package/src/components/Containers/SectionGroup/index.stories.js

@@ -0,0 +1,148 @@
+import SectionGroup from './index.vue'
+import Row from './../Row/index.vue'
+import Column from './../Column/index.vue'
+
+export default {
+  title: 'Containers/SectionGroup',
+  component: SectionGroup,
+  argTypes: {
+    backgroundImage: {
+      control: 'boolean'
+    },
+    backgroundVariant: {
+      control: 'select',
+      options: [
+        'none',
+        'light',
+        'dark',
+        'grey',
+        'yellow',
+        'white',
+        'lightblue'
+      ]
+    },
+    applyBackgroundOn: {
+      control: 'select',
+      options: ['content', 'block', 'container', 'section']
+    },
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+    footer: {
+      control: 'boolean'
+    },
+    preContent: {
+      control: 'boolean'
+    },
+    headerRight: {
+      control: 'boolean'
+    },
+    size: {
+      control: 'select',
+      options: ['half-content', 'content', 'page', 'full']
+    },
+    headingRightSlot: {
+      control: 'text'
+    },
+    preContentSlot: {
+      control: 'text'
+    },
+    contentSlot: {
+      control: 'text'
+    },
+    footerSlot: {
+      control: 'text'
+    },
+    top: {
+      control: 'text',
+      table: { disable: true }
+    },
+    headerTop: {
+      control: 'text',
+      table: { disable: true }
+    },
+    headerBottom: {
+      control: 'text',
+      table: { disable: true }
+    },
+    content: {
+      control: 'text',
+      table: { disable: true }
+    },
+    default: {
+      control: 'text',
+      table: { disable: true }
+    }
+  }
+};
+
+const Template = (args) => ({
+  components: { SectionGroup, Row, Column },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+        {{args.sectionTop}}
+  
+        <section-group
+        v-bind="args"
+        :background-image="args.backgroundImage ? 'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/fullwidth/public/2021-11/Topic-Coronavirus-COVID-19.jpg?itok=LsPdwgff' : null">
+  
+            <template v-slot:headerRight>
+              <headerRight v-if="args.headerRight"> <strong>{{args.headingRightSlot}}</strong> </headerRight>
+            </template>
+  
+            <template v-slot:preContent>
+              <preContent v-if="args.preContent"><strong class="slot">{{args.preContentSlot}}</strong></preContent>
+            </template>
+  
+            <template v-slot:content>
+            <row>
+              <column>
+                <div class="slot">
+                  <p>{{args.contentSlot}}</p>
+                </div>
+              </column>
+            </row>
+            </template>
+  
+            <template v-slot:footer >
+            <footer v-if="args.footer">
+              <column>
+                <strong class="slot">{{args.footerSlot}}</strong>
+              </column>
+              </footer>
+            </template>
+        </section-group>
+  
+        {{args.sectionBottom}}
+    </div>
+    `
+});
+ 
+export const Default =  Template.bind({});
+
+Default.args = {
+  noPaddingTop: false,
+  noPaddingBottom: false,
+  bordered: false,
+  rtl: false,
+  title: 'Title text',
+  subHeading: 'Subheading text',
+  sectionTop: 'Text outside Section Group',
+  sectionBottom: 'Text outside Section Group',
+  headingRightSlot: 'This the heading right slot',
+  preContentSlot: 'This the pre-content slot',
+  contentSlot: `This the content slot. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+  footerSlot: 'This the footer slot',
+  backgroundImage: false,
+  backgroundVariant: 'light',
+  applyBackgroundOn: 'container',
+  titleTag: 'h2',
+  footer: true,
+  preContent: true,
+  headerRight: true,
+  size: 'page'
+}