@worksafevictoria/wcl7.5 1.0.0

package/src/components/SubComponents/ResourceGroup/styles.scss

@@ -0,0 +1,317 @@
+$black: #000000 !default;
+$white: #ffffff !default;
+
+@mixin label-small {
+  //styleName: Label/Small;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: $black;
+}
+@mixin menu-open {
+  background: $white;
+  padding-left: 15px;
+  padding-right: 15px;
+  overflow: hidden;
+  min-height: 100px;
+}
+@mixin menu-title {
+  background-color: $lightgray;
+  border: 1px solid $lightgray;
+  position: relative;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.card_item {
+  position: relative;
+  z-index: 3;
+
+
+  &__body {
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    animation-name: fade-in;
+    animation-fill-mode: both;
+    animation-duration: 1s;
+  }
+
+  &__meta {
+    @include label-small;
+    font-weight: 400;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  &__desc {
+    &.rtl {
+      @include makeRTL;
+    }
+  }
+  
+  &__main {
+      p,li,a {
+          color: $black;
+          line-height: 20px;
+      }
+
+      .nolink {
+          cursor: default;
+      }
+
+      &__menu {
+          padding: 0;
+
+          ul, li, p {
+              list-style: none;
+              padding: 0;
+              margin: 0;
+          }
+
+          ul.submenu {
+              li {
+                  .col {
+                      float: right;
+                      width: auto;
+                  }
+              }
+          }
+          .card_item-menu {
+              &__title {
+                  border: 1px solid $lightgray;
+                  position: relative;
+                  padding: 0;
+                  border-radius: 6px;
+                  @media screen and (max-width: 767px) {
+                      cursor: pointer;
+
+                      a {
+                          cursor: pointer;
+                      }
+                  }
+
+                  a {
+                      display: block;
+                      -webkit-text-decoration: none;
+                      text-decoration: none;
+                  }
+
+                  &--link {
+                      padding-left: 15px;
+                      padding-right: 15px;
+                      margin-bottom: 0px;
+                      margin-top: 5px;
+                      position: relative;
+
+                      > h3.card_item-menu__title--small {
+                          @include label-small;
+                          display: inline-block; 
+                      }
+
+                  }
+                  &__caret {
+                      position: absolute;
+                      right: 15px;
+                      top: 7px;
+                  }
+              }
+              &__item {
+                  margin: 0.5rem 0 1rem;
+                  font-size: 16px;
+
+                  &--icon {
+                      margin-left: 0.75rem;
+                  }
+                  &--link {
+                      //styleName: Link/Footer;
+                      @include label-small;
+                      &:hover {
+                          opacity: 1;
+                      }
+                      @media screen and (max-width: 767px) {
+                          display: block;
+                      }
+                  }
+
+                  @media screen and (max-width: 767px) {
+                      &--hide {
+                          display: none !important;
+                      }
+
+                      &:last-of-type {
+                          margin-bottom: 31px;
+                      }
+                  }
+              }
+
+          }
+          
+      }  
+  }
+
+  &__footer {
+    .card_item-button {
+        
+        margin-left: -2px;
+        margin-right: -2px;
+        margin-top: 16px;
+       
+        &--icon {
+            width: 100%;              
+            border-radius: 0 0px 5px 5px;
+            text-align: right !important;
+            margin-bottom: -2px;
+            
+            &:hover, &:focus {
+                background-color: $black;
+                color: $white;
+                :deep(img) {
+                    -webkit-filter: grayscale(1) invert(1);
+                    filter: grayscale(1) invert(1);
+                }
+            }
+            
+        }
+    }
+
+    &--resource-list {
+      flex: 0 0 100%;
+      max-width: 100%;
+      @media screen and (min-width: 768px) {
+        flex: 0 0 29%;
+        max-width: 29%;
+
+        .card_item-button {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  &__resource-list {
+      .card_item {
+        &__main {
+          &__menu {
+            @media screen and (min-width: 768px) {
+                > div:nth-child(1) {
+                  padding-right: 0;
+                  flex: 0 0 70%;
+                  max-width: 70%;
+                }
+                background-color: $lightgray;
+                border-radius: 0 0px 5px 5px;
+                margin-left: -16px;
+                justify-content: space-between;
+            }
+
+            ul.submenu {
+               @media screen and (min-width: 768px) {
+                  display: flex;
+                  flex-direction: row;
+              }
+              &.isOpen {
+                @media screen and (max-width: 767px) {
+                      @include menu-open;
+                }
+              }
+
+              li {
+                 @media screen and (min-width: 768px) {
+                      margin-top: 16px;
+                  }
+                  .col {
+                      float: right;
+                      width: auto;
+                      @media screen and (min-width: 768px) {
+                          padding-top: 0;
+                          padding-bottom: 0;
+                          padding-left: 5px;
+                          padding-right: 15px;
+                      }
+                  }
+
+                  @media screen and (min-width: 768px) {
+                      display: inline-block;
+                  }
+
+              }
+            }
+
+            .card_item-menu {
+              @media screen and (min-width: 768px) {
+                  padding-bottom: 0;
+              }
+
+              &__title {
+                background-color: $lightgray;
+
+                @media screen and (min-width: 768px) {
+                    background-color: transparent;
+                    border: none;
+                }
+
+                &--link {
+                  @media screen and (min-width: 768px) {
+                    display: none !important;
+                  }
+                }
+                &__caret {
+                    @media screen and (min-width: 768px) {
+                        background-color: transparent;
+                        border: none;
+                    }
+                }
+              }
+
+            }
+          }
+        }
+     
+    }
+    
+  }
+  &__resource-group {
+    .card_item {
+      &__main {
+        &__menu {
+          > div {
+            flex: 0 0 100%;
+            max-width: 100%;
+          }
+          ul.submenu {
+              &.isOpen {
+                 @include menu-open;
+              }
+          }
+          .card_item-menu {
+            &__title {
+              @include menu-title;
+            }
+            &__item {
+                &--hide {
+                    display: none !important;
+                }
+            }
+          }
+          
+        }
+      }
+    }
+    
+  } 
+}
+
+.mobilescreen {
+    display: block;
+    @media screen and (min-width: 767px) {
+        display: none !important;
+    }
+}

package/src/components/SubComponents/ResourceGroup/switcher.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="switcher">
+    <div v-for="(o, i) in options" :key="i" class="switcher__item">
+      <filter-button
+        :selected="selected === o"
+        :is-reset="false"
+        @clicked="$emit('switched', o), (selected = o), (switched = true)"
+      >
+        <span>{{ getOptionAlias ? getOptionAlias(o) : o }}</span>
+        <span class="visually-hidden"> filters content below</span>
+      </filter-button>
+    </div>
+    <div v-if="switched" class="switcher__item">
+      <filter-button
+        :is-reset="true"
+        @clicked="$emit('reset'), (selected = null), (switched = false)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import FilterButton from '../../Common/FilterButton/index.vue'
+
+export default {
+  components: {
+    FilterButton
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    getOptionAlias: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      switched: false,
+      selected: null
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.switcher {
+  &__item {
+    display: inline-block;
+    padding-right: 16px;
+    line-height: 3;
+    @include mq('xs') {
+      padding-right: 8px;
+    }
+    &:last-child {
+      padding-right: 0px;
+    }
+  }
+}
+</style>

package/src/components/SubComponents/Search/SearchListing/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="app-search-result">
+    <div v-if="isLoading" class="app-search-result__loader" ></div>
+    <p
+      v-if="!(isTypeahead && numFound > 0) && !isLoading"
+      class="app-search-result__found"
+    >
+      <span>{{ numFound }} results found for {{ query }}</span>
+    </p>
+    <card-grid
+      v-if="results && results.length > 0 && !isLoading"
+      :force-lg-columns-per-row="1"
+      :force-md-columns-per-row="1"
+      :cards="results"
+      :is-selectable="true"
+      :size="'full'"
+      :row-spacing="'none'"
+      :no-padding-top="true"
+      @selected="onSelectResult"
+    >
+      <template v-slot:cardItem="{ card }">
+        <card-grid-item
+          :header-size="isTypeahead ? 'medium' : 'large'"
+          :card-header-title="card.title"
+          :caret="'right'"
+          :caret-position="'top'"
+          :border-type="'none'"
+          :card-padding="isTypeahead ? 'small' : 'large'"
+          :description="
+            !isTypeahead && card.description
+              ? truncate(card.description, 144)
+              : ''
+          "
+          :strip-description-html="true"
+          :taxonomies="{
+            industry: card.industry,
+            topic: card.topic,
+            language: card.language
+          }"
+        />
+      </template>
+      <template
+        v-if="results && results.length > 0 && numFound > 0"
+        v-slot:cardGridFooter
+      >
+        <column>
+          <a
+            v-if="isTypeahead && numFound > results.length"
+            href="javascript:;"
+            class="app-search-result__more"
+            @click="showMoreResults"
+          >
+            More Results ({{ numFound - results.length }})
+          </a>
+
+          <pagination
+            v-if="!isTypeahead"
+            :aria-label="'search result pagination'"
+            :rows="pageLimit"
+            :offset="offset"
+            :max-pages="4"
+            :total="numFound"
+            :align="'start'"
+            @prev="(pg) => $emit('pageChanged', pg.currentPage)"
+            @next="(pg) => $emit('pageChanged', pg.currentPage)"
+            @pageClicked="(pg) => $emit('pageChanged', pg.currentPage)"
+          />
+        </column>
+      </template>
+    </card-grid>
+  </div>
+</template>
+
+<script>
+import CardGrid from '../../../Common/CardGrid/index.vue'
+import CardGridItem from '../../../Common/CardGridItem/index.vue'
+import { navigateToPath } from '../../../../../lib/utility'
+import Pagination from '../../Pagination/index.vue'
+import Column from '../../../Containers/Column/index.vue'
+
+export default {
+  name: 'SearchListing',
+  components: { CardGrid, CardGridItem, Pagination, Column },
+  props: {
+    isTypeahead: {
+      type: Boolean,
+      required: false
+    },
+    pageLimit: {
+      type: Number,
+      required: false,
+      default: 20
+    },
+    numFound: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    query: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    results: {
+      type: Array,
+      default: () => []
+    },
+    offset: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  methods: {
+    onClickItem(event, item, index) {
+      this.$emit('select-item', event.target, item, index)
+    },
+    truncate(value, limit) {
+      if (value.length > limit) {
+        value = value.substring(0, limit - 3) + '...'
+      }
+      return value
+    },
+    onSelectResult(card) {
+      navigateToPath.call(
+        this,
+        card?.selectedCard?.link,
+        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+      )
+      this.$nextTick(() => this.$emit('selected'))
+      let attrs = {
+        location:
+          this.$route?.path === '/'
+            ? 'Homepage'
+            : this.$route?.path === '/search'
+            ? 'Search Page'
+            : this.$route?.path,
+        label: this.query,
+        results: this.results.length,
+        clickText: card.selectedCard.title,
+        clickURL: card.selectedCard.link,
+        clickPosition: card.selectedCardModelIndex + 1,
+        targetElement: card.ev.target,
+        industry: card?.selectedCard?.industry,
+        topic: card?.selectedCard?.topic,
+        language: card?.selectedCard?.language
+      }
+      if (this.$gtm) {
+        this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
+      }
+    },
+    showMoreResults() {
+      if (this.$nuxt) {
+        this.$router.push('/search?q=' + this.query)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../includes/scss/all';
+.app-search-result {
+  &__found {
+    margin: 40px 16px;
+  }
+
+  :deep(.card-grid-item__card) {
+    border-radius: 0 !important;
+    border-bottom: solid $gray-alt 1px;
+    &:hover {
+      background-color: $orange !important;
+      opacity: 1 !important;
+    }
+  }
+
+  &__more {
+    text-decoration: underline;
+    padding: 0 32px;
+    width: 100%;
+  }
+
+  &__loader {
+    margin: 32px auto;
+    border: 16px solid $white;
+    border-radius: 50%;
+    border-top: 16px solid $orange;
+    width: 80px;
+    height: 80px;
+    -webkit-animation: loader-spin 2s linear infinite; /* Safari */
+    animation: loader-spin 2s linear infinite;
+  }
+
+  /* Safari */
+  @-webkit-keyframes loader-spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+  @keyframes loader-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+import Search from './index.vue'
+
+const contentParser = () => {
+  return Promise.resolve({
+    results: [
+      {
+        title: 'Content title 1',
+        description: 'Content description 2'
+      }
+    ],
+    offset: 0,
+    numFound: 1000
+  })
+}
+
+export default {
+  title: 'SubComponents/Search',
+  component: Search,
+  argTypes: {
+    pageLimit: {
+      control: 'number'
+    },
+    contentParser: {
+      control: 'function',
+      table: { disable: true }
+    },
+    isTypeahead: {
+      control: 'boolean'
+    },
+    initialSearchQuery: {
+      control: 'text'
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    pageLimit: 5,
+    contentParser: contentParser,
+    isTypeahead: false,
+    initialSearchQuery: 'Metal'
+  }
+}