@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,53 @@
+$gold: #f4ce69;
+$orange: #fdcd59;
+$orange100: #fdb813;
+$orange20: #fff0cf;
+$white: #ffffff;
+$lightgray: #f3f3f3;
+$darkgray: #4c4c4c;
+$gray: #bababa;
+$gray-alt: #e7e7e7;
+$black: #191919;
+$red: #e60000;
+$pink: #b74f6f;
+$lightred: #f8d8d4;
+$blue: #02819e;
+$lightblue: #cce6ec;
+$green: #4e7840;
+$form-green: #33a532;
+$lightgreen: #d9e4d9;
+$yellow: #ffd229;
+$lightyellow: #fff6d4;
+$outline: #da47ff;
+$outline-dark: #ffffff;
+
+$theme-colors: (
+  'gold': $gold,
+  'orange': $orange,
+  'orange100': $orange100,
+  'orange20': $orange20,
+  'white': $white,
+  'lightgray': $lightgray,
+  'darkgray': $darkgray,
+  'gray': $gray,
+  'gray-alt': $gray-alt,
+  'black': $black,
+  'red': $red,
+  'pink': $pink,
+  'lightred': $lightred,
+  'blue': $blue,
+  'lightblue': $lightblue,
+  'green': $green,
+  'form-green': $form-green,
+  'lightgreen': $lightgreen,
+  'yellow': $yellow,
+  'lightyellow': $lightyellow,
+  'outline': $outline,
+  'outline-dark': $outline-dark
+);
+
+:export {
+  @each $key, $value in $theme-colors {
+    #{unquote($key)}: $value;
+  }
+}

package/src/index.js

@@ -0,0 +1,116 @@
+// 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 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 CardGrid from './components/Common/CardGrid/index.vue'
+import CardGridItem from './components/Common/CardGridItem/index.vue'
+import Cookies from './components/Global/Cookies/index.vue'
+import BackToTop from './components/Global/BackToTop/index.vue'
+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'
+
+// 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 CardGroup from './components/SubComponents/CardGroup/index.vue'
+import Search from './components/SubComponents/Search/index.vue'
+import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
+import ResourceGroup from './components/SubComponents/ResourceGroup/index.vue'
+
+// Export Global Components
+export {
+  Container,
+  Row,
+  Column,
+  HomepageHeader,
+  Subheader,
+  AppHeader,
+  AppFooter,
+  HeroHeader,
+  SocialShare,
+  Strip,
+  AlertStrip,
+  TaskFinder,
+  VideoMedia,
+  VideoGrid,
+  CardGrid,
+  CardGridItem,
+  CardGroup,
+  SectionGroup,
+  Cookies,
+  BackToTop,
+  GlobalNotice,
+  ContrastMode
+}
+
+// Export Paragraphs
+export {
+  RichText,
+  TextMedia,
+  Accordion,
+  TabbedCards,
+  BrowseContent,
+  ListGroup,
+  ScrollSpy,
+  Directory,
+  SelectableCards,
+  Statistics,
+  ProofPoints,
+  TabulatedData,
+  Breakout,
+  Tabs,
+  MarketingBanner,
+  RelatedInformation,
+  Calculator
+}
+
+// Export Sub Components
+export {
+  FormAddressPostcode,
+  CtaButton,
+  Pagination,
+  SingleImage,
+  Loading,
+  Icon,
+  Breadcrumb,
+  Search,
+  VideoThumbnail,
+  ResourceGroup
+}

package/src/main.js

@@ -0,0 +1,18 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import './style.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
+import 'bootstrap'
+import 'bootstrap-vue'
+import App from './App.vue'
+import BootstrapVue from 'bootstrap-vue'
+import BootstrapVueNext from 'bootstrap-vue-next'
+
+createApp(App).mount('#app')
+.use(BootstrapVueNext)
+.use(BootstrapVue)

package/src/mock/accordion.js

@@ -0,0 +1,104 @@
+const accordionTempData = {
+  title: 'h2. Section heading',
+  rtl: false,
+  isStepper: false,
+  showPreHeading: false,
+  titleTag: 'h2',
+  accordionList: [
+    {
+      title: 'Item one',
+      text:
+        'Lorem ipsumd 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.'
+    },
+    {
+      title: 'Item two',
+      text:
+        '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.'
+    },
+    {
+      title: 'Item three',
+      text:
+        '<p>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>'
+    }
+  ]
+}
+
+const accordionPreHeadingTempData = {
+  title: 'h3. Section heading',
+  rtl: false,
+  isStepper: false,
+  showPreHeading: true,
+  titleTag: 'h3',
+  accordionList: [
+    {
+      title: 'Item one',
+      text:
+        '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.'
+    },
+    {
+      title: 'Item two',
+      text:
+        '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.'
+    },
+    {
+      title: 'Item three',
+      text:
+        '<p>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>'
+    }
+  ]
+}
+const accordionTempDataAr = {
+  title: 'عنوان القسم',
+  rtl: true,
+  isStepper: false,
+  showPreHeading: false,
+  titleTag: 'h2',
+  accordionList: [
+    {
+      title: 'البند الأول',
+      text:
+        'شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً'
+    },
+    {
+      title: 'البند الثاني',
+      text:
+        'شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً'
+    },
+    {
+      title: 'البند الثالث',
+      text:
+        '<p>شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً</p>'
+    }
+  ]
+}
+const accordionPreHeadingTempDataAr = {
+  title: 'عنوان القسم',
+  rtl: true,
+  isStepper: false,
+  showPreHeading: true,
+  titleTag: 'h3',
+  accordionList: [
+    {
+      title: 'البند الأول',
+      text:
+        'شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً'
+    },
+    {
+      title: 'البند الثاني',
+      text:
+        'شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً'
+    },
+    {
+      title: 'البند الثالث',
+      text:
+        '<p>شيء قد ٢٠٠٤ كانتا, حدى تم مسؤولية الخاطفة الربيع،, بأيدي العدّ الأولية من قام. تم ويعزى وبداية يبق, ما الشمال الإحتفاظ يكن. دأبوا الخاسرة ما قبل. أي لكل تطوير مليارات شموليةً</p>'
+    }
+  ]
+}
+
+export {
+  accordionTempData,
+  accordionTempDataAr,
+  accordionPreHeadingTempData,
+  accordionPreHeadingTempDataAr
+}