@worksafevictoria/wcl7.5 1.0.0 → 1.1.0-beta.10

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

@@ -20,22 +20,27 @@ export default {
   argTypes: {
     video: {
       control: 'object',
-      defaultValue: mockData
     }
+  },
+  args: {
+    video: mockData
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { VideoThumbnail, Container, Row, Column },
-  props: Object.keys(argTypes),
+  setup () {
+    return { args }
+  },
   template: `
     <container>
     <row>
       <column md="5">
-        <video-thumbnail v-bind="$props" />
+        <video-thumbnail v-bind="args" />
       </column>
     </row>
     </container>
   `
 })
+
 export const Default = Template.bind({})

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

@@ -15,45 +15,37 @@
         />
       </div>
     </a>
-    <b-modal
-      :id="`wcl-video-modal`"
-      v-model="showModal"
-      scrollable
-      class="wcl-video-modal__modal"
-    >
-      <template #modal-header="{ close }">
-        <div class="modal-header__wrap">
-          <!-- Emulate built in modal header close button action -->
-          <a
-            href="#"
-            class="close-button"
-            :class="{ rtl: video.rtl }"
-            @click.prevent="close()"
-          >
-            <icon-close :src="IconClose" alt="close icon" class="close-icon" />
-          </a>
+    <!-- Modal -->
+    <div v-if="showModal" :id="wcl-video-modal" class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+      <div class="modal-dialog modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" @click="showModal = !showModal" aria-label="close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="wcl-video-modal__video">
+              <video-media
+                :media-title="video.mediaTitle"
+                :media-description="video.mediaDescription"
+                :video-id="video.id"
+                :provider="video.provider"
+                :transcript="video.transcript"
+                :transcript-title="video.transcriptTitle"
+                :fix-width="video.fixWidth"
+                :rtl="video.rtl"
+              />
+            </div>
+          </div>
         </div>
-      </template>
-      <div class="wcl-video-modal__video">
-        <video-media
-          :media-title="video.mediaTitle"
-          :media-description="video.mediaDescription"
-          :video-id="video.id"
-          :provider="video.provider"
-          :transcript="video.transcript"
-          :transcript-title="video.transcriptTitle"
-          :fix-width="video.fixWidth"
-          :rtl="video.rtl"
-        />
       </div>
-    </b-modal>
+    </div>
   </div>
 </template>
 
 <script>
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
-import VideoPlay from './../../../assets/icons/video-play.svg'
-import IconClose from './../../../assets/icons/icon-close.svg'
+import VideoPlay from './../../../assets/icons/video-play.svg?url'
+import IconClose from './../../../assets/icons/icon-close.svg?url'
 
 export default {
   name: 'VideoThumbnail',
@@ -112,83 +104,88 @@ export default {
 <style lang="scss">
 @import '../../../includes/scss/all';
 // The modal styling
-#wcl-video-modal {
-  .modal-dialog {
-    max-width: 1110px;
-    @media only screen and (max-width: 1150px) {
-      margin: {
-        left: 15px;
-        right: 15px;
-        top: 15px;
-      }
-    }
+  .modal {
+  background: rgba(0,0,0,0.5)
+}
 
-    .modal-content {
-      position: relative;
-      border-radius: 8px;
+.modal-backdrop {
+  display: none;
+}
+.modal-dialog {
+  max-width: 1110px;
+  @media only screen and (max-width: 1150px) {
+    margin: {
+      left: 15px;
+      right: 15px;
+      top: 15px;
     }
+  }
 
-    .modal-header {
-      position: absolute;
-      top: 0;
-      height: 45px;
-      background: $white;
-      z-index: 1;
-      width: 100%;
+  .modal-content {
+    position: relative;
+    border-radius: 8px;
+  }
 
-      &__wrap {
-        position: relative;
-        width: 100%;
-        a {
-          position: absolute;
-          right: 0;
-          z-index: 1;
-          &.rtl {
-            right: auto;
-            left: 0;
-          }
-          svg {
-            fill: $black;
-          }
+  .modal-header {
+    position: absolute;
+    top: 0;
+    height: 45px;
+    background: $white;
+    z-index: 1;
+    width: 100%;
+
+    &__wrap {
+      position: relative;
+      width: 100%;
+      a {
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        &.rtl {
+          right: auto;
+          left: 0;
+        }
+        svg {
+          fill: $black;
         }
       }
     }
-    .modal-body {
-      padding: 32px;
-      margin-top: 16px;
-      .video-player {
-        @include fp(min-height, 250, 588);
-      }
+  }
+  .modal-body {
+    padding: 32px;
+    margin-top: 16px;
+    .video-player {
+      @include fp(min-height, 250, 588);
+    }
 
-      .paragraph--video-media {
-        margin: 0;
-        .container {
-          padding: 0;
-          width: 100%;
-        }
-        h3 {
-          margin: 0;
-          font-style: normal;
-          font-weight: bold;
-          font-size: 28px;
-          line-height: 32px;
-          margin-bottom: 16px;
-          display: inline-block;
-          width: 98%;
-        }
+    .paragraph--video-media {
+      margin: 0;
+      .container {
+        padding: 0;
+        width: 100%;
       }
-      .section-group__block {
-        max-width: 100%;
+      h3 {
+        margin: 0;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 32px;
+        margin-bottom: 16px;
+        display: inline-block;
+        width: 98%;
       }
     }
-    .modal-header,
-    .modal-footer {
-      border: none;
-    }
-    .modal-footer {
-      display: none;
+    .section-group__block {
+      max-width: 100%;
     }
   }
+  .modal-header,
+  .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/vite.config.js

@@ -14,6 +14,10 @@ export default defineConfig({
     }
   },
   define: {
-    'process.env.SOME_ENV': `"${process.env.SOME_ENV}"`
+    'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
+    'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
+    'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
+    'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
+    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`
   }
 })

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

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