@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,106 @@
+import Statistics from './index.vue'
+
+const itemListDefault = [
+  {
+    heading: 'Statistic 1',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    statistic: '100%'
+  },
+  {
+    heading: 'Statistic 2',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    statistic: '10,000'
+  },
+  {
+    heading: 'Statistic 3',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    statistic: '3 of 10'
+  },
+  {
+    heading: 'Statistic 4',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    statistic: '$500'
+  }
+]
+
+const itemListAr = [
+  {
+    heading: 'نقطة إثبات 1',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    statistic: '100%'
+  },
+  {
+    heading: 'نقطة إثبات 2',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    statistic: '10,000'
+  },
+  {
+    heading: 'نقطة إثبات 3',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    statistic: '3 من 10'
+  },
+  {
+    heading: 'نقطة إثبات 4',
+    description:
+      'لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، ',
+    statistic: '$500'
+  }
+]
+
+export default {
+  title: 'Paragraphs/Statistics',
+  component: Statistics,
+  argTypes: {
+    headingTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+    columns: {
+      control: 'select',
+      options: [3, 4]
+    },
+    itemList: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    title: 'Section heading',
+    headingTag: 'h2',
+    rtl: false,
+    columns: 3
+  }
+}
+
+const DefaultStatistics = (args) => ({
+  components: { Statistics },
+  setup() {
+    return { args }
+  },
+  data() {
+    return {
+      itemListDefault,
+      itemListAr
+    }
+  },
+  template: `
+  <statistics v-bind="args" :item-list="dynamicItemList" ></statistics>
+  `,
+  computed: {
+    dynamicItemList() {
+      if (args.rtl) {
+        return this.itemListAr
+      } else {
+        return this.itemListDefault
+      }
+    }
+  }
+})
+
+export const Default = DefaultStatistics.bind({})

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

