@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,184 @@
+import ScrollSpy from './index.vue'
+
+const itemList = [
+  {
+    text: 'Section one heading',
+    id: 'item-1'
+  },
+  {
+    text: 'Section two heading spans over two lines',
+    id: 'item-2'
+  },
+  {
+    text:
+      'Section three heading spans over three lines and is active yellow or green',
+    id: 'item-3'
+  },
+  {
+    text: 'Section four heading',
+    id: 'item-4'
+  }
+]
+const arabicItemList = [
+  {
+    text: 'عنوان القسم الأول',
+    id: 'item-1'
+  },
+  {
+    text: 'يمتد عنوان القسم الثاني على سطرين',
+    id: 'item-2'
+  },
+  {
+    text:
+      'يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر',
+    id: 'item-3'
+  },
+  {
+    text: 'عنوان الباب الرابع',
+    id: 'item-4'
+  }
+]
+export default {
+  title: 'Paragraphs/ScrollSpy',
+  component: ScrollSpy,
+  argTypes: {
+    title: {
+      control: 'text',
+      defaultValue: 'On this page'
+    },
+    itemList: {
+      control: 'array'
+    },
+    itemListEnglish: {
+      control: 'array',
+      defaultValue: itemList
+    },
+    itemListArabic: {
+      control: 'array',
+      defaultValue: arabicItemList
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    }
+  }
+}
+const DefaultContent = (args, { argTypes }) => ({
+  components: { ScrollSpy },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      text: `
+          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
+          tempor. Laborum consequat non elit enim exercitation cillum aliqua
+          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
+          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
+          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
+          nisi sit est tempor laborum mollit labore officia laborum excepteur
+          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
+          ipsum commodo tempor sunt in proident.
+        `,
+      arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
+      itemList,
+      arabicItemList
+    }
+  },
+  template: `
+    <b-container fluid>
+    <b-row v-if="!rtl">
+      <b-col cols="8">
+        <div
+          id="scrollspy-nested"
+        >
+          <h4 id="item-1">Section one heading</h4>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <h4 id="item-2">Section two heading spans over two lines</h4>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <h4 id="item-3">Section three heading spans over three lines and is active yellow or green</h4>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <h4 id="item-4">Section four heading</h4>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+          <p>{{ text }}</p>
+        </div>
+      </b-col>
+      <b-col cols="4">
+      <scroll-spy v-bind="$props" :item-list="itemListEnglish" />
+      </b-col>
+    </b-row>
+
+    <b-row v-else style="{
+        direction: rtl;
+        text-align: right;
+      }">
+      <b-col cols="8">
+        <div
+          id="scrollspy-nested"
+        >
+          <h4 id="item-1">عنوان القسم الأول</h4>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <h4 id="item-2">يمتد عنوان القسم الثاني على سطرين</h4>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <h4 id="item-3">يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر</h4>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <h4 id="item-4">عنوان الباب الرابع</h4>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+          <p>{{ arabicText }}</p>
+        </div>
+      </b-col>
+      <b-col cols="4">
+      <scroll-spy v-bind="$props" :item-list="arabicItemList" />
+      </b-col>
+    </b-row>
+    </b-container>`
+})
+
+export const Default = DefaultContent.bind({})
+Default.parameters = { controls: { exclude: ['itemList'] } }

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

