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

package/src/components/SubComponents/FormInstance/tests/token.test.js

@@ -0,0 +1,33 @@
+import { TwigFormElement } from '../models/overrides/twig'
+import json from '../stories/mocks/token.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'token'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    const form = { components }
+    const data = {
+      full_name: 'sds',
+      checkbox1: true,
+      container: {
+        container_textbox: 'afssf',
+        tx1: [
+          {
+            tx1: 'dsfs'
+          }
+        ]
+      }
+    }
+    const twig = new TwigFormElement()
+    const printFn = twig.printTokens.toString()
+    const printFnBody = printFn.slice(
+      printFn.indexOf('{') + 1,
+      printFn.lastIndexOf(';')
+    )
+
+    expect(eval(printFnBody)).toBe(
+      `first name: sds<br/>is coming?: Yes<br/>Where do you live?: afssf<br/>Child: dsfs`
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/twig.test.js

@@ -0,0 +1,74 @@
+import json from '../stories/mocks/twig.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'twig'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          decimalLimit: 0,
+          defaultValue: 2,
+          delimiter: true,
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--n1',
+          input: true,
+          inputFormat: 'plain',
+          key: 'n1',
+          label: 'n1',
+          labelPosition: 'top',
+          mask: false,
+          requireDecimal: false,
+          truncateMultipleSpaces: true,
+          type: 'number',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 2 },
+          clearOnHide: true,
+          customClass: 'custom-formio-2',
+          decimalLimit: 0,
+          defaultValue: 3,
+          delimiter: true,
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--n2',
+          input: true,
+          inputFormat: 'plain',
+          key: 'n2',
+          label: 'n2',
+          labelPosition: 'top',
+          mask: false,
+          requireDecimal: false,
+          truncateMultipleSpaces: true,
+          type: 'number',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 3 },
+          clearOnHide: true,
+          content:
+            '<label for="0" class="col-form-label">Twig with template {{( data.n2 + data.n1 )}}</label><div id="0">the sum of two numbers is {{( data.n2 + data.n1 )}}</div>',
+          customClass: 'custom-formio-3',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--twig1',
+          input: false,
+          key: 'twig1',
+          label: 'Twig with template {{( data.n2 + data.n1 )}}',
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: true,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/url.test.js

@@ -0,0 +1,45 @@
+import json from '../stories/mocks/url.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'url'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--url1',
+          input: true,
+          key: 'url1',
+          label: 'url1',
+          labelPosition: 'top',
+          mask: false,
+          type: 'url',
+          validate: { maxLength: 255, required: false }
+        }
+      ])
+    )
+  })
+
+  it(`should return a submission value with prefix`, () => {
+    const submission = FormTestUtils.handleSubmission(
+      json,
+      'https://www.google.com'
+    )
+    expect(submission).toEqual({
+      url1: 'https://www.google.com'
+    })
+  })
+
+  it(`should return a submission value without prefix`, () => {
+    const submission = FormTestUtils.handleSubmission(json, 'www.google.com')
+    expect(submission).toEqual({
+      url1: 'http://www.google.com'
+    })
+  })
+})

package/src/components/SubComponents/FormInstance/tests/value.test.js

@@ -0,0 +1,31 @@
+import json from '../stories/mocks/value.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'value'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          defaultValue: '<h1>Heading h1</h1> <p>test</p>',
+          disabled: false,
+          editor: 'quill',
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--value1',
+          input: true,
+          isUploadEnabled: false,
+          key: 'value1',
+          label: 'value1',
+          labelPosition: 'top',
+          mask: false,
+          type: 'textarea',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/wizard.test.js

@@ -0,0 +1,145 @@
+import json from '../stories/mocks/wizard.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'wizard'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          collapsed: true,
+          collapsible: true,
+          components: [
+            {
+              attributes: { counter: 4 },
+              clearOnHide: true,
+              customClass: 'custom-formio-4',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t1e',
+              input: true,
+              key: 't1e',
+              label: 'label 1',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: true }
+            },
+            {
+              attributes: { counter: 5 },
+              clearOnHide: true,
+              customClass: 'custom-formio-5',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t1d',
+              input: true,
+              key: 't1d',
+              label: 'label 2',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: true }
+            },
+            {
+              attributes: { counter: 6 },
+              clearOnHide: true,
+              customClass: 'custom-formio-6',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t1c',
+              input: true,
+              key: 't1c',
+              label: 'label 3',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: true }
+            },
+            {
+              attributes: { counter: 7 },
+              clearOnHide: true,
+              customClass: 'custom-formio-7',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t1b',
+              input: true,
+              key: 't1b',
+              label: 'label 4',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: true }
+            },
+            {
+              attributes: { counter: 8 },
+              clearOnHide: true,
+              customClass: 'custom-formio-8',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t1a',
+              input: true,
+              key: 't1a',
+              label: 'label 5',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: true }
+            }
+          ],
+          customClass: 'custom-formio-1',
+          description: '',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--p1',
+          input: false,
+          key: 'p1',
+          label: 'p1',
+          labelPosition: 'top',
+          mask: false,
+          title: 'p1',
+          type: 'panel',
+          validate: {}
+        },
+        {
+          attributes: { counter: 2 },
+          clearOnHide: true,
+          collapsed: true,
+          collapsible: true,
+          components: [
+            {
+              attributes: { counter: 9 },
+              clearOnHide: true,
+              customClass: 'custom-formio-9',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--t2',
+              input: true,
+              key: 't2',
+              label: 't2',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255, required: false }
+            }
+          ],
+          customClass: 'custom-formio-2',
+          description: '',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--p2',
+          input: false,
+          key: 'p2',
+          label: 'p2',
+          labelPosition: 'top',
+          mask: false,
+          title: 'p2',
+          type: 'panel',
+          validate: {}
+        }
+      ])
+    )
+  })
+})

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