@@ -0,0 +1,95 @@
+<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="statistics__grid"
+  >
+    <template v-slot:cardItem="{ card }">
+      <hr class="statistics__hr" />
+      <card-grid-item
+        :card-header-title="card.statistic"
+        :header-tag="'div'"
+        :header-size="'extra-2x-large'"
+        :rtl="rtl"
+        class="statistics"
+      >
+        <template v-slot:cardDescription>
+          <p
+            v-if="card.heading !== null && card.heading !== undefined"
+            class="statistics__sub-heading"
+          >
+            {{ card.heading }}
+          </p>
+          <rich-text
+            v-if="card.description"
+            class="statistics__description"
+            :content="card.description"
+            :without-container="true"
+          />
+        </template>
+      </card-grid-item>
+    </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'
+
+export default {
+  name: 'Statistics',
+  components: { CardGrid, CardGridItem, RichText },
+  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>
+@import '../../../includes/scss/all';
+
+.statistics {
+  &__hr {
+    background-color: $orange;
+    height: 8px;
+    position: relative;
+    border-radius: 10px 10px 10px 10px;
+    margin-bottom: 16px;
+    border-top: none;
+  }
+  :deep(.card-title) {
+    line-height: 1.2;
+    font-weight: 700;
+    font-size: 40px;
+  }
+
+  :deep(.statistics__description) {
+    margin-top: 14px;
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/Paragraphs/TabbedCards/TempIcons/cake-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.68 5.88c.7-.24 1.22-.9 1.3-1.64.05-.47-.05-.91-.28-1.27L12.42.75c-.19-.33-.67-.33-.87 0l-1.28 2.22c-.17.3-.27.65-.27 1.03 0 1.32 1.3 2.35 2.68 1.88zm3.85 10.04l-1-1-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-3.61c-.75.51-1.71.75-2.74.52-.66-.14-1.25-.51-1.73-.99zM18 9h-5V8c0-.55-.45-1-1-1s-1 .45-1 1v1H6c-1.66 0-3 1.34-3 3v1.46c0 .85.5 1.67 1.31 1.94.73.24 1.52.06 2.03-.46l2.14-2.13 2.13 2.13c.76.76 2.01.76 2.77 0l2.14-2.13 2.13 2.13c.43.43 1.03.63 1.65.55.99-.13 1.69-1.06 1.69-2.06v-1.42C21 10.34 19.66 9 18 9z"/></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/commute-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-.77.77c-.28.28-.28.72 0 1s.72.28 1 0L7 18h2v-5H4.5c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5h8c.28 0 .5.22.5.5V8h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66l-1.42 4.11v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1c0 .55.45 1 1 1s.99-.44 1-.99L22 13.77l-1.43-4.11zm-7.8.34h6.48c.21 0 .4.14.47.34l.69 2c.11.32-.13.66-.47.66h-7.85c-.34 0-.58-.34-.47-.66l.69-2c.05-.2.24-.34.46-.34zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/fire_extinguisher-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><rect fill="none" height="24" width="24"/><path d="M7,19h10v1c0,1.1-0.9,2-2,2H9c-1.1,0-2-0.9-2-2V19z M7,18h10v-5H7V18z M17,4.23v3.54c0,0.63-0.58,1.11-1.21,0.98 l-1.94-0.41c0,0.02,0,0.01-0.01,0.03c1.54,0.62,2.71,1.98,3.06,3.63H7.1c0.34-1.66,1.52-3.02,3.07-3.64 c-0.33-0.26-0.6-0.58-0.8-0.95L5.49,6.6C5.2,6.54,5,6.29,5,6v0c0-0.29,0.2-0.54,0.49-0.6l3.88-0.81C9.87,3.65,10.86,3,12,3 c0.7,0,1.34,0.25,1.85,0.66l1.94-0.41C16.42,3.12,17,3.6,17,4.23z M13,6c-0.03-0.59-0.45-1-1-1s-1,0.45-1,1s0.45,1,1,1 S13,6.55,13,6z"/></g></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/free_breakfast-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 5h-2V5h2v3zM5 19h14c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1z"/></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/portrait-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12.25c1.24 0 2.25-1.01 2.25-2.25S13.24 7.75 12 7.75 9.75 8.76 9.75 10s1.01 2.25 2.25 2.25zm4.5 4c0-1.5-3-2.25-4.5-2.25s-4.5.75-4.5 2.25V17h9v-.75zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1z"/></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/storefront-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g/><g><path d="M21.9,8.89l-1.05-4.37c-0.22-0.9-1-1.52-1.91-1.52h-2.21h-2.01H13h-2H9.28H7.26H5.05C4.15,3,3.36,3.63,3.15,4.52L2.1,8.89 c-0.24,1.02-0.02,2.06,0.62,2.88C2.8,11.88,2.91,11.96,3,12.06V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-6.94 c0.09-0.09,0.2-0.18,0.28-0.28C21.92,10.96,22.15,9.91,21.9,8.89z M7.02,5L6.44,9.86C6.36,10.51,5.84,11,5.23,11 c-0.49,0-0.8-0.29-0.93-0.47c-0.26-0.33-0.35-0.76-0.25-1.17L5.05,5H7.02z M18.91,4.99l1.05,4.37c0.1,0.42,0.01,0.84-0.25,1.17 C19.57,10.71,19.27,11,18.77,11c-0.61,0-1.14-0.49-1.21-1.14L16.98,5L18.91,4.99z M15.51,9.52c0.05,0.39-0.07,0.78-0.33,1.07 C14.95,10.85,14.63,11,14.22,11C13.55,11,13,10.41,13,9.69V5h1.96L15.51,9.52z M11,9.69C11,10.41,10.45,11,9.71,11 c-0.34,0-0.65-0.15-0.89-0.41C8.57,10.3,8.45,9.91,8.49,9.52L9.04,5H11V9.69z M18,19H6c-0.55,0-1-0.45-1-1v-5.03 C5.08,12.98,5.15,13,5.23,13c0.87,0,1.66-0.36,2.24-0.95c0.6,0.6,1.4,0.95,2.31,0.95c0.87,0,1.65-0.36,2.23-0.93 c0.59,0.57,1.39,0.93,2.29,0.93c0.84,0,1.64-0.35,2.24-0.95c0.58,0.59,1.37,0.95,2.24,0.95c0.08,0,0.15-0.02,0.23-0.03V18 C19,18.55,18.55,19,18,19z"/></g></g></svg>

package/src/components/Paragraphs/TabbedCards/TempIcons/tag_faces-black-18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.01 2C6.49 2 2.02 6.48 2.02 12s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10S17.54 2 12.01 2zm.01 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.35 8 15.52 8s-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.35 8 8.52 8s-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm3.5 6.5c2.03 0 3.8-1.11 4.75-2.75.19-.33-.05-.75-.44-.75H7.71c-.38 0-.63.42-.44.75.95 1.64 2.72 2.75 4.75 2.75z"/></svg>

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

@@ -0,0 +1,36 @@
+import TabbedCards from './index.vue'
+import { tabbedCardsMockLinks } from '../../../mock/tabbed-cards'
+
+export default {
+  title: 'Paragraphs/TabbedCards',
+  component: TabbedCards,
+  argTypes: {
+    description: {
+      control: 'text',
+      defaultValue: 'Tabbed cards h2 heading'
+    },
+    heading: {
+      control: 'text',
+      defaultValue: 'Tabbed cards h2 heading'
+    },
+    tabbedCards: {
+      control: 'object',
+      defaultValue: tabbedCardsMockLinks
+    },
+    workwell: {
+      control: 'boolean',
+      defaultValue: false
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { TabbedCards },
+  props: Object.keys(argTypes),
+  template: `
+    <tabbed-cards 
+      v-bind="$props"
+    /> `
+})
+
+export const Default = Template.bind({})

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

@@ -0,0 +1,393 @@
+<template>
+  <div
+    v-if="tabbedCards.length > 0 && loaded"
+    :ref="`tabbedCards-${_uid}`"
+    class="tabbed-cards"
+  >
+    <div v-for="(r, rIndex) in rows" :key="rIndex">
+      <card-grid
+        ref="cardgrid"
+        :title="rIndex === 0 ? heading : undefined"
+        :sub-heading="rIndex === 0 ? description : undefined"
+        :cards="getItemsByRow(tabbedCards, rIndex)"
+        :card-id-prefix="getCardIdPrefix(rIndex)"
+        :force-lg-columns-per-row="getViewPortColumns()"
+        :force-md-columns-per-row="getViewPortColumns()"
+        :is-selectable="true"
+        :no-padding-top="rIndex !== 0"
+        :no-padding-bottom="rIndex !== 0 && rIndex >= rows"
+        :background-variant="'light'"
+        :content-class="`tabbed-cards-content`"
+        class="tabbed-cards__grid"
+        @selected="(card, cardIndex) => setCurrentRow(rIndex, card)"
+        @focussed="focussed($event)"
+      >
+        <template v-slot:cardItem="{ card }">
+          <card-grid-item
+            :glyph-src="card.icon"
+            :show-divider="false"
+            :header-size="'large'"
+            class="tabbed-card"
+            :class="card === selectedCard ? 'isSelected' : ''"
+            :card-padding="'small'"
+            :card-header-title="card.title"
+            :caret="card === selectedCard ? 'up' : 'down'"
+            :caret-position="'bottom'"
+            :rtl="rtl || card.rtl"
+            :description="card.text"
+            :button-role="'link'"
+            :is-selected="card === selectedCard"
+            :is-expandable="true"
+          />
+        </template>
+        <template
+          v-if="selectedRow === rIndex && selectedCard"
+          v-slot:cardGridFooter
+        >
+          <column class="listgroup-column">
+            <div ref="listgroup" class="tabbed-cards__listGroup">
+              <component
+                :is="ListGroupComponent"
+                :list="selectedCard.links"
+                :title="selectedCard.linksTitle"
+                :title-tag="selectedCard.linksTag"
+                :show-list-item-navigation-arrow="!selectedCard.isNavList"
+                :show-large-spacing="selectedCard.isNavList"
+                :rtl="rtl || selectedCard.rtl"
+                dark-background
+              />
+            </div>
+          </column>
+        </template>
+      </card-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import Icon from './../../SubComponents/Icon/index.vue'
+
+export default {
+  name: 'TabbedCards',
+  components: { CardGrid, CardGridItem, Icon, Column },
+  props: {
+    heading: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    tabbedCards: {
+      type: Array,
+      default: () => []
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedCard: undefined,
+      selectedRow: undefined,
+      screenWidth: 0,
+      loaded: false
+    }
+  },
+  computed: {
+    rows() {
+      let r = Math.floor(this.tabbedCards.length / this.cols)
+      if (r % 1 != 0) {
+        return r
+      } else {
+        return r + 1
+      }
+    },
+    cols() {
+      if (this.screenWidth < 575.98) {
+        return 1
+      } else if (this.screenWidth < 991.98) {
+        return 2
+      } else {
+        return 3
+      }
+    },
+    ListGroupComponent() {
+      //List group component import to fix storybook bug
+      return () => import('./../ListGroup/index.vue')
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.updateScreenWidth)
+    this.screenWidth = document.documentElement.clientWidth
+    this.$root.$on('last-focus-out', () => {
+      this.selectedCard = null
+      this.selectedRow = null
+    })
+    this.loaded = true
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateScreenWidth)
+  },
+  methods: {
+    getCardIdPrefix(rIndex, cardIndex) {
+      const cardPrefix = `tabbedcards-${this._uid}-r-${rIndex}`
+      if (cardIndex !== null && cardIndex !== undefined) {
+        return `${cardPrefix}-${cardIndex}`
+      }
+      return cardPrefix
+    },
+    getItemsByRow(rows, index) {
+      let start = index * this.cols
+      let end = start + this.cols
+      return rows.slice(start, end)
+    },
+    setCurrentRow(rowIndex, card) {
+      const sameCardSelected =
+        card.selectedCard === this.selectedCard || !card.selectedCard
+      this.selectedCard = null
+      this.selectedRow = null
+      const cardGrids = this.$refs.cardgrid || []
+      cardGrids.forEach((cardGrid, index) => {
+        if (sameCardSelected || rowIndex !== index) {
+          cardGrid.clearCards()
+        }
+      })
+      setTimeout(() => {
+        if (window && !sameCardSelected) {
+          this.selectedCard = card.selectedCard
+          this.selectedRow = rowIndex
+          let VueScrollTo = require('vue-scrollto')
+          let options = {
+            container: 'body',
+            easing: 'ease-in',
+            offset: -100,
+            force: true,
+            cancelable: true
+          }
+          setTimeout(() => {
+            const listGroup = this.$refs.listgroup[0]
+            VueScrollTo.scrollTo(listGroup, 300, options)
+          })
+        }
+      }, 100)
+    },
+    updateScreenWidth() {
+      this.screenWidth = document.documentElement.clientWidth
+    },
+    getViewPortColumns() {
+      if (this.tabbedCards.length <= 3) {
+        return 3
+      }
+      const cols = this.getItemsByRow(this.tabbedCards, 0).length
+      return cols
+    },
+    focussed(ev) {
+      if (ev.shiftKey) {
+        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+          'button'
+        )[0]
+        if (
+          prevTabbedCard &&
+          prevTabbedCard.getAttribute('aria-expanded') === 'true'
+        ) {
+          ev.preventDefault()
+          const lG = this.$refs.listgroup
+          let itemsOfLG = lG[0].getElementsByTagName('button')
+          itemsOfLG[itemsOfLG.length - 1].focus()
+        }
+        return
+      }
+      const lG = this.$refs.listgroup
+      const isListGroupOpen = Array.isArray(lG) && lG.length > 0
+      const cardIsSelected = ev.target.parentElement.classList.contains(
+        'isSelected'
+      )
+      if (cardIsSelected && isListGroupOpen) {
+        ev.preventDefault()
+        lG[0].getElementsByTagName('button')[0].focus()
+      } else if (!cardIsSelected && isListGroupOpen) {
+        ev.preventDefault()
+        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+          'button'
+        )[0]
+        if (nextTabbedCard) {
+          nextTabbedCard.focus()
+        } else {
+          let itemsOfLG = lG[0].getElementsByTagName('button')
+          let lastItemOfLG = itemsOfLG[itemsOfLG.length - 1]
+          let nextFocusElement = this.focusNextElement(false, lastItemOfLG)
+          nextFocusElement.focus()
+        }
+      }
+      // if its the next card from the selected
+    },
+    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/all';
+.tabbed-cards {
+  :deep(.section-group--size-content .section-group__block) {
+    max-width: 100%;
+  }
+
+  :deep(.section-group--size-content .section-group__block .col-md-12) {
+    flex: 0 0 50%;
+    max-width: 50%;
+    @include mq('sm') {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+
+  :deep(.container.section-group__container.section-group__container--page) {
+    max-width: 100%;
+  }
+
+  :deep(.container.section-group__container .tabbed-cards-content) {
+    @include make-container();
+    @include make-max-widths-container-width(
+      $container-max-widths,
+      $grid-breakpoints
+    );
+    @include mq('mm') {
+      max-width: 100%;
+    }
+
+    .card-grid-item-icon {
+      padding-bottom: 16px;
+    }
+  }
+
+  :deep(.container.section-group__container .tabbed-cards-content-main) {
+    @include make-container();
+    @include make-max-widths-container-width(
+      $container-max-widths,
+      $grid-breakpoints
+    );
+    @include mq('mm') {
+      max-width: 100%;
+    }
+
+    .card-grid-item-icon {
+      padding-bottom: 16px;
+    }
+  }
+
+  :deep(.isSelected button) {
+    background: $black;
+    color: $white;
+  }
+
+  :deep(.isSelected .card-grid-item-icon) {
+    padding-bottom: 16px;
+  }
+
+  :deep(.isSelected .card-grid-item-icon span img) {
+    filter: invert(97%) sepia(79%) saturate(11%) hue-rotate(205deg)
+      brightness(103%) contrast(103%);
+  }
+
+  :deep(.isSelected .card-grid-item__caretContainer img) {
+    filter: invert(97%) sepia(79%) saturate(11%) hue-rotate(205deg)
+      brightness(103%) contrast(103%);
+  }
+
+  :deep(.tabbed-cards__listGroup .card-grid__row--small) {
+    grid-row-gap: 12px !important;
+    row-gap: 12px !important;
+  }
+
+  :deep(.tabbed-cards__listGroup section) {
+    background-color: $white !important;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    padding-right: 0px;
+    padding-left: 0px;
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+
+  :deep(.tabbed-cards__listGroup section .section-group__heading h2) {
+    color: $black;
+  }
+
+  :deep(.tabbed-cards__listGroup section .section-group__heading h3) {
+    color: $black;
+  }
+
+  :deep(.tabbed-cards__listGroup section .list_group__card button) {
+    border: 2px solid $lightgray;
+    border-left: thick solid $orange;
+  }
+}
+</style>