@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/Tabs/index.stories.js

@@ -0,0 +1,60 @@
+import Tabs from './index.vue'
+
+const mockData = [
+  {
+    title: 'Overview',
+    content: ''
+  },
+  {
+    title: 'Step 1',
+    content: ''
+  },
+  {
+    title: 'Step 2',
+    content: ''
+  },
+  {
+    title: 'Step 3',
+    content: ''
+  },
+  {
+    title: 'Step 4',
+    content: ''
+  },
+  {
+    title: 'Step 5',
+    content: ''
+  },
+  {
+    title: 'Step 6',
+    content: ''
+  },
+  {
+    title: 'Step 7',
+    content: ''
+  },
+  {
+    title: 'Other Resources',
+    content: ''
+  }
+].map((item, index) => {
+  item.content = {
+    value: `<h1>My ${index} Heading</h1>
+    <p>My ${index} paragraph.</p>`
+  }
+  return item
+})
+
+export default {
+  title: 'Paragraphs/Tabs',
+  component: Tabs,
+  args: {
+    items: mockData,
+    rtl: false,
+    workwell: false,
+    titleTag: 'h2',
+    title: 'Tabs'
+    }
+}
+
+export const Default = {}

package/src/components/Paragraphs/Tabs/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <card-grid
+      v-if="!isPDF"
+      :title="title"
+      :title-tag="titleTag"
+      :cards="[{}]"
+      :force-lg-columns-per-row="1"
+      :force-md-columns-per-row="1"
+      :rtl="rtl"
+      :is-selectable="false"
+      :row-spacing="'small'"
+      :class="`paragraph--tabs ${workwell ? 'workwell' : ''}`"
+    >
+      <template v-slot:cardItem>
+        <b-tabs v-model="tabIndex">
+          <b-tab
+            v-for="(item, index) in items"
+            :key="`${index}-${_uid}`"
+            :title="item.title"
+            :title-link-class="`tab-item-${index}-${_uid}`"
+          >
+            <rich-text
+              :content="item.content.value"
+              :without-container="true"
+            />
+          </b-tab>
+        </b-tabs>
+      </template>
+    </card-grid>
+    <container v-else class="pdf-tabs">
+      <row v-if="title"
+        ><column
+          ><rich-text
+            :tag="titleTag"
+            :content="title"
+            :without-container="true"/></column
+      ></row>
+      <row v-for="(item, index) in items" :key="`${index}-${_uid}`">
+        <column>
+          <rich-text :content="getPdfContent(item)" :without-container="true" />
+        </column>
+      </row>
+    </container>
+  </div>
+</template>
+
+<script>
+import Row from './../../Containers/Row/index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import RichText from './../../Paragraphs/RichText/index.vue'
+import CardGrid from './../../Common/CardGrid/index.vue'
+import { BTabs, BTab } from 'bootstrap-vue-next'
+
+export default {
+  components: {
+    RichText,
+    CardGrid,
+    Container,
+    Row,
+    Column,
+    BTab,
+    BTabs
+  },
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    workwell: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      scrollIntoViewOptions: {
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      }
+    }
+  },
+  computed: {
+    activeTabEl() {
+      let el = document.querySelector(`.tab-item-${this.tabIndex}-${this._uid}`)
+      return el
+    },
+    isPDF() {
+      return typeof this.$isPDF === 'function' ? this.$isPDF() : false
+    }
+  },
+  methods: {
+    handleTabNav(direction) {
+      if (direction === 'next' && this.tabIndex < this.items.length - 1) {
+        this.tabIndex++
+        this.activeTabEl.scrollIntoView(this.scrollIntoViewOptions)
+      } else if (direction === 'prev' && this.tabIndex !== 0) {
+        this.tabIndex--
+        this.activeTabEl.scrollIntoView(this.scrollIntoViewOptions)
+      } else {
+        return
+      }
+    },
+    getPdfContent(item) {
+      return `<${this.titleTag}>${item.title}</${this.titleTag}>${item.content.value}`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles.scss';
+</style>

package/src/components/Paragraphs/Tabs/styles.scss

@@ -0,0 +1,150 @@
+@import '../../../includes/scss/all';
+.pdf-tabs {
+  :deep(.wcl-rich-text) {
+    margin-bottom: 32px;
+  }
+}
+.paragraph--tabs {
+  :deep(.container .section-group__block) {
+    border-bottom: 2px solid $lightgray;
+    padding-bottom: 32px;
+  }
+  // Tab Nav
+  .tab-nav {
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    place-content: flex-end;
+    padding-right: 4px;
+
+    &.rtl {
+      direction: ltr;
+      padding-left: 4px;
+    }
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+
+      img {
+        height: 16px;
+        width: 16px;
+      }
+    }
+  }
+  // Default Styling
+  .tabs {
+    :deep(ul.nav.nav-tabs) {
+      @include fp(padding-left, 0, 45);
+      @include fp(padding-right, 0, 45);
+      border-bottom: 4px solid $orange;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+      max-width: 100%;
+      overflow: hidden;
+    }
+
+    // styling for button
+    :deep(ul.nav.nav-tabs li button) {
+      color: $black;
+      //styleName: Label/Medium;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 0px;
+      border: none;
+      border-radius: 4px 4px 0 0;
+      padding: 16px 32px;
+      margin-bottom: 0;
+
+      &.active {
+        background: $orange;
+
+        &:hover {
+          background: $orange;
+        }
+        }
+
+        &:hover {
+          background: $lightyellow;
+        }
+    }
+
+    // styling for an a link
+    :deep(ul.nav.nav-tabs li a) {
+      color: $black;
+      //styleName: Label/Medium;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 0px;
+      border: none;
+      border-radius: 4px 4px 0 0;
+      padding: 16px 32px;
+      margin-bottom: 0;
+
+      &.active {
+        background: $orange;
+
+        &:hover {
+          background: $orange;
+        }
+        }
+
+        &:hover {
+          background: $lightyellow;
+        }
+    }
+
+    :deep(.tab-content) {
+      padding-top: 45px;
+      @include fp(padding-left, 0, 45);
+      @include fp(padding-right, 0, 45);
+    }
+  }
+  // WorkWell Overrides
+  &.workwell {
+    .tabs {
+    :deep(ul.nav.nav-tabs) {
+      border-bottom: 4px solid $green;
+    }
+    // styling for button
+    :deep(ul.nav.nav-tabs li button) {
+      &.active {
+          background-color: $green;
+          color: $white;
+
+          &:hover {
+            background: $green;
+            color: $white;
+          }
+        }
+
+        &:hover {
+          background: $lightgreen;
+          color: $black;
+        }
+     }
+     // styling for a link
+    :deep(ul.nav.nav-tabs li a) {
+      &.active {
+          background-color: $green;
+          color: $white;
+
+          &:hover {
+            background: $green;
+            color: $white;
+          }
+        }
+
+        &:hover {
+          background: $lightgreen;
+          color: $black;
+        }
+     }
+    }
+  }
+}

package/src/components/Paragraphs/TabulatedData/Constants.js

@@ -0,0 +1,158 @@
+const fields = {
+  links: [
+    { key: 'movie_title', label: 'Movie title', sortable: true },
+    { key: 'rank', label: 'Rank', sortable: true },
+    { key: 'year', label: 'Year', sortable: false },
+    { key: 'rating', label: 'Rating', sortable: true },
+    { key: 'gross', label: 'Gross', sortable: true }
+  ]
+}
+
+const fieldsAr = {
+  rtl: 'true',
+  links: [
+    { key: 'movie_title', label: 'عنوان الفيلم', sortable: true },
+    { key: 'rank', label: 'رتبة', sortable: true },
+    { key: 'year', label: 'سنة', sortable: false },
+    { key: 'rating', label: 'تقييم', sortable: true },
+    { key: 'gross', label: 'إجمالي', sortable: true }
+  ]
+}
+
+const items = {
+  links: [
+    {
+      movie_title: 'Avengers: Endgame',
+      rank: '1',
+      year: '01/10/2009',
+      rating: '86%',
+      gross: '$858.37M'
+    },
+    {
+      movie_title: 'Avatar',
+      rank: '2',
+      year: '01/09/2009',
+      rating: '78%',
+      gross: '$760.51M'
+    },
+    {
+      movie_title: 'Titanic',
+      rank: '3',
+      year: '01/09/1997',
+      rating: '78%',
+      gross: '$659.33M'
+    },
+    {
+      movie_title: 'Star Wars: Episode VII - The Force Awakens',
+      rank: '4',
+      year: '01/10/2015',
+      rating: '80%',
+      gross: '$936.66M'
+    },
+    {
+      movie_title: 'Avengers: Infinity War',
+      rank: '5',
+      year: '01/09/2018',
+      rating: '85%',
+      gross: '$678.82M'
+    },
+    {
+      movie_title: 'Jurassic World',
+      rank: '6',
+      year: '09/10/2015',
+      rating: '70%',
+      gross: '$652.27M'
+    },
+    {
+      movie_title: 'The Lion King',
+      rank: '7',
+      year: '01/10/2019',
+      rating: '71%',
+      gross: '$529.91M'
+    },
+    {
+      movie_title: 'The Avengers',
+      rank: '8',
+      year: '01/09/2012',
+      rating: '80%',
+      gross: '$623.36M'
+    },
+    {
+      movie_title: 'Furious 7',
+      rank: '9',
+      year: '01/06/2015',
+      rating: '72%',
+      gross: '$353.01M'
+    }
+  ]
+}
+
+const itemsAr = {
+  rtl: 'true',
+  links: [
+    {
+      movie_title: 'المنتقمون: نهاية اللعبة',
+      rank: '1',
+      year: '01/10/2009',
+      rating: '86%',
+      gross: '$858.37M'
+    },
+    {
+      movie_title: 'الصورة الرمزية',
+      rank: '2',
+      year: '01/09/2009',
+      rating: '78%',
+      gross: '$760.51M'
+    },
+    {
+      movie_title: 'تايتانيك',
+      rank: '3',
+      year: '01/09/1997',
+      rating: '78%',
+      gross: '$659.33M'
+    },
+    {
+      movie_title: 'حرب النجوم: الحلقة السابعة - القوة يوقظ',
+      rank: '4',
+      year: '01/10/2015',
+      rating: '80%',
+      gross: '$936.66M'
+    },
+    {
+      movie_title: 'المنتقمون: إنفينيتي وور',
+      rank: '5',
+      year: '01/09/2018',
+      rating: '85%',
+      gross: '$678.82M'
+    },
+    {
+      movie_title: 'العالم الجوراسي',
+      rank: '6',
+      year: '09/10/2015',
+      rating: '70%',
+      gross: '$652.27M'
+    },
+    {
+      movie_title: 'الاسد الملك',
+      rank: '7',
+      year: '01/10/2019',
+      rating: '71%',
+      gross: '$529.91M'
+    },
+    {
+      movie_title: 'المنتقمون',
+      rank: '8',
+      year: '01/09/2012',
+      rating: '80%',
+      gross: '$623.36M'
+    },
+    {
+      movie_title: 'غاضب 7',
+      rank: '9',
+      year: '01/06/2015',
+      rating: '72%',
+      gross: '$353.01M'
+    }
+  ]
+}
+export { fields, fieldsAr, items, itemsAr }

package/src/components/Paragraphs/TabulatedData/index.stories.js

@@ -0,0 +1,39 @@
+import TabulatedData from './index.vue'
+import { fields, fieldsAr, items, itemsAr } from './Constants'
+
+export default {
+  title: 'Paragraphs/TabulatedData',
+  component: TabulatedData,
+  data() {
+    return {
+      TabulatedData,
+      fields,
+      fieldsAr,
+      items,
+      itemsAr
+    }
+  },
+  argTypes: {
+    isFixedWidth: {
+      control: 'boolean',
+      table: { disable: true }
+    }
+  },
+  args: {
+    rtl: false,
+    isFixedWidth: true,
+    items: items.links,
+    rtlItems: itemsAr.links,
+    fields: fields.links,
+    rtlFields: fieldsAr.links,
+    caption: 'The table caption',
+    initialSortBy: 'rank'
+  },
+  template: `<tabulated-data
+                v-bind="args"
+                :items="rtl ? args.rtlItems : args.items"
+                :fields="rtl ? args.rtlFields : args.fields"
+              /> `
+}
+
+export const Default = {}

package/src/components/Paragraphs/TabulatedData/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <section-group
+    :sub-heading="caption"
+    class="paragraph--tabulated-data paragraph--tabulated-data--fitcontent"
+    :size="'content'"
+  >
+    <div :class="isFluid ? 'table-scrolled' : ''">
+      <b-table
+        v-if="items"
+          :items="items"
+          :fields="fields"
+          :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
+          class="table border"
+          :striped="true"
+          v-model:sort-desc="sortDesc" 
+          v-model:sort-by="sortBy"
+          :borderless="false"
+          :responsive="!isFluid"
+          :stacked="!isFluid ? 'sm' : false"
+      >
+        <template #head()="data">
+          <span class="iconHeader table-active" tabindex="0" @keypress.enter="accessSort(data.field)" scope="colgroup">
+            {{ data.label }}
+            <span class="sortImg" v-if="data.field.sortable">
+            <img v-if="data.field.thAttr['aria-sort'] === 'none'" :src="sortIconNeutral" alt="image indicating no sort" style="width: 0.55rem; height: 0.90rem;"/>
+            <img v-if="data.field.thAttr['aria-sort'] === 'ascending'" :src="sortIconAsc" alt="image indicating ascending sort" style="width: 0.55rem; height: 0.90rem;"/>
+            <img v-else-if="data.field.thAttr['aria-sort'] === 'descending'" :src="sortIconDesc" alt="image indicating descending sort" style="width: 0.55rem; height: 0.90rem;"/>
+            </span>
+          </span>
+        </template>
+        <template #cell()="data">
+          <rich-text :content="data.value" />
+        </template>
+      </b-table>
+    </div>
+  </section-group>
+</template>
+
+<script>
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BTable } from 'bootstrap-vue-next'
+
+export default {
+  name: 'TabulatedData',
+  components: { SectionGroup, RichText, BTable},
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      default: undefined
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    isFixedWidth: {
+      type: Boolean,
+      default: false
+    },
+    caption: {
+      type: String,
+      default: '',
+      required: false
+    },
+    initialSortBy: {
+      type: String,
+      default: undefined,
+      required: false
+    }
+  },
+  data() {
+    return {
+      sortBy: this.initialSortBy,
+      sortDesc: false,
+      sortIconNeutral:
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
+      sortIconDesc:
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
+      sortIconAsc:
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"
+    }
+  },
+  computed: {
+    isFluid() {
+      return this.isFixedWidth
+    }
+  },
+  methods: {
+   accessSort(fieldVar) {
+    this.sortBy = fieldVar.key
+      if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
+        this.sortDesc = false
+      } else {
+        this.sortDesc = true
+      }    
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.paragraph--tabulated-data {
+  @import '../../../includes/scss/all';
+
+  .section-group__block {
+    margin-top: -32px;
+    margin-bottom: -48px;
+  }
+
+  .table.isScrolled {
+    max-width: 1140px;
+  }
+  .table-scrolled {
+    overflow: auto;
+  }
+
+  .table th,
+  .table td {
+    margin: 1rem;
+    vertical-align: middle;
+    @media screen and (max-width: 540px) {
+      margin: 0.5rem;
+    }
+  }
+
+  .iconHeader {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .rtl {
+    @include makeRTL();
+  }
+
+  .sortImg {
+    vertical-align: middle;
+    margin-left: 5px;
+  }
+}
+</style>