@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,310 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <section
+    class="section-group"
+    :class="generatedClass"
+    :style="applyBackgroundOn === 'section' ? backgroundStyle : null"
+  >
+    <slot v-if="$slots.top" name="top"></slot>
+    <container
+      :class="'section-group__container section-group__container--' + size"
+      :style="applyBackgroundOn === 'container' ? backgroundStyle : null"
+    >
+      <div
+        class="section-group__block"
+        :style="applyBackgroundOn === 'block' ? backgroundStyle : null"
+      >
+        <row v-if="title || subHeading || $slots.headerRight">
+          <column :class="'section-group__maincol'">
+            <div :class="`section-group__main ${contentClass}-main`">
+              <slot v-if="$slots.headerTop" name="headerTop"></slot>
+              <rich-text
+                v-if="title"
+                class="section-group__heading"
+                :content="title"
+                :tag="titleTag"
+              />
+              <div v-if="subHeading">
+                <rich-text
+                  class="section-group__subheading section-group__row"
+                  :content="subHeading"
+                />
+              </div>
+              <slot v-if="$slots.headerBottom" name="headerBottom"></slot>
+            </div>
+          </column>
+          <column
+            v-if="$slots.headerRight"
+            :md="'auto'"
+            class="section-group__headingRight section-group__row"
+          >
+            <slot name="headerRight"></slot>
+          </column>
+        </row>
+
+        <row
+          v-if="$slots.preContent"
+          class="section-group__preContent section-group__row"
+        >
+          <column>
+            <slot name="preContent"></slot>
+          </column>
+        </row>
+
+        <div
+          class="section-group__content section-group__row"
+          :class="{
+            ['section-group__content--withoutFooter']: !$slots.footer,
+            ['section-group__content--withoutTitle']: !(
+              $slots.preContent ||
+              title ||
+              subHeading ||
+              $slots.headerRight
+            ),
+            [`${contentClass}`]: hasContentClass
+          }"
+          :style="applyBackgroundOn === 'content' ? backgroundStyle : null"
+        >
+          <slot v-if="$slots.content" name="content"></slot>
+          <row v-if="!$slots.content && $slots.default">
+            <column>
+              <slot name="default"></slot>
+            </column>
+          </row>
+        </div>
+
+        <row
+          v-if="$slots.footer"
+          class="section-group__footer section-group__row"
+        >
+          <slot name="footer"></slot>
+        </row>
+      </div>
+    </container>
+  </section>
+</template>
+
+<script>
+import Row from './../Row/index.vue'
+import Column from './../Column/index.vue'
+import Container from './../Container/index.vue'
+import RichText from './../../Paragraphs/RichText/index.vue'
+import colors from './../../../includes/scss/vars/src/colors.module.scss'
+
+export default {
+  name: 'SectionGroup',
+  components: { Row, Column, RichText, Container },
+  props: {
+    size: {
+      type: String,
+      default: 'page',
+      validator: (value) =>
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0
+    },
+    backgroundVariant: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+        [
+          'none',
+          'light',
+          'dark',
+          'grey',
+          'yellow',
+          'white',
+          'lightblue',
+          'lightred'
+        ].indexOf(value) >= 0
+    },
+    applyBackgroundOn: {
+      type: String,
+      default: 'section',
+      validator: (value) =>
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0
+    },
+    backgroundImage: {
+      type: String,
+      default: ''
+    },
+    noPaddingTop: {
+      type: Boolean
+    },
+    noPaddingBottom: {
+      type: Boolean
+    },
+    bordered: {
+      type: Boolean
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    subHeading: {
+      type: String,
+      default: null
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    contentClass: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    generatedClass() {
+      return {
+        rtl: this.rtl,
+        [`section-group--noPaddingTop`]: this.noPaddingTop,
+        [`section-group--noPaddingBottom`]: this.noPaddingBottom,
+        [`section-group--size-` + this.size]: !!this.size
+      }
+    },
+    backgroundStyle() {
+      let styles
+      const borderRadius =
+        this.applyBackgroundOn !== 'section' ? '8px' : 'initial'
+      if (this.backgroundImage) {
+        styles = {
+          [`background-image`]: `url(${this.backgroundImage})`,
+          [`background-size`]: `cover`,
+          [`background-position`]: `center center`,
+          color: '#ffffff',
+          ['border-radius']: borderRadius
+        }
+      }
+      if (this.backgroundVariant) {
+        let bgColour
+        switch (this.backgroundVariant) {
+          case 'grey':
+          case 'light':
+            bgColour = colors.lightgray
+            break
+          case 'dark':
+            bgColour = colors.gray
+            break
+          case 'yellow':
+            bgColour = colors.orange
+            break
+          case 'white':
+            bgColour = colors.white
+            break
+          case 'lightblue':
+            bgColour = colors.lightblue
+            break
+          case 'lightred':
+            bgColour = colors.lightred
+            break
+          default:
+            bgColour = 'transparent'
+        }
+        styles = {
+          ...(styles || {}),
+          [`background-color`]: bgColour,
+          ['border-radius']: borderRadius
+        }
+      }
+
+      if (this.bordered) {
+        styles = {
+          ...(styles || {}),
+          [`border`]: `1px solid ` + colors.gray
+        }
+      }
+
+      return styles
+    },
+    hasContentClass() {
+      return this.contentClass.length > 0
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.setColumnSize)
+    this.setColumnSize()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setColumnSize)
+  },
+  methods: {
+    setColumnSize() {
+      setTimeout(() => {
+        const parentWidth = window.screen.width
+        const isMobileView = parentWidth < 480
+        const isTabletView = !isMobileView && parentWidth < 767
+        this.$emit('isMobileView', isMobileView)
+        this.$emit('isTabletView', isTabletView)
+        this.$emit('isDesktopView', !isTabletView && !isMobileView)
+        this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.section-group {
+  $basePadding: 16px;
+  padding-top: $basePadding * 2;
+  padding-bottom: $basePadding * 2;
+
+  &--noPaddingTop {
+    padding-top: 0px;
+  }
+
+  &--noPaddingBottom {
+    padding-bottom: 0px;
+  }
+
+  &__row {
+    padding-top: $basePadding;
+  }
+
+  &.rtl {
+    @include makeRTL;
+  }
+
+  &__subheading {
+    display: inline-block;
+  }
+
+  &__content {
+    padding-bottom: $basePadding;
+    > :deep(.row) {
+      row-gap: calc(#{$basePadding} / 2);
+    }
+
+    &--withoutTitle {
+      padding-top: 0;
+    }
+    &--withoutFooter {
+      padding-bottom: 0;
+    }
+  }
+
+  &__heading {
+    display: inline-block;
+    padding-bottom: $basePadding;
+  }
+
+  @media screen and (min-width: 767px) {
+    &--size {
+      &-content {
+        .section-group__block {
+          max-width: calc(66%);
+        }
+      }
+      &-half-content {
+        .section-group__block {
+          max-width: calc(33% - 15px);
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+import SubHeader from './index.vue'
+
+const items = [
+  {
+    icon:
+      '<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
+      '<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 36C28.4411 36 36.5 27.9411 36.5 18C36.5 8.05887 28.4411 0 18.5 0C8.55887 0 0.5 8.05887 0.5 18C0.5 27.9411 8.55887 36 18.5 36ZM22.736 23.38C23.4293 22.7 23.776 21.8333 23.776 20.78C23.776 18.8867 22.636 17.6667 20.356 17.12L17.836 16.56C17.476 16.48 17.2227 16.3533 17.076 16.18C16.9293 15.9933 16.856 15.7667 16.856 15.5C16.856 15.14 17.0093 14.84 17.316 14.6C17.6227 14.36 18.0293 14.24 18.536 14.24C18.9893 14.24 19.4027 14.3467 19.776 14.56C20.1627 14.7733 20.4493 15.1067 20.636 15.56L23.536 14.8C23.2827 14.0533 22.8493 13.4267 22.236 12.92C21.6227 12.4133 20.8827 12.0667 20.016 11.88V9.6H17.356V11.84C16.196 12.0267 15.276 12.46 14.596 13.14C13.9293 13.8067 13.596 14.6533 13.596 15.68C13.596 16.7333 13.9027 17.5467 14.516 18.12C15.1293 18.68 15.9493 19.08 16.976 19.32L19.476 19.88C19.9027 19.96 20.2027 20.0933 20.376 20.28C20.5493 20.4667 20.636 20.7067 20.636 21C20.636 21.3733 20.4693 21.68 20.136 21.92C19.8027 22.1467 19.3493 22.26 18.776 22.26C17.5227 22.26 16.7093 21.7 16.336 20.58L13.276 21.52C13.516 22.36 14.0027 23.06 14.736 23.62C15.4693 24.18 16.3427 24.5467 17.356 24.72V27H20.016V24.7C21.136 24.5 22.0427 24.06 22.736 23.38Z" fill="#191919"/>\n' +
+      '</svg>\n',
+    title: 'Location',
+    description: '717 flinders street, Melbourne',
+    linkHref: 'https://www.google.com/maps?q=717 flinders street, Melbourne',
+    titleSize: 'extra-large',
+    isDescriptionBolded: true
+  },
+  {
+    icon:
+      '<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
+      '<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 36C28.4411 36 36.5 27.9411 36.5 18C36.5 8.05887 28.4411 0 18.5 0C8.55887 0 0.5 8.05887 0.5 18C0.5 27.9411 8.55887 36 18.5 36ZM22.736 23.38C23.4293 22.7 23.776 21.8333 23.776 20.78C23.776 18.8867 22.636 17.6667 20.356 17.12L17.836 16.56C17.476 16.48 17.2227 16.3533 17.076 16.18C16.9293 15.9933 16.856 15.7667 16.856 15.5C16.856 15.14 17.0093 14.84 17.316 14.6C17.6227 14.36 18.0293 14.24 18.536 14.24C18.9893 14.24 19.4027 14.3467 19.776 14.56C20.1627 14.7733 20.4493 15.1067 20.636 15.56L23.536 14.8C23.2827 14.0533 22.8493 13.4267 22.236 12.92C21.6227 12.4133 20.8827 12.0667 20.016 11.88V9.6H17.356V11.84C16.196 12.0267 15.276 12.46 14.596 13.14C13.9293 13.8067 13.596 14.6533 13.596 15.68C13.596 16.7333 13.9027 17.5467 14.516 18.12C15.1293 18.68 15.9493 19.08 16.976 19.32L19.476 19.88C19.9027 19.96 20.2027 20.0933 20.376 20.28C20.5493 20.4667 20.636 20.7067 20.636 21C20.636 21.3733 20.4693 21.68 20.136 21.92C19.8027 22.1467 19.3493 22.26 18.776 22.26C17.5227 22.26 16.7093 21.7 16.336 20.58L13.276 21.52C13.516 22.36 14.0027 23.06 14.736 23.62C15.4693 24.18 16.3427 24.5467 17.356 24.72V27H20.016V24.7C21.136 24.5 22.0427 24.06 22.736 23.38Z" fill="#191919"/>\n' +
+      '</svg>\n',
+    title: 'Date',
+    description: 'Monday 27 September 2021',
+    titleSize: 'extra-large',
+    isDescriptionBolded: true
+  },
+  {
+    icon:
+      '<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
+      '<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 36C28.4411 36 36.5 27.9411 36.5 18C36.5 8.05887 28.4411 0 18.5 0C8.55887 0 0.5 8.05887 0.5 18C0.5 27.9411 8.55887 36 18.5 36ZM22.736 23.38C23.4293 22.7 23.776 21.8333 23.776 20.78C23.776 18.8867 22.636 17.6667 20.356 17.12L17.836 16.56C17.476 16.48 17.2227 16.3533 17.076 16.18C16.9293 15.9933 16.856 15.7667 16.856 15.5C16.856 15.14 17.0093 14.84 17.316 14.6C17.6227 14.36 18.0293 14.24 18.536 14.24C18.9893 14.24 19.4027 14.3467 19.776 14.56C20.1627 14.7733 20.4493 15.1067 20.636 15.56L23.536 14.8C23.2827 14.0533 22.8493 13.4267 22.236 12.92C21.6227 12.4133 20.8827 12.0667 20.016 11.88V9.6H17.356V11.84C16.196 12.0267 15.276 12.46 14.596 13.14C13.9293 13.8067 13.596 14.6533 13.596 15.68C13.596 16.7333 13.9027 17.5467 14.516 18.12C15.1293 18.68 15.9493 19.08 16.976 19.32L19.476 19.88C19.9027 19.96 20.2027 20.0933 20.376 20.28C20.5493 20.4667 20.636 20.7067 20.636 21C20.636 21.3733 20.4693 21.68 20.136 21.92C19.8027 22.1467 19.3493 22.26 18.776 22.26C17.5227 22.26 16.7093 21.7 16.336 20.58L13.276 21.52C13.516 22.36 14.0027 23.06 14.736 23.62C15.4693 24.18 16.3427 24.5467 17.356 24.72V27H20.016V24.7C21.136 24.5 22.0427 24.06 22.736 23.38Z" fill="#191919"/>\n' +
+      '</svg>\n',
+    title: 'Time',
+    description: '2:04pm',
+    titleSize: 'extra-large',
+    isDescriptionBolded: true
+  },
+  {
+    icon:
+      '<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
+      '<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 36C28.4411 36 36.5 27.9411 36.5 18C36.5 8.05887 28.4411 0 18.5 0C8.55887 0 0.5 8.05887 0.5 18C0.5 27.9411 8.55887 36 18.5 36ZM22.736 23.38C23.4293 22.7 23.776 21.8333 23.776 20.78C23.776 18.8867 22.636 17.6667 20.356 17.12L17.836 16.56C17.476 16.48 17.2227 16.3533 17.076 16.18C16.9293 15.9933 16.856 15.7667 16.856 15.5C16.856 15.14 17.0093 14.84 17.316 14.6C17.6227 14.36 18.0293 14.24 18.536 14.24C18.9893 14.24 19.4027 14.3467 19.776 14.56C20.1627 14.7733 20.4493 15.1067 20.636 15.56L23.536 14.8C23.2827 14.0533 22.8493 13.4267 22.236 12.92C21.6227 12.4133 20.8827 12.0667 20.016 11.88V9.6H17.356V11.84C16.196 12.0267 15.276 12.46 14.596 13.14C13.9293 13.8067 13.596 14.6533 13.596 15.68C13.596 16.7333 13.9027 17.5467 14.516 18.12C15.1293 18.68 15.9493 19.08 16.976 19.32L19.476 19.88C19.9027 19.96 20.2027 20.0933 20.376 20.28C20.5493 20.4667 20.636 20.7067 20.636 21C20.636 21.3733 20.4693 21.68 20.136 21.92C19.8027 22.1467 19.3493 22.26 18.776 22.26C17.5227 22.26 16.7093 21.7 16.336 20.58L13.276 21.52C13.516 22.36 14.0027 23.06 14.736 23.62C15.4693 24.18 16.3427 24.5467 17.356 24.72V27H20.016V24.7C21.136 24.5 22.0427 24.06 22.736 23.38Z" fill="#191919"/>\n' +
+      '</svg>\n',
+    title: 'Price',
+    description: 'Free admission',
+    titleSize: 'extra-large',
+    isDescriptionBolded: true
+  }
+]
+
+export default {
+  title: 'Containers/SubHeader',
+  component: SubHeader,
+  argTypes: {
+   background: {
+      control: 'select',
+      options: ['none', 'light', 'dark', 'grey', 'yellow', 'white']
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['after-title', 'before-description']
+    }
+  }
+}
+
+export const Default = {}
+
+Default.args = {
+  itemList: items,
+  alignLeft: false,
+  cardColumnSize: 1,
+  singleLineCards: false,
+  showIcon: true,
+  background: 'none',
+  heading: 'Event Details',
+  iconPosition: 'after-title',
+  type: 'default'
+}

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

@@ -0,0 +1,149 @@
+<template>
+  <card-grid
+    v-if="itemList.length > 0"
+    :cards="itemList"
+    :class="`subheader subheader--${type}`"
+    :title="heading"
+    :title-tag="'h3'"
+    :force-lg-columns-per-row="cardColumnSize"
+    :force-md-columns-per-row="cardColumnSize"
+    :background-variant="background"
+    :is-selectable="true"
+    :row-spacing="isSingleColumn && !singleLineCards ? 'large' : 'small'"
+    @selected="selectedCard"
+    @gridColumnSize="
+      (gridColumnSize) => (isSingleColumn = gridColumnSize === 1)
+    "
+  >
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        :show-divider="!singleLineCards"
+        :card-header-title="singleLineCards ? null : card.title"
+        :header-size="card.titleSize"
+        :header-tag="'h2'"
+        :header-text-align="alignLeft ? 'left' : 'center'"
+        :background-variant="'transparent'"
+        :glyph-src="showIcon ? card.icon : null"
+        :icon-position="iconPosition"
+        :icon-is-bordered="false"
+        :disable-select="!card.linkHref"
+        :card-padding="'none'"
+      >
+        <!-- eslint-disable vue/no-v-html -->
+        <template v-slot:cardDescription>
+          <div
+            v-if="card.description"
+            class="subheader__description"
+            :class="{
+              [`w-100 text-left`]: alignLeft
+            }"
+          >
+            <strong
+              v-if="singleLineCards && card.title"
+              v-html="card.title + ':'"
+            >
+            </strong>
+            <span v-html="card.description"></span>
+          </div>
+        </template>
+      </card-grid-item>
+    </template>
+  </card-grid>
+</template>
+<script>
+import { navigateToPath, isGovSite } from '../../../../lib/utility'
+import CardGrid from '../../Common/CardGrid/index.vue'
+import CardGridItem from '../../Common/CardGridItem/index.vue'
+
+export default {
+  name: 'Subheader',
+  components: { CardGrid, CardGridItem },
+  props: {
+    itemList: {
+      type: Array,
+      required: true
+    },
+    cardColumnSize: {
+      type: Number,
+      default: null
+    },
+    singleLineCards: {
+      type: Boolean
+    },
+    background: {
+      type: String,
+      default: 'none'
+    },
+    heading: {
+      type: String,
+      default: ''
+    },
+    alignLeft: {
+      type: Boolean
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    iconPosition: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isSingleColumn: false
+    }
+  },
+  methods: {
+    selectedCard(card) {
+      // Some custom logic for gov caretaker logic
+      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+        if (!isGovSite(card?.selectedCard?.linkHref)) {
+          this.$store.commit('page/SET_CARETAKER_REF', 'subheader')
+          this.$root.$emit('caretaker-open', card?.selectedCard?.linkHref)
+        } else {
+          navigateToPath.call(
+            this,
+            card?.selectedCard?.linkHref,
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          )
+        }
+      } else {
+        navigateToPath.call(
+          this,
+          card?.selectedCard?.linkHref,
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        )
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.subheader {
+  &--resource {
+    :deep(.card-grid-item__description--withIcon) {
+      align-items: center;
+    }
+  }
+  &--event {
+    background-color: #f3f3f3 !important;
+    padding: {
+      top: 16px !important;
+      bottom: 16px !important;
+    }
+    :deep(.card-grid-item__card .card-title) {
+      margin-bottom: 0;
+      font-size: 20px;
+    }
+    :deep(.icon) {
+      width: 20px;
+    }
+  }
+}
+</style>

package/src/components/Global/AlertStrip/index.stories.js

@@ -0,0 +1,13 @@
+import AlertStrip from './index.vue'
+
+export default {
+  title: 'Global/AlertStrip',
+  component: AlertStrip,
+  args: {
+    isWarning: false,
+    desc: 'Refresh the page in order to show alert strip after dismissing it.',
+    url: '#'
+  },
+};
+
+export const Primary = {}

package/src/components/Global/AlertStrip/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+      v-if="showAlert"
+      dismissible
+      variant="warning"
+      class="alert alert-dismissible global-alert"
+      :class="{
+        'global-alert__warning': isWarning,
+        'global-alert__info': !isWarning
+      }"
+      dismiss-label="Close information message"
+      @dismissed="handleDismissed()"
+    >
+  
+      <div class="global-alert__icon__wrapper">
+        <img
+          :src="isWarning ? warningIcon : infoIcon"
+          class="global-alert__icon"
+          :alt="isWarning ? 'warning' : 'info'"
+        />
+      </div>
+      <div class="global-alert__link__wrapper">
+        <a
+          :href="url"
+          class="global-alert__link"
+          tabindex="0"
+          @click.prevent="handleClick(url)"
+          >{{ desc }}</a
+        >
+        <button type="button" class="btn btn-close btn-close-white" data-bs-dismiss="alert" @click.prevent="showAlert = false, handleDismissed()" aria-label="Close"></button>
+      </div>
+    </div>
+</template>
+
+<script setup>
+  import warningIcon from '../../../assets/icons/Strip/Warning.svg?url'
+  import infoIcon from '../../../assets/icons/Strip/Information.svg?url'
+
+  const props = defineProps({
+      isWarning: {
+        type: Boolean,
+        default: false
+      },
+      desc: {
+        type: String,
+        default:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.'
+      },
+      url: {
+        type: String,
+        default: '#'
+      }
+  })
+</script>
+
+<script>
+import { isAbsoluteUrl } from '../../../../lib/utility'
+
+export default {
+  name: "AlertStrip",
+    
+    data() {
+      return {
+        showAlert: true
+      }
+      
+    },
+  computed: {
+    type() {
+      return this.isWarning ? 'alert' : 'notice'
+    }
+  },
+  methods: {
+    handleClick(link) {
+      if (link) {
+        const attrs = {
+          group: this.type,
+          label: this.desc,
+          clickedOnPage: this.$route?.path,
+          globalStrip: true
+        }
+        if (isAbsoluteUrl(link)) {
+          window.open(link)
+        } else {
+          this.$router.push(link)
+        }
+        if (this.$gtm) {
+          this.$gtm.push({
+            event: `custom.interaction.${this.type}.click`,
+            ...attrs
+          })
+        }
+      }
+    },
+
+    handleDismissed() {
+      this.showAlert = false;
+      this.$emit('dismissed')
+      if (this.$gtm) {
+        const attrs = {
+          group: this.type,
+          label: this.desc,
+          clickedOnPage: this.$route?.path,
+          globalStrip: true
+        }
+        this.$gtm.push({
+          event: `custom.interaction.${this.type}.close`,
+          ...attrs
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.global-alert {
+  .close {
+    padding-right: 24px;
+    padding-left: 24px;
+    height: 100%;
+    text-indent: -9999em;
+    text-transform: uppercase;
+    background-image: url('../../../assets/icons/Strip/AlertDismiss.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      opacity: 1 !important;
+    }
+
+    &:focus {
+      outline: 4px solid #803b94;
+      outline-offset: -5px;
+      z-index: 0;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>