cja-phoenix 0.2.1 → 0.2.3

package/src/components/forms/SelectionTiles.vue

@@ -1,105 +1,182 @@
 <template>
-  <div class="tiles-container">
-    <div
-      v-for="(option, idx) in options"
-      :key="idx"
-      class="tile"
-      :class="{ active: option.value === modelValue }"
-      @click="$emit('update:modelValue', option.value)"
-      v-tippy="option.tooltip ? option.tooltip : ''"
-    >
-      <div class="image-container" v-if="option.image">
-        <img :src="`${imageUrl}${option.image}`" :alt="option.title" />
-      </div>
+  <InputContainer :layout="'vertical'">
+    <div class="tiles-container" :class="[`layout-${layout}`]">
+      <div
+        v-for="(option, idx) in options"
+        :key="idx"
+        class="tile"
+        :class="{
+          active: multiselect
+            ? modelValue.includes(option.value)
+            : option.value == modelValue,
+        }"
+        @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">
-        <span class="title">{{ option.title }}</span>
-        <span class="description" v-if="option.description">
-          {{ option.description }}
-        </span>
+        <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>
-      <span 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[];
+    modelValue: any;
+    layout?: "list" | "grid" | "image";
+    multiselect?: boolean;
+    error?: string;
+    validation?: any;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    layout: "list",
+    errorDisplay: true,
+  }
+);
 
-const props = defineProps<{
-  options: TileOption[];
-  modelValue: [String, Number, Boolean];
-}>();
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
 
-const imageUrl = process.env.VUE_APP_IMG_URL;
+defineExpose({ errorMessage, meta, validate });
 
-const emit = defineEmits(["update:modelValue"]);
+defineEmits(["update:modelValue"]);
 </script>
 
 <style lang="scss" scoped>
 .tiles-container {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
+  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;
-  }
+  .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;
+    }
+
+    &:hover,
+    &.active {
+      color: #076b9c;
+      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .text-wrapper {
+      font-size: 18px;
+      line-height: 22px;
+
+      .title {
+        font-weight: 700;
+      }
+    }
 
-  &:hover,
-  &.active {
-    color: #076b9c;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+    .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;
+    }
   }
 
-  .image-container img {
-    height: 28px;
-    width: 28px;
+  &.layout-list,
+  &.layout-grid {
+    .image-container img {
+      height: 28px;
+      width: 28px;
 
-    @media screen and (min-width: 992px) {
-      height: 32px;
-      width: 32px;
+      @media screen and (min-width: 992px) {
+        height: 32px;
+        width: 32px;
+      }
     }
   }
 
-  .text-wrapper {
-    font-size: 18px;
-    line-height: 22px;
+  &.layout-list {
+    grid-template-columns: 1fr;
 
-    .title {
-      font-weight: 700;
+    .text-wrapper {
+      .description:before {
+        content: "-";
+        margin: 0 5px;
+      }
     }
+  }
 
-    .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;
+      }
     }
   }
 
-  .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-image {
+    .tile {
+      justify-content: center;
+
+      .image-container img {
+        display: block;
+        max-width: 100%;
+      }
+    }
   }
 }
+
+.input-error {
+  text-align: center;
+}
 </style>

package/src/components/forms/TextInput.vue

