@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,38 @@
+@import '../../../includes/scss/all';
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+
+  &--inverted {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
+}
+
+.iconWrapper {
+  &--bordered {
+    border: solid 3px $orange;
+    border-radius: 50%;
+    padding: 1.75em;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loop-icon {
+  animation: spin 0.6s linear infinite, fade-in 0.6s ease-out both;
+}

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

@@ -0,0 +1,9 @@
+import Loading from './index.vue'
+
+export default {
+    title: 'Subcomponents/Loading',
+    component: Loading
+  };
+  
+  export const Default = {}
+

package/src/components/SubComponents/Loading/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="wcl-loading">
+    <strong>Loading...</strong>
+    <b-spinner class="float-right"></b-spinner>
+  </div>
+</template>
+
+<script>
+import { BSpinner } from 'bootstrap-vue-next';
+
+export default {
+  name: 'Loading',
+  components: { BSpinner }
+}
+</script>

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

@@ -0,0 +1,58 @@
+import Container from '../../Containers/Container/index.vue'
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import VideoPlayer from './index.vue'
+
+const mockData = {
+  videoId: '3FLapMJUmZQ',
+  provider: { YouTube: 'youtube', Vimeo: 'vimeo' }
+}
+
+export default {
+  title: 'SubComponents/MediaPlayer',
+  component: { VideoPlayer, Container, Row, Column },
+  argTypes: {
+    videoId: {
+      control: 'text',
+    },
+    provider: {
+      control: 'select',
+      options: mockData.provider
+    },
+    rtl: {
+      control: 'boolean'
+    }
+  }
+}
+
+const MediaDefault = (args) => ({
+  components: { VideoPlayer, Container, Row, Column },
+  setup () {
+    return { args }
+  },
+  template: `
+    <container>
+    <row>
+      <column>
+        <video-player v-bind="args" />
+      </column>
+    </row>
+    </container>
+  `
+})
+
+export const Youtube = MediaDefault.bind({})
+
+Youtube.args = {
+  videoId: mockData.videoId,
+  provider: mockData.provider.YouTube,
+  rtl: false
+}
+
+export const Vimeo = MediaDefault.bind({})
+
+Vimeo.args = {
+  videoId: '60139366',
+  provider: mockData.provider.Vimeo,
+  rtl: false
+}

package/src/components/SubComponents/MediaPlayer/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="video-player"
+    :class="`${rtl ? 'rtl ' : ''}${' --type-' + provider}`"
+  >
+    <iframe
+      v-if="provider === 'youtube'"
+      class="videoFrame"
+      :src="
+        `https://www.youtube-nocookie.com/embed/${videoId}?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`
+      "
+      allowfullscreen
+      allowtransparency
+      allow="autoplay"
+    ></iframe>
+    <iframe
+      v-if="provider === 'vimeo'"
+      class="videoFrame"
+      :src="
+        `https://player.vimeo.com/video/${videoId}?color=02819e&autopause=0&byline=0&dnt=1&fun=0&playsinline=0&portrait=0&title=0&transparent=0`
+      "
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"
+      allowtransparency
+    ></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoPlayer',
+  props: {
+    videoId: {
+      type: String,
+      required: true
+    },
+    provider: {
+      type: String,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../../includes/scss/all';
+.video-player {
+  position: relative;
+  min-height: 411px;
+
+  .videoFrame {
+    position: absolute;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  &.rtl {
+    margin-left: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,119 @@
+import Pagination from './index.vue'
+
+export default {
+  title: 'SubComponents/Pagination',
+  component: Pagination,
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+     table: {
+        disable: true
+      }
+    },
+    rows: {
+      control: 'number',
+    },
+    offset: {
+      control: 'number',
+      table: {
+        disable: true
+      }
+    },
+    total: {
+      control: 'number',
+      table: {
+        disable: true
+      }
+    },
+    align: {
+      control: 'text',
+      table: {
+        disable: true
+      }
+    },
+    maxPages: {
+      control: 'number',
+    },
+    pageClicked: { 
+      table: { disable: true }
+    },
+    next: { 
+      table: { disable: true }
+    },
+    prev: { 
+      table: { disable: true }
+    }
+  }
+}
+const curPage = 1
+
+const DefaultPagination = (args) => ({
+  components: { Pagination },
+  setup () {
+    return { args }
+  },
+  data: () => ({
+    cPage: curPage,
+    items: [
+      { name: 'A', id: '1' },
+      { name: 'B', id: '2' },
+      { name: 'C', id: '3' },
+      { name: 'D', id: '4' },
+      { name: 'E', id: '5' },
+      { name: 'F', id: '6' },
+      { name: 'G', id: '7' },
+      { name: 'H', id: '8' },
+      { name: 'I', id: '9' },
+      { name: 'J', id: '10' },
+      { name: 'K', id: '11' },
+      { name: 'L', id: '12' },
+      { name: 'M', id: '13' },
+      { name: 'N', id: '14' },
+      { name: 'O', id: '15' },
+      { name: 'P', id: '16' },
+      { name: 'Q', id: '17' },
+      { name: 'R', id: '18' },
+      { name: 'S', id: '19' },
+      { name: 'T', id: '20' },
+      { name: 'U', id: '21' },
+      { name: 'V', id: '22' },
+      { name: 'W', id: '23' },
+      { name: 'X', id: '24' },
+      { name: 'Y', id: '25' },
+      { name: 'Z', id: '26' }
+    ]
+  }),
+  methods: {
+    change({ currentPage }) {
+      this.cPage = currentPage
+    }
+  },
+  template: `
+  <div >
+    <h4>Sample Table data</h4>
+    <table id="no-more-tables" class="table-bordered border">
+      <tr v-for="(row, index) in items.slice(((cPage-1)*args.rows), ((cPage)*args.rows))" :key="index">
+        <td data-title="Name">{{row.name}}</td>
+        <td data-title="ID">{{row.id}}</td>
+      </tr>
+    </table>
+    <br/>
+    <pagination v-bind="args"
+      :total="items.length"
+      @prev="cPage = cPage - 1"
+      @next="cPage = cPage + 1"
+      @pageClicked="change"
+    />
+  </div>
+  `
+})
+
+export const Default = DefaultPagination.bind({})
+
+Default.args = {
+  ariaLabel: 'aria-label',
+  rows: 7,
+  offset: 0,
+  align: 'start',
+  maxPages: 3
+  }

package/src/components/SubComponents/Pagination/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div v-if="pagination" class="wcl-pagination">
+    <div class="information">{{ information }}</div>
+    <nav :aria-label="ariaLabel">
+      <ul :class="`pagination justify-content-${align}`">
+        <li class="wcl-pagination__page-item">
+          <cta-button
+            :type="'white'"
+            :text-only="true"
+            :slim="true"
+            class="wcl-pagination__page-link"
+            :class="currentPage === 1 ? 'disabled' : ''"
+            @clicked="() => (currentPage === 1 ? null : previous())"
+            >Previous
+          </cta-button>
+        </li>
+        <li
+          v-for="(p, i) in pagination.pages"
+          :key="i"
+          class="wcl-pagination__page-item"
+        >
+          <cta-button
+            :type="pagination.currentPage === p ? 'gray' : 'white'"
+            :text-only="true"
+            :slim="true"
+            class="wcl-pagination__page-link"
+            :aria-current="pagination.currentPage === p ? 'page' : false"
+            @clicked="() => pageChanged(p)"
+            >{{ p }}
+          </cta-button>
+        </li>
+        <li class="wcl-pagination__page-item">
+          <cta-button
+            :type="'white'"
+            :text-only="true"
+            :slim="true"
+            class="wcl-pagination__page-link"
+            :class="currentPage === pagination.totalPages ? 'disabled' : ''"
+            @clicked="
+              () => (currentPage === pagination.totalPages ? null : next())
+            "
+            >Next
+          </cta-button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<script>
+import paginate from './pagination'
+import CtaButton from '../../SubComponents/CtaButton/index.vue'
+
+export default {
+  components: {
+    CtaButton
+  },
+  props: {
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+    rows: {
+      type: Number,
+      required: true
+    },
+    offset: {
+      type: Number,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    align: {
+      type: String,
+      default: 'start'
+    },
+    maxPages: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {
+      currentPage: 1
+    }
+  },
+  computed: {
+    pagination() {
+      const currentPaginationSnapshot = paginate(
+        this.total,
+        this.currentPage,
+        this.rows,
+        this.maxPages
+      )
+      return currentPaginationSnapshot
+    },
+    information() {
+      const totalPages = this.pagination.totalPages
+      return `${totalPages} pages of results`
+    }
+  },
+  watch: {
+    offset() {
+      if (this.offset === 0 && this.total > 0) {
+        this.currentPage = 1
+      }
+    }
+  },
+  mounted() {
+    if (this.offset === 0) {
+      this.currentPage = 1
+    } else {
+      this.currentPage = this.offset / this.rows + 1
+    }
+  },
+  methods: {
+    pageChanged(currentPage) {
+      if (this.currentPage !== currentPage) {
+        this.currentPage = currentPage
+        this.$emit('pageClicked', {
+          ...this.pagination
+        })
+      }
+    },
+    next(el) {
+      this.currentPage += 1
+      this.$emit('next', {
+        ...this.pagination
+      })
+    },
+    previous() {
+      this.currentPage -= 1
+      this.$emit('prev', {
+        ...this.pagination
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.wcl-pagination {
+  .information {
+    margin-bottom: 16px;
+  }
+  .pagination {
+    margin-bottom: 0;
+  }
+  $spacing: 6px;
+  &__page-item {
+    margin-right: $spacing;
+    &:first-child {
+      margin-right: $spacing * 2;
+    }
+    &:last-child {
+      margin-left: $spacing;
+      margin-right: 0px;
+    }
+    @media screen and (max-width: 539px) {
+      &:first-child,
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  &__page-link {
+    &:hover {
+      background: $lightgray;
+    }
+    &.active {
+      background: $black;
+      color: $white;
+      font-weight: 700;
+      border: 1px solid transparent;
+    }
+    &.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>

package/src/components/SubComponents/Pagination/pagination.js

@@ -0,0 +1,58 @@
+// source: https://jasonwatmore.com/post/2018/08/07/javascript-pure-pagination-logic-in-vanilla-js-typescript
+export default function paginate(totalItems, currentPage, pageSize, maxPages) {
+  // calculate total pages
+  let totalPages = Math.ceil(totalItems / pageSize)
+
+  // ensure current page isn't out of range
+  if (currentPage < 1) {
+    currentPage = 1
+  } else if (currentPage > totalPages) {
+    currentPage = totalPages
+  }
+
+  let startPage, endPage
+  if (totalPages <= maxPages) {
+    // total pages less than max so show all pages
+    startPage = 1
+    endPage = totalPages
+  } else {
+    // total pages more than max so calculate start and end pages
+    let maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)
+    let maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1
+    if (currentPage <= maxPagesBeforeCurrentPage) {
+      // current page near the start
+      startPage = 1
+      endPage = maxPages
+    } else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+      // current page near the end
+      startPage = totalPages - maxPages + 1
+      endPage = totalPages
+    } else {
+      // current page somewhere in the middle
+      startPage = currentPage - maxPagesBeforeCurrentPage
+      endPage = currentPage + maxPagesAfterCurrentPage
+    }
+  }
+
+  // calculate start and end item indexes
+  let startIndex = (currentPage - 1) * pageSize
+  let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1)
+
+  // create an array of pages to ng-repeat in the pager control
+  let pages = Array.from(Array(endPage + 1 - startPage).keys()).map(
+    (i) => startPage + i
+  )
+
+  // return object with all pager properties required by the view
+  return {
+    totalItems: totalItems,
+    currentPage: currentPage,
+    pageSize: pageSize,
+    totalPages: totalPages,
+    startPage: startPage,
+    endPage: endPage,
+    startIndex: startIndex,
+    endIndex: endIndex,
+    pages: pages
+  }
+}