@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue

@@ -1,328 +1,328 @@
-<template>
-  <div class="tw-w-full tw-h-full">
-    <div class="tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll lg:tw-overflow-visible">
-      <HelloBar
-        v-if="areColorsTooClose"
-        label=""
-        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
-        variant="warning"
-        class="tw-m-5 tw-mt-3"
-      />
-      <div class="tw-pb-8 tw-px-8 tw-text-center">
-        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          Step {{ activeStep.number }} of {{ totalNumSteps }}
-        </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">
-          {{ activeStep.title }}
-        </h2>
-        <p class="tw-mt-0">{{ activeStep.description }}</p>
-      </div>
-
-      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-pb-8 tw-px-8 tw-text-left">
-        <figure class="tw-flex tw-justify-center tw-items-center tw-max-h-56">
-          <img :src="croppedLogoImage" alt="" class="tw-max-w-full tw-max-h-full" />
-        </figure>
-        <div v-if="activeStep.colourData" class="tw-grid tw-grid-cols-4 tw-gap-3 tw-grid-flow-row tw-auto-rows-max">
-          <button
-            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-bg-grayscale-400 tw-text-gray-500"
-          >
-            <input
-              v-if="currentStep === 'textColour'"
-              type="color"
-              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
-              @input.stop="onCustomTextColourChange"
-            />
-            <input
-              v-if="currentStep === 'backgroundColour'"
-              type="color"
-              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
-              @input.stop="onCustomBackgroundColourChange"
-            />
-            <span class="tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full">
-              <Icon name="plus" size="sm" />
-            </span>
-          </button>
-          <button
-            v-for="(colour, index) in activeStep.colours"
-            :key="index"
-            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
-            :style="{ 'background-color': colour.hex }"
-            @click="setSelectedColour(colour)"
-          >
-            <span
-              v-if="colour.selected"
-              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
-            >
-              <Icon name="check" size="xs" />
-            </span>
-            <span class="tw-sr-only">{{ colour.hex }}</span>
-          </button>
-          <button
-            v-if="currentStep === 'textColour' && customTextColour.hex"
-            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
-            :style="{ 'background-color': customTextColour.hex }"
-            @click="setSelectedColour(customTextColour)"
-          >
-            <span
-              v-if="colour.selected"
-              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
-            >
-              <Icon name="check" size="xs" />
-            </span>
-            <span class="tw-sr-only">{{ customTextColour.hex }}</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
-    >
-      <Button
-        v-if="activeStep.index === 1"
-        label="Back"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-back-btn
-        @on-click="back"
-      />
-      <Button
-        v-if="activeStep.index === 2"
-        label="Back"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-back-btn
-        @on-click="goToStep('textColour')"
-      />
-      <Button
-        v-if="activeStep.index === 1"
-        label="Continue"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        @on-click="goToStep('backgroundColour', true)"
-      />
-      <Button
-        v-if="activeStep.index === 2"
-        label="Continue"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        @on-click="save"
-      />
-    </div>
-  </div>
-</template>
-<script>
-/* eslint-disable no-param-reassign */
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
-import trackEvent from '../../helpers/tracking';
-import hexDiff from '../../helpers/hex-diff';
-
-export default {
-  components: {
-    Button,
-    Icon,
-    HelloBar,
-  },
-  props: {
-    logoData: {
-      type: Object,
-      required: true,
-      default: null,
-    },
-    croppedLogoImage: {
-      type: String,
-      required: true,
-      default: null,
-    },
-    totalNumSteps: {
-      type: Number,
-      required: true,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      currentStep: null,
-      stepNumber: null,
-      activeStep: {},
-      customTextColour: {
-        hex: null,
-        selected: false,
-      },
-      customBackgroundColour: {
-        hex: null,
-        selected: false,
-      },
-      steps: {
-        textColour: {
-          index: 1,
-          number: this.totalNumSteps - 1,
-          active: false,
-          title: 'Primary text color',
-          description:
-            'Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.',
-          colourData: this.logoData.logoImageDetails.textColors,
-          colours: [],
-        },
-        backgroundColour: {
-          index: 2,
-          number: this.totalNumSteps,
-          active: false,
-          title: 'Background color',
-          description:
-            'Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.',
-          colourData: this.logoData.logoImageDetails.backgroundColors,
-          colours: [],
-        },
-      },
-    };
-  },
-  computed: {
-    areColorsTooClose() {
-      const selectedTextColour = this.steps.textColour?.colours.find((c) => c.selected === true);
-
-      const selectedBackgroundColour = this.steps.backgroundColour?.colours.find((c) => c.selected === true);
-
-      if (!selectedTextColour?.hex || !selectedBackgroundColour?.hex) return false;
-
-      return (
-        this.activeStep.index === 2 && hexDiff(selectedTextColour.hex, selectedBackgroundColour.hex) !== 'Different'
-      );
-    },
-  },
-  mounted() {
-    const keys = Object.keys(this.steps);
-
-    keys.forEach((key) => {
-      const step = this.steps[key];
-
-      step.colourData.forEach((hex, i) => {
-        step.colours.push({
-          hex,
-          selected: i === 0,
-        });
-      });
-    });
-
-    this.goToStep('textColour');
-  },
-  methods: {
-    goToStep(step, shouldTrack = false) {
-      this.currentStep = step;
-      this.activeStep = this.steps[step];
-      this.steps[step].active = true;
-
-      if (shouldTrack && step === 'backgroundColour') {
-        trackEvent({
-          eventCategory: this.eventCategory,
-          eventAction: 'textColor',
-          eventLabel: 'Clicked_Continue',
-          event: 'click',
-        });
-      }
-    },
-    setSelectedColour(selectedColour) {
-      this.activeStep.colours.forEach((colour) => {
-        if (colour !== selectedColour) {
-          colour.selected = false;
-        }
-      });
-
-      selectedColour.selected = true;
-    },
-    deselectAllColours(step) {
-      this.steps[step].colours.forEach((c) => {
-        c.selected = false;
-      });
-    },
-    onCustomTextColourChange(event) {
-      this.deselectAllColours('textColour');
-
-      const colour = {
-        hex: event.target.value,
-        selected: true,
-        custom: true,
-      };
-
-      if (this.steps.textColour.colours[this.steps.textColour.colours.length - 1].custom) {
-        this.steps.textColour.colours[this.steps.textColour.colours.length - 1] = colour;
-      } else {
-        this.steps.textColour.colours.push(colour);
-      }
-    },
-    onCustomBackgroundColourChange(event) {
-      this.deselectAllColours('backgroundColour');
-
-      const colour = {
-        hex: event.target.value,
-        selected: true,
-        custom: true,
-      };
-
-      if (this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1].custom) {
-        this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1] = colour;
-      } else {
-        this.steps.backgroundColour.colours.push(colour);
-      }
-    },
-    back() {
-      this.$emit('on-go-back');
-    },
-    save() {
-      let selectedTextColour = this.steps.textColour.colours.find((c) => c.selected === true);
-
-      let selectedBackgroundColour = this.steps.backgroundColour.colours.find((c) => c.selected === true);
-
-      let textColorUserSelected = selectedTextColour?.custom || false;
-
-      if (this.customTextColour.hex && this.customTextColour.selected) {
-        textColorUserSelected = true;
-        selectedTextColour = this.customTextColour;
-      }
-
-      let backgroundColorUserSelected = selectedBackgroundColour?.custom || false;
-
-      if (this.customBackgroundColour.hex && this.customBackgroundColour.selected) {
-        backgroundColorUserSelected = true;
-        selectedBackgroundColour = this.customBackgroundColour;
-      }
-
-      const payload = {
-        textColor: selectedTextColour.hex,
-        backgroundColor: selectedBackgroundColour.hex,
-        textColorUserSelected,
-        backgroundColorUserSelected,
-      };
-
-      this.$emit('on-save', payload);
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'backgroundColor',
-        eventLabel: 'Clicked_Continue',
-        event: 'click',
-      });
-    },
-  },
-};
-</script>
-<style scoped>
-.done-btn {
-  box-shadow:
-    0 0 0 1px #d4d4d4,
-    0 8px 16px #d4d4d4;
-}
-</style>
+<template>
+  <div class="tw-w-full tw-h-full">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll lg:tw-overflow-visible">
+      <HelloBar
+        v-if="areColorsTooClose"
+        label=""
+        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
+        variant="warning"
+        class="tw-m-5 tw-mt-3"
+      />
+      <div class="tw-pb-8 tw-px-8 tw-text-center">
+        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+          Step {{ activeStep.number }} of {{ totalNumSteps }}
+        </p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">
+          {{ activeStep.title }}
+        </h2>
+        <p class="tw-mt-0">{{ activeStep.description }}</p>
+      </div>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-pb-8 tw-px-8 tw-text-left">
+        <figure class="tw-flex tw-justify-center tw-items-center tw-max-h-56">
+          <img :src="croppedLogoImage" alt="" class="tw-max-w-full tw-max-h-full" />
+        </figure>
+        <div v-if="activeStep.colourData" class="tw-grid tw-grid-cols-4 tw-gap-3 tw-grid-flow-row tw-auto-rows-max">
+          <button
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-bg-grayscale-400 tw-text-gray-500"
+          >
+            <input
+              v-if="currentStep === 'textColour'"
+              type="color"
+              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
+              @input.stop="onCustomTextColourChange"
+            />
+            <input
+              v-if="currentStep === 'backgroundColour'"
+              type="color"
+              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
+              @input.stop="onCustomBackgroundColourChange"
+            />
+            <span class="tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full">
+              <Icon name="plus" size="sm" />
+            </span>
+          </button>
+          <button
+            v-for="(colour, index) in activeStep.colours"
+            :key="index"
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
+            :style="{ 'background-color': colour.hex }"
+            @click="setSelectedColour(colour)"
+          >
+            <span
+              v-if="colour.selected"
+              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
+            >
+              <Icon name="check" size="xs" />
+            </span>
+            <span class="tw-sr-only">{{ colour.hex }}</span>
+          </button>
+          <button
+            v-if="currentStep === 'textColour' && customTextColour.hex"
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
+            :style="{ 'background-color': customTextColour.hex }"
+            @click="setSelectedColour(customTextColour)"
+          >
+            <span
+              v-if="colour.selected"
+              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
+            >
+              <Icon name="check" size="xs" />
+            </span>
+            <span class="tw-sr-only">{{ customTextColour.hex }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
+    >
+      <Button
+        v-if="activeStep.index === 1"
+        label="Back"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="back"
+      />
+      <Button
+        v-if="activeStep.index === 2"
+        label="Back"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="goToStep('textColour')"
+      />
+      <Button
+        v-if="activeStep.index === 1"
+        label="Continue"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="goToStep('backgroundColour', true)"
+      />
+      <Button
+        v-if="activeStep.index === 2"
+        label="Continue"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+/* eslint-disable no-param-reassign */
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import trackEvent from '../../helpers/tracking';
+import hexDiff from '../../helpers/hex-diff';
+
+export default {
+  components: {
+    Button,
+    Icon,
+    HelloBar,
+  },
+  props: {
+    logoData: {
+      type: Object,
+      required: true,
+      default: null,
+    },
+    croppedLogoImage: {
+      type: String,
+      required: true,
+      default: null,
+    },
+    totalNumSteps: {
+      type: Number,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentStep: null,
+      stepNumber: null,
+      activeStep: {},
+      customTextColour: {
+        hex: null,
+        selected: false,
+      },
+      customBackgroundColour: {
+        hex: null,
+        selected: false,
+      },
+      steps: {
+        textColour: {
+          index: 1,
+          number: this.totalNumSteps - 1,
+          active: false,
+          title: 'Primary text color',
+          description:
+            'Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.',
+          colourData: this.logoData.logoImageDetails.textColors,
+          colours: [],
+        },
+        backgroundColour: {
+          index: 2,
+          number: this.totalNumSteps,
+          active: false,
+          title: 'Background color',
+          description:
+            'Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.',
+          colourData: this.logoData.logoImageDetails.backgroundColors,
+          colours: [],
+        },
+      },
+    };
+  },
+  computed: {
+    areColorsTooClose() {
+      const selectedTextColour = this.steps.textColour?.colours.find((c) => c.selected === true);
+
+      const selectedBackgroundColour = this.steps.backgroundColour?.colours.find((c) => c.selected === true);
+
+      if (!selectedTextColour?.hex || !selectedBackgroundColour?.hex) return false;
+
+      return (
+        this.activeStep.index === 2 && hexDiff(selectedTextColour.hex, selectedBackgroundColour.hex) !== 'Different'
+      );
+    },
+  },
+  mounted() {
+    const keys = Object.keys(this.steps);
+
+    keys.forEach((key) => {
+      const step = this.steps[key];
+
+      step.colourData.forEach((hex, i) => {
+        step.colours.push({
+          hex,
+          selected: i === 0,
+        });
+      });
+    });
+
+    this.goToStep('textColour');
+  },
+  methods: {
+    goToStep(step, shouldTrack = false) {
+      this.currentStep = step;
+      this.activeStep = this.steps[step];
+      this.steps[step].active = true;
+
+      if (shouldTrack && step === 'backgroundColour') {
+        trackEvent({
+          eventCategory: this.eventCategory,
+          eventAction: 'textColor',
+          eventLabel: 'Clicked_Continue',
+          event: 'click',
+        });
+      }
+    },
+    setSelectedColour(selectedColour) {
+      this.activeStep.colours.forEach((colour) => {
+        if (colour !== selectedColour) {
+          colour.selected = false;
+        }
+      });
+
+      selectedColour.selected = true;
+    },
+    deselectAllColours(step) {
+      this.steps[step].colours.forEach((c) => {
+        c.selected = false;
+      });
+    },
+    onCustomTextColourChange(event) {
+      this.deselectAllColours('textColour');
+
+      const colour = {
+        hex: event.target.value,
+        selected: true,
+        custom: true,
+      };
+
+      if (this.steps.textColour.colours[this.steps.textColour.colours.length - 1].custom) {
+        this.steps.textColour.colours[this.steps.textColour.colours.length - 1] = colour;
+      } else {
+        this.steps.textColour.colours.push(colour);
+      }
+    },
+    onCustomBackgroundColourChange(event) {
+      this.deselectAllColours('backgroundColour');
+
+      const colour = {
+        hex: event.target.value,
+        selected: true,
+        custom: true,
+      };
+
+      if (this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1].custom) {
+        this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1] = colour;
+      } else {
+        this.steps.backgroundColour.colours.push(colour);
+      }
+    },
+    back() {
+      this.$emit('on-go-back');
+    },
+    save() {
+      let selectedTextColour = this.steps.textColour.colours.find((c) => c.selected === true);
+
+      let selectedBackgroundColour = this.steps.backgroundColour.colours.find((c) => c.selected === true);
+
+      let textColorUserSelected = selectedTextColour?.custom || false;
+
+      if (this.customTextColour.hex && this.customTextColour.selected) {
+        textColorUserSelected = true;
+        selectedTextColour = this.customTextColour;
+      }
+
+      let backgroundColorUserSelected = selectedBackgroundColour?.custom || false;
+
+      if (this.customBackgroundColour.hex && this.customBackgroundColour.selected) {
+        backgroundColorUserSelected = true;
+        selectedBackgroundColour = this.customBackgroundColour;
+      }
+
+      const payload = {
+        textColor: selectedTextColour.hex,
+        backgroundColor: selectedBackgroundColour.hex,
+        textColorUserSelected,
+        backgroundColorUserSelected,
+      };
+
+      this.$emit('on-save', payload);
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'backgroundColor',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.done-btn {
+  box-shadow:
+    0 0 0 1px #d4d4d4,
+    0 8px 16px #d4d4d4;
+}
+</style>