@@ -49,7 +49,6 @@ const props = withDefaults(
     placeholder?: InputHTMLAttributes["placeholder"];
     layout?: "vertical" | "horizontal";
     size?: "sm" | "md" | "lg";
-    error?: string;
     validation?: any;
     errorDisplay?: boolean;
     modelValue: InputHTMLAttributes["value"];
@@ -61,7 +60,6 @@ const props = withDefaults(
     type?: InputHTMLAttributes["type"];
     autocomplete?: InputHTMLAttributes["autocomplete"];
     suffix?: string;
-    prefix?: string;
   }>(),
   {
     layout: "vertical",

package/src/components/index.ts

@@ -3,6 +3,8 @@ import CjaButton from "./structural/CjaButton.vue";
 import LoadingSpinner from "./structural/LoadingSpinner.vue";
 import ContentTabs from "./structural/ContentTabs.vue";
 import Scaffold from "./structural/Scaffold.vue";
+import GridContainer from "./structural/GridContainer.vue";
+import GridItem from "./structural/GridItem.vue";
 
 import TextInput from "./forms/TextInput.vue";
 import PhoneInput from "./forms/PhoneInput.vue";
@@ -10,12 +12,15 @@ import CheckboxInput from "./forms/CheckboxInput.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 GridContainer from "./structural/GridContainer.vue";
-import GridItem from "./structural/GridItem.vue";
+import SelectionTiles from "./forms/SelectionTiles.vue";
 
 import ProductDetails from "./composite/ProductDetails.vue";
+import FunnelSubmit from "./composite/FunnelSubmit.vue";
+import FunnelSummary from "./composite/FunnelSummary.vue";
+import FunnelTitle from "./composite/FunnelTitle.vue";
 
 export {
   Modal,
@@ -24,7 +29,9 @@ export {
   PhoneInput,
   CheckboxInput,
   TileCheckboxInput,
+  NumberInput,
   SelectInput,
+  SelectionTiles,
   LoadingSpinner,
   Scaffold,
   ProductDetails,
@@ -34,4 +41,7 @@ export {
   CollapseContainer,
   GridContainer,
   GridItem,
+  FunnelSubmit,
+  FunnelSummary,
+  FunnelTitle,
 };

package/src/components/structural/CjaButton.vue

@@ -1,15 +1,24 @@
 <template>
   <button
     class="cja-btn"
-    :class="[`btn-${type}`, `btn-size-${size}`, `btn-color-${color}`]"
+    :class="[
+      `btn-${type}`,
+      `btn-size-${size}`,
+      `btn-color-${color}`,
+      `icon-${iconPosition}`,
+    ]"
   >
-    <span v-if="icon && iconPosition == 'left'" :class="icon"></span>
-    <span><slot></slot></span>
-    <span v-if="icon && iconPosition == 'right'" :class="icon"></span>
+    <Scaffold v-if="!loading">
+      <span><slot></slot></span>
+      <span v-if="icon" :class="icon"></span>
+    </Scaffold>
+    <div class="spinner" v-else></div>
   </button>
 </template>
 
 <script lang="ts" setup>
+import { Scaffold } from "..";
+
 withDefaults(
   defineProps<{
     type?: "primary" | "secondary" | "tertiary";
@@ -17,6 +26,7 @@ withDefaults(
     size?: "sm" | "md" | "lg";
     icon?: string;
     iconPosition?: "left" | "right";
+    loading?: boolean;
   }>(),
   {
     type: "primary",
@@ -32,6 +42,7 @@ withDefaults(
 
 .cja-btn {
   display: inline-flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   box-shadow: $box-shadow-s;
@@ -123,27 +134,55 @@ withDefaults(
       color: #9fabbc;
       cursor: auto;
     }
+
+    .spinner {
+      border-color: #fff;
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
   }
 
   &.btn-secondary {
     // Implement bordered buttons
 
-    .btn-color-blue {
+    &.btn-color-blue:not(:disabled) {
       border-color: #076b9c;
       color: #076b9c;
 
       &:hover {
-        background-color: #0d2745;
-        border-color: #0d2745;
-        color: #fff;
+        background-color: #f4f9fc;
+        border-color: #155072;
+        color: #155072;
       }
 
       &:focus {
-        background-color: #155072;
-        border-color: #155072;
-        color: #fff;
+        border-color: #0d2745;
+        color: #0d2745;
       }
     }
   }
+
+  &.icon-left {
+    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;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

package/src/components/structural/GridItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :class="[
-      `grid-item-sm-${sizeSm}`,
-      `grid-item-md-${sizeMd}`,
-      `grid-item-lg-${sizeLg}`,
-    ]"
+    :class="{
+      [`grid-item-sm-${sizeSm}`]: sizeSm,
+      [`grid-item-md-${sizeMd}`]: sizeMd,
+      [`grid-item-lg-${sizeLg}`]: sizeLg,
+    }"
   >
     <slot></slot>
   </div>
@@ -12,33 +12,33 @@
 
 <script lang="ts" setup>
 defineProps<{
-  sizeSm: 1 | 2 | 3 | 4;
-  sizeMd: 1 | 2 | 3 | 4;
-  sizeLg: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  sizeSm?: 1 | 2 | 3 | 4;
+  sizeMd?: 1 | 2 | 3 | 4;
+  sizeLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 }>();
 </script>
 
 <style lang="scss" scoped>
-@for $sm from 1 to 5 {
-  .grid-item-sm-#{$sm} {
+@for $i from 0 to 4 {
+  .grid-item-sm-#{$i + 1} {
     @media screen and (max-width: 767px) {
-      grid-column: span #{$sm};
+      grid-column: span #{$i + 1};
     }
   }
 }
 
-@for $md from 1 to 5 {
-  .grid-item-md-#{$md} {
+@for $i from 0 to 4 {
+  .grid-item-md-#{$i + 1} {
     @media screen and (min-width: 768px) and (max-width: 1023px) {
-      grid-column: span #{$md};
+      grid-column: span #{$i + 1};
     }
   }
 }
 
-@for $lg from 1 to 13 {
-  .grid-item-lg-#{$lg} {
+@for $i from 0 to 12 {
+  .grid-item-lg-#{$i + 1} {
     @media screen and (min-width: 1024px) {
-      grid-column: span #{$lg};
+      grid-column: span #{$i + 1};
     }
   }
 }

package/src/types/TileOption.ts

@@ -1,7 +1,8 @@
 export interface TileOption {
-  value: [string, number, boolean];
-  title: string;
+  value: any;
+  label: string;
   description?: string;
+  descriptionLong?: string;
   tooltip?: string;
   image?: string;
 }

package/src/utils/RouteGenerator.ts

@@ -1,6 +1,6 @@
 import { RouteRecordRaw } from "vue-router";
 
-export const generateRoutes = (routes: RouteRecordRaw[]) => {
+export const generateRoutes = (routes: any[]) => {
   let assembledRoutes: RouteRecordRaw[] = [
     {
       path: "/",

package/src/utils/ViewportDetector.ts

@@ -1,11 +1,11 @@
-import { Ref, ref } from "vue";
+import { Ref, onMounted, onUnmounted, ref } from "vue";
 
 export const useViewportDetector = (
   breakpoints: { [index: string]: number } = {
     xs: 0,
     s: 420,
     m: 768,
-    lg: 992,
+    lg: 1024,
     xl: 1200,
   }
 ) => {
@@ -17,8 +17,14 @@ export const useViewportDetector = (
     }
   };
 
-  window.addEventListener("resize", setViewports);
-  setViewports();
+  onMounted(() => {
+    window.addEventListener("resize", setViewports);
+    setViewports();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", setViewports);
+  });
 
   return { activeViewport };
 };