@@ -0,0 +1,147 @@
+<template>
+  <section-group class="sticky-top">
+    <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
+      <b-list-group
+        v-b-scrollspy="{ offset: 100, method: 'auto' }"
+        class="flex-column"
+      >
+        <div class="scrollspy__title">{{ title }}</div>
+        <b-list-group-item
+          v-for="(item, index) in itemList"
+          :key="index"
+          class="scrollspy__item"
+          role="link"
+          :href="`#${item.id}`"
+          @click.prevent="scrollToAnchor(item.id)"
+          >{{ item.text }}</b-list-group-item
+        >
+      </b-list-group>
+    </b-navbar>
+  </section-group>
+</template>
+
+<script>
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+
+export default {
+  name: 'ScrollSpy',
+  components: { SectionGroup },
+  props: {
+    title: {
+      type: String,
+      default: 'On this page'
+    },
+    itemList: {
+      type: Array,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    scrollToAnchor(anchor) {
+      const anchorElement = document.getElementById(anchor)
+      if (anchorElement) {
+        anchorElement.focus()
+        anchorElement.scrollIntoView({
+          behavior: 'smooth'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../../includes/scss/all';
+.paragraph--scrollspy {
+  padding: 0 !important;
+
+  .scrollspy__title {
+    font-weight: bold;
+    margin-bottom: 32px;
+    line-height: 20px;
+  }
+
+  .scrollspy__item {
+    position: relative;
+    padding-left: 32px;
+    margin-bottom: 32px;
+    color: $black;
+    text-decoration: underline;
+    padding-top: 0;
+    padding-bottom: 0;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: $white;
+    }
+
+    &:focus {
+      outline-offset: 12px;
+      background-color: $white;
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &::before {
+      background-color: $gray;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      left: -8px;
+      top: 0;
+      z-index: 1;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &:not(:last-child)::after {
+      border-left: 1px dotted $gray;
+      border-right: 1px dotted $gray;
+      top: 4px;
+      bottom: -40px;
+      left: 3px;
+      z-index: 0;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &.active {
+      background: $white;
+      color: $black;
+      border: none;
+      margin-top: 0;
+      &::before {
+        background-color: $yellow;
+      }
+    }
+  }
+
+  &.rtl {
+    @include makeRTL();
+    .scrollspy__item {
+      padding-left: 0;
+      padding-right: 32px;
+      &:before {
+        right: -8px;
+      }
+
+      &:not(:last-child)::after {
+        right: 3px;
+        border-right: 2px dotted $gray;
+        border-left: none;
+      }
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/SelectableCards/Control/index.stories.js

@@ -0,0 +1,29 @@
+import SelectableCards from './../index.vue'
+import { mockSelectableCards } from '../../../../mock/control-selectable-cards'
+
+export default {
+  title: 'Paragraphs/SelectableCards',
+  component: SelectableCards,
+  argTypes: {
+    cardType: {
+      table: { disable: true }
+    },
+    cardTextAlign: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    cards: mockSelectableCards,
+    title: 'Pick an object?',
+    headingTag: 'h2',
+    subHeading: 'Pick an object from the selections or if you know exactly how heavy is the object that is being dropped, enter the height in input box below.',
+    iconIsBordered: false,
+    columns: 4,
+    cardType: 'control-selectcards',
+    cardTextAlign: 'center'
+    },
+  template:
+    '<selectable-cards v-bind="args" class="control-selectablecards" />'
+  }
+
+export const Control = {}

package/src/components/Paragraphs/SelectableCards/cardbody.vue

@@ -0,0 +1,25 @@
+<template>
+  <p v-if="card.value" class="card-unit">{{ card.value }} {{ card.units }}</p>
+</template>
+
+<script>
+export default {
+  props: {
+    card: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.card-unit {
+  margin: 0;
+  @media (min-width: 576px) {
+    padding-bottom: 25px;
+  }
+  @media (min-width: 768px) {
+    padding-bottom: 30px;
+  }
+}
+</style>

package/src/components/Paragraphs/SelectableCards/cardtop.vue

@@ -0,0 +1,113 @@
+<template>
+  <div v-if="card" class="card_item">
+    <div
+      v-if="card.pillText"
+      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">
+      <label
+        class="card_item__control"
+        :class="{ [`card_item__control-${buttonRole}`]: true }"
+        ><span></span
+      ></label>
+    </div>
+    <div class="card_item__spacer card_item__spacer--withTextOnly"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    card: {
+      type: Object,
+      required: true
+    },
+    buttonRole: {
+      type: String,
+      default: 'radio'
+    },
+    isSelectable: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</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: $black;
+}
+
+.card_item {
+  &__pillTop {
+    padding: 6px 24px 6px $cardTextPadding;
+    position: absolute;
+    top: 24px;
+    background-color: $orange;
+    @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;
+      background: none;
+      @include label-small;
+      padding: 0 16px;
+      margin-top: 5px;
+
+      @media (min-width: 576px) {
+        padding: 0 10px;
+        margin-top: -10px;
+      }
+    }
+  }
+
+  &__spacer {
+    &--withImage {
+      height: $cardTextPadding;
+    }
+    &--withPillOnly {
+      height: $cardTextPadding * 4.5;
+    }
+    &--withoutImage {
+      height: $cardTextPadding;
+    }
+    @media screen and (min-width: 575px) {
+      &--withTextOnly {
+        height: $cardTextPadding * 2;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,27 @@
+import SelectableCards from './index.vue'
+import { mockSelectableCards } from '../../../mock/selectable-cards'
+
+export default {
+  title: 'Paragraphs/SelectableCards',
+  component: SelectableCards,
+  argTypes: {
+    cardType: {
+      table: { disable: true }
+    },
+    cardTextAlign: {
+      table: { disable: true }
+    },
+    iconIsBordered: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    cards: mockSelectableCards,
+    title: 'Selectable cards',
+    headingTag: 'h2',
+    columns: 4,
+    subHeading: null
+    }
+  }
+
+export const Default = {}

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

@@ -0,0 +1,116 @@
+<template>
+  <card-grid
+    ref="cardgrid"
+    :cards="cards"
+    :title="title"
+    :title-tag="headingTag"
+    :sub-heading="subHeading"
+    :columns-per-row="columns || 4"
+    class="selectable-cards"
+    :is-selectable="true"
+    :card-id-prefix="'selectable-cc-card'"
+    @selected="selectedCardChangeFocus"
+  >
+    <template v-slot:cardItem="{ card }">
+      <!-----CONTROL SELECTED CARD START-------->
+      <card-grid-item
+        v-if="cardType === 'control-selectcards'"
+        class="control_selectcard"
+        :button-role="'radio'"
+        :glyph-src="card.icon"
+        :icon-size="'medium'"
+        :show-divider="false"
+        :header-size="'medium'"
+        :card-header-title="card.name"
+        :card-padding="'small'"
+        :border-type="'dark'"
+        :border-on-select-background="'blue'"
+        :icon-is-bordered="iconIsBordered"
+        :card-text-align="cardTextAlign"
+      >
+        <template v-slot:cardTop>
+          <card-top :card="card" :button-role="'radio'" :is-selectable="true" />
+        </template>
+        <template v-slot:cardDescription>
+          <card-body :card="card" />
+        </template>
+      </card-grid-item>
+      <!-----CONTROL SELECTED CARD  END-------->
+      <card-grid-item
+        v-else
+        class="selectcard"
+        :glyph-src="card.icon"
+        :show-divider="false"
+        :header-size="'large'"
+        :card-header-title="card.name"
+        :card-padding="'small'"
+        :invert-on-select-background="'black'"
+        :border-type="'shadow'"
+        :description="card.description"
+      />
+    </template>
+    <template v-slot:cardGridFooter>
+      <slot name="cardGridFooter"></slot>
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import CardBody from './cardbody.vue'
+import CardTop from './cardtop.vue'
+
+export default {
+  name: 'SelectableCards',
+  components: {
+    CardGrid,
+    CardGridItem,
+    CardBody,
+    CardTop
+  },
+  props: {
+    cards: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    headingTag: {
+      type: String,
+      default: 'h2'
+    },
+    subHeading: {
+      type: String,
+      default: null
+    },
+    iconIsBordered: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: Number,
+      default: 4
+    },
+    cardType: {
+      type: String,
+      default: null
+    },
+    cardTextAlign: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    selectedCardChangeFocus(card) {
+      this.$emit('selected', card.selectedCard)
+    },
+    clearCard() {
+      this.$refs.cardgrid.clearCards()
+    }
+  }
+}
+</script>