@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,357 @@
+<template>
+  <div v-show="showStrip" :class="`${type}-strip ${themeColor} ${layout}`">
+    <b-alert
+      :class="`${type}-strip__inner`"
+      show
+      v-model="dismissibleAlert"
+      :dismissible="!mini"
+      :variant="`${type === 'alert' ? 'danger' : 'information'}`"
+      :dismiss-label="
+        `Close ${type === 'alert' ? 'alert' : 'information'} message`
+      "
+      @dismissed="handleDismissed()"
+    >
+      <div
+        :role="mini ? 'link' : false"
+        :class="type + '-strip__inner-wrap'"
+        :tabindex="mini ? 0 : false"
+        :style="mini ? 'cursor: pointer;' : false"
+        @click="mini ? handleClick() : false"
+        @keypress.enter="mini ? handleClick() : false"
+      >
+        <div :class="`${type}-strip__icon`">
+          <img v-if="type === 'alert'" :src="exclamationIcon" alt="" />
+          <img v-else :src="infoIcon" alt="" />
+        </div>
+        <div
+          :class="{
+            [`${type}-strip__content`]: true,
+            [`${type}-strip__content--left`]: !rtl,
+            [`${type}-strip__content--right`]: rtl
+          }"
+        >
+          <span
+            :class="{
+              [`${type}-strip__heading`]: true,
+              [`${type}-strip__heading--left`]: !rtl,
+              [`${type}-strip__heading--right`]: rtl
+            }"
+            >{{ stripTitle }}</span
+          >
+          <rich-text :content="stripContent" :without-container="true" />
+        </div>
+        <img
+          v-if="mini"
+          height="16"
+          class="alert-strip__icon--caret"
+          alt=""
+          :src="chevronIcon"
+        />
+      </div>
+    </b-alert>
+    <div v-if="mini && type === 'alert'" class="alert-strip__link">
+      <nuxt-link :to="'/safety-alerts'">All safety alerts</nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dismissibleAlert = ref(true)
+</script>
+
+<script>
+import exclamationIcon from '../../../assets/icons/Strip/Exclamation triangle fill.svg?url'
+import arrowIcon from '../../../assets/icons/Strip/Arrow right.svg?url'
+import dismissIcon from '../../../assets/icons/Strip/Dismiss.svg?url'
+import infoIcon from '../../../assets/icons/Strip/Info circle fill.svg?url'
+import chevronIcon from '../../../assets/icons/caret-right.svg?url'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BAlert } from 'bootstrap-vue-next'
+
+export default {
+  name: 'Strip',
+  components: {
+    RichText,
+    BAlert
+  },
+  props: {
+    stripHeading: {
+      type: String,
+      default: ''
+    },
+    stripContent: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: '#'
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    mini: {
+      type: Boolean,
+      default: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showStrip: true,
+      exclamationIcon,
+      arrowIcon,
+      dismissIcon,
+      infoIcon,
+      chevronIcon
+    }
+  },
+  computed: {
+    layout() {
+      return this.mini ? 'mini' : 'full'
+    },
+    themeColor() {
+      return this.type === 'alert' ? 'red' : 'blue'
+    },
+    stripTitle() {
+      if (this.mini && this.type === 'alert') {
+        return 'Safety alert'
+      } else if (this.mini && this.type === 'notice') {
+        return 'Information'
+      } else if (this.stripHeading) {
+        return this.stripHeading
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    handleClick() {
+      const attrs = {
+        group: this.type,
+        label: this.stripContent,
+        link: this.mini ? this.url : false,
+        clickedOnPage: this.$route.path,
+        globalStrip: false
+      }
+      if (this.$gtm) {
+        this.$gtm.push({
+          event: `custom.interaction.${this.type}.click`,
+          ...attrs
+        })
+      }
+      this.$router.push(this.url)
+    },
+    handleDismissed() {
+      this.showStrip = false
+      this.$emit('dismissed')
+
+      if (this.$gtm) {
+        const attrs = {
+          group: this.type,
+          label: this.stripHeading,
+          clickedOnPage: this.$route.path,
+          globalStrip: false
+        }
+        this.$gtm.push({
+          event: `custom.interaction.${this.type}.close`,
+          ...attrs
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.red {
+  .alert-strip {
+    &__inner {
+      border: 2px solid $red;
+    }
+    &__icon {
+      background-color: $red;
+    }
+  }
+}
+
+.blue {
+  .notice-strip {
+    &__inner {
+      border: 2px solid $blue;
+    }
+    &__icon {
+      background-color: $blue;
+    }
+  }
+}
+
+.alert-strip,
+.notice-strip {
+  position: relative;
+  &__inner {
+    background: $white;
+    display: flex;
+    border-radius: 6px;
+    margin-bottom: 0;
+    padding: 0;
+    &-wrap {
+      display: flex;
+      width: 100%;
+    }
+  }
+
+  &__content {
+    padding: 16px;
+    background-color: $white;
+    border-radius: 0 4px 4px 0;
+    width: 100%;
+
+    &--left {
+      padding-right: 48px;
+    }
+
+    &--right {
+      text-align: right;
+      padding-right: 48px;
+      flex-flow: row-reverse;
+    }
+
+    div,
+    p {
+      color: $darkgray;
+    }
+
+    :deep(p:last-of-type) {
+      margin-bottom: 0;
+    }
+
+    :deep(a.cta-button) {
+      margin-bottom: 0;
+    }
+  }
+  &__icon {
+    padding: 10px;
+    border-radius: 4px 0 0 4px;
+    display: flex;
+    width: 56px;
+
+    img {
+      width: 36px;
+    }
+  }
+  &__heading {
+    color: $black;
+    //styleName: Heading/H3 card-title;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+.full {
+  .alert-strip,
+  .notice-strip {
+    &__content {
+      &--left {
+        span {
+          margin-right: 16px;
+        }
+      }
+      &--right {
+        span {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+  .notice-strip {
+    &__content {
+      &--left {
+        .notice-strip__heading {
+          display: block;
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+  .alert-strip {
+    &__content {
+      &--left {
+        .alert-strip__heading {
+          display: inline-block;
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+}
+.mini {
+  .alert-strip,
+  .notice-strip {
+    &__content {
+      display: flex;
+
+      p {
+        max-width: 794px;
+      }
+
+      @include mq('sm') {
+        flex-direction: column;
+        margin-right: 16px;
+
+        p {
+          margin-top: 8px;
+        }
+      }
+    }
+    &__heading {
+      max-width: 195px;
+
+      &--right {
+        margin-left: 36px;
+      }
+
+      &--left {
+        margin-right: 36px;
+      }
+    }
+
+    &__link {
+      margin-top: 16px;
+      margin-bottom: 36px;
+      text-align: right;
+
+      a {
+        color: $black;
+
+        &:focus {
+          text-decoration: underline;
+        }
+      }
+    }
+    &__icon {
+      &--caret {
+        display: block;
+        right: 16px;
+        position: absolute;
+        top: 16px;
+      }
+    }
+  }
+}
+
+.alert-dismissible {
+  :deep(.close) {
+    text-indent: -9999px;
+    z-index: 1;
+  }
+}
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

package/src/components/Paragraphs/Accordion/AccordionItem/index.vue

@@ -0,0 +1,232 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="subcomponent--accordion-item">
+    <b-card
+      v-if="title"
+      class="accordion-item"
+      :class="{
+        rtl: rtl,
+        '--with-pre-heading': preHeading && showPreHeading
+      }"
+    >
+      <a
+        :id="'accordion' + _uid ? _uid : ''"
+        role="button"
+        :aria-expanded="showAccordion ? 'true' : 'false'"
+        class="accordion-item__title"
+        :aria-controls="'sect' + _uid ? _uid : ''"
+        tabindex="0"
+        @click.prevent="toggleAccordion"
+        @keypress.enter="toggleAccordion"
+      >
+        <span
+          v-if="preHeading && showPreHeading"
+          class="accordion-item__pre-heading"
+          >{{ preHeading }}</span
+        >
+        <rich-text :tag="'h4'" :tag-class="'card-title'" :content="title" />
+        <icon
+          v-show="showAccordion && content"
+          width="18"
+          height="12"
+          class="accordion-icon"
+          :icon-alt="'collapse'"
+          :glyph="CaretUp"
+          :class="{
+            '--with-pre-heading': preHeading && showPreHeading
+          }"
+        />
+        <icon
+          v-show="!showAccordion && content"
+          width="18"
+          height="12"
+          class="accordion-icon"
+          :icon-alt="'expand'"
+          :glyph="CaretDown"
+          :class="{
+            '--with-pre-heading': preHeading && showPreHeading
+          }"
+        />
+      </a>
+      <b-card-body v-if="content">
+        <div
+          v-show="showAccordion"
+          :id="'sect' + _uid ? _uid : ''"
+          class="accordion-item__content"
+          role="region"
+          :aria-labelledby="'accordion' + _uid ? _uid : ''"
+        >
+          <rich-text :content="content" />
+        </div>
+      </b-card-body>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import CaretDown from '../../../../assets/icons/caret-down.svg?url'
+import CaretUp from '../../../../assets/icons/caret-up.svg?url'
+import RichText from '../../RichText/index.vue'
+import Icon from '../../../SubComponents/Icon/index.vue'
+import { BCard, BCardBody } from 'bootstrap-vue-next'
+
+export default {
+  name: 'AccordionItem',
+  components: {
+    RichText,
+    Icon,
+    BCard,
+    BCardBody
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Item'
+    },
+    preHeading: {
+      type: String,
+      default: 'PRE-HEADING'
+    },
+    content: {
+      type: String,
+      default: null
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    showPreHeading: {
+      type: Boolean,
+      default: false
+    },
+    meta: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data: () => ({
+    showAccordion: false,
+    CaretDown,
+    CaretUp
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.showAccordion = this.open
+    })
+  },
+  methods: {
+    toggleAccordion() {
+      this.showAccordion = !this.showAccordion
+      if (this.showAccordion) {
+        this.$root.$emit('accordionItemOpen', this.meta)
+      } else {
+        this.$root.$emit('accordionItemClose', this.meta)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../../../includes/scss/all';
+.subcomponent--accordion-item {
+  .accordion-item {
+    border-radius: 6px;
+    border: none;
+
+    &.--with-pre-heading {
+      max-width: 540px;
+    }
+
+    .card-body {
+      padding: 0;
+      min-height: 0;
+    }
+
+    &__title {
+      padding: {
+        top: 16px;
+        bottom: 16px;
+        left: 32px;
+        right: 32px;
+      }
+
+      border-radius: 6px;
+      border: none;
+      color: inherit;
+
+      display: block;
+      text-decoration: none;
+      position: relative;
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      background: $lightgray none;
+
+      .accordion-icon {
+        position: absolute;
+        right: 32px;
+        width: 16px;
+        height: 11px;
+
+        &.--with-pre-heading {
+          top: 32px;
+        }
+      }
+      h4 {
+        //styleName: Heading/H3 card-title;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        letter-spacing: 0px;
+      }
+    }
+
+    &__pre-heading {
+      display: block;
+      color: $red;
+      text-transform: uppercase;
+      //styleName: Label/Extra small;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 0px;
+      text-align: left;
+    }
+
+    &__content {
+      padding: 32px;
+      ul,
+      ol {
+        padding: 0;
+        margin: {
+          left: 32px;
+        }
+        li {
+          margin-bottom: 16px;
+        }
+      }
+    }
+
+    &.rtl {
+      margin-left: auto;
+
+      * {
+        direction: rtl;
+        text-align: right;
+      }
+
+      .accordion-icon {
+        right: auto;
+        left: 32px;
+      }
+    }
+  }
+}
+</style>