cja-phoenix 0.2.3 → 0.2.5

package/src/components/composite/ResultsLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="results-container">
+    <slot name="mobile-controls" v-if="!activeViewport.lg"></slot>
+    <GridContainer class="results-grid">
+      <GridItem :size-lg="3" v-if="activeViewport.lg">
+        <div class="btn-container">
+          <button class="m-cgg-icon--arrow-back"></button>
+        </div>
+        <slot name="sidebar"></slot>
+      </GridItem>
+      <GridItem :size-sm="2" :size-md="4" :size-lg="9">
+        <slot name="content"></slot>
+      </GridItem>
+    </GridContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+import GridContainer from "../structural/GridContainer.vue";
+import GridItem from "../structural/GridItem.vue";
+
+const activeViewport: any = inject("activeViewport");
+</script>
+
+<style lang="scss" scoped>
+.results-container {
+  .results-grid {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
+
+  .btn-container {
+    button {
+      background: none;
+      padding: 0;
+      border: none;
+      cursor: pointer;
+      font-size: 26px;
+      line-height: 37px;
+      margin-bottom: 15px;
+
+      :focus {
+        outline: none;
+      }
+    }
+  }
+}
+</style>

package/src/components/forms/InputToggle.vue

@@ -2,7 +2,7 @@
   <div class="input-container">
     <div
       class="input-wrapper"
-      :class="[`size-${size}`, { active: modelValue }]"
+      :class="[`size-${size}`, { active: modelValue, 'full-width': fullWidth }]"
       @click="$emit('update:modelValue', !modelValue)"
     >
       <div class="label">
@@ -25,6 +25,7 @@ const props = withDefaults(
     validation?: any;
     label: string;
     modelValue: boolean;
+    fullWidth: boolean;
     error?: string;
     errorDisplay?: boolean;
   }>(),
@@ -47,6 +48,10 @@ const emit = defineEmits(["update:modelValue"]);
   align-items: center;
   gap: 10px;
 
+  &.full-width {
+    justify-content: space-between;
+  }
+
   .label {
     @include input-title;
 

package/src/components/forms/PhoneInput.vue

@@ -15,7 +15,10 @@
         :value="value"
         :autocomplete="autocomplete"
         @input="
-          emit('update:modelValue', (<HTMLInputElement>$event.target).value)
+          emit(
+            'update:modelValue',
+            Number((<HTMLInputElement>$event.target).value)
+          )
         "
       />
     </div>
@@ -46,7 +49,7 @@ const props = withDefaults(
     modelValue: InputHTMLAttributes["value"];
     id?: InputHTMLAttributes["id"];
     disabled?: InputHTMLAttributes["disabled"];
-    phoneCountryCode: number;
+    phoneCountryCode?: number;
     autocomplete?: InputHTMLAttributes["autocomplete"];
   }>(),
   {
@@ -73,14 +76,20 @@ onMounted(() => {
   inputEl.value.addEventListener("countrychange", () =>
     emit(
       "update:phoneCountryCode",
-      window.intlTelInputGlobals
-        .getInstance(inputEl.value)
-        .getSelectedCountryData().dialCode
+      Number(
+        window.intlTelInputGlobals
+          .getInstance(inputEl.value)
+          .getSelectedCountryData().dialCode
+      )
     )
   );
 
   intlTelInput(inputEl.value, {
-    initialCountry: "pt",
+    initialCountry: props.phoneCountryCode
+      ? window.intlTelInputGlobals
+          .getCountryData()
+          .find((c) => Number(c.dialCode) == props.phoneCountryCode)?.iso2
+      : "pt",
     preferredCountries: ["pt"],
     separateDialCode: true,
   });

package/src/components/forms/RadioInput.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="input-container">
+    <div class="input-container-radio">
+      <label>
+        <input
+          type="radio"
+          :name="name"
+          :checked="modelValue == value"
+          @change="handleChange"
+        />
+        <div class="radio-icon"></div>
+        <div class="text-container" v-html="label"></div>
+      </label>
+    </div>
+
+    <InputError :error="error" v-if="error && errorDisplay" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import InputError from "./structure/InputError.vue";
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    value: any;
+    label: string;
+    modelValue?: any;
+    error?: string;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    errorDisplay: true,
+  }
+);
+
+const handleChange = (event: any) => {
+  if (event.target.checked) {
+    emit("update:modelValue", props.value);
+  }
+};
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+.input-container-radio {
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 15px;
+    cursor: pointer;
+    margin: 0;
+    font-weight: 400;
+
+    input {
+      display: none;
+    }
+
+    .radio-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #64748b;
+      border-radius: 50%;
+    }
+
+    input:checked + .radio-icon {
+      border: 6px solid #076b9c;
+    }
+
+    .text-container {
+      font-size: 16px;
+      line-height: 19px;
+      user-select: none;
+
+      a {
+        color: inherit;
+        font-weight: 700;
+        text-decoration: underline;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/forms/SelectInput.vue

@@ -9,7 +9,11 @@
     >
       <div
         class="select-toggle"
-        :class="[`size-${size}`, { open: open, disabled: disabled }]"
+        :class="[
+          `size-${size}`,
+          collapsePosition,
+          { open: open, disabled: disabled },
+        ]"
         @click="toggleCollapse()"
       >
         <span class="select-display">{{ displayValue || placeholder }}</span>
@@ -44,7 +48,7 @@
                 ></span>
                 {{ option.label }}
               </li>
-              <li v-if="searchFilter && filteredOptions.length == 0">
+              <li v-if="searchFilter && filteredOptions?.length == 0">
                 {{ searchFilter.noResults }}
               </li>
             </ul>
@@ -86,7 +90,7 @@ const props = withDefaults(
     id?: InputHTMLAttributes["id"];
     disabled?: InputHTMLAttributes["disabled"];
     modelValue: SelectHTMLAttributes["value"];
-    options: SelectOption[];
+    options: SelectOption[] | null;
     multiSelect?: boolean;
     searchFilter?: {
       placeholder: string;
@@ -108,7 +112,7 @@ const inputEl = ref();
 const collapseEl = ref();
 const collapsePosition = ref();
 const filteredOptions = computed(() =>
-  search.value
+  search.value && props.options
     ? props.options.filter((opt) =>
         opt.label.toLowerCase().includes(search.value.toLowerCase())
       )
@@ -127,7 +131,7 @@ defineExpose({ errorMessage, meta, validate });
 const emit = defineEmits(["update:modelValue"]);
 
 const displayValue = computed(() =>
-  inputValue.value
+  inputValue.value && props.options
     ? props.multiSelect
       ? props.options
           .filter((o) => inputValue.value.includes(o.value))
@@ -193,7 +197,7 @@ const toggleCollapse = () => {
   }
 };
 
-const calcPosition = (el: HTMLElement) => {
+const calcPosition = (el: any) => {
   const elRect = el.getBoundingClientRect();
   const inputRect = inputEl.value.getBoundingClientRect();
   const position =
@@ -252,7 +256,13 @@ const selectValue = (value: string) => {
     }
 
     &.open {
-      border-radius: 5px 5px 0 0;
+      &.position-bottom {
+        border-radius: 5px 5px 0 0;
+      }
+
+      &.position-top {
+        border-radius: 0 0 5px 5px;
+      }
 
       em {
         transform: rotate(180deg);

package/src/components/forms/SelectionTiles.vue

@@ -7,8 +7,8 @@
         class="tile"
         :class="{
           active: multiselect
-            ? modelValue.includes(option.value)
-            : option.value == modelValue,
+            ? value.includes(option.value)
+            : option.value == value,
         }"
         @click="$emit('update:modelValue', option.value)"
         v-tippy="option.tooltip ? option.tooltip : ''"
@@ -72,6 +72,8 @@ defineEmits(["update:modelValue"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
 .tiles-container {
   display: grid;
   width: 100%;
@@ -95,10 +97,20 @@ defineEmits(["update:modelValue"]);
       padding-right: 20px;
     }
 
-    &:hover,
+    @mixin activeStyle {
+      box-shadow: $box-shadow-m;
+      background-color: #f4f9fc;
+      border-color: #076b9c;
+    }
+
     &.active {
-      color: #076b9c;
-      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+      @include activeStyle;
+    }
+
+    @media (any-hover: hover) {
+      &:hover {
+        @include activeStyle;
+      }
     }
 
     .text-wrapper {
@@ -167,6 +179,7 @@ defineEmits(["update:modelValue"]);
   &.layout-image {
     .tile {
       justify-content: center;
+      text-align: center;
 
       .image-container img {
         display: block;

package/src/components/index.ts

@@ -2,31 +2,39 @@ 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 RadioInput from "./forms/RadioInput.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 InputToggle from "./forms/InputToggle.vue";
-import CollapseContainer from "./structural/CollapseContainer.vue";
 import SelectionTiles from "./forms/SelectionTiles.vue";
 
-import ProductDetails from "./composite/ProductDetails.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 ProductDetails from "./composite/ProductDetails.vue";
+import CjaMenuBar from "./composite/CjaMenuBar.vue";
 
 export {
   Modal,
   CjaButton,
   TextInput,
   PhoneInput,
+  RadioInput,
   CheckboxInput,
   TileCheckboxInput,
   NumberInput,
@@ -41,7 +49,13 @@ export {
   CollapseContainer,
   GridContainer,
   GridItem,
+  FunnelLayout,
   FunnelSubmit,
   FunnelSummary,
   FunnelTitle,
+  JourneyMacroSteps,
+  CjaMenuBar,
+  FixedContainer,
+  ResultsLayout,
+  InfoMessage,
 };

package/src/components/structural/CjaButton.vue

@@ -6,6 +6,7 @@
       `btn-size-${size}`,
       `btn-color-${color}`,
       `icon-${iconPosition}`,
+      { 'btn-loading': loading },
     ]"
   >
     <Scaffold v-if="!loading">
@@ -135,7 +136,7 @@ withDefaults(
       cursor: auto;
     }
 
-    .spinner {
+    &.btn-loading .spinner {
       border-color: #fff;
       border-top-color: rgba(255, 255, 255, 0.2);
     }
@@ -165,14 +166,18 @@ withDefaults(
     flex-direction: row-reverse;
   }
 
-  .spinner {
-    width: 20px;
-    height: 20px;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 50%;
-    animation: spin 1s infinite;
-    animation-timing-function: linear;
+  &.btn-loading {
+    cursor: auto;
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      animation: spin 1s infinite;
+      animation-timing-function: linear;
+    }
   }
 }
 

package/src/components/structural/CollapseContainer.vue

@@ -1,10 +1,6 @@
 <template>
-  <div class="collapse-container">
-    <div
-      class="collapse-header"
-      @click="active = !active"
-      :class="{ active: active }"
-    >
+  <div class="collapse-container" :class="{ active: active }">
+    <div class="collapse-header" @click="active = !active">
       <div class="header-wrapper">
         <slot name="header"></slot>
       </div>
@@ -14,13 +10,14 @@
       name="slide"
       @before-enter="setHeightZero"
       @enter="setHeightSize"
+      @after-enter="clearHeight"
       @leave="setHeightZero"
     >
       <div
         v-show="active"
         ref="contentContainer"
         class="content-container"
-        :class="{ active: active }"
+        :style="{ height: containerHeight, overflow: containerOverflow }"
       >
         <div ref="contentWrapper" class="content-wrapper">
           <slot name="content"></slot>
@@ -43,11 +40,13 @@ const props = defineProps<{
 const active = ref(props.defaultActive);
 const contentContainer = ref();
 const contentWrapper = ref();
+const containerHeight = ref();
+const containerOverflow = ref();
 
 const setHeightSize = () => {
   requestAnimationFrame(() => {
     if (contentContainer.value && contentWrapper.value) {
-      contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+      containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
       if (active.value && props.scrollToContent) {
         setTimeout(() => {
@@ -58,24 +57,24 @@ const setHeightSize = () => {
           });
         }, 250);
       }
-
-      setTimeout(() => {
-        contentContainer.value.style.height = "";
-        contentContainer.value.style.overflow = "visible";
-      }, 200);
     }
   });
 };
 
 const setHeightZero = () => {
-  contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+  containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
   requestAnimationFrame(() => {
-    contentContainer.value.style.height = "0";
-    contentContainer.value.style.overflow = "";
+    containerHeight.value = "0";
+    containerOverflow.value = "";
   });
 };
 
+const clearHeight = () => {
+  containerHeight.value = "";
+  containerOverflow.value = "visible";
+};
+
 onMounted(() => {
   if (props.defaultActive) {
     setHeightSize();
@@ -90,26 +89,30 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.collapse-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  user-select: none;
+.collapse-container {
+  .collapse-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
 
-  > span {
-    transition: all 0.2s linear;
+    > span {
+      transition: all 0.2s linear;
+    }
   }
 
-  &.active > span {
-    transform: rotate(180deg);
+  .content-container {
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: all 0.2s linear;
   }
-}
 
-.content-container {
-  box-sizing: border-box;
-  overflow: hidden;
-  transition: all 0.2s linear;
+  &.active {
+    .collapse-header > span {
+      transform: rotate(180deg);
+    }
+  }
 }
 </style>

package/src/components/structural/FixedContainer.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="fixed-container"
+    :style="{ height: fixedContainerHeight }"
+    ref="fixedContainer"
+  >
+    <div
+      class="fixed-wrapper"
+      :class="{ 'position-fixed': positionFixed }"
+      :style="{ ...size, ...position }"
+      ref="fixedWrapper"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, onMounted } from "vue";
+import { ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    scrollThreshold?: number;
+    fixWidth?: boolean;
+    size?: {
+      height?: string;
+      width?: string;
+    };
+    position?: {
+      left?: string;
+      top?: string;
+      right?: string;
+      bottom?: string;
+    };
+  }>(),
+  {
+    scrollThreshold: 0,
+    fixWidth: true,
+  }
+);
+
+const positionFixed = ref(false);
+const fixedContainer = ref();
+const fixedContainerHeight = ref("");
+const fixedWrapper = ref();
+
+const fixPosition = () => {
+  if (fixedContainer.value) {
+    positionFixed.value =
+      window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
+
+    fixedContainerHeight.value = positionFixed.value
+      ? `${fixedWrapper.value.clientHeight}px`
+      : "";
+  }
+};
+
+const setWidth = () => {
+  fixedWrapper.value.style.maxWidth = `${fixedContainer.value.offsetWidth}px`;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", fixPosition);
+  fixPosition();
+
+  if (props.fixWidth) {
+    window.addEventListener("resize", setWidth);
+    setWidth();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", fixPosition);
+  window.removeEventListener("resize", setWidth);
+});
+
+defineExpose({ positionFixed });
+</script>
+
+<style lang="scss" scoped>
+.fixed-wrapper {
+  &.position-fixed {
+    position: fixed;
+  }
+}
+</style>