@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/Calculator/RiskLevel/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <container class="ffh-result">
+    <row class="ffh-result__risk">
+      <column :lg="12">
+        <div id="ffh-result__risk--title" class="ffh-result__risk--title">
+          <h2>{{ headerTitle }}</h2>
+        </div>
+        <rich-text
+          class="ffh-result__risk--message"
+          :content="headerMessage"
+          :without-container="true"
+        />
+
+        <div class="ffh-result__risk--info">
+          <img :src="riskIcon" class="ffh-result__risk--info--img" />
+          <h3 class="ffh-result__risk--info--title">
+            {{ riskTitle }}
+          </h3>
+          <p>{{ timeLevel }}</p>
+          <p>{{ speedLevel }}</p>
+          <p>{{ energyLevel }}</p>
+          <rich-text
+            class="ffh-result__info--message"
+            :content="riskMessge"
+            :without-container="true"
+          />
+        </div>
+      </column>
+    </row>
+    <row class="ffh-result__nav">
+      <column>
+        <cta-button
+          :glyph="CaretLeft"
+          :rtl="true"
+          variant="link"
+          @clicked="$emit('reset')"
+          >Calculate again</cta-button
+        >
+      </column>
+    </row>
+  </container>
+</template>
+
+<script>
+import Container from '../../../Containers/Container/index.vue'
+import Column from '../../../Containers/Column/index.vue'
+import Row from '../../../Containers/Row/index.vue'
+import CtaButton from '../../../SubComponents/CtaButton/index.vue'
+import RichText from '../../../Paragraphs/RichText/index.vue'
+import CaretLeft from '../../../../assets/icons/caret-left.svg?url'
+
+export default {
+  name: 'RiskLevel',
+  components: { Column, Row, Container, CtaButton, RichText },
+  props: {
+    riskPoints: {
+      type: Array,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      CaretLeft,
+      headerTitle: 'Your results',
+      headerMessage:
+        'These are you results based on the weight of the object being dropped and how high in meters you are up.'
+    }
+  },
+  computed: {
+    riskIcon() {
+      if (this.riskPoints && this.riskPoints[0]?.risksResult?.icon) {
+        return `${this.riskPoints[0].risksResult.icon}`
+      }
+      return ''
+    },
+    riskTitle() {
+      if (this.riskPoints && this.riskPoints[0]?.risksResult?.title) {
+        return this.riskPoints[0].risksResult.title
+      }
+      return ''
+    },
+    riskMessge() {
+      if (this.riskPoints && this.riskPoints[0]?.risksResult?.message) {
+        return this.riskPoints[0].risksResult.message
+      }
+      return ''
+    },
+    speedLevel() {
+      let speedImpactMS =
+        this.riskPoints && this.riskPoints[0]
+          ? this.riskPoints[0].speedImpactMS
+          : ''
+
+      let speedImpactKmH =
+        this.riskPoints && this.riskPoints[0]
+          ? this.riskPoints[0].speedImpactKmH
+          : ''
+
+      return `Speed at impact: ${speedImpactMS} metres per second and ${speedImpactKmH} kilometres per hour`
+    },
+    timeLevel() {
+      let timeImpact =
+        this.riskPoints && this.riskPoints[0]
+          ? this.riskPoints[0].timeImpact
+          : ''
+
+      return `Time until impact: ${timeImpact} seconds`
+    },
+    energyLevel() {
+      let energyImpact =
+        this.riskPoints && this.riskPoints[0]
+          ? this.riskPoints[0]?.energyImpact
+          : ''
+
+      return `Energy at impact: ${energyImpact} joules`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../includes/scss/all';
+@import './styles';
+</style>

package/src/components/Paragraphs/Calculator/RiskLevel/styles.scss

@@ -0,0 +1,73 @@
+.ffh-result {
+  &__risk {
+    &--title {
+      font-weight: 700;
+      margin-top: px-to-rem(40px);
+
+      @media screen and (max-width: 478px) {
+        margin-top: px-to-rem(22px);
+      }
+      @media screen and (max-width: 768px) {
+        margin-top: px-to-rem(39px);
+      }
+
+      h2 {
+          font-weight: 700;
+      }
+    }
+
+    &--item {
+      margin-top: px-to-rem(12px);
+      height: px-to-rem(65px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $white;
+      @include fp(font-size, 18, 26);
+    }
+
+    &--info {
+      border: 3px solid $black;
+      padding: px-to-rem(42px 28px 50px);
+      margin-top: px-to-rem(50px);
+      border-radius: 8px;
+
+      @media screen and (max-width: 478px) {
+        margin-top: px-to-rem(36px);
+      }
+
+      @media screen and (max-width: 768px) {
+        margin-top: px-to-rem(50px);
+      }
+
+      &--img {
+        width: 112px;
+        height: 112px;
+        border-radius: 50%;
+      }
+      p {
+        font-size: px-to-rem(18px);
+      }
+      &--title {
+        font-size: px-to-rem(26px);
+        font-weight: 700;
+        margin-top: 20px;
+        margin-bottom: 20px;
+      }
+
+    }
+    :deep(.ffh-result__info--message) {
+        font-size: 22px;
+        font-weight: 700;
+
+        @media screen and (max-width: 478px) {
+          font-size: 20px;
+        }
+    }
+  }
+
+  &__nav {
+    margin-top: px-to-rem(35px);
+    margin-bottom: px-to-rem(35px);
+  }
+}

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

@@ -0,0 +1,27 @@
+import Calculator from './index.vue'
+import {
+  ffhPage,
+  heroHeader,
+  cardTitles,
+  cardWeights,
+  cardHeights,
+  barItems,
+  riskResults
+} from './Constants'
+
+export default {
+  title: 'Paragraphs/Calculator',
+  component: Calculator,
+  args: {
+    items: barItems,
+    titles: cardTitles,
+    weights: cardWeights,
+    heights: cardHeights,
+    steeperStyle: true,
+    ffhPage: ffhPage,
+    heroHeader: heroHeader,
+    riskResults: riskResults
+  }
+}
+
+export const FallFromHeight = {}

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

@@ -0,0 +1,284 @@
+<template>
+  <div ref="ffhApp" class="ffh-app">
+    <hero-header
+      :image="null"
+      :title="heroHeader.title"
+      :description="heroHeader.description"
+      :bg-color="null"
+      :show-social="false"
+      class="hero-header"
+    >
+    </hero-header>
+    <container class="ffh-header">
+      <row>
+        <column>
+          <progress-bar :items="barItems" :steeper-style="true"></progress-bar>
+        </column>
+      </row>
+    </container>
+
+    <card-container
+      v-show="screen === 1"
+      ref="weightCardContainer"
+      :is-weight="true"
+      :titles="titles.weight"
+      :weights="weights || []"
+      @nextScreen="nextScreen"
+    />
+    <card-container
+      v-show="screen === 2"
+      ref="heightCardContainer"
+      :is-weight="false"
+      :titles="titles.height"
+      :heights="heights || []"
+      @nextScreen="nextScreen"
+      @prevScreen="prevScreen"
+    />
+    <risk-level
+      v-show="screen === 3"
+      :risk-points="riskPoints"
+      @prevScreen="prevScreen"
+      @reset="resetApp"
+    />
+    <container class="ffh-footer">
+      <row>
+        <column>
+          <rich-text :content="ffhPage.disclaimer" :without-container="true" />
+        </column>
+      </row>
+    </container>
+  </div>
+</template>
+
+<script>
+import Container from '../../Containers/Container/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import Row from '../../Containers/Row/index.vue'
+import HeroHeader from '../../Global/HeroHeader/index.vue'
+import CardContainer from './CardContainer/index.vue'
+import ProgressBar from '../../Global/ProgressBar/index.vue'
+import RiskLevel from './RiskLevel/index.vue'
+import RichText from '../../Paragraphs/RichText/index.vue'
+
+export default {
+  name: 'Calculator',
+  components: {
+    Container,
+    Column,
+    Row,
+    HeroHeader,
+    CardContainer,
+    ProgressBar,
+    RiskLevel,
+    RichText
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    steeperStyle: {
+      type: Boolean,
+      default: true
+    },
+    titles: {
+      type: Object,
+      default: () => {}
+    },
+    weights: {
+      type: Array,
+      default: () => []
+    },
+    heights: {
+      type: Array,
+      default: () => []
+    },
+    ffhPage: {
+      type: Object,
+      default: () => {}
+    },
+    heroHeader: {
+      type: Object,
+      default: () => {}
+    },
+    riskResults: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      screen: 1,
+      selectedWeight: null,
+      selectedHeight: null,
+      barItems: [],
+      g: 9.81
+    }
+  },
+  computed: {
+    updateBar() {
+      const data = this.barItems
+      const currentIndex = data.findIndex(
+        (item) => item.value === this.screen.toString()
+      )
+
+      if (data.length === this.screen) {
+        // Update the current item
+        data[currentIndex - 1].completed = true
+        data[currentIndex].completed = true
+      } else if (currentIndex > 0) {
+        // Update the previous item if it exists
+        data[currentIndex - 1].completed = true
+        data[currentIndex - 1].checked = false
+
+        // Update the current item
+        data[currentIndex].checked = true
+        data[currentIndex].completed = false
+      }
+      return data
+    },
+    riskPoints() {
+      const isEmpty = (el) => el === null || el === undefined
+      if (isEmpty(this.selectedWeight) || isEmpty(this.selectedHeight)) {
+        return []
+      }
+
+      let speedImpactMS = Math.sqrt(
+        2 * Number(this.selectedHeight.value) * this.g
+      ).toFixed(2)
+      let speedImpactKmH = (
+        Math.sqrt(2 * Number(this.selectedHeight.value) * this.g) * 3.6
+      ).toFixed(2)
+      let timeImpact = Math.sqrt(
+        (2 * Number(this.selectedHeight.value)) / this.g
+      ).toFixed(2)
+      let energyImpact = (
+        Number(this.selectedHeight.value) *
+        this.g *
+        Number(this.selectedWeight.value)
+      ).toFixed(2)
+
+      let risksResult = null
+      const matchingLevels = this.riskResults.filter((level) => {
+        return energyImpact >= level.rangeMin && energyImpact <= level.rangeMax
+      })
+
+      if (matchingLevels.length === 0) {
+        // If no matching levels, use the last max item
+        risksResult = this.riskResults[this.riskResults.length - 1]
+      } else {
+        // If matching levels exist, use the first one
+        risksResult = matchingLevels[0]
+      }
+
+      return [
+        {
+          risksResult: risksResult,
+          speedImpactMS: speedImpactMS,
+          speedImpactKmH: speedImpactKmH,
+          timeImpact: timeImpact,
+          energyImpact: energyImpact
+        }
+      ]
+    }
+  },
+  created() {
+    this.barItems = JSON.parse(JSON.stringify(this.items))
+  },
+  methods: {
+    nextScreen(e) {
+      if (this.screen === 1) {
+        this.selectedWeight = e
+        this.fireGTM('Dropped Object Calc 1')
+      } else if (this.screen === 2) {
+        this.selectedHeight = e
+        this.fireGTM('Dropped Object Calc 2')
+      }
+      this.screen++
+
+      // change Bar
+      this.updateBar
+
+      this.$nextTick(() => {
+        if (this.$refs.ffhApp.scrollIntoView) {
+          this.$refs.ffhApp.scrollIntoView({ behavior: 'smooth' })
+        }
+      })
+    },
+    prevScreen() {
+      this.screen--
+      if (this.screen === 1) {
+        this.selectedWeight = null
+
+        this.$refs.weightCardContainer.clearCard()
+        this.$refs.heightCardContainer.clearCard()
+
+        // update Bar
+        this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
+
+        this.$nextTick(() => {
+          const cardElement = this.$refs.weightCardContainer.$el.querySelector(
+            '#selectable-cc-card-0'
+          )
+          if (cardElement !== null) {
+            cardElement.focus()
+          }
+        })
+      }
+    },
+    resetApp() {
+      this.$refs.weightCardContainer.clearCard()
+      this.$refs.heightCardContainer.clearCard()
+
+      // added so that existing values are cleared and not reported to GTM if fired
+      //delete this.selectedWeight
+      //delete this.selectedHeight
+      //delete this.riskPoints[0]
+
+      this.screen = 1
+
+      // reset Bar
+      this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
+
+      this.$nextTick(() => {
+        if (this.$refs.ffhApp.scrollIntoView) {
+          this.$refs.ffhApp.scrollIntoView({ behavior: 'smooth' })
+        }
+      })
+    },
+    fireGTM(labelVar) {
+      if (this.$gtm) {
+        let massVar = ''
+        let heightVar = ''
+        let energyVar = ''
+        if (this.selectedWeight?.value) {
+          massVar = this.selectedWeight.value
+        }
+        if (this.selectedHeight?.value) {
+          heightVar = this.selectedHeight.value
+        }
+        if (this.riskPoints[0]?.energyImpact) {
+          energyVar = this.riskPoints[0].energyImpact
+        }
+        // gather attrs
+        let attrs = {
+          label: labelVar,
+          mass: massVar,
+          height: heightVar,
+          energy: energyVar
+        }
+        // fire the event
+        this.$gtm.push({
+          event: 'custom.interaction.droppedobject.click',
+          ...attrs
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@import './styles';
+</style>

package/src/components/Paragraphs/Calculator/styles.scss

@@ -0,0 +1,49 @@
+.ffh-app {
+    padding-bottom: 40px;
+    .hero-header {
+        margin-bottom: 40px;
+        @media (min-width: 981px) {
+          margin-bottom: -50px;
+        }
+    }
+   
+    :deep(.hero-header .wcl-hero-header__mask) {
+        display: none;
+    }
+
+    :deep(.hero-header .wcl-hero-header__content-wrapper__content-col) {
+        flex: 100%;
+        max-width: 100%;
+    }
+    :deep(button.wcl-cta.default:disabled) {
+        background-color: $gray-alt;
+        color: grey;
+        cursor: not-allowed; /* Change cursor to not-allowed */
+    }
+    :deep(button.wcl-cta.default:disabled .icon) {
+        filter: opacity(0.5);
+        height: 20px;
+    }
+
+    /* Style for the link variant */
+    :deep(button.wcl-cta.default[variant="link"]) {
+        background: none;
+        padding: 0;
+        text-decoration: underline;
+        font-weight: 700;
+        cursor: pointer;
+        font-size: 22px;
+        border: none;
+        line-height: 20px;
+        letter-spacing: 0px;
+        margin-top: 50px;
+        margin-bottom: 15px;
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
+    :deep(button.wcl-cta.default[variant="link"] .wcl-cta__spacer) {
+        width: 5px
+    }
+
+}

package/src/components/Paragraphs/Directory/Records/CJ/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="paragraph--directory__records--cj">
+    <container>
+      <row>
+        <column sm="2" class="title">
+          <span>{{ item.title }}</span>
+        </column>
+        <column class="court">
+          <div><strong>Court</strong></div>
+          <span>{{ item.court }}</span>
+        </column>
+        <column class="judge">
+          <div><strong>Judge</strong></div>
+          <span>{{ item.judge }}</span>
+        </column>
+        <column class="appeal">
+          <div><strong>Appeal</strong></div>
+          <span>{{ item.appeal }}</span>
+        </column>
+        <column class="judgement">
+          <div><strong>Judgement</strong></div>
+          <span>{{ processDate(item.judgement) }}</span>
+        </column>
+        <column class="published">
+          <div><strong>Published</strong></div>
+          <span>{{ processDate(item.published) }}</span>
+        </column>
+      </row>
+    </container>
+  </div>
+</template>
+<script>
+import Container from '../../../../Containers/Container'
+import Row from '../../../../Containers/Row'
+import Column from '../../../../Containers/Column'
+import { format } from 'date-fns'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    processDate(date) {
+      return format(new Date(date), 'dd MMM yyyy')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../styles.scss';
+</style>

package/src/components/Paragraphs/Directory/Records/ISP/distance.js

@@ -0,0 +1,46 @@
+//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+//:::                                                                         :::
+//:::  https://www.geodatasource.com/developers/javascript                    :::
+//:::                                                                         :::
+//:::  This routine calculates the distance between two points (given the     :::
+//:::  latitude/longitude of those points).                                   :::
+//:::                                                                         :::
+//:::  Definitions:                                                           :::
+//:::    South latitudes are negative, east longitudes are positive           :::
+//:::                                                                         :::
+//:::  Passed to function:                                                    :::
+//:::    lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees)  :::
+//:::    lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees)  :::
+//:::    unit = the unit you desire for results                               :::
+//:::           where: 'M' is statute miles (default)                         :::
+//:::                  'K' is kilometers                                      :::
+//:::                  'N' is nautical miles                                  :::
+//:::                                                                         :::
+//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export const calcDistance = (lat1, lon1, lat2, lon2, unit) => {
+  if (lat1 == lat2 && lon1 == lon2) {
+    return 0
+  } else {
+    var radlat1 = (Math.PI * lat1) / 180
+    var radlat2 = (Math.PI * lat2) / 180
+    var theta = lon1 - lon2
+    var radtheta = (Math.PI * theta) / 180
+    var dist =
+      Math.sin(radlat1) * Math.sin(radlat2) +
+      Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta)
+    if (dist > 1) {
+      dist = 1
+    }
+    dist = Math.acos(dist)
+    dist = (dist * 180) / Math.PI
+    dist = dist * 60 * 1.1515
+    if (unit == 'K') {
+      dist = dist * 1.609344
+    }
+    if (unit == 'N') {
+      dist = dist * 0.8684
+    }
+    return dist.toFixed(2)
+  }
+}