@@ -22,12 +22,12 @@
           @update="searchType !== 'googlerest' ? onChange : () => {}"
           @keyup.enter="onChange"
         ></b-form-input>
-        <b-input-group-append>
+        <template #append>
           <b-button size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
           /></b-button>
-        </b-input-group-append>
+        </template>
       </b-input-group>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
@@ -56,10 +56,10 @@
 import axios from 'axios'
 import searchIcon from '../../../assets/icons/search.svg?url'
 import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput, BInputGroupAppend } from 'bootstrap-vue-next'
+import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
 
 export default {
-  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  components: { SearchListing, BButton, BInputGroup, BFormInput },
   props: {
     pageLimit: {
       type: Number,

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

@@ -127,13 +127,13 @@ export default {
   }
 
   .modal-header {
-    position: absolute;
     top: 0;
     height: 45px;
     background: $white;
     z-index: 1;
-    width: 100%;
-
+    margin-left: auto;
+    margin-right:0%;
+  
     &__wrap {
       position: relative;
       width: 100%;
@@ -152,7 +152,7 @@ export default {
     }
   }
   .modal-body {
-    padding: 32px;
+    padding: 0px 32px 32px;
     margin-top: 16px;
     .video-player {
       @include fp(min-height, 250, 588);
@@ -183,9 +183,6 @@ export default {
   .modal-footer {
     border: none;
   }
-  .modal-footer {
-    display: none;
-  }
 }
 </style>
 <style lang="scss" scoped>

package/src/includes/scss/vars/src/colors.scss

@@ -20,6 +20,21 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+// Functional colours
+$wsv-fun-dark-green: #576D2F;
+$wsv-fun-dark-blue: #104f77;
+$wsv-fun-dark-purple: #55356b;
+$wsv-fun-dark-red: #760031;
+$wsv-fun-dark-brown: #763b00;
+$wsv-fun-dark-caramel: #cb7c2d;
+$wsv-fun-light-teal: #7ac2b5;
+$wsv-fun-light-blue: #8ecade;
+$wsv-fun-light-purple: #9871a8;
+$wsv-fun-light-fuchsia: #f16a7e;
+$wsv-fun-light-green: #edeb72;
+$wsv-fun-light-brown: #dbc38b;
+
+
 
 $theme-colors: (
   'gold': $gold,
@@ -43,7 +58,20 @@ $theme-colors: (
   'yellow': $yellow,
   'lightyellow': $lightyellow,
   'outline': $outline,
-  'outline-dark': $outline-dark
+  'outline-dark': $outline-dark,
+  // Functional colours
+  'wsv-fun-dark-green':$wsv-fun-dark-green,
+  'wsv-fun-dark-blue':$wsv-fun-dark-blue,
+  'wsv-fun-dark-purple':$wsv-fun-dark-purple,
+  'wsv-fun-dark-red':$wsv-fun-dark-red,
+  'wsv-fun-dark-brown':$wsv-fun-dark-brown,
+  'wsv-fun-dark-caramel':$wsv-fun-dark-caramel,
+  'wsv-fun-light-teal':$wsv-fun-light-teal,
+  'wsv-fun-light-blue':$wsv-fun-light-blue,
+  'wsv-fun-light-purple':$wsv-fun-light-purple,
+  'wsv-fun-light-fuchsia':$wsv-fun-light-fuchsia,
+  'wsv-fun-light-green':$wsv-fun-light-green,
+  'wsv-fun-light-brown':$wsv-fun-light-brown
 );
 
 :export {

package/src/index.js

@@ -1,17 +1,17 @@
 // Global Components
-import Container from './components/Containers/Container'
-import Row from './components/Containers/Row'
-import Column from './components/Containers/Column'
-import HomepageHeader from './components/Containers/HomepageHeader'
-import Subheader from './components/Containers/Subheader'
-import SectionGroup from './components/Containers/SectionGroup'
+import Container from './components/Containers/Container/index.vue'
+import Row from './components/Containers/Row/index.vue'
+import Column from './components/Containers/Column/index.vue'
+import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
+import Subheader from './components/Containers/Subheader/index.vue'
+import SectionGroup from './components/Containers/SectionGroup/index.vue'
 
-import AppHeader from './components/Global/AppHeader'
-import AppFooter from './components/Global/AppFooter'
-import HeroHeader from './components/Global/HeroHeader'
-import SocialShare from './components/Global/SocialShare'
-import Strip from './components/Global/Strip'
-import AlertStrip from './components/Global/AlertStrip'
+import AppHeader from './components/Global/AppHeader/index.vue'
+import AppFooter from './components/Global/AppFooter/index.vue'
+import HeroHeader from './components/Global/HeroHeader/index.vue'
+import SocialShare from './components/Global/SocialShare/index.vue'
+import Strip from './components/Global/Strip/index.vue'
+import AlertStrip from './components/Global/AlertStrip/index.vue'
 import CardGrid from './components/Common/CardGrid/index.vue'
 import CardGridItem from './components/Common/CardGridItem/index.vue'
 import Cookies from './components/Global/Cookies/index.vue'
@@ -20,35 +20,36 @@ import GlobalNotice from './components/Global/GlobalNotice/index.vue'
 import ContrastMode from './components/Global/ContrastMode/index.vue'
 
 // Paragraphs
-import RichText from './components/Paragraphs/RichText'
-import TextMedia from './components/Paragraphs/TextMedia'
-import Accordion from './components/Paragraphs/Accordion'
-import TabbedCards from './components/Paragraphs/TabbedCards'
-import BrowseContent from './components/Paragraphs/BrowseContent'
-import TaskFinder from './components/Paragraphs/TaskFinder'
-import ListGroup from './components/Paragraphs/ListGroup'
-import ScrollSpy from './components/Paragraphs/ScrollSpy'
-import Directory from './components/Paragraphs/Directory'
-import SelectableCards from './components/Paragraphs/SelectableCards'
-import VideoMedia from './components/Paragraphs/VideoPlayer'
-import VideoGrid from './components/Paragraphs/VideoGrid'
-import Statistics from './components/Paragraphs/Statistics'
-import ProofPoints from './components/Paragraphs/ProofPoints'
-import TabulatedData from './components/Paragraphs/TabulatedData'
-import Breakout from './components/Paragraphs/Breakout'
-import Tabs from './components/Paragraphs/Tabs'
-import MarketingBanner from './components/Paragraphs/MarketingBanner'
-import RelatedInformation from './components/Paragraphs/RelatedInformation'
-import Calculator from './components/Paragraphs/Calculator'
+import RichText from './components/Paragraphs/RichText/index.vue'
+import TextMedia from './components/Paragraphs/TextMedia/index.vue'
+import Accordion from './components/Paragraphs/Accordion/index.vue'
+import TabbedCards from './components/Paragraphs/TabbedCards/index.vue'
+import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
+import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
+import ListGroup from './components/Paragraphs/ListGroup/index.vue'
+import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
+import Directory from './components/Paragraphs/Directory/index.vue'
+import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
+import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
+import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
+import Statistics from './components/Paragraphs/Statistics/index.vue'
+import ProofPoints from './components/Paragraphs/ProofPoints/index.vue'
+import TabulatedData from './components/Paragraphs/TabulatedData/index.vue'
+import Breakout from './components/Paragraphs/Breakout/index.vue'
+import Tabs from './components/Paragraphs/Tabs/index.vue'
+import MarketingBanner from './components/Paragraphs/MarketingBanner/index.vue'
+import RelatedInformation from './components/Paragraphs/RelatedInformation/index.vue'
+import Calculator from './components/Paragraphs/Calculator/index.vue'
+import Chart from './components/Paragraphs/Chart/index.vue'
 
 // SubComponents
-import FormAddressPostcode from './components/SubComponents/FormAddressPostcode'
-import CtaButton from './components/SubComponents/CtaButton'
-import Pagination from './components/SubComponents/Pagination'
-import SingleImage from './components/SubComponents/SingleImage'
-import Loading from './components/SubComponents/Loading'
-import Icon from './components/SubComponents/Icon'
-import Breadcrumb from './components/SubComponents/Breadcrumb'
+import FormAddressPostcode from './components/SubComponents/FormAddressPostcode/index.vue'
+import CtaButton from './components/SubComponents/CtaButton/index.vue'
+import Pagination from './components/SubComponents/Pagination/index.vue'
+import SingleImage from './components/SubComponents/SingleImage/index.vue'
+import Loading from './components/SubComponents/Loading/index.vue'
+import Icon from './components/SubComponents/Icon/index.vue'
+import Breadcrumb from './components/SubComponents/Breadcrumb/index.vue'
 import CardGroup from './components/SubComponents/CardGroup/index.vue'
 import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
@@ -98,7 +99,8 @@ export {
   Tabs,
   MarketingBanner,
   RelatedInformation,
-  Calculator
+  Calculator,
+  Chart
 }
 
 // Export Sub Components

package/src/mock/jest.fileMock.js

@@ -0,0 +1 @@
+module.exports = '';

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

@@ -1,8 +0,0 @@
-import FullForm from './index.vue'
-
-export default {
-    title: 'Form/FormInstance',
-    component: FullForm,
-}
-
-export const Default = {}