@worksafevictoria/wcl7.5 1.0.0

package/src/components/SubComponents/ResourceGroup/List/index.stories.js

@@ -0,0 +1,268 @@
+import ResourceGroup from './../index.vue'
+
+const bundleContent = ['Document', 'Presentation', 'Spreadsheet', 'Resource']
+
+export default {
+  title: 'SubComponents/ResourceGroup',
+  component: { ResourceGroup },
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['grey', 'white', 'yellow']
+    },
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+    columns: {
+      control: 'select',
+      options: [4, 3, 2, 1]
+    },
+    fetchContent: {
+      control: 'function',
+      table: { disable: true }
+    },
+   type: {
+      control: 'text',
+      table: { disable: true }
+    },
+    rows: {
+      control: 'select',
+      options: [3, 2, 1]
+    },
+    resourceType: {
+      control: 'text',
+     table: { disable: true }
+    }
+  },
+  args: {
+    background: 'white',
+    collectionTitle: 'Resource List with Loader',
+    titleTag: 'h2',
+    bundle: bundleContent,
+    columns: 1,
+    initialDisplyLimit: 3,
+    fetchContent: null,
+    enableBundleFilter: false,
+    type: 'auto',
+    showFilter: true,
+    rows: 3,
+    hasPreselectedFilters: false,
+    totalResults: 10,
+    filterResults: 1,
+    showLoadMore: false,
+    resourceType: 'resource-list'
+  }
+}
+
+const DefaultContent = (args) => ({
+  components: { ResourceGroup },
+  setup() {
+    return { args }
+  },
+  mounted() {
+    this.reset()
+    setTimeout(() => {
+      this.loading = false
+    }, 1000)
+  },
+  data() {
+    return {
+      rerenderKey: 0,
+      loading: true,
+      title: [
+        'Card title 1',
+        'Card title goes here. long text long text long text',
+        'No description and no image',
+        'القوانين والأنظمة',
+        'Card title 2',
+        'Card title 2 goes here. long text long text long text',
+        'No description and no image 2',
+        'القوانين والأنظمة 2',
+        'Card title 3',
+        'Card title 3 goes here. long text long text long text'
+      ],
+      size: [
+        '149.5 kB',
+        '555.23 kB',
+        '12.5 kB',
+        '321.59',
+        '149.5 kB',
+        '555.23 kB',
+        '12.5 kB',
+        '321.59',
+        '555.23 kB',
+        '12.5 kB'
+      ],
+      types: [
+        'PDF',
+        'DOC',
+        'XLS',
+        'PPT',
+        'PDF',
+        'DOC',
+        'XLS',
+        'PPT',
+        'PDF',
+        'DOC'
+      ],
+      length: [
+        '2 pages',
+        '3 pages',
+        '2 sheets',
+        '4 slides',
+        '2 pages',
+        '3 pages',
+        '2 sheets',
+        '4 slides',
+        '4 slides',
+        '2 pages'
+      ],
+      level: [
+        'Medium',
+        'Easy',
+        'Medium',
+        'Hard',
+        'Medium',
+        'Easy',
+        'Medium',
+        'Hard',
+        'Easy',
+        'Medium'
+      ],
+      pillText: [
+        'Resource',
+        'Document',
+        'Resource',
+        'Presentation',
+        'Resource',
+        'Document',
+        'Resource',
+        'Spreadsheet',
+        'Document',
+        'Presentation'
+      ]
+    }
+  },
+  computed: {
+    searchResults() {
+      return (bundle) => {
+        const cardItem = {
+          title: undefined,
+          fileLink: null,
+          pillText: null,
+          date: null,
+          fileSize: null,
+          fileType: null,
+          fileLength: null,
+          fileName: null,
+          readingLevel: null,
+          itemId: null
+        }
+
+        return {
+          results: Array(args.totalResults)
+            .fill(cardItem)
+            .map((card) => JSON.parse(JSON.stringify(card)))
+            .map((card, index) => {
+              card.itemId = 'resource - ' + index
+              card.title = this.title[index]
+              card.fileLength = this.length[index]
+              card.fileSize = this.size[index]
+              card.fileType = this.types[index]
+              card.readingLevel = this.level[index]
+              card.pillText = bundle
+              card.date = '12 Aug 2020'
+              card.fileLink =
+                '/sites/default/files/2022-08/ISBN-Support-coordination-program_person-centered-plan-2022-08.pdf'
+              card.fileName =
+                'ISBN-Support-coordination-program_person-centered-plan-2022-08.pdf'
+              card.resourseType = 'resource-group'
+              card.dateTitle = 'Published'
+              card.fileTypeTitle = 'File type'
+              card.fileSizeTitle = 'File size'
+              card.fileLengthTitle = 'Length'
+              card.readingLevelTitle = 'Reading level'
+              card.dropdownTitle = 'File information'
+              card.ctaTitle = `Download ${card.fileType}`
+              card.ctaAlt = `Download ${card.fileType}`
+
+              return card
+            }),
+          numFound: args.totalResults
+        }
+      }
+    }
+  },
+  methods: {
+    reset() {
+      this.rerenderKey += 1
+      setTimeout(() => {
+        this.$refs.resourcelist.loadFiltersAndContent()
+      })
+    },
+    fetchCards(qs, filters, bundleIndex) {
+
+      const hasFilters = Object.values(filters).some(
+        (filter) => filter.filter((item) => !item.preselected).length > 0
+      )
+
+      const data = JSON.parse(JSON.stringify(this.searchResults(qs?.bundle)))
+
+      data.results = hasFilters
+        ? data.results.slice(0, this.filterResults)
+        : data.results.slice(qs.start, qs.start + qs.rows)
+      data.numFound = hasFilters ? this.filterResults : data.numFound
+
+      return Promise.resolve(data)
+    },
+    fetchFilters() {
+      return Promise.resolve([])
+    },
+    getBundleAlias(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+  },
+  watch: {
+    showFilter: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    rows: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    totalResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    filterResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    hasPreselectedFilters: {
+      handler: function() {
+        this.reset()
+      }
+    }
+  },
+  template: `
+  <resource-group
+    v-bind="args"
+    ref="resourcelist"
+    :key="rerenderKey"
+    :loading="loading"
+    :fetch-content="fetchCards"
+    :get-bundle-alias="getBundleAlias"
+    :fetch-filters="fetchFilters"
+    :title="args.collectionTitle"
+    :initial-disply-limit="args.rows * 3"
+    />
+  `
+})
+
+export const List = DefaultContent.bind({})

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

@@ -0,0 +1,221 @@
+<template>
+  <div
+    v-if="card"
+    class="card_item__body card_item__main"
+    :class="`card_item__${cardResourseType}`"
+  >
+    <row class="card_item__main__menu">
+      <column :md="8" :xs="12">
+        <div class="card_item-menu">
+          <ul>
+            <li
+              class="card_item-menu__title"
+              @click="handleMenuItemClick(menu)"
+              @keyup="handleMenuItemKeyup(menu, $event)"
+            >
+              <a
+                :aria-expanded="
+                  isMobile || isResourceGroup
+                    ? cardMenuIsOpen
+                      ? 'true'
+                      : 'false'
+                    : false
+                "
+                role="button"
+                class="card_item-menu__title--link nolink"
+              >
+                <img
+                  v-show="!cardMenuIsOpen"
+                  :src="CaretDown"
+                  height="12"
+                  width="17"
+                  class="card_item-menu__title__caret"
+                  alt=""
+                />
+                <img
+                  v-show="cardMenuIsOpen"
+                  :src="CaretUp"
+                  height="12"
+                  width="17"
+                  class="card_item-menu__title__caret"
+                  alt=""
+                />
+                <h3 class="card_item-menu__title--small">
+                  {{ card.dropdownTitle }}
+                </h3></a
+              >
+              <ul class="submenu" :class="cardMenuIsOpen ? 'isOpen' : false">
+                <li
+                  v-if="card.fileType"
+                  class="card_item-menu__item card_item-menu__item--link"
+                  :class="{
+                    'card_item-menu__item--hide': !cardMenuIsOpen
+                  }"
+                >
+                  {{ card.fileTypeTitle }}
+                  <column class="card_item__meta card_item__meta--filetype">
+                    <rich-text
+                      :content="card.fileType"
+                      :without-container="true"
+                    />
+                  </column>
+                </li>
+                <li
+                  v-if="card.fileSize"
+                  class="card_item-menu__item card_item-menu__item--link"
+                  :class="{
+                    'card_item-menu__item--hide': !cardMenuIsOpen
+                  }"
+                >
+                  {{ card.fileSizeTitle }}
+                  <column class="card_item__meta card_item__meta--filesize">
+                    <rich-text
+                      :content="card.fileSize"
+                      :without-container="true"
+                    />
+                  </column>
+                </li>
+                <li
+                  v-if="card.fileLength"
+                  class="card_item-menu__item card_item-menu__item--link"
+                  :class="{
+                    'card_item-menu__item--hide': !cardMenuIsOpen
+                  }"
+                >
+                  {{ card.fileLengthTitle }}
+                  <column class="card_item__meta card_item__meta--filelength">
+                    <rich-text
+                      :content="card.fileLength"
+                      :without-container="true"
+                    />
+                  </column>
+                </li>
+                <li
+                  v-if="card.readingLevel"
+                  class="card_item-menu__item card_item-menu__item--link"
+                  :class="{
+                    'card_item-menu__item--hide': !cardMenuIsOpen
+                  }"
+                >
+                  {{ card.readingLevelTitle }}
+                  <column class="card_item__meta card_item__meta--readinglevel">
+                    <rich-text
+                      :content="card.readingLevel"
+                      :without-container="true"
+                    />
+                  </column>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </column>
+
+      <template v-if="cardResourseType === 'resource-list'">
+        <card-footer :card="card" :resource-type="cardResourseType" />
+      </template>
+    </row>
+  </div>
+</template>
+
+<script>
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import CardFooter from './cardfooter.vue'
+import documentsvg from '../../../assets/icons/document.svg?url'
+import CaretUp from '../../../assets/icons/caret-up.svg?url'
+import CaretDown from '../../../assets/icons/caret-down.svg?url'
+import RichText from '../../Paragraphs/RichText/index.vue'
+
+export default {
+  components: {
+    Column,
+    Row,
+    CardFooter,
+    RichText
+  },
+  props: {
+    card: {
+      type: Object,
+      required: true
+    },
+    resourceType: {
+      type: String,
+      default: 'resource-group'
+    }
+  },
+  data() {
+    return {
+      cardMenuIsOpen: false,
+      cardResourseType: this.resourceType,
+      menu: [this.card],
+      documentsvg,
+      CaretUp,
+      CaretDown,
+      windowWidth: 0
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.windowWidth < 768
+    },
+    isResourceGroup() {
+      return this.cardResourseType === 'resource-group' ? true : false
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize)
+    })
+    this.onResize()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    handleMenuItemClick(menuItem) {
+      if (this.isMobile || this.isResourceGroup) {
+        for (let i = 0; i < menuItem.length; i++) {
+          let newMenuItem = menuItem[i]
+
+          this.cardMenuIsOpen = !this.cardMenuIsOpen
+
+          newMenuItem.isOpen = false
+          menuItem.splice(i, 1, newMenuItem)
+        }
+      }
+    },
+    handleMenuItemKeyup(menuItem, event) {
+      if (this.isMobile || this.isResourceGroup) {
+        if (event.keyCode === 32 || event.keyCode === 13) {
+          for (let i = 0; i < menuItem.length; i++) {
+            let newMenuItem = menuItem[i]
+            this.cardMenuIsOpen = !this.cardMenuIsOpen
+            newMenuItem.isOpen = false
+            menuItem.splice(i, 1, newMenuItem)
+          }
+        }
+      }
+    },
+    onResize() {
+      this.windowWidth = window.innerWidth
+      let titles = document.getElementsByClassName('card_item-menu__title')
+      if (Array.isArray(titles)) {
+        if (this.isMobile || this.isResourceGroup) {
+          titles.forEach((t) => {
+            t.setAttribute('tabIndex', '0')
+          })
+        } else {
+          titles.forEach((t) => {
+            t.removeAttribute('tabIndex')
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@import './styles';
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="card"
+    class="card_item__footer"
+    :class="`card_item__footer--${cardResourseType}`"
+  >
+    <div class="card_item-button">
+      <cta-button
+        :url="`${card.ctaLink}`"
+        :alt="`${card.ctaAlt}`"
+        :glyph="documentsvg"
+        :is-centred="true"
+        class="card_item-button--icon"
+        :class="`card_item-button--${card.fileType}`"
+        @click.prevent="downloadFile(card.ctaLink)"
+      >
+        {{ card.ctaTitle }}
+      </cta-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CtaButton from './../CtaButton/index.vue'
+import documentsvg from '../../../assets/icons/document.svg?url'
+
+export default {
+  components: {
+    CtaButton
+  },
+  props: {
+    card: {
+      type: Object,
+      required: true
+    },
+    resourceType: {
+      type: String,
+      default: 'resource-group'
+    }
+  },
+  data() {
+    return {
+      documentsvg,
+      cardResourseType: this.resourceType
+    }
+  },
+  methods: {
+    downloadFile(filelink) {
+      if (process.env.IS_STORYBOOK === 'TRUE') {
+        filelink = 'www.google.com.au'
+      }
+
+      window.open(filelink)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@import './styles';
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="card" class="card_item">
+    <div
+      class="card_item__pillTop pillTop"
+      :class="{
+        [`card_item__pillTop--rtl-${!!card.rtl}`]: true
+      }"
+      aria-hidden="true"
+    >
+      {{ card.pillText }}
+    </div>
+    <div class="card_item__pillTop pillTopText card_item__pillTop--rtl-true">
+      {{ card.dateTitle }} <span>{{ card.date }}</span>
+    </div>
+    <div class="card_item__spacer card_item__spacer--withPillOnly"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    card: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+$borderRadius: 8px;
+$cardTextPadding: 16px;
+
+@mixin label-small {
+  //styleName: Label/Small;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: $white;
+}
+
+.card_item {
+  &__pillTop {
+    padding: 6px 24px 6px $cardTextPadding;
+    position: absolute;
+    top: 24px;
+    background-color: $black;
+    @include label-small;
+
+    &--rtl {
+      &-true {
+        right: 0;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+
+      &-false {
+        left: 0;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+    }
+
+    &.pillTopText {
+      flex-direction: row;
+      display: flex;
+      justify-content: flex-end;
+      padding: 0 16px;
+      background: none;
+      @include label-small;
+      color: $black;
+
+      > span {
+        font-weight: normal;
+        padding-left: 5px;
+      }
+    }
+  }
+  &__spacer {
+    &--withImage {
+      height: $cardTextPadding;
+    }
+    &--withPillOnly {
+      height: $cardTextPadding * 4.5;
+    }
+    &--withoutImage {
+      height: $cardTextPadding;
+    }
+  }
+}
+</style>