@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/MarketingBanner/styles.scss

@@ -0,0 +1,87 @@
+@import '../../../includes/scss/all';
+
+.wcl-marketing-banner {
+  height: 42.833vw; // 21:9 ratio
+  background: transparent;
+  border: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  @include mq('mm') {
+    height: 100vh; // 21:9 ratio
+  }
+
+  :deep(h2) {
+    font-size: 2rem;
+    line-height: 36px;
+
+    @media screen and (max-width: 540px) {
+        font-size: 1.2rem;
+        line-height: 20px;
+      }
+  }
+
+  &:focus {
+    outline-offset: -3px;
+  }
+
+  &__section {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__block {
+    height: 100%;
+    width: auto;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    &.left {
+      padding-left: 32px;
+      padding-right: 16px;
+    }
+    &.right {
+      padding-right: 32px;
+      padding-left: 16px;
+    }
+    &.single {
+      padding-right: 32px;
+      padding-left: 32px;
+    }
+    @include mq('xs') {
+      padding-right: 16px !important;
+      padding-left: 16px !important;
+    }
+
+    &--bg {
+      &-white {
+        background: $white;
+        color: $black;
+      }
+
+      &-yellow {
+        background: $orange;
+        color: $black;
+      }
+
+      &-black {
+        background: $black;
+        color: $white;
+      }
+    }
+  }
+
+  &__wrap {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include mq('mm') {
+      flex-direction: column;
+    }
+  }
+}

package/src/components/Paragraphs/ProofPoints/index.stories.js

@@ -0,0 +1,173 @@
+import ProofPoints from './index.vue'
+import iconSVG from '../../../assets/icons/key.svg?raw'
+
+const itemListDefault = [
+  {
+    heading: 'Proof point 1',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'Proof point 2',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/instructions-1.jpg?itok=eERkeQLL'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'Proof point 3',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'Proof point 4',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  }
+]
+
+const itemListAr = [
+  {
+    heading: 'نقطة إثبات 1',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'نقطة إثبات 2',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'نقطة إثبات 3',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  },
+  {
+    heading: 'نقطة إثبات 4',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    image: {
+      src:
+        'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A'
+    },
+    icon: {
+      src: iconSVG
+    }
+  }
+]
+
+export default {
+  title: 'Paragraphs/ProofPoints',
+  component: ProofPoints,
+  argTypes: {
+    title: {
+      control: 'text',
+      defaultValue: 'Section heading'
+    },
+    headingTag: {
+      control: 'select',
+      options: ['h2', 'h3'],
+      defaultValue: 'h2'
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    columns: {
+      control: 'select',
+      options: [3, 4],
+      defaultValue: 3
+    },
+    itemList: {
+      table: { disable: true }
+    },
+    type: {
+      control: 'select',
+      options: ['default', 'icon', 'image'],
+      defaultValue: 'icon'
+    }
+  }
+}
+
+const DefaultProofPoint = (args, { argTypes }) => ({
+  components: { ProofPoints },
+  props: Object.keys(argTypes),
+  template: `<proof-points v-bind="$props" :item-list="dynamicItemList" />`,
+  data() {
+    return {
+      itemListDefault,
+      itemListAr
+    }
+  },
+  computed: {
+    dynamicItemList() {
+      let array
+      if (this.rtl) {
+        array = this.itemListAr
+      } else {
+        array = this.itemListDefault
+      }
+      return array.map((item) => {
+        const clone = JSON.parse(JSON.stringify(item))
+        if (this.type === 'image') {
+          clone.icon = undefined
+        } else if (this.type === 'icon') {
+          clone.image = undefined
+        } else {
+          clone.icon = undefined
+          clone.image = undefined
+        }
+        return clone
+      })
+    }
+  } //end computed
+})
+
+export const Default = DefaultProofPoint.bind({})

package/src/components/Paragraphs/ProofPoints/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <card-grid
+    :title="title"
+    :title-tag="headingTag"
+    :cards="itemList"
+    :rtl="rtl"
+    :force-md-columns-per-row="columns < 3 ? 3 : columns"
+    :force-lg-columns-per-row="columns < 3 ? 3 : columns"
+    class="proof-points"
+  >
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        :image-src="card.image ? card.image.src : undefined"
+        :image-alt="card.image ? card.image.alt : undefined"
+        :glyph-src="card.icon ? card.icon.src : undefined"
+        :icon-size="card.icon ? 'large' : 'small'"
+        :show-divider="false"
+        :header-size="'medium'"
+        :card-header-title="card.heading"
+        :rtl="rtl"
+        :description="card.description"
+      />
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+
+export default {
+  name: 'ProofPoints',
+  components: { CardGrid, CardGridItem },
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    headingTag: {
+      type: String,
+      default: 'h2'
+    },
+    itemList: {
+      type: Array,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Number,
+      default: 3
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.proof-points {
+  :deep(.card-grid-item__card .card-title) {
+    margin-top: 16px;
+  }
+}
+</style>

package/src/components/Paragraphs/RelatedInformation/index.stories.js

@@ -0,0 +1,32 @@
+import RelatedInformation from './index.vue'
+import { taxonomyTagsList } from '../../../mock/related-info'
+
+export default {
+  title: 'Paragraphs/RelatedInformation',
+  component: RelatedInformation,
+  argTypes: {
+    showTaxonomies: {
+      control: 'boolean',
+      defaultValue: true
+  },
+  showTaxonomyHeading: {
+    control: 'boolean',
+      defaultValue: true
+  },
+  taxonomies: {
+    control: 'array',
+    defaultValue: taxonomyTagsList
+  }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { RelatedInformation },
+  props: Object.keys(argTypes),
+  template: `
+    <related-information 
+      v-bind="$props"
+    /> `
+})
+
+export const Default = Template.bind({})

package/src/components/Paragraphs/RelatedInformation/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <container
+    v-if="showTaxonomies && taxonomies.length > 0"
+    class="related-info-container"
+  >
+    <row v-if="showTaxonomyHeading">
+      <h2>Related information</h2>
+    </row>
+    <row class="related-info-tags">
+      <button
+        v-for="(taxonomy, i) in taxonomies"
+        :key="i"
+        class="related-info-tag"
+        role="button"
+        @click="
+          goToCollectionPage(
+            taxonomy.field_term_link_to_collection_pg.path.alias
+          )
+        "
+      >
+        <strong>{{ taxonomy.name }}</strong>
+      </button>
+    </row>
+  </container>
+</template>
+
+<script>
+import Row from './../../Containers/Row/index.vue'
+import Container from './../../Containers/Container/index.vue'
+
+export default {
+  name: 'RelatedInformation',
+  components: {
+    Container,
+    Row
+  },
+  props: {
+    showTaxonomies: {
+      type: Boolean,
+      default: true
+    },
+    showTaxonomyHeading: {
+      type: Boolean,
+      default: true
+    },
+    taxonomies: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    goToCollectionPage(url) {
+      this.$router.push(url)
+      this.$emit('goToCollectionPage')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

package/src/components/Paragraphs/RelatedInformation/styles.scss

@@ -0,0 +1,50 @@
+@import '../../../includes/scss/all';
+
+h2 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 36px;
+}
+.related-info-container {
+    padding-top: 64px;
+    padding-left: 35px;
+    padding-right: 45px;
+    padding-bottom: 48px;
+    gap: 24px;
+    background-color: $white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .related-info-tags {
+        display: flex;
+        justify-content: flex-start;
+        gap: 12px;
+   }
+    .related-info-tag {
+        position: relative;
+        text-decoration: none;
+        font-style: normal;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0px;
+        display: flex;
+        background-color: $white;
+        border: 2px solid $black;
+        border-radius: 8px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        justify-content: center;
+        align-items: center;
+    
+        &:hover {
+            background-color: $orange;
+            border: 2px solid $orange;
+            border-radius: 8px;
+        }
+    }
+}
+