@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,70 @@
+import WebformPara from './index.vue'
+
+export default {
+    title: 'Paragraphs/Webform',
+    component: WebformPara,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+        defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: `proc-id-form-api
+          .toLowerCase()
+          .split(' ')
+          .join('-')}`,
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: 'review_of_an_agent_decision',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: 'api',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object',
+        table: {
+            disable: true
+          }
+      }
+    }
+  }
+
+const Template = (args, { argTypes }) => ({
+  components: { WebformPara },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+        <h2>This is a web page with embedded webform</h2>
+        <p> Below is an example webform</p>
+        <br>
+        <br>
+        <div style="background-color: lightgrey">
+          <webform-para v-bind="$props" />
+        </div>
+    </div>
+    `
+})
+export const Default = Template.bind({})
+Default.args = {
+    type: 'api',
+    formid: 'review_of_an_agent_decision',
+  }

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="webform_para container-sm container-md container-lg container-xl">
+    <div class="row">
+      <div class="col-12 col-md-9">
+       <!--  <form-handler
+          :formid="formid"
+          :web-form-json="webFormJson"
+          :content-api-url="contentApiUrl"
+          :preview="preview"
+          :process-i-d="processID"
+          @changed="(e, i) => $emit('changed', e, i)"
+          @submitted="(e, i) => $emit('submitted', e, i)"
+          @rendered="() => $emit('rendered')"
+          @nextPage="() => $emit('nextPage')"
+          @prevPage="() => $emit('prevPage')"
+        />
+        <i v-if="preview" class="fa fa-info-circle text-muted">
+          preview mode. submission logged to console
+        </i> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebformPara'/* ,
+  components: { FormHandler },
+  props: {
+    formid: {
+      type: String,
+      required: false,
+      default: null
+    },
+    webFormJson: {
+      type: Object,
+      required: false,
+      default: () => null
+    },
+    contentApiUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    preview: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    processID: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    backgroundStyle() {
+      let styles
+      if (this.formBackground) {
+        let bgColour
+        switch (this.formBackground) {
+          case 'grey':
+          case 'light':
+            bgColour = colors.lightgray
+            break
+          case 'dark':
+            bgColour = colors.gray
+            break
+          case 'yellow':
+            bgColour = colors.orange
+            break
+          case 'white':
+            bgColour = colors.white
+            break
+          case 'lightblue':
+            bgColour = colors.lightblue
+            break
+          case 'lightred':
+            bgColour = colors.lightred
+            break
+          default:
+            bgColour = 'transparent'
+        }
+        styles = {
+          ...(styles || {}),
+          [`background-color`]: bgColour
+        }
+      }
+      return styles
+    }
+  } */
+}
+</script>
+
+<style scoped lang="scss">
+.webform_para {
+  width: 100%;
+  padding-top: 32px;
+  padding-bottom: 64px;
+  // :deep() {
+    // @import './../../SubComponents/FormInstance/style.scss';
+  // }
+}
+</style>

package/src/components/SubComponents/Breadcrumb/constants.js

@@ -0,0 +1,15 @@
+const items = [
+  {
+    text: 'Home',
+    to: '/'
+  },
+  {
+    text: 'Go to google',
+    href: 'https://google.com'
+  },
+  {
+    text: 'Another Story',
+    active: true
+  }
+]
+export default items

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

@@ -0,0 +1,22 @@
+import Breadcrumb from './index.vue'
+import mockData from './constants'
+
+export default {
+  title: 'SubComponents/Breadcrumb',
+  component: Breadcrumb,
+  argTypes: {
+    breadcrumbItems: {
+      control: 'array'
+    },
+    rtl: {
+      control: 'boolean'
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    breadcrumbItems: mockData,
+    rtl: false
+  }
+}

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

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="wcl-breadcrumb"
+    :class="{ ['wcl-breadcrumb--rtl']: rtl, ['wcl-breadcrumb--ltr']: !rtl }"
+  >
+    <ol class="breadcrumb">
+      <li
+        v-for="(item, index) in breadcrumbItems"
+        :key="index"
+        class="breadcrumb-item"
+      >
+        <a v-if="item.href" :href="item.href" target="_self">{{ item.text }}</a>
+        <nuxt-link v-else-if="item.to" :to="item.to">{{ item.text }}</nuxt-link>
+      </li>
+    </ol>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Breadcrumb',
+  props: {
+    breadcrumbItems: {
+      type: Array,
+      required: true
+    },
+    rtl: {
+      type: Boolean,
+      required: false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/vars/src/colors.scss';
+
+.wcl-breadcrumb {
+  .breadcrumb {
+    background: none;
+    padding: 0;
+    font-size: 16px;
+    margin-bottom: 6px !important;
+
+    .breadcrumb-item a {
+      color: $black !important;
+    }
+  }
+
+  &--rtl {
+    direction: rtl;
+    text-align: right;
+    .breadcrumb-item {
+      &:last-of-type::after {
+        content: '';
+        padding-right: 0rem;
+      }
+      &:after {
+        color: $black;
+        content: '>';
+        padding-right: 0.5rem;
+        margin-left: 0.5rem;
+      }
+      &:before {
+        content: '';
+      }
+      padding-right: 0.5rem;
+      padding-left: 0;
+      &:first-of-type,
+      &:last-of-type {
+        padding-right: 0px;
+      }
+    }
+  }
+
+  &--ltr {
+    .breadcrumb-item {
+      &:first-of-type::before {
+        content: '';
+      }
+      &:before {
+        color: $black;
+        content: '>';
+        vertical-align: middle;
+      }
+
+      &:first-of-type {
+        padding-left: 0px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div v-if="card" class="card_item__body">
+    <row v-if="card.date">
+      <column :sm="1">
+        <icon
+          :glyph="Clock"
+          :icon-alt="'clock icon'"
+          :height="20"
+          :width="20"
+        />
+      </column>
+      <column class="card_item__meta card_item__meta--date">
+        <rich-text :content="card.date" :without-container="true" />
+      </column>
+    </row>
+    <row v-if="card.location">
+      <column :sm="1">
+        <icon
+          :glyph="LocationIcon"
+          :icon-alt="'location icon'"
+          :height="20"
+          :width="20"
+        />
+      </column>
+      <column class="card_item__meta card_item__meta--location">
+        <rich-text :content="card.location" :without-container="true" />
+      </column>
+    </row>
+
+    <template v-if="card.description">
+      <rich-text
+        :content="card.description"
+        :without-container="true"
+        class="card_item__desc pb-3"
+        :class="{ rtl: card.rtl }"
+        :strip-html="true"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import Icon from '../Icon/index.vue'
+import Clock from '../../../assets/icons/clock.svg?url'
+import LocationIcon from '../../../assets/icons/location.svg?url'
+import RichText from '../../Paragraphs/RichText/index.vue'
+
+export default {
+  components: {
+    Column,
+    Icon,
+    Row,
+    RichText
+  },
+  props: {
+    card: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      Clock,
+      LocationIcon
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@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 {
+  &__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;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+  &__desc {
+    &.rtl {
+      @include makeRTL;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <div v-if="card" class="card_item">
+    <div
+      v-if="card.imageSrc"
+      class="card_item__image"
+      :style="`background-image: url('${card.imageSrc}');`"
+    ></div>
+
+    <div v-if="card.pillText">
+      <div
+        class="card_item__pillTop pillTop"
+        :class="{
+          [`card_item__pillTop--rtl-${!!card.rtl}`]: true
+        }"
+        aria-hidden="true"
+      >
+        {{ card.pillText }}
+      </div>
+    </div>
+
+    <div
+      :class="
+        `card_item__spacer card_item__spacer--${
+          card.imageSrc
+            ? 'withImage'
+            : card.pillText
+            ? 'withPillOnly'
+            : 'withoutImage'
+        }`
+      "
+    ></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: $black;
+}
+
+.card_item {
+  &__image {
+    height: 196.88px;
+    width: 100%;
+    margin-top: -1px;
+    border-top-left-radius: $borderRadius - 2;
+    border-top-right-radius: $borderRadius - 2;
+    background-size: cover;
+    background-position: center center;
+  }
+
+  &__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;
+      }
+    }
+  }
+
+  &__spacer {
+    &--withImage {
+      height: $cardTextPadding;
+    }
+    &--withPillOnly {
+      height: $cardTextPadding * 4.5;
+    }
+    &--withoutImage {
+      height: $cardTextPadding;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,145 @@
+import CardGroup from './index.vue'
+
+export default {
+  title: 'SubComponents/CardGroup',
+  component: { CardGroup },
+  argTypes: {
+    collectionTitle: {
+      control: 'text'
+    },
+    titleTag: {
+      control: 'text'
+    },
+    cards: {
+      type: 'number'
+    },
+    background: {
+      control: 'select',
+      options: ['grey', 'yellow', 'white']
+    },
+    showImage: {
+      control: 'boolean'
+    },
+    link: {
+      control: 'text'
+    },
+    date: {
+      control: 'text'
+    },
+    location: {
+      control: 'text'
+    },
+    rtl: {
+      control: 'boolean'
+    },
+    columns: {
+      type: 'number'
+    },
+    emptyCardsText: {
+      control: 'text'
+    }
+  }
+}
+
+const DefaultContent = (args) => ({
+  components: { CardGroup },
+  setup() {
+    return { args };
+  },
+  data: () => ({
+    loading: true,
+    filter: null,
+    colours: ['orange', 'blue', 'red', 'pink'],
+    title: [
+      'Card title goes here',
+      'Card title goes here. long text long text long text',
+      'No description and no image',
+      'القوانين والأنظمة'
+    ],
+    description: [
+      'Long text. Donec id elit non mi porta gravida at eget metus. id elit non mi porta gravida at eget metus. id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.',
+      'Short text. Maecenas sed diam eget risus varius blandit.',
+      '',
+      'بعض الأمثلة السريعة للنص الذي سيتم بناؤه على علامة التبويب 1 وتشكيل الجزء الأكبر من محتوى البطاقة.'
+    ],
+    images: [
+      `https://picsum.photos/900/600/?image=26`,
+      'https://picsum.photos/600/300/?image=26',
+      undefined,
+      'https://picsum.photos/300/200/?image=26'
+    ]
+  }),
+  computed: {
+    collectionItems() {
+      const cardItem = {
+        title: undefined,
+        imageSrc: undefined,
+        imageAlt: args.showImage ? 'card alt' : undefined,
+        description: undefined,
+        link: args.link,
+        pillText: null,
+        colour: null,
+        date: args.date,
+        location: args.location
+      }
+      return Array(args.cards)
+        .fill(cardItem)
+        .map((card) => JSON.parse(JSON.stringify(card)))
+        .map((card, index) => {
+          let colourIndex = index
+          if (colourIndex > this.colours.length - 1) {
+            colourIndex = (index % (this.colours.length - 1)) - 1
+          }
+          card.pillText = this.colours[colourIndex]
+          card.colour = this.colours[colourIndex]
+          card.description = this.description[colourIndex]
+          card.title = this.title[colourIndex]
+
+          if (args.showImage) {
+            card.imageSrc = this.images[colourIndex]
+          }
+          return card
+        })
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false
+    }, 1000)
+  },
+  methods: {
+    filterCards(cards) {
+      return cards.filter((card) => {
+        if (this.filter) {
+          return card.pillText === this.filter
+        }
+        return true
+      })
+    }
+  },
+  template: `
+  <card-group
+        v-bind="args"
+        :title="args.collectionTitle"
+        :cards="filterCards(collectionItems)"
+        @switched="(e) => filter = e" 
+  />
+        `
+})
+
+export const Default = DefaultContent.bind({})
+
+Default.args = {
+  collectionTitle: 'Card Group title',
+  titleTag: 'h2',
+  cards: 8,
+  background: 'grey',
+  showImage: true,
+  link: 'https://www.google.com/',
+  date: 'Weekday DD MM YYYY',
+  location: '717 Flinders, Melbourne',
+  rtl: false,
+  columns: 3,
+  emptyCardsText: 'No results returned'
+}
+