@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,278 @@
+<template>
+  <selectable-cards
+    v-if="cards"
+    ref="cardDeck"
+    :title="titles && titles.heading"
+    :sub-heading="titles && titles.subHeading"
+    :cards="cards"
+    class="ffh-card-container control-selectablecards"
+    :card-type="typeCard"
+    :icon-is-bordered="iconIsBordered"
+    :card-text-align="cardItemTextAlign"
+    @selected="selectedCardChangeFocus"
+  >
+    <template v-slot:cardGridFooter>
+      <container class="ffh-card-container__footer">
+        <row>
+          <column>
+            <h3 class="ffh-card-container__footer--title">
+              {{ titles && titles.selectHeading }} <span>(optional)</span>
+            </h3>
+
+            <div class="input-group">
+              <input
+                v-model="inputValueDisplay"
+                type="text"
+                class="form-control input-with-arrows"
+                :min="minValue"
+                :max="maxValue"
+                :placeholder="placeHolder"
+                @focus="handleInputFocus"
+                @blur="validateInput"
+              />
+              <div class="input-group-btn input-group-btn--black">
+                <img
+                  :src="CaretUp"
+                  height="16"
+                  width="16"
+                  class="btn-up"
+                  @click="incrementValue"
+                />
+
+                <img
+                  :src="CaretDown"
+                  height="16"
+                  width="16"
+                  class="btn-down"
+                  @click="decrementValue"
+                />
+              </div>
+            </div>
+            <span class="ffh-card-container__footer--label">{{
+              titles && titles.selectSubHeading
+            }}</span>
+          </column>
+        </row>
+      </container>
+      <container>
+        <row>
+          <column class="ffh-cc-nav__back-col" xs="12">
+            <cta-button
+              v-if="!isWeight"
+              :glyph="CaretLeft"
+              variant="link"
+              :rtl="true"
+              class="ffh-cc-nav__back-col--back-btn"
+              @clicked="handlePrevScreen"
+              >Go back to previous screen</cta-button
+            >
+          </column>
+          <column class="ffh-cc-nav__right-col" xs="12">
+            <cta-button
+              ref="calNextBtn"
+              :glyph="CaretRight"
+              class="ffh-cc-nav__right-col--next-btn"
+              :disabled="isButtonDisabled"
+              @clicked="handleNextScreen"
+            >
+              Next
+            </cta-button>
+          </column>
+        </row>
+      </container>
+    </template>
+  </selectable-cards>
+</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 SelectableCards from '../../SelectableCards/index.vue'
+import CaretDown from '../../../../assets/icons/caret-down.svg?url'
+import CaretUp from '../../../../assets/icons/caret-up.svg?url'
+import CaretRight from '../../../../assets/icons/caret-right.svg?url'
+import CaretLeft from '../../../../assets/icons/caret-left.svg?url'
+
+export default {
+  name: 'CardContainer',
+  components: {
+    Column,
+    Container,
+    Row,
+    CtaButton,
+    SelectableCards
+  },
+  props: {
+    iconIsBordered: {
+      type: Boolean,
+      default: false
+    },
+    isWeight: {
+      type: Boolean,
+      default: true
+    },
+    isHeight: {
+      type: Boolean,
+      default: false
+    },
+    titles: {
+      type: Object,
+      default: () => []
+    },
+    weights: {
+      type: Array,
+      default: () => []
+    },
+    heights: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      CaretUp,
+      CaretDown,
+      CaretRight,
+      CaretLeft,
+      typeCard: 'control-selectcards',
+      cardItemTextAlign: 'center',
+      title: null,
+      cards: null,
+      cardUnit: null,
+      placeHolder: '000',
+      inputValueDisplay: null,
+      minValue: 0.25,
+      maxValue: 500,
+      selectedCard: null,
+      selectedInput: null
+    }
+  },
+  computed: {
+    isButtonDisabled() {
+      // Call the function to get its result, then check if either selectedCard is null or inputValueDisplay is null
+      return this.getValueWithoutUnits === null
+    },
+    getValueWithoutUnits() {
+      // Ensure that inputValueDisplay is not null before attempting to replace
+      if (this.inputValueDisplay !== null) {
+        // Remove units (e.g., 'kg' or 'meters') from the input value
+        const valueWithoutUnits = this.inputValueDisplay.replace(
+          /kg|meters/i,
+          ''
+        )
+        // Convert the remaining value to a numeric representation
+        const numericValue = parseFloat(valueWithoutUnits)
+        // Check if numericValue is a valid number
+        if (!isNaN(numericValue)) {
+          // Use toFixed(2) to display the number with two decimal places
+          return parseFloat(numericValue.toFixed(2))
+        } else {
+          return null
+        }
+      } else {
+        return null
+      }
+    }
+  },
+  mounted() {
+    this.inputValueDisplay = null
+    if (this.isWeight) {
+      this.title = this.titles.weight
+      this.cards = this.weights
+      this.cardUnit = ' kg'
+      this.placeHolder = this.placeHolder + this.cardUnit
+      this.minValue = 0.25
+      this.maxValue = 500
+    } else {
+      this.title = this.titles.height
+      this.cards = this.heights
+      this.cardUnit = ' meters'
+      this.placeHolder = this.placeHolder + this.cardUnit
+      this.minValue = 2
+      this.maxValue = 250
+    }
+  },
+  methods: {
+    handlePrevScreen() {
+      this.$emit('prevScreen')
+    },
+    handleNextScreen() {
+      // Only emit the 'nextScreen' event if the button is not disabled
+      if (!this.isButtonDisabled) {
+        this.selectedInput = { value: this.getValueWithoutUnits }
+
+        this.inputValueDisplay = null
+        this.$emit('nextScreen', this.selectedInput)
+      }
+    },
+    selectedCardChangeFocus(card) {
+      // if statement added to overcome issue of lost values when function is called twice
+      if (card.value !== undefined) {
+        this.selectedCard = card
+        this.selectedInput = null
+        this.inputValueDisplay = card.value + ' ' + this.cardUnit
+        this.$nextTick(() => this.$refs.calNextBtn.$el.focus())
+      }
+    },
+    clearCard() {
+      this.selectedInput = null
+
+      this.selectedCard = null
+      this.$refs.cardDeck.clearCard()
+    },
+    incrementValue() {
+      if (this.selectedCard !== null) {
+        this.$refs.cardDeck.clearCard()
+      }
+
+      let newValue = Math.min(this.getValueWithoutUnits + 1, this.maxValue)
+      this.inputValueDisplay = newValue + this.cardUnit
+
+      this.selectedInput = { value: newValue }
+    },
+    decrementValue() {
+      if (this.selectedCard !== null) {
+        this.$refs.cardDeck.clearCard()
+      }
+
+      let newValue = Math.max(this.getValueWithoutUnits - 1, this.minValue)
+      this.inputValueDisplay = newValue + this.cardUnit
+
+      this.selectedInput = { value: newValue }
+    },
+    // Validate the input value on blur
+    validateInput() {
+      // Check if the numeric value is within the range (minValue to maxValue)
+      if (
+        this.getValueWithoutUnits !== null &&
+        this.getValueWithoutUnits >= this.minValue &&
+        this.getValueWithoutUnits <= this.maxValue
+      ) {
+        // Value is within the range, update the input value
+        this.inputValueDisplay = this.getValueWithoutUnits + this.cardUnit
+
+        // alternate..
+        this.selectedInput = { value: this.getValueWithoutUnits }
+      } else {
+        // Value is outside the range, leave the input blank
+        this.inputValueDisplay = null
+
+        this.selectedInput = null
+      }
+    },
+    // Handle input focus
+    handleInputFocus() {
+      if (this.selectedCard !== null) {
+        this.$refs.cardDeck.clearCard()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../includes/scss/all';
+@import './styles';
+</style>

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

@@ -0,0 +1,152 @@
+
+.ffh-card-container {
+  margin-bottom: 20px;
+
+  :deep(.section-group__subheading) {
+    font-size: px-to-rem(20px);
+    line-height: 28px;
+    padding-bottom: 16px;
+  }
+
+  @media screen and (max-width: 575px) {
+    :deep(.card-grid-item__description p) { 
+      font-size: px-to-rem(18px);
+    }
+    :deep(.card-grid-item__card--select-radio .card-grid-item-icon .icon) {
+      width: 28px;
+      height: 28px;
+      margin-top: 5px;
+    }
+  }
+  
+  .ffh-cc-nav {
+    margin-top: 2rem;
+
+    &__back-col {
+      font-weight: bold;
+      line-height: 1.6;
+      flex: 0 0 100%;
+
+      @media screen and (min-width: 768px) {
+        flex: 0 0 60%;
+      }
+
+      &--back-btn {
+        margin-top: 30px;
+
+        :deep(.wcl-cta__link-text) {
+            font-size: px-to-rem(20px);
+            font-weight: 700;
+             @media screen and (min-width: 768px) {
+                font-size: px-to-rem(22px);
+             }
+        }
+      }
+    }
+
+    &__right-col {
+      text-align: right;
+      min-height: 30px;
+      display: flex;
+      flex: 0 0 100%;
+
+      @media screen and (min-width: 768px) {
+        flex: 0 0 40%;
+      }
+
+      &--next-btn {
+        flex: 0 0 100%;
+        justify-content: center;
+        margin: 1rem 0 0 auto;
+        padding: 1.125rem 2.8rem;
+        flex-shrink: 0;
+        
+        @media screen and (min-width: 768px) { 
+          flex: 0 0 auto;
+          margin-top: 2rem;
+        }
+
+        :deep(.wcl-cta__link-text) {
+            min-width: auto;
+            font-size: px-to-rem(26px);
+            font-weight: 700;
+            @media screen and (min-width: 768px) {
+              font-size: px-to-rem(24px);
+            }
+        }
+        :deep(.wcl-cta__spacer) {
+          width: 5px;
+        }
+        :deep(.icon) {
+          height: 20px;
+        }
+
+      }
+    }
+  }
+
+  &__footer {
+    &--title {
+      font-size: px-to-rem(26px);
+      font-weight: 700;
+      margin-bottom: 15px; 
+
+      span {
+        font-size: px-to-rem(16px);
+        font-weight: 400;
+      }
+    }
+    &--label {
+      font-size: px-to-rem(14px);
+      font-weight: 700;
+
+      @media screen and (min-width: 1200px) {
+          font-size: px-to-rem(16px);
+        }
+    }
+  }
+  .input-group {
+    position: relative;
+    margin-bottom: 10px;
+    
+    .input-with-arrows {
+      font-size: px-to-rem(22px);
+      font-weight: 700;
+      height: 64px;
+      border: 3px solid $gray;
+      border-radius: 10px;
+      width: 100%;
+
+      @media screen and (min-width: 768) {
+        font-size: px-to-rem(24px);
+      }
+    }
+
+    .input-group-btn {
+        border-radius: 0 10px 10px 0;
+        position: absolute;
+        background: $black;
+        width: 15%;
+        height: 64px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0;
+        z-index: 9;
+        right: 0;
+        @media (min-width: 768px) {
+          width: 10%;
+        }
+        @media (min-width: 991px) {
+          width: 7%;
+        }
+      img {
+        width: 16px;
+        height: 16px;
+        filter: invert(100%);
+      }
+    }
+
+  }
+}

package/src/components/Paragraphs/Calculator/Constants.js

@@ -0,0 +1,246 @@
+export const ffhPage = {
+  disclaimer:
+    '<p>* Disclaimer: Please note that the dropped object calculator is intended to provide an estimate of the time it takes for an object to fall to the ground and the impact force it may generate upon landing. The calculations are based on certain assumptions and may not take into account all the variables that could affect the outcome. the results should be taken as an approximate guide, it does not replace risk assessment or risk control measures.. We do not guarantee the accuracy of the calculator and cannot be held responsible for any damages or losses that may arise from using it. Always handle objects with care and take appropriate safety measures to avoid accidents.</p>'
+}
+
+export const heroHeader = {
+  title: 'Dropped object calculator',
+  description:
+    '<p>This Calculator is a guide only and is intended to give a general idea of the potential severity of a dropped object. A detailed and specific risk assessment will always deliver a more accurate calculation of potential severity.</p>'
+}
+
+export const barItems = [
+  {
+    value: '1',
+    checked: true,
+    completed: false
+  },
+  {
+    value: '2',
+    checked: false,
+    completed: false
+  },
+  {
+    value: '3',
+    checked: false,
+    completed: false
+  }
+]
+
+export const cardTitles = {
+  weight: {
+    heading: 'Pick a object?',
+    subHeading:
+      '<p>Pick a object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
+    selectHeading: 'How heavy is the object?',
+    selectSubHeading: 'Weight in kilograms, max is 500 kg'
+  },
+  height: {
+    heading: 'How high up are you?',
+    subHeading:
+      '<p>Pick a height from the selections below or if you know exactly how high up you are enter the height in input box below.</p>',
+    selectHeading: 'How high up are you?',
+    selectSubHeading: 'Height in meters, max is 250 meters'
+  }
+}
+
+export const cardWeights = [
+  {
+    name: 'Bolt',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '0.25',
+    units: 'kg'
+  },
+  {
+    name: 'Screwdriver',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    value: '0.26',
+    units: 'kg'
+  },
+  {
+    name: 'Hammer',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '0.5',
+    units: 'kg'
+  },
+  {
+    name: 'Electric drill',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    value: '2',
+    units: 'kg'
+  },
+  {
+    name: 'Sledge Hammer',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '5',
+    units: 'kg'
+  },
+  {
+    name: 'Scaffolding platform',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    value: '50',
+    units: 'kg'
+  },
+  {
+    name: 'Anvil',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '75',
+    units: 'kg'
+  },
+  {
+    name: 'Window pane',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '250',
+    units: 'kg'
+  }
+]
+
+export const cardHeights = [
+  {
+    name: 'House roof',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '2.00',
+    units: 'meters'
+  },
+  {
+    name: '2nd Story',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '5',
+    units: 'meters'
+  },
+  {
+    name: '3rd Story',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '0.5',
+    units: 'meters'
+  },
+  {
+    name: '4th Story',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '2',
+    units: 'meters'
+  },
+  {
+    name: 'VIC state library',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '5',
+    units: 'meters'
+  },
+  {
+    name: 'Worksafe building',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '50',
+    units: 'meters'
+  },
+  {
+    name: 'MCG',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '80',
+    units: 'meters'
+  },
+  {
+    name: 'Top of Rialto',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%209%20height.svg',
+    value: '250',
+    units: 'meters'
+  }
+]
+
+export const riskResults = [
+  {
+    title: 'Probably safe',
+    iconName: 'Cricket Ball',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%205.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is probably safe.</p>',
+    rangeMax: 50,
+    rangeMin: 0
+  },
+  {
+    title: "It's like being hit by a kicked soccer ball",
+    iconName: 'Bus',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%205.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to being hit by a kicked soccer ball.</p>',
+    rangeMax: 100,
+    rangeMin: 50
+  },
+  {
+    title: "It's like being charged by an angry Emu",
+    iconName: 'Rhino',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%205.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to being charged by <span>an angry Emu.</span></p>',
+    rangeMax: 300,
+    rangeMin: 100
+  },
+  {
+    title: "It's like being headbutted by a goat",
+    iconName: 'Cricket Ball',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%205.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to being headbutted by a goat</p>',
+    rangeMax: 500,
+    rangeMin: 300
+  },
+  {
+    title: "It's like being kicked by a red kangaroo",
+    iconName: 'Rhino',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%206.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to being kicked by a red kangaroo</p>',
+    rangeMax: 700,
+    rangeMin: 500
+  },
+  {
+    title: "It's like pounced by a lion",
+    iconName: 'Rhino',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%205.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to pounced by a lion</p>',
+    rangeMax: 1000,
+    rangeMin: 700
+  },
+  {
+    title: "It's like being hit by a charging rhino",
+    iconName: 'Rhino',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%206.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to pounced by a lion</p>',
+    rangeMax: 3000,
+    rangeMin: 1000
+  },
+  {
+    title: "It's like being hit by an angry elephant",
+    iconName: 'Bus',
+    icon:
+      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/Ellipse%204.svg',
+    message:
+      '<p>The impact of this amount of energy on your body is similar to being hit by an angry elephant</p>',
+    rangeMax: 10000,
+    rangeMin: 3000
+  }
+]