cja-phoenix 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cja-phoenix",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "scripts": {
     "build:dev": "rimraf dist && vue-tsc && vite build -m development",
     "build:link": "rimraf dist && vue-tsc && vite build -m development && npm link",
@@ -33,7 +33,7 @@
     "vee-validate": "^4.7.2",
     "vite": "^3.0.0",
     "vitepress": "^0.21.6",
-    "vue": "^3.2.25",
+    "vue": "^3.3.4",
     "vue-router": "^4.1.6",
     "vue-tippy": "^6.0.0",
     "vue-tsc": "^1.0.24"

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/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/index.ts

@@ -2,19 +2,22 @@ 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 JourneyMacroSteps from "./composite/JourneyMacroSteps.vue";
@@ -22,6 +25,7 @@ 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";
 
@@ -30,6 +34,7 @@ export {
   CjaButton,
   TextInput,
   PhoneInput,
+  RadioInput,
   CheckboxInput,
   TileCheckboxInput,
   NumberInput,
@@ -50,4 +55,7 @@ export {
   FunnelTitle,
   JourneyMacroSteps,
   CjaMenuBar,
+  FixedContainer,
+  ResultsLayout,
+  InfoMessage,
 };

package/src/components/structural/CjaButton.vue

@@ -6,7 +6,7 @@
       `btn-size-${size}`,
       `btn-color-${color}`,
       `icon-${iconPosition}`,
-      { ['btn-loading']: loading },
+      { 'btn-loading': loading },
     ]"
   >
     <Scaffold v-if="!loading">

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>

package/src/components/structural/InfoMessage.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="info-message"
+    :class="[
+      `color-${color}`,
+      { 'has-icon': $slots.icon, 'has-toggle': toggle },
+    ]"
+  >
+    <div class="icon-container" v-if="$slots.icon">
+      <slot name="icon"></slot>
+    </div>
+    <div class="text-container">
+      <h4 v-if="title">{{ title }}</h4>
+      <p v-if="description" v-html="description"></p>
+    </div>
+    <div class="btn-container" v-if="toggle">
+      <button class="m-cgg-icon--cross2" @click="$emit('btn:close')"></button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string;
+  description?: string;
+  toggle?: boolean;
+  color: "blue" | "green";
+}>();
+
+defineEmits(["btn:close"]);
+</script>
+
+<style lang="scss" scoped>
+.info-message {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 16px 24px;
+  border: 2px solid #000;
+  border-radius: 16px;
+
+  &.has-icon {
+    grid-template-columns: auto 1fr;
+  }
+
+  &.has-toggle {
+    grid-template-columns: 1fr 18px;
+  }
+
+  &.has-icon.has-toggle {
+    grid-template-columns: auto 1fr 18px;
+  }
+
+  &.color-green {
+    background-color: #f8faf5;
+    border-color: #c4dab1;
+    color: #56924b;
+  }
+
+  &.color-blue {
+    background-color: #f4f9fc;
+    border-color: #076b9c;
+    color: #076b9c;
+  }
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    h4 {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      margin: 0;
+    }
+
+    p {
+      font-size: 13px;
+      line-height: 17px;
+      margin: 0;
+    }
+  }
+
+  .btn-container {
+    button {
+      padding: 0;
+      border: none;
+      font-size: 18px;
+      line-height: 18px;
+      color: inherit;
+      cursor: pointer;
+      background: none;
+    }
+  }
+}
+</style>