cja-phoenix 0.6.0 → 0.6.2

package/src/components/forms/SelectionTiles.vue

@@ -0,0 +1,196 @@
+<template>
+  <InputContainer :layout="'vertical'">
+    <div class="tiles-container" :class="[`layout-${layout}`]">
+      <div
+        v-if="options"
+        v-for="(option, idx) in options"
+        :key="idx"
+        class="tile"
+        :class="{
+          active: multiselect
+            ? value.includes(option.value)
+            : option.value == value,
+        }"
+        @click="$emit('update:modelValue', option.value)"
+        v-tippy="option.tooltip ? option.tooltip : ''"
+      >
+        <div class="image-container" v-if="option.image">
+          <img :src="option.image" :alt="option.label" />
+        </div>
+
+        <div
+          class="text-wrapper"
+          v-if="layout != 'image' || (layout == 'image' && !option.image)"
+        >
+          <span class="title">{{ option.label }}</span>
+          <span class="description" v-if="option.description">
+            {{ option.description }}
+          </span>
+          <div
+            class="long-description"
+            v-if="option.descriptionLong"
+            v-html="option.descriptionLong"
+          ></div>
+        </div>
+        <span v-if="layout == 'list'" class="m-cgg-icon--chevron-right"></span>
+      </div>
+    </div>
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import { TileOption } from "../../types/TileOption";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+
+const props = withDefaults(
+  defineProps<{
+    options: TileOption[] | undefined;
+    modelValue: any;
+    layout?: "list" | "grid" | "image";
+    multiselect?: boolean;
+    error?: string;
+    validation?: any;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    layout: "list",
+    errorDisplay: true,
+  }
+);
+
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+defineExpose({ errorMessage, meta, validate });
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
+.tiles-container {
+  display: grid;
+  width: 100%;
+  gap: 16px;
+
+  .tile {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    border: 1px solid #dedede;
+    border-radius: 10px;
+    cursor: pointer;
+    user-select: none;
+    overflow-x: hidden;
+    color: #0d2745;
+    transition: all 0.3s ease-in-out;
+
+    @media screen and (min-width: 992px) {
+      padding-right: 20px;
+    }
+
+    @mixin activeStyle {
+      box-shadow: $box-shadow-m;
+      background-color: #f4f9fc;
+      border-color: #076b9c;
+    }
+
+    &.active {
+      @include activeStyle;
+    }
+
+    @media (any-hover: hover) {
+      &:hover {
+        @include activeStyle;
+      }
+    }
+
+    .text-wrapper {
+      font-size: 18px;
+      line-height: 22px;
+
+      .title {
+        font-weight: 700;
+      }
+    }
+
+    .m-cgg-icon--chevron-right {
+      background: none;
+      border-radius: 0;
+      padding: 0;
+      color: inherit;
+      margin: 0;
+      font-size: 18px;
+      font-weight: 700;
+      margin-left: auto;
+    }
+  }
+
+  &.layout-list,
+  &.layout-grid {
+    .image-container img {
+      height: 28px;
+      width: 28px;
+
+      @media screen and (min-width: 992px) {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+
+  &.layout-list {
+    grid-template-columns: 1fr;
+
+    .text-wrapper {
+      .description:before {
+        content: "-";
+        margin: 0 5px;
+      }
+    }
+  }
+
+  &.layout-grid {
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .title {
+        font-size: 15px;
+        line-height: 18px;
+      }
+
+      .description {
+        font-size: 12px;
+        line-height: 12px;
+      }
+    }
+  }
+
+  &.layout-image {
+    .tile {
+      justify-content: center;
+      text-align: center;
+
+      .image-container img {
+        display: block;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+.input-error {
+  text-align: center;
+}
+</style>

package/src/components/forms/TextInput.vue

@@ -0,0 +1,144 @@
+<template>
+  <InputContainer v-bind="{ layout }">
+    <InputTitle v-bind="{ title, tooltip, size, disabled }" v-if="title" />
+
+    <div
+      class="input-wrapper"
+      :class="{
+        error: errorMessage,
+      }"
+    >
+      <input
+        :class="[`size-${size}`]"
+        v-maska
+        :data-maska="mask"
+        :id="id"
+        :inputmode="inputmode"
+        :placeholder="placeholder && placeholder"
+        :type="type"
+        :value="value"
+        :min="min"
+        :max="max"
+        @input="
+          $emit('update:modelValue', (<HTMLInputElement>$event.target).value)
+        "
+        :disabled="disabled"
+        :autocomplete="autocomplete"
+        ref="inputEl"
+      />
+
+      <div class="input-suffix" ref="suffixEl" v-if="suffix">
+        {{ suffix }}
+      </div>
+    </div>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import { InputHTMLAttributes, onMounted, ref } from "vue";
+import { vMaska } from "maska";
+import InputTitle from "./structure/InputTitle.vue";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    validation?: any;
+    errorDisplay?: boolean;
+    modelValue: InputHTMLAttributes["value"];
+    id?: InputHTMLAttributes["id"];
+    disabled?: InputHTMLAttributes["disabled"];
+    mask?: string;
+    inputmode?: InputHTMLAttributes["inputmode"];
+    type?: InputHTMLAttributes["type"];
+    autocomplete?: InputHTMLAttributes["autocomplete"];
+    suffix?: string;
+    min?: InputHTMLAttributes["min"];
+    max?: InputHTMLAttributes["max"];
+  }>(),
+  {
+    layout: "vertical",
+    size: "md",
+    type: "text",
+    errorDisplay: true,
+  }
+);
+
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+const inputEl = ref();
+const suffixEl = ref();
+
+onMounted(() => {
+  if (props.suffix) {
+    const inputPadding = parseInt(
+      window.getComputedStyle(inputEl.value).getPropertyValue("padding-right")
+    );
+    const suffixWidth = suffixEl.value.getBoundingClientRect().width;
+
+    inputEl.value.style.paddingRight = `${suffixWidth + inputPadding * 2}px`;
+  }
+});
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
+.input-wrapper {
+  position: relative;
+
+  input {
+    @include input-template;
+
+    &:focus {
+      + .input-suffix {
+        color: #0d2745;
+      }
+    }
+
+    &[type="number"] {
+      /* Firefox */
+      -moz-appearance: textfield;
+
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+  }
+
+  .input-suffix {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 8px;
+    line-height: 11px;
+    font-size: 11px;
+    color: #9fabbc;
+    transition: color 0.1s ease-in;
+  }
+}
+</style>

package/src/components/forms/TileCheckboxInput.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="tile-checkbox-container"
+    :class="{ checked: modelValue }"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
+    <div class="tile-header">
+      <div class="tile-image" v-if="image">
+        <img :src="image" />
+      </div>
+      <div class="tile-label">
+        {{ label }}
+      </div>
+      <div class="tile-checkbox">
+        <span class="m-cgg-icon--check2"></span>
+      </div>
+    </div>
+    <div class="tile-description" v-html="description" v-if="description"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  image?: string;
+  label: string;
+  description?: string;
+  modelValue: boolean;
+}>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+.tile-checkbox-container {
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease-in-out;
+
+  &.checked {
+    border: 1px solid #076b9c;
+    background-color: #f4f9fc;
+
+    .tile-header .tile-checkbox {
+      background-color: #076b9c;
+      border: 2px solid #076b9c;
+
+      span {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tile-header {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 10px;
+
+    .tile-label {
+      flex-grow: 1;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      color: #155072;
+    }
+
+    .tile-checkbox {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid #717171;
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      transition: all 0.2s ease-in-out;
+
+      span {
+        transition: all 0.2s ease-in-out;
+        line-height: 14px;
+        opacity: 0;
+        color: #fff;
+      }
+    }
+  }
+
+  .tile-description {
+    font-size: 14px;
+    line-height: 17px;
+    margin-top: 8px;
+  }
+}
+</style>

package/src/components/forms/ToggleInput.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="input-container">
+    <div
+      class="input-wrapper"
+      :class="[`size-${size}`, { active: modelValue, 'full-width': fullWidth }]"
+      @click="$emit('update:modelValue', !modelValue)"
+    >
+      <div class="label">
+        {{ label }}
+      </div>
+      <div class="toggler">
+        <div class="toggle"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { InputHTMLAttributes } from "vue";
+
+withDefaults(
+  defineProps<{
+    size?: "sm" | "md" | "lg";
+    disabled?: InputHTMLAttributes["disabled"];
+    validation?: any;
+    label: string;
+    modelValue: boolean;
+    fullWidth: boolean;
+    error?: string;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    size: "md",
+    disabled: false,
+    errorDisplay: true,
+  }
+);
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
+.input-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  @include input-title;
+
+  &.full-width {
+    justify-content: space-between;
+  }
+
+  .toggler {
+    position: relative;
+    width: 36px;
+    height: 14px;
+    border-radius: 7px;
+    background-color: #dedcdb;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    .toggle {
+      position: absolute;
+      top: -3px;
+      left: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #9fabbc;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  &.active {
+    .toggler {
+      background-color: #e5f0f5;
+      .toggle {
+        background-color: #076b9c;
+        left: 16px;
+      }
+    }
+  }
+}
+</style>

package/src/components/forms/structure/InputContainer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="input-container" :class="[layout]">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  layout?: "vertical" | "horizontal";
+}>();
+</script>
+
+<style lang="scss" scoped>
+.input-container {
+  display: flex;
+
+  &.vertical {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &.horizontal {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+}
+</style>

package/src/components/forms/structure/InputError.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="input-error">
+    {{ error }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  error: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
+
+.input-error {
+  color: #ff533f;
+  font-size: 14px;
+  line-height: 16px;
+
+  @media screen and (min-width: $break-md-min) {
+    font-size: 16px;
+    line-height: 18px;
+  }
+}
+</style>

package/src/components/forms/structure/InputTitle.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="input-title"
+    :class="[`size-${size}`, { disabled: disabled }]"
+    v-if="title"
+  >
+    <span>{{ title }}</span>
+    <span
+      v-if="tooltip"
+      class="tooltip m-cgg-icon--help"
+      v-tippy="tooltip"
+    ></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { InputHTMLAttributes } from "vue";
+
+defineProps<{
+  title: string;
+  tooltip?: string;
+  disabled?: InputHTMLAttributes["disabled"];
+  size?: "sm" | "md" | "lg";
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
+@import "../../../assets/forms.scss";
+
+.input-title {
+  @include input-title;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-weight: 700;
+
+  .tooltip {
+    font-size: 18px;
+    color: #076b9c;
+
+    @media screen and (min-width: $break-md-min) {
+      font-size: 20px;
+    }
+  }
+
+  &.disabled {
+    color: #dedede;
+  }
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,73 @@
+import Modal from "./structural/Modal.vue";
+import CjaButton from "./structural/CjaButton.vue";
+import LoadingSpinner from "./structural/LoadingSpinner.vue";
+import ContentTabs from "./structural/ContentTabs.vue";
+import InfoMessage from "./structural/InfoMessage.vue";
+import Scaffold from "./structural/Scaffold.vue";
+import GridContainer from "./structural/GridContainer.vue";
+import GridItem from "./structural/GridItem.vue";
+import CollapseContainer from "./structural/CollapseContainer.vue";
+import FixedContainer from "./structural/FixedContainer.vue";
+
+import TextInput from "./forms/TextInput.vue";
+import PhoneInput from "./forms/PhoneInput.vue";
+import CheckboxInput from "./forms/CheckboxInput.vue";
+import RadioInputList from "./forms/RadioInputList.vue";
+import TileCheckboxInput from "./forms/TileCheckboxInput.vue";
+import SelectInput from "./forms/SelectInput.vue";
+import FileInput from "./forms/FileInput.vue";
+import NumberInput from "./forms/NumberInput.vue";
+import ToggleInput from "./forms/ToggleInput.vue";
+import CurrencyInput from "./forms/CurrencyInput.vue";
+import SelectionTiles from "./forms/SelectionTiles.vue";
+
+import JourneyMacroSteps from "./composite/JourneyMacroSteps.vue";
+import FunnelLayout from "./composite/FunnelLayout.vue";
+import FunnelSubmit from "./composite/FunnelSubmit.vue";
+import FunnelSummary from "./composite/FunnelSummary.vue";
+import FunnelTitle from "./composite/FunnelTitle.vue";
+import ResultsLayout from "./composite/ResultsLayout.vue";
+import CheckoutCrossSell from "./composite/CheckoutCrossSell.vue";
+import CheckoutLayout from "./composite/CheckoutLayout.vue";
+import CheckoutMilestones from "./composite/CheckoutMilestones.vue";
+import ProductDetails from "./composite/ProductDetails.vue";
+import CjaMenuBar from "./composite/CjaMenuBar.vue";
+import CjaFooter from "./composite/CjaFooter.vue";
+import InfoShowcase from "./composite/InfoShowcase.vue";
+
+export {
+  Modal,
+  CjaButton,
+  TextInput,
+  PhoneInput,
+  RadioInputList,
+  CheckboxInput,
+  TileCheckboxInput,
+  NumberInput,
+  SelectInput,
+  CurrencyInput,
+  SelectionTiles,
+  LoadingSpinner,
+  Scaffold,
+  ProductDetails,
+  ToggleInput,
+  FileInput,
+  ContentTabs,
+  CollapseContainer,
+  GridContainer,
+  GridItem,
+  FunnelLayout,
+  FunnelSubmit,
+  FunnelSummary,
+  FunnelTitle,
+  ResultsLayout,
+  CheckoutCrossSell,
+  CheckoutLayout,
+  CheckoutMilestones,
+  JourneyMacroSteps,
+  CjaMenuBar,
+  CjaFooter,
+  FixedContainer,
+  InfoMessage,
+  InfoShowcase,
+};