@worksafevictoria/wcl7.5 1.1.0-beta.5 → 1.1.0-beta.50

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

@@ -7,24 +7,43 @@
     <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"
+        :items="items"
+        :fields="fields"
+        :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
+        class="table border"
+        :striped="true"
+        :sort-by="newSortBy"
+        :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">
+          <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;"/>
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'none'"
+                :src="sortIconNeutral"
+                alt="image indicating no sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'ascending'"
+                :src="sortIconAsc"
+                alt="image indicating ascending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
+                :src="sortIconDesc"
+                alt="image indicating descending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
             </span>
           </span>
         </template>
@@ -43,62 +62,67 @@ import { BTable } from 'bootstrap-vue-next'
 
 export default {
   name: 'TabulatedData',
-  components: { SectionGroup, RichText, BTable},
+  components: { SectionGroup, RichText, BTable },
   props: {
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     fields: {
       type: Array,
-      default: undefined
+      default: undefined,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFixedWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     caption: {
       type: String,
       default: '',
-      required: false
+      required: false,
     },
-    initialSortBy: {
+    sortBy: {
       type: String,
       default: undefined,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      newSortBy: this.sortBy ? [{ key: this.sortBy, 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:
         "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"
+        "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
+    accessSort(fieldVar) {
+      //this.sortBy = fieldVar.key
+      if (
+        fieldVar.thAttr['aria-sort'] === 'none' ||
+        fieldVar.thAttr['aria-sort'] === 'descending'
+      ) {
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
-      }    
-    }
-  }
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
+        //this.sortDesc = true
+      }
+    },
+  },
 }
 </script>
 
@@ -141,5 +165,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,15 @@ 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
-    }
+  tags: ['autodocs'],
+  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,27 @@ 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
-    }
+  tags: ['autodocs'],
+  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

@@ -106,46 +106,30 @@ const mockData = {
 export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
+  tags: ['autodocs'],
   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 +140,7 @@ const YoutubeContent = (args, { argTypes }) => ({
     <row>
       <column>
         <video-grid
-          v-bind="$props"
+          v-bind="args"
         />
       </column>
     </row>
@@ -165,3 +149,4 @@ const YoutubeContent = (args, { argTypes }) => ({
 })
 
 export const Youtube = YoutubeContent.bind({})
+

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

@@ -19,18 +19,12 @@ const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse
 export default {
   title: 'Paragraphs/VideoPlayer',
   component: { VideoMedia,  Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
       options: ['h2', 'h3']
     },
-    mediaTitle: {
-      control: 'text'
-    },
-    mediaDescription: {
-      control: 'text'
-        
-    },
     videoId: {
       control: 'select',
       options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
@@ -38,12 +32,6 @@ export default {
     provider: {
       control: 'select',
       options: [mockData.provider.YouTube, mockData.provider.Vimeo],
-    },
-    transcriptTitle: {
-      control: 'text'
-    },
-    transcript: {
-      control: 'text'
     }
   }
 }

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

@@ -3,38 +3,28 @@ import WebformPara from './index.vue'
 export default {
     title: 'Paragraphs/Webform',
     component: WebformPara,
+    tags: ['autodocs'],
     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 +34,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>

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

@@ -4,19 +4,11 @@ import mockData from './constants'
 export default {
   title: 'SubComponents/Breadcrumb',
   component: Breadcrumb,
-  argTypes: {
-    breadcrumbItems: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
-  }
-}
-
-export const Default = {
+  tags: ['autodocs'],
   args: {
     breadcrumbItems: mockData,
     rtl: false
   }
 }
+
+export const Default = {}