@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,333 @@
+<template>
+  <card-grid
+    :title="title"
+    :title-tag="titleTag"
+    :sub-heading="subHeading"
+    :cards="list"
+    :rtl="rtl"
+    :force-lg-columns-per-row="1"
+    :force-md-columns-per-row="1"
+    :force-sm-columns-per-row="1"
+    :is-selectable="true"
+    :row-spacing="showListLink ? 'none' : 'small'"
+    :row-classes="showListLink ? 'list_link' : ''"
+    class="list_group"
+    :class="showListLink ? 'list_group__link' : ''"
+    :background-variant="darkBackground ? 'dark' : 'none'"
+    :size="'content'"
+    v-bind="$attrs"
+    @selected="selectedCard"
+    @focussed="focussed($event)"
+  >
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        :show-divider="false"
+        :header-size="'large'"
+        class="list_group__card mb-1"
+        :class="showListLink ? 'list_group__link--card' : ''"
+        :card-header-title="card.title"
+        :rtl="rtl || card.rtl"
+        :caret="
+          showListLink
+            ? getCaret(card) === 'external'
+              ? getCaret(card)
+              : null
+            : getCaret(card)
+        "
+        :caret-position="showListLink ? 'after-title' : 'top'"
+        :glyph-icon-component="showListLink ? 'arrow-right' : ''"
+        :icon-is-bordered="false"
+        :icon-position="showListLink ? 'top-right' : 'top'"
+        :icon-size="showListLink ? 'xsmall' : 'small'"
+        :card-padding="showLargeSpacing ? 'large' : 'small'"
+        :border-type="'thin'"
+        :description="showListLink ? '' : card.description"
+        :description-class="showListLink ? '' : 'list-item__text'"
+        :strip-description-html="true"
+        :link="card.link ? card.link : false"
+        :taxonomies="{
+          industry: card.industry,
+          topic: card.topic,
+          language: card.language
+        }"
+      />
+    </template>
+    <template v-slot:cardGridFooter>
+      <rich-text
+        v-if="!$slots.cardDescription && footerHeading"
+        :content="footerHeading"
+        :without-container="true"
+      />
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import RichText from './../../Paragraphs/RichText/index.vue'
+import {
+  isAbsoluteUrl,
+  navigateToPath,
+  isGovSite
+} from './../../../../lib/utility'
+
+export default {
+  name: 'ListGroup',
+  components: { CardGrid, CardGridItem, RichText },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    role: {
+      type: String,
+      default: 'button'
+    },
+    darkBackground: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleTag: {
+      type: String,
+      default: 'h3'
+    },
+    subHeading: {
+      type: String,
+      default: null
+    },
+    footerHeading: {
+      type: String,
+      default: null
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    showListItemNavigationArrow: {
+      type: Boolean,
+      default: false
+    },
+    showLargeSpacing: {
+      type: Boolean,
+      default: false
+    },
+    showListLink: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    getCaret(card) {
+      if (this.showListItemNavigationArrow) {
+        if (isAbsoluteUrl(card.link)) {
+          return 'external'
+        } else {
+          return 'right'
+        }
+      }
+      return null
+    },
+    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', 'list-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
+        )
+      }
+    },
+    focussed(ev) {
+      const path = ev.path || (ev.composedPath && ev.composedPath())
+      const theTabbedCards = path.find(
+        (el) => el['_prevClass'] === 'tabbed-cards'
+      )
+      if (ev.shiftKey && theTabbedCards) {
+        ev.preventDefault()
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
+          'isSelected'
+        )
+        let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
+        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+          'button'
+        )
+        if (thePrevLGItem) {
+          thePrevLGItem[0].focus()
+        } else {
+          selectedCard[0].focus()
+        }
+      } else if (!ev.shiftKey && theTabbedCards) {
+        ev.preventDefault()
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
+          'isSelected'
+        )
+        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+          'button'
+        )
+        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+          'button'
+        )
+        if (theNextLGItem) {
+          theNextLGItem[0].focus()
+        } else if (nextTabbedCard) {
+          nextTabbedCard[0].focus()
+        } else {
+          let nextFocus = this.focusNextElement()
+          this.$root.$emit('last-focus-out')
+          nextFocus.focus()
+        }
+      } else {
+        return true
+      }
+    },
+    focusNextElement(reverse, activeElem) {
+      /*check if an element is defined or use activeElement*/
+      activeElem =
+        activeElem instanceof HTMLElement ? activeElem : document.activeElement
+
+      let queryString = [
+          'a:not([disabled]):not([tabindex="-1"])',
+          'button:not([disabled]):not([tabindex="-1"])',
+          'input:not([disabled]):not([tabindex="-1"])',
+          'select:not([disabled]):not([tabindex="-1"])',
+          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          /* add custom queries here */
+        ].join(','),
+        queryResult = Array.prototype.filter.call(
+          document.querySelectorAll(queryString),
+          (elem) => {
+            /*check for visibility while always include the current activeElement*/
+            return (
+              elem.offsetWidth > 0 ||
+              elem.offsetHeight > 0 ||
+              elem === activeElem
+            )
+          }
+        ),
+        indexedList = queryResult
+          .slice()
+          .filter((elem) => {
+            /* filter out all indexes not greater than 0 */
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true
+          })
+          .sort((a, b) => {
+            /* sort the array by index from smallest to largest */
+            return a.tabIndex != 0 && b.tabIndex != 0
+              ? a.tabIndex < b.tabIndex
+                ? -1
+                : b.tabIndex < a.tabIndex
+                ? 1
+                : 0
+              : a.tabIndex != 0
+              ? -1
+              : b.tabIndex != 0
+              ? 1
+              : 0
+          }),
+        focusable = [].concat(
+          indexedList,
+          queryResult.filter((elem) => {
+            /* filter out all indexes above 0 */
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
+          })
+        )
+
+      /* if reverse is true return the previous focusable element
+     if reverse is false return the next focusable element */
+      return reverse
+        ? focusable[focusable.indexOf(activeElem) - 1] ||
+            focusable[focusable.length - 1]
+        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/vars/src/colors';
+
+.list_group {
+  margin-top: -16px;
+  margin-bottom: -16px;
+  :deep(.list_group__card) {
+    button {
+      border: 2px solid $lightgray;
+      border-left: thick solid $orange;
+    }
+    .card-title {
+      margin-bottom: 0;
+    }
+    .wysiwyg {
+      margin-top: 12px;
+    }
+  }
+  :deep(.card-grid__row--list_link) {
+    > div:first-child .list_group__card button {
+      border-top: 1px solid #d1d1d1;
+    }
+  }
+
+  :deep(.list_group__link--card) {
+    h3 {
+      font-size: 16px;
+    }
+    button {
+      border: none;
+      border-radius: 0;
+      color: #006bff;
+      font-weight: 700;
+      font-size: 16px;
+
+      &:hover {
+        background-color: #f3f3f3;
+        color: $black;
+        opacity: unset;
+        svg,
+        svg path,
+        img {
+          fill: $black;
+          color: $black;
+        }
+      }
+      &:last-child {
+        border-bottom: 1px solid #d1d1d1;
+      }
+
+      h3 span {
+        text-decoration: underline;
+      }
+
+      svg,
+      svg path,
+      img {
+        fill: #006bff;
+        color: #006bff;
+      }
+    }
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    ::-ms-backdrop,
+    &__card {
+      padding-bottom: 8px;
+    } /* IE11 */
+  }
+}
+</style>

package/src/components/Paragraphs/ListGroup/list-group.stories.js

@@ -0,0 +1,64 @@
+import ListGroup from './index.vue'
+import { storyData, storyDataAr } from './Constants'
+
+export default {
+  title: 'Paragraphs/ListGroup',
+  component: ListGroup,
+  argTypes: {
+    darkBackground: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    items: {
+      control: 'object',
+      defaultValue: storyData.links
+    },
+    rtlItems: {
+      control: 'object',
+      defaultValue: storyDataAr.links
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    titleTag: {
+      control: 'text',
+      defaultValue: 'h3'
+    },
+    showListItemNavigationArrow: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    showLargeSpacing: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    list: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { ListGroup },
+  data() {
+    return {
+      storyData,
+      storyDataAr
+    }
+  },
+  props: Object.keys(argTypes),
+  template: `<list-group
+    v-bind="$props"
+    :list="rtl ? rtlItems : items"
+    :title="(rtl ? storyDataAr.title : storyData.title)" />`
+})
+
+export const Default = Template.bind({})

package/src/components/Paragraphs/ListGroup/navigation-card.stories.js

@@ -0,0 +1,66 @@
+import ListGroup from './index.vue'
+import { storyData, storyDataAr } from './Constants'
+
+export default {
+  title: 'Paragraphs/NavigationCards',
+  component: ListGroup,
+  argTypes: {
+    darkBackground: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    items: {
+      control: 'object',
+      defaultValue: storyData.links
+    },
+    rtlItems: {
+      control: 'object',
+      defaultValue: storyDataAr.links
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    titleTag: {
+      control: 'text',
+      defaultValue: 'h2'
+    },
+    showListItemNavigationArrow: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    showLargeSpacing: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    list: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { ListGroup },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      storyData,
+      storyDataAr
+    }
+  },
+  template: `<list-group
+    v-bind="$props"
+    :list="rtl ? rtlItems : items"
+    :title="(rtl ? storyDataAr.title : storyData.title)"
+  />
+`
+})
+
+export const Default = Template.bind({})

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

@@ -0,0 +1,65 @@
+import MarketingBanner from './index.vue'
+
+export default {
+  title: 'Paragraphs/MarketingBanner',
+  component: MarketingBanner,
+  argTypes: {
+    image: {
+      control: 'text'
+    },
+    leftText: {
+      control: 'text'
+    },
+    leftBg: {
+      control: 'select',
+      options: ['yellow', 'black', 'white']
+    },
+    rightText: {
+      control: 'text'
+    },
+    rightBg: {
+      control: 'select',
+      options: ['yellow', 'black', 'white']
+    },
+    withLink: {
+      control: 'boolean'
+    },
+    hideLeft: {
+      control: 'boolean'
+    },
+    link: {
+      control: 'text',
+      table: { disable: true }
+    },
+    linkAltText: {
+      control: 'text',
+      table: { disable: true }
+    },
+    linkText: {
+      control: 'text',
+      table: { disable: true }
+    }
+  },
+  args: {
+    image: 'https://picsum.photos/1200/514',
+    leftText: 'h2. left copy xx',
+    rightText: 'h2. right copy xx',
+    withLink: true,
+    hideLeft: false,
+    link: '',
+    linkAltText: '',
+    linkText: ''
+  }
+}
+
+const DefaultMarketingBanner = (args) => ({
+  components: { MarketingBanner },
+  setup() {
+    return { args }
+  },
+  template: `
+    <MarketingBanner v-bind="args" :leftText="args.hideLeft ? null : args.leftText" :link="args.withLink ? 'www.google.com' : null" />
+  `
+})
+
+export const Default = DefaultMarketingBanner.bind({})

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

@@ -0,0 +1,118 @@
+<template>
+  <component
+    :is="!!link ? 'button' : 'div'"
+    :href="!!link ? link : null"
+    class="wcl-marketing-banner"
+    :title="linkAltText || linkText"
+    @click.prevent="selected"
+    ><section-group
+      :background-image="image"
+      class="wcl-marketing-banner__section"
+      :apply-background-on="'section'"
+      :size="'full'"
+      :background-variant="'none'"
+      :no-padding-bottom="true"
+      :no-padding-top="true"
+    >
+      <div class="wcl-marketing-banner__wrap">
+        <div v-if="leftText" :class="getClassString(leftBg, 'left')">
+          <rich-text :content="leftText" :tag="'h2'" />
+        </div>
+        <div v-if="rightText" :class="getClassString(rightBg, 'right')">
+          <rich-text :content="rightText" :tag="'h2'" />
+        </div>
+      </div> </section-group
+  ></component>
+</template>
+<script>
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import RichText from '../RichText/index.vue'
+import { navigateToPath } from '../../../../lib/utility'
+
+export default {
+  name: 'MarketingBanner',
+  components: {
+    SectionGroup,
+    RichText
+  },
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    leftText: {
+      type: String,
+      default: ''
+    },
+    leftBg: {
+      type: String,
+      default: 'yellow'
+    },
+    rightText: {
+      type: String,
+      default: ''
+    },
+    rightBg: {
+      type: String,
+      default: 'black'
+    },
+    link: {
+      type: String,
+      default: ''
+    },
+    linkAltText: {
+      type: String,
+      default: ''
+    },
+    linkText: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    urlHostname() {
+      return window.location.protocol + '//' + window.location.host
+    }
+  },
+  methods: {
+    getClassString(color, position) {
+      return {
+        'wcl-marketing-banner__block': true,
+        ['wcl-marketing-banner__block--bg-' + color]: true,
+        single: !this.leftText || !this.rightText,
+        [position]: this.leftText && this.rightText
+      }
+    },
+    selected() {
+      this.fireGTM()
+      if (this.link) {
+        navigateToPath.call(this, this.link)
+      }
+    },
+    fireGTM() {
+      if (this.$gtm) {
+        // format link
+        const linkStr = this.link
+        let linkURL = linkStr
+        if (linkStr !== false && !linkStr.includes(this.urlHostname)) {
+          linkURL = this.urlHostname + linkStr
+        }
+        // gather attrs
+        let attrs = {
+          label: this.linkAltText,
+          data: linkURL
+        }
+        // fire the event
+        this.$gtm.push({
+          event: 'custom.interaction.marketing.click',
+          group: 'Marketing',
+          ...attrs
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles';
+</style>