@worksafevictoria/wcl7.5 1.1.0-beta.7 → 1.1.0-beta.71

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,6 +19,7 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
+  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',

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

@@ -8,7 +8,7 @@
   >
     <template v-slot:content>
       <row align-v="center">
-        <column sm="5" :order="flip ? 2 : 1">
+        <column class="wcl-media-text__image" sm="5" :order="flip ? 2 : 1">
           <media-image
             v-if="mediaType === 'image' && image"
             :image-alt="image && image.alt ? image.alt : ''"
@@ -135,6 +135,10 @@ export default {
     }
   }
 
+  &__image {
+    flex: 0 0 36%;
+  }
+
   &.hideImageMob {
     @include mq('xs') {
       img {

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

@@ -106,6 +106,7 @@ const mockData = {
 export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

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

@@ -1,70 +1,107 @@
 import WebformPara from './index.vue'
 
 export default {
-    title: 'Paragraphs/Webform',
-    component: WebformPara,
-    argTypes: {
-      preview: {
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-          disable: true
-        }
+  title: 'Paragraphs/Webform',
+  component: WebformPara,
+  tags: ['autodocs'],
+  argTypes: {
+    preview: {
+      control: 'boolean',
+      table: {
+        disable: true,
       },
-      contentApiUrl: {
-        control: 'text',
-        defaultValue: process.env.CONTENT_API_URL
+    },
+    processID: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      processID: {
-        control: 'text',
-        defaultValue: `proc-id-form-api
-          .toLowerCase()
-          .split(' ')
-          .join('-')}`,
-        table: {
-          disable: true
-        }
+    },
+    formid: {
+      control: 'text',
+    },
+    type: {
+      control: 'text',
+      table: {
+        disable: true,
+      },
+    },
+    webFormJson: {
+      control: 'object',
+      table: {
+        disable: true,
       },
-      formid: {
-        control: 'string',
-        defaultValue: 'review_of_an_agent_decision',
-        table: {
-          disable: true
-        }
+    },
+    changed: {
+      table: {
+        disable: true,
       },
-      type: {
-        control: 'text',
-        defaultValue: 'api',
-        table: {
-          disable: true
-        }
+    },
+    submitted: {
+      table: {
+        disable: true,
       },
-      webFormJson: {
-        control: 'object',
-        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,
+    contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+    processID: `proc-id-form-api
+          .toLowerCase()
+          .split(' ')
+          .join('-')}`,
+  },
+}
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { WebformPara },
-  props: Object.keys(argTypes),
+  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="$props" />
-        </div>
-    </div>
-    `
+      <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>
+          <b>Change contentApiUrl from "staging" to "dev" if form not found (file form may only exist in dev)</b>
+      </div>
+      `,
 })
+
 export const Default = Template.bind({})
-Default.args = {
-    type: 'api',
-    formid: 'review_of_an_agent_decision',
-  }
+
+export const Files = Template.bind()
+// export const Files = {}
+Files.args = {
+  preview: false,
+  type: 'api',
+  formid: 'bbtest_webform_file_upload',
+  // contentApiUrl: process.env.CONTENT_API_URL,
+  contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+  processID: `proc-id-form-api
+      .toLowerCase()
+      .split(' ')
+      .join('-')}`,
+}

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 = {}

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

@@ -3,40 +3,11 @@ import CardGroup from './index.vue'
 export default {
   title: 'SubComponents/CardGroup',
   component: { CardGroup },
+  tags: ['autodocs'],
   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'
     }
   }
 }