@worksafevictoria/wcl7.5 1.0.0

package/src/components/SubComponents/CardGroup/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <card-grid
+    :title="title"
+    :title-tag="titleTag"
+    :cards="cards"
+    :rtl="allCardsRTL"
+    :force-lg-columns-per-row="columns"
+    :force-md-columns-per-row="columns"
+    :is-selectable="true"
+    :row-spacing="'large'"
+    :class="'card_group card_group--' + background"
+    :background-variant="background"
+    @selected="selectedCard"
+  >
+    <template v-if="$slots.cardGroupFilter" v-slot:gridHeaderRight>
+      <slot name="cardGroupFilter"></slot>
+    </template>
+    <template v-if="$slots.cardGroupPreContent" v-slot:gridPreContent>
+      <slot name="cardGroupPreContent"></slot>
+    </template>
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        v-if="card"
+        :show-divider="false"
+        :header-size="'large'"
+        class="card_group__card"
+        :class="{
+          [`card_group__card--${card.colour}`]: card.pillText,
+          [`card_group__card--none`]: !card.pillText
+        }"
+        :card-header-title="card.title"
+        :caret="getCaret(card)"
+        :description="card.description"
+        :card-padding="'none'"
+        :caret-position="'bottom'"
+        :rtl="card.rtl"
+        :border-type="background === 'white' ? 'thick' : 'none'"
+        :pill-text="card.pillText"
+        :link="card.link ? card.link : false"
+        :taxonomies="{
+          industry: card.industry,
+          topic: card.topic,
+          language: card.language
+        }"
+      >
+        <template v-slot:cardTop>
+          <card-top :card="card" />
+        </template>
+        <template v-slot:cardDescription>
+          <card-body :card="card" />
+        </template>
+      </card-grid-item>
+    </template>
+
+    <template
+      v-if="
+        loading ||
+          (cards.length === 0 && !loading) ||
+          $slots.cardGroupFooter ||
+          (!loading && showLoadMore)
+      "
+      v-slot:cardGridFooter
+    >
+      <column v-if="loading" sm="12">
+        <strong>Loading... </strong>
+        <b-spinner class="float-right"></b-spinner>
+      </column>
+      <column v-if="cards.length === 0 && !loading" sm="12">
+        <strong>{{ emptyCardsText }}</strong>
+      </column>
+      <column v-if="$slots.cardGroupFooter" sm="12">
+        <slot name="cardGroupFooter"></slot>
+      </column>
+      <column v-if="!loading && showLoadMore" sm="12" class="text-center">
+        <cta-button
+          type="dark"
+          :focus-outline="'light'"
+          :text-only="true"
+          :is-centred="true"
+          :class="'card_group__loadmore mb-0'"
+          @clicked="$emit('loadMore')"
+          >Load more</cta-button
+        >
+      </column>
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import CardGrid from './../../Common/CardGrid/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import {
+  isAbsoluteUrl,
+  navigateToPath,
+  isGovSite
+} from './../../../../lib/utility'
+import CardBody from './cardbody.vue'
+import CardTop from './cardtop.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import { BSpinner } from 'bootstrap-vue-next'
+
+export default {
+  name: 'CardGroup',
+  components: {
+    CardGrid,
+    CardGridItem,
+    Column,
+    CardBody,
+    CardTop,
+    CtaButton,
+    BSpinner
+},
+  props: {
+    bundle: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    caret: {
+      type: String,
+      default: undefined,
+      validator: (value) =>
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+    },
+    cards: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    background: {
+      type: String,
+      default: 'none'
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Number,
+      default: 3
+    },
+    showLoadMore: {
+      type: Boolean,
+      default: false
+    },
+    emptyCardsText: {
+      type: String,
+      default: 'No results returned'
+    }
+  },
+  computed: {
+    allCardsRTL() {
+      if (this.cards.length === 0) {
+        return this.rtl
+      }
+      return this.cards.every((card) => this.rtl || card.rtl)
+    }
+  },
+  methods: {
+    getCaret(card) {
+      if (card.link && isAbsoluteUrl(card.link)) {
+        return 'external'
+      } else {
+        return undefined
+      }
+    },
+    selectedCard(card) {
+      // Some custom logic for gov caretaker logic
+      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+        if (!isGovSite(card?.selectedCard?.link)) {
+          this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
+          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+        } else {
+          navigateToPath.call(
+            this,
+            card?.selectedCard?.link,
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          )
+        }
+      } else {
+        navigateToPath.call(
+          this,
+          card?.selectedCard?.link,
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        )
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './../../../includes/scss/all';
+$cardTextPadding: 16px;
+$borderRadius: 8px;
+
+.card_group {
+  min-height: 300px;
+
+  @mixin card-inner-border-style($bgColour, $textColour) {
+    :deep(.pillTop) {
+      background-color: $bgColour;
+      color: $textColour;
+    }
+    :deep(button.card span.card-bottom-border) {
+      display: block;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      height: 8px;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      background: $bgColour;
+    }
+  }
+
+  &--white,
+  &--yellow,
+  &--grey {
+    :deep(.card-grid-item__card) {
+      padding-bottom: 8px;
+    }
+  }
+
+  &--yellow {
+    :deep(button.card span.card-bottom-border) {
+      display: block;
+      background: $white;
+    }
+  }
+
+  &--grey,
+  &--white {
+    @include card-inner-border-style($orange, $black);
+  }
+
+  &__card {
+    &--blue {
+      @include card-inner-border-style($blue, $white);
+    }
+    &--red {
+      @include card-inner-border-style($red, $white);
+    }
+    &--pink {
+      @include card-inner-border-style($pink, $white);
+    }
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    ::-ms-backdrop,
+    &__card {
+      padding-bottom: 16px;
+    } /* IE11 */
+  }
+
+  :deep(.card-body) {
+    padding-left: $cardTextPadding !important;
+    padding-right: $cardTextPadding !important;
+  }
+
+  :deep(.card-grid-item__card) {
+    min-height: 300px;
+  }
+
+  :deep(.card-grid-item__caretContainer--bottom) {
+    padding-bottom: 6px;
+  }
+
+  :deep(button.card span.card-bottom-border) {
+    display: block;
+
+    @media all and (-ms-high-contrast: none) {
+      ::-ms-backdrop,
+      span.card-bottom-border {
+        display: block;
+        min-width: 100%;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+      } /* IE11 */
+    }
+  }
+}
+</style>

package/src/components/SubComponents/CtaButton/index.stories.js

@@ -0,0 +1,357 @@
+import CtaButton from './index.vue'
+import svg from './../../../assets/icons/instagram.svg?raw'
+
+export default {
+  title: 'SubComponents/CTA',
+  component: CtaButton,
+  argTypes: {
+    glyph: {
+      control: ['object', 'text'],
+      table: { disable: true }
+    },
+    type: {
+      control: 'text',
+      table: { disable: true }
+    },
+    url: {
+      control: 'text'
+    },
+    isCentred: {
+      control: 'boolean'
+    },
+    rtl: {
+      control: 'boolean'
+    },
+    slim: {
+      control: 'boolean'
+    },
+    stretch: {
+      control: 'boolean'
+    },
+    textOnly: {
+      control: 'boolean'
+    },
+    workwell: {
+      control: 'boolean'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    isFluid: {
+      control: 'boolean',
+      table: { disable: true }
+    },
+    focusOutline: {
+      control: 'select',
+      options: ['default', 'light', 'dark']
+    },
+    glyphHeight: {
+      control: 'number',
+      table: { disable: true }
+    },
+    glyphWidth: {
+      control: 'number',
+      table: { disable: true }
+    },
+    alt: {
+      control: 'text',
+      table: { disable: true }
+    }
+  }
+}
+
+const Template = (args) => ({
+  components: { CtaButton },
+  setup () {
+    return { args }
+  },
+  template: 
+`  <div>
+    <div>
+        <h3>{{args.heading}}</h3>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+    </div>
+    </div>
+  `
+})
+export const Default = Template.bind({})
+
+Default.args = {
+  type: 'default',
+  url: '#',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'Standard',
+  message: 'Click here'
+}
+
+export const LongText = Template.bind({})
+
+LongText.args = {
+  type: 'default',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'Long Text',
+  message: 'Can a minor adjustment be made to the CTA button width please. At the moment it is limited.'
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  type: 'default',
+  url: '#',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: true,
+  glyph: () => null,
+  glyphHeight: 15,
+  glyphWidth: 25,
+  heading: 'Disabled',
+  message: 'Click here'
+}
+
+export const Dark = Template.bind({})
+
+Dark.args = {
+  type: 'dark',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'Dark',
+  message: 'Click here'
+}
+
+export const White = Template.bind({})
+
+White.args = {
+  type: 'white',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'White',
+  message: 'Click here'
+}
+
+export const Gray = Template.bind({})
+
+Gray.args = {
+  type: 'gray',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'Gray',
+  message: 'Click here'
+}
+
+export const RTL = Template.bind({})
+
+RTL.args = {
+  type: 'default',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: true,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: false,
+  disabled: false,
+  heading: 'RTL',
+  message: 'Subscribe for alerts'
+}
+
+export const CentredAndGlyph = {
+  args: {
+    ...Default.args,
+    url: '#',
+    isCentred: true,
+    heading: 'Centred and Glyph',
+    message: 'Click here',
+    glyph: svg,
+  },
+  render: (args) => ({
+    components: { CtaButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div>
+        <h3>{{args.heading}}</h3>
+        <cta-button class="has-icon"
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+    </div>
+  `
+  })
+}
+
+export const TextOnly = Template.bind({})
+
+TextOnly.args = {
+  type: 'default',
+  url: '#',
+  isCentred: true,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: true,
+  workwell: false,
+  disabled: false,
+  heading: 'Text Only',
+  message: 'Click here'
+}
+
+export const Workwell = Template.bind({})
+
+Workwell.args = {
+  type: 'default',
+  url: 'http://google.com',
+  isCentred: false,
+  rtl: false,
+  slim: false,
+  stretch: false,
+  textOnly: false,
+  workwell: true,
+  disabled: false,
+  heading: 'Workwell',
+  message: 'Click here'
+}
+
+export const SideBySide = {
+  args: {
+    ...Default.args,
+    heading: 'Side-by-Side',
+    message: 'Click here'
+  },
+  render: (args) => ({
+    components: { CtaButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div>
+        <h3>{{args.heading}}</h3>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+    </div>
+  `
+  })
+}
+
+
+export const Stretch = {
+  args: {
+    ...Default.args,
+    heading: 'Stretch',
+    message: 'Click here',
+    stretch: true,
+  },
+  render: (args) => ({
+    components: { CtaButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div>
+        <h3>{{args.heading}}</h3>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+        <cta-button
+          v-bind="args"
+          rtl=true
+        >
+          {{args.message}}
+        </cta-button>
+    </div>
+  `
+  })
+}
+
+export const Slim = {
+  args: {
+    ...Default.args,
+    heading: 'Slim',
+    message: 'Click here',
+    slim: true,
+  },
+  render: (args) => ({
+    components: { CtaButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div>
+        <h3>{{args.heading}}</h3>
+        <cta-button
+          v-bind="args"
+        >
+          {{args.message}}
+        </cta-button>
+        <cta-button
+          v-bind="args"
+          type="dark"
+          rtl=true
+        >
+          {{args.message}}
+        </cta-button>
+        <cta-button
+        v-bind="args"
+        type="white"
+      >
+        {{args.message}}
+      </cta-button>
+    </div>
+  `
+  })  
+}