@worksafevictoria/wcl7.5 1.1.0-beta.2 → 1.1.0-beta.21

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

@@ -20,7 +20,7 @@
         :content-class="`tabbed-cards-content`"
         class="tabbed-cards__grid"
         @selected="(card, cardIndex) => setCurrentRow(rIndex, card)"
-        @focussed="focussed($event)"
+        @keydown.tab="focussed($event)"
       >
         <template v-slot:cardItem="{ card }">
           <card-grid-item
@@ -40,14 +40,12 @@
             :is-expandable="true"
           />
         </template>
-        <template
-          v-if="selectedRow === rIndex && selectedCard"
+        <template          
           v-slot:cardGridFooter
         >
-          <column class="listgroup-column">
+          <column v-if="selectedRow === rIndex && selectedCard" class="listgroup-column">
             <div ref="listgroup" class="tabbed-cards__listGroup">
-              <component
-                :is="ListGroupComponent"
+              <list-group
                 :list="selectedCard.links"
                 :title="selectedCard.linksTitle"
                 :title-tag="selectedCard.linksTag"
@@ -69,10 +67,13 @@ import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import Column from './../../Containers/Column/index.vue'
 import Icon from './../../SubComponents/Icon/index.vue'
+import ListGroup from './../../Paragraphs/ListGroup/index.vue'
+import VueScrollTo from 'vue-scrollto'
+import { nextTick } from 'vue'
 
 export default {
   name: 'TabbedCards',
-  components: { CardGrid, CardGridItem, Icon, Column },
+  components: { CardGrid, CardGridItem, Icon, Column, ListGroup },
   props: {
     heading: {
       type: String,
@@ -100,7 +101,8 @@ export default {
       selectedCard: undefined,
       selectedRow: undefined,
       screenWidth: 0,
-      loaded: false
+      loaded: false,
+      tabList: null
     }
   },
   computed: {
@@ -120,19 +122,15 @@ export default {
       } else {
         return 3
       }
-    },
-    ListGroupComponent() {
-      //List group component import to fix storybook bug
-      return () => import('./../ListGroup/index.vue')
     }
   },
   mounted() {
     window.addEventListener('resize', this.updateScreenWidth)
     this.screenWidth = document.documentElement.clientWidth
-    this.$root.$on('last-focus-out', () => {
+    /* this.$root.$on('last-focus-out', () => {
       this.selectedCard = null
       this.selectedRow = null
-    })
+    }) */
     this.loaded = true
   },
   beforeDestroy() {
@@ -151,7 +149,7 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
-    setCurrentRow(rowIndex, card) {
+    async setCurrentRow(rowIndex, card) {
       const sameCardSelected =
         card.selectedCard === this.selectedCard || !card.selectedCard
       this.selectedCard = null
@@ -162,11 +160,12 @@ export default {
           cardGrid.clearCards()
         }
       })
+      await nextTick()
+      this.tabList = this.getFocusElements()
       setTimeout(() => {
         if (window && !sameCardSelected) {
           this.selectedCard = card.selectedCard
           this.selectedRow = rowIndex
-          let VueScrollTo = require('vue-scrollto')
           let options = {
             container: 'body',
             easing: 'ease-in',
@@ -192,50 +191,21 @@ export default {
       return cols
     },
     focussed(ev) {
-      if (ev.shiftKey) {
-        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )[0]
-        if (
-          prevTabbedCard &&
-          prevTabbedCard.getAttribute('aria-expanded') === 'true'
-        ) {
-          ev.preventDefault()
-          const lG = this.$refs.listgroup
-          let itemsOfLG = lG[0].getElementsByTagName('button')
-          itemsOfLG[itemsOfLG.length - 1].focus()
-        }
-        return
-      }
-      const lG = this.$refs.listgroup
-      const isListGroupOpen = Array.isArray(lG) && lG.length > 0
-      const cardIsSelected = ev.target.parentElement.classList.contains(
-        'isSelected'
-      )
-      if (cardIsSelected && isListGroupOpen) {
-        ev.preventDefault()
-        lG[0].getElementsByTagName('button')[0].focus()
-      } else if (!cardIsSelected && isListGroupOpen) {
-        ev.preventDefault()
-        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )[0]
-        if (nextTabbedCard) {
-          nextTabbedCard.focus()
-        } else {
-          let itemsOfLG = lG[0].getElementsByTagName('button')
-          let lastItemOfLG = itemsOfLG[itemsOfLG.length - 1]
-          let nextFocusElement = this.focusNextElement(false, lastItemOfLG)
-          nextFocusElement.focus()
-        }
+      ev.preventDefault()
+      let activeElem = ev.target
+      if(!this.tabList){
+        this.tabList = this.getFocusElements()
+      } else {
+        let newList = this.getFocusElements().filter(item => this.tabList.indexOf(item) == -1)
+        this.tabList.splice(this.tabList.indexOf(activeElem) + 1,0,...newList)
       }
-      // if its the next card from the selected
+      let newTab = ev.shiftKey ? this.tabList[this.tabList.indexOf(activeElem) - 1] ||
+            this.tabList[this.tabList.length - 1]
+        : this.tabList[this.tabList.indexOf(activeElem) + 1] || this.tabList[0]
+      newTab.focus()
     },
-    focusNextElement(reverse, activeElem) {
-      /*check if an element is defined or use activeElement*/
-      activeElem =
-        activeElem instanceof HTMLElement ? activeElem : document.activeElement
 
+    getFocusElements() {
       let queryString = [
           'a:not([disabled]):not([tabindex="-1"])',
           'button:not([disabled]):not([tabindex="-1"])',
@@ -247,11 +217,9 @@ export default {
         queryResult = Array.prototype.filter.call(
           document.querySelectorAll(queryString),
           (elem) => {
-            /*check for visibility while always include the current activeElement*/
             return (
               elem.offsetWidth > 0 ||
-              elem.offsetHeight > 0 ||
-              elem === activeElem
+              elem.offsetHeight > 0
             )
           }
         ),
@@ -282,13 +250,7 @@ export default {
             return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
           })
         )
-
-      /* if reverse is true return the previous focusable element
-     if reverse is false return the next focusable element */
-      return reverse
-        ? focusable[focusable.indexOf(activeElem) - 1] ||
-            focusable[focusable.length - 1]
-        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
+        return focusable
     }
   }
 }

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

@@ -12,8 +12,7 @@
           :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
           class="table border"
           :striped="true"
-          v-model:sort-desc="sortDesc" 
-          v-model:sort-by="sortBy"
+          :sort-by="sortBy"
           :borderless="false"
           :responsive="!isFluid"
           :stacked="!isFluid ? 'sm' : false"
@@ -74,8 +73,8 @@ export default {
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      sortBy: [{key:this.initialSortBy, order:'asc'}],
+      //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:
@@ -91,11 +90,13 @@ export default {
   },
   methods: {
    accessSort(fieldVar) {
-    this.sortBy = fieldVar.key
+    //this.sortBy = fieldVar.key
       if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortDesc = false
+        this.sortBy = [{key:fieldVar.key, order:'asc'}]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
+        this.sortBy = [{key:fieldVar.key, order:'desc'}]
+        //this.sortDesc = true
       }    
     }
   }
@@ -141,5 +142,9 @@ export default {
     vertical-align: middle;
     margin-left: 5px;
   }
+
+  .b-table-sortable-column svg {
+    display:none;
+  }
 }
 </style>

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

@@ -8,38 +8,14 @@ import {
 export default {
   title: 'Paragraphs/TaskFinder',
   component: TaskFinder,
-  argTypes: {
-    taskList: {
-      control: 'object',
-      defaultValue: taskFinderTempData
-    },
-    title: {
-      control: 'text',
-      defaultValue: taskFinderTempTitle
-    },
-    text: {
-      control: 'text',
-      defaultValue: taskFinderTempText
-    },
-    headingTag: {
-      control: 'text',
-      defaultValue: 'h2'
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  args: {
+    taskList: taskFinderTempData,
+    title: taskFinderTempTitle,
+    text: taskFinderTempText,
+    headingTag: 'h2',
+    rtl: false,
+    workwell: false
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
-  components: { TaskFinder },
-  props: Object.keys(argTypes),
-  template: '<task-finder v-bind="$props" :storybook="true"/>'
-})
-
-export const Default = DefaultContent.bind({})
+export const Default = {}

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

@@ -21,7 +21,7 @@
             :selected-task="selectedTask"
             :is-child="false"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
-            @selected="(task) => taskClick(task, true)"
+            @selection="(task) => taskClick(task, true)"
           >
             <task-finder-column
               v-if="isMobileOrTabletView && selectedTask"
@@ -31,7 +31,7 @@
               :selected-task="selectedTask"
               :is-mobile-or-tablet-view="isMobileOrTabletView"
               :is-child="true"
-              @selected="(task) => taskClick(task, false)"
+              @selection="(task) => taskClick(task, false)"
             >
             </task-finder-column>
           </task-finder-column>
@@ -49,7 +49,7 @@
             :selected-task="selectedTask"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
             :is-child="true"
-            @selected="(task) => taskClick(task, false)"
+            @selection="(task) => taskClick(task, false)"
           >
           </task-finder-column>
         </column>

package/src/components/Paragraphs/TaskFinder/pdf/index.vue

@@ -25,7 +25,7 @@
 
 <script>
 import { isAbsoluteUrl } from '../../../../../lib/utility'
-import Row from './../../../Containers/Container/index.vue'
+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'

package/src/components/Paragraphs/TaskFinder/task-finder-column.vue

@@ -16,7 +16,7 @@
       isChild ? 'task-finder-column__child' : 'task-finder-column__parent'
     "
     :style="cards.length > 6 ? false : 'overflow-y: auto'"
-    @selected="(card) => $emit('selected', { card })"
+    @selected="(card) => $emit('selection', { card })"
   >
     <template v-slot:cardItem="{ card }">
       <card-grid-item

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

@@ -19,75 +19,26 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
-  argTypes: {
-    content: {
-      control: 'text',
-      defaultValue:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
-    },
-    titleText: {
-      control: 'text',
-      defaultValue: 'A sample media item'
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    hasBgColor: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    flip: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    video: {
-      control: 'object'
-    },
-    image: {
-      control: 'object'
-    },
-    mediaType: {
-      control: 'text'
-    },
-    storybook: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    hideImageMob: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  args: {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
+    titleText: 'A sample media item',
+    titleTag: 'h3',
+    hasBgColor: false,
+    flip: false,
+    rtl: false,
+    workwell: false,
+    storybook: true,
+    hideImageMob: false
   }
 }
 
-const TextWithImageDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithImage = TextWithImageDefault.bind({})
+export const TextWithImage = {}
 TextWithImage.args = {
   mediaType: 'image',
   image: MockImage
 }
 
-const TextWithVideoDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithVideo = TextWithVideoDefault.bind({})
+export const TextWithVideo = {}
 TextWithVideo.args = {
   mediaType: 'video',
   video: MockVideo

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

@@ -107,45 +107,28 @@ export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
   argTypes: {
-    gridTitle: {
-      control: 'text',
-      defaultValue: mockData.title
-    },
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    gridDescription: {
-      control: 'text',
-      defaultValue: mockData.description
-    },
-    videoList: {
-      control: 'object',
-      defaultValue: mockData.videos
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: mockData.rtl
-    },
-    threeColumns: {
-      control: 'boolean',
-      defaultValue: mockData.threeColumns
-    },
-    greyBackground: {
-      control: 'boolean',
-      defaultValue: mockData.greyBackground
-    },
-    cta: {
-      control: 'object',
-      defaultValue: mockData.cta
+      options: ['h2', 'h3']
     }
+  },
+  args: {
+    gridTitle: mockData.title,
+    titleTag: 'h2',
+    gridDescription: mockData.description,
+    videoList: mockData.videos,
+    rtl: mockData.rtl,
+    threeColumns: mockData.threeColumns,
+    greyBackground:  mockData.greyBackground,
+    cta:  mockData.cta
   }
 }
 
 const YoutubeContent = (args, { argTypes }) => ({
   components: { VideoGrid, Container, Row, Column },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args };
+  },
   data() {
     return {
       videos: mockData.videos
@@ -156,7 +139,7 @@ const YoutubeContent = (args, { argTypes }) => ({
     <row>
       <column>
         <video-grid
-          v-bind="$props"
+          v-bind="args"
         />
       </column>
     </row>
@@ -165,3 +148,4 @@ const YoutubeContent = (args, { argTypes }) => ({
 })
 
 export const Youtube = YoutubeContent.bind({})
+

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

@@ -6,35 +6,27 @@ export default {
     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
         }
@@ -44,27 +36,61 @@ export default {
         table: {
             disable: true
           }
+      },
+      changed: {
+        table: {
+          disable: true
+        }
+      },
+      submitted: {
+        table: {
+          disable: true
+        }
+      },
+      rendered: {
+        table: {
+          disable: true
+        }
+      },
+      nextPage: {
+        table: {
+          disable: true
+        }
+      },
+      prevPage: {
+        table: {
+          disable: true
+        }
       }
-    }
+    },
+    args: {
+      preview: true,
+      type: 'api',
+      formid: 'review_of_an_agent_decision',
+      contentApiUrl: process.env.CONTENT_API_URL,
+      processID: `proc-id-form-api
+          .toLowerCase()
+          .split(' ')
+          .join('-')}`
+    },
   }
 
-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',
-  }
+  const Template = (args) => ({
+    components: { WebformPara },
+    setup() {
+      return { args }
+    },
+    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="args" />
+          </div>
+      </div>
+      `
+  })
+  
+  export const Default = Template.bind({})

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

@@ -2,7 +2,7 @@
   <div class="webform_para container-sm container-md container-lg container-xl">
     <div class="row">
       <div class="col-12 col-md-9">
-       <!--  <form-handler
+        <form-handler
           :formid="formid"
           :web-form-json="webFormJson"
           :content-api-url="contentApiUrl"
@@ -15,16 +15,19 @@
           @prevPage="() => $emit('prevPage')"
         />
         <i v-if="preview" class="fa fa-info-circle text-muted">
-          preview mode. submission logged to console
-        </i> -->
+          <span> preview mode. submission logged to console</span>
+        </i>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
+import colors from '../../../includes/scss/vars/src/colors.scss?inline'
+
 export default {
-  name: 'WebformPara'/* ,
+  name: 'WebformPara',
   components: { FormHandler },
   props: {
     formid: {
@@ -87,7 +90,7 @@ export default {
       }
       return styles
     }
-  } */
+  } 
 }
 </script>
 
@@ -96,8 +99,8 @@ export default {
   width: 100%;
   padding-top: 32px;
   padding-bottom: 64px;
-  // :deep() {
-    // @import './../../SubComponents/FormInstance/style.scss';
-  // }
+  :deep() {
+    @import './../../SubComponents/FormInstance/style.scss';
+  }
 }
 </style>