cja-phoenix 0.2.23 → 0.3.0

package/src/components/composite/CjaMenuBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="main-header-container" id="page-header">
+  <header class="main-header-container" id="page-header" ref="headerEl">
     <FixedContainer :active="activeViewport.lg" :size="{ width: '100%' }">
       <div class="main-header">
         <div class="logo-container">
@@ -10,15 +10,15 @@
             <img :src="baseImgUrl + 'CPJ-logo-header.svg'" v-else />
           </div>
         </div>
-        <div
-          class="content-container macro-steps"
-          v-if="activeViewport.lg && macroStepList"
-        >
-          <JourneyMacroSteps :stepList="macroStepList" />
-        </div>
-        <div class="content-container" v-else-if="$slots.content">
-          <slot name="content"></slot>
+
+        <div class="content-container">
+          <JourneyMacroSteps
+            :stepList="macroStepList"
+            v-if="activeViewport.lg && macroStepList"
+          />
+          <slot name="content" v-else-if="$slots.content"></slot>
         </div>
+
         <div class="side-info" v-if="sideInfo">
           <slot name="side">
             <div class="contact-container">
@@ -36,9 +36,7 @@
         :size="{ width: '100%' }"
         :position="{ left: '0', top: '0' }"
       >
-        <div class="content-container macro-steps">
-          <JourneyMacroSteps :stepList="macroStepList" />
-        </div>
+        <JourneyMacroSteps :stepList="macroStepList" />
       </FixedContainer>
     </FixedContainer>
   </header>
@@ -49,6 +47,9 @@ import { inject } from "vue";
 import FixedContainer from "../structural/FixedContainer.vue";
 import { MacroStep } from "../../types";
 import JourneyMacroSteps from "./JourneyMacroSteps.vue";
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { provide } from "vue";
 
 const activeViewport: any = inject("activeViewport");
 withDefaults(
@@ -80,7 +81,7 @@ header.main-header-container {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+    gap: 16px;
     background-color: #fff;
     padding: 20px;
     box-shadow: $box-shadow-m;
@@ -104,6 +105,10 @@ header.main-header-container {
       }
     }
 
+    .content-container {
+      flex-grow: 1;
+    }
+
     .side-info {
       @media screen and (min-width: 1024px) {
         display: flex;
@@ -159,23 +164,5 @@ header.main-header-container {
       }
     }
   }
-
-  .content-container {
-    background: #fff;
-    padding: 20px;
-
-    &.macro-steps {
-      border-bottom: 1px solid #dedede;
-
-      @media screen and (min-width: 1024px) {
-        border-bottom: none;
-      }
-    }
-
-    @media screen and (min-width: 1024px) {
-      padding: 0;
-      flex-grow: 1;
-    }
-  }
 }
 </style>

package/src/components/composite/FunnelSummary.vue

@@ -118,8 +118,8 @@ const emit = defineEmits(["btn:cancel", "btn:save", "btn:edit"]);
 
       h3 {
         font-weight: 700;
-        font-size: 18px;
-        line-height: 22px;
+        font-size: 16px;
+        line-height: 20px;
         margin: 0;
       }
 
@@ -151,8 +151,8 @@ const emit = defineEmits(["btn:cancel", "btn:save", "btn:edit"]);
         display: grid;
         grid-template-columns: auto 1fr;
         gap: 10px 20px;
-        font-size: 16px;
-        line-height: 16px;
+        font-size: 14px;
+        line-height: 14px;
 
         .info-display {
           text-align: right;

package/src/components/composite/JourneyMacroSteps.vue

@@ -5,8 +5,18 @@
       :class="[`step-status-${step.status}`]"
       v-for="(step, i) in stepList"
     >
-      <span :class="step.icon"></span>
-      <span class="step-label">{{ step.label }}</span>
+      <a
+        class="step-description"
+        v-if="step.navigationUrl && step.status == 'past'"
+        :href="step.navigationUrl"
+      >
+        <span class="step-icon" :class="step.icon"></span>
+        <a class="step-label">{{ step.label }}</a>
+      </a>
+      <span class="step-description" v-else>
+        <span class="step-icon" :class="step.icon"></span>
+        <span class="step-label">{{ step.label }}</span>
+      </span>
       <span
         class="m-cgg-icon--chevron-right"
         v-if="i < stepList.length - 1"
@@ -16,6 +26,7 @@
 </template>
 
 <script lang="ts" setup>
+import { Scaffold } from "..";
 import { MacroStep } from "../../types/MacroStep";
 
 defineProps<{
@@ -25,35 +36,55 @@ defineProps<{
 
 <style lang="scss" scoped>
 .macro-steps-container {
+  background: #fff;
+  padding: 16px;
+  border-bottom: 1px solid #dedede;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
-  padding: 0 10px;
+
+  @media screen and (min-width: 1024px) {
+    border-bottom: none;
+    padding: 0 16px;
+  }
 
   .macro-step {
     display: flex;
     align-items: center;
+    gap: 10px;
 
-    .step-label {
-      margin-left: 10px;
+    .step-description {
+      display: flex;
+      align-items: center;
+      gap: 10px;
       font-size: 14px;
       line-height: 17px;
-      text-transform: uppercase;
-      display: none;
+      transition: all 0.2s ease-in-out;
 
-      @media screen and (min-width: 1024px) {
-        font-size: 14px;
-        line-height: 17px;
-      }
+      .step-label {
+        text-transform: uppercase;
+        display: none;
 
-      @media screen and (min-width: 1200px) {
-        display: block;
+        @media screen and (min-width: 1200px) {
+          display: block;
+        }
       }
     }
 
-    .m-cgg-icon--chevron-right {
-      margin-left: 10px;
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      span {
+        color: inherit;
+      }
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: none;
+        color: #076b9c;
+      }
     }
 
     &.step-status-future {

package/src/components/forms/RadioInput.vue

@@ -69,6 +69,7 @@ const emit = defineEmits(["update:modelValue"]);
     .radio-icon {
       width: 20px;
       height: 20px;
+      flex-shrink: 0;
       border: 1px solid #64748b;
       border-radius: 50%;
     }

package/src/components/structural/CjaButton.vue

@@ -6,11 +6,11 @@
       `btn-size-${size}`,
       `btn-color-${color}`,
       `icon-${iconPosition}`,
-      { 'btn-loading': loading },
+      { 'btn-loading': loading, 'btn-icon-only': !$slots.default && icon },
     ]"
   >
     <Scaffold v-if="!loading">
-      <span><slot></slot></span>
+      <span v-if="$slots.default"><slot></slot></span>
       <span v-if="icon" :class="icon"></span>
     </Scaffold>
     <div class="spinner" v-else></div>
@@ -46,7 +46,6 @@ withDefaults(
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  box-shadow: $box-shadow-s;
   gap: 10px;
   font-weight: 700;
   cursor: pointer;
@@ -65,66 +64,103 @@ withDefaults(
   }
 
   &.btn-size-sm {
-    font-size: 18px;
-    line-height: 20px;
-    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 18px;
+    padding: 8px 12px;
     border-radius: 8px;
+
+    &.btn-icon-only,
+    &.btn-loading {
+      padding: 4px;
+    }
+
+    &.btn-loading .spinner {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &.btn-size-md {
     font-size: 18px;
-    line-height: 20px;
-    padding: 10px 20px;
+    line-height: 18px;
+    padding: 8px 24px;
     border-radius: 8px;
+
+    &.btn-icon-only,
+    &.btn-loading {
+      padding: 8px;
+    }
+
+    &.btn-loading .spinner {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &.btn-size-lg {
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 22px;
+    line-height: 22px;
     padding: 16px 32px;
     border-radius: 8px;
+
+    &.btn-icon-only,
+    &.btn-loading {
+      padding: 16px;
+    }
+
+    &.btn-loading .spinner {
+      width: 22px;
+      height: 22px;
+    }
   }
 
   &.btn-primary {
+    box-shadow: $box-shadow-s;
+
     &.btn-color-blue:not(:disabled) {
-      background-color: #076b9c;
+      background: #076b9c;
       border-color: #076b9c;
       color: #fff;
 
       &:hover {
-        background-color: #0d2745;
+        background: #0d2745;
         border-color: #0d2745;
       }
 
       &:focus {
-        background-color: #155072;
+        background: #155072;
         border-color: #155072;
       }
     }
 
     &.btn-color-orange:not(:disabled) {
-      background-color: #f58423;
+      background: #f58423;
       border-color: #f58423;
       color: #fff;
 
       &:hover {
-        background-color: #ea730b;
+        background: #ea730b;
         border-color: #ea730b;
       }
 
       &:focus {
-        background-color: #f9b377;
+        background: #f9b377;
         border-color: #f9b377;
       }
     }
 
     &.btn-color-white:not(:disabled) {
-      background-color: #fff;
+      background: #fff;
       border-color: #fff;
       color: #0d2745;
 
       &:hover {
-        background-color: #ebebeb;
+        background: #fafafa;
+        border-color: #fafafa;
+      }
+
+      &:focus {
+        background: #ebebeb;
         border-color: #ebebeb;
       }
     }
@@ -143,14 +179,12 @@ withDefaults(
   }
 
   &.btn-secondary {
-    // Implement bordered buttons
-
     &.btn-color-blue:not(:disabled) {
       border-color: #076b9c;
       color: #076b9c;
 
       &:hover {
-        background-color: #f4f9fc;
+        background: #f4f9fc;
         border-color: #155072;
         color: #155072;
       }
@@ -160,6 +194,101 @@ withDefaults(
         color: #0d2745;
       }
     }
+
+    &.btn-color-orange:not(:disabled) {
+      border-color: #f58423;
+      color: #f58423;
+
+      &:hover {
+        background: #fdf1e2;
+        border-color: #f9b377;
+        color: #f9b377;
+      }
+
+      &:focus {
+        border-color: #ea730b;
+        color: #ea730b;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      border-color: #fff;
+      color: #fff;
+
+      &:hover {
+        background: #ebebeb;
+        border-color: #fafafa;
+        color: #fafafa;
+      }
+
+      &:focus {
+        border-color: #ebebeb;
+        color: #ebebeb;
+      }
+    }
+
+    &:disabled {
+      border-color: #9fabbc;
+      color: #9fabbc;
+      cursor: auto;
+    }
+
+    &.btn-loading .spinner {
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &.btn-tertiary {
+    &.btn-color-blue:not(:disabled) {
+      color: #076b9c;
+
+      &:hover {
+        box-shadow: $box-shadow-s;
+        color: #155072;
+        background: #f4f9fc;
+      }
+
+      &:focus {
+        color: #0d2745;
+      }
+    }
+
+    &.btn-color-orange:not(:disabled) {
+      color: #f58423;
+
+      &:hover {
+        box-shadow: $box-shadow-s;
+        color: #f9b377;
+        background: #fdf1e2;
+      }
+
+      &:focus {
+        color: #ea730b;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      color: #fff;
+
+      &:hover {
+        box-shadow: $box-shadow-s;
+        color: #0d2745;
+        background: #fafafa;
+      }
+
+      &:focus {
+        color: #ebebeb;
+      }
+    }
+
+    &:disabled {
+      color: #9fabbc;
+      cursor: auto;
+    }
+
+    &.btn-loading .spinner {
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
   }
 
   &.icon-left {

package/src/components/structural/ContentTabs.vue

@@ -2,26 +2,26 @@
   <div class="content-tabs">
     <div class="control-container">
       <button
-        v-for="tab in tabs"
-        :key="tab.control"
-        :class="{ active: activeTab == tab.control }"
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :class="{ active: activeTab == i }"
         @click="
-          activeTab = tab.control;
-          $emit('tab:changed');
+          activeTab = i;
+          $emit('tab:changed', i);
         "
       >
-        {{ tab.label }}
+        {{ tab }}
       </button>
     </div>
     <div class="content-container">
       <TransitionGroup name="fade">
         <div
-          v-for="tab in tabs"
-          :key="tab.control"
-          v-show="activeTab == tab.control"
-          :class="`tab-${tab.control}`"
+          v-for="(tab, i) in tabs"
+          :key="i"
+          v-show="activeTab == i"
+          :class="`tab-${i}`"
         >
-          <slot :name="tab.control"></slot>
+          <slot :name="i"></slot>
         </div>
       </TransitionGroup>
     </div>
@@ -30,13 +30,12 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { Tab } from "../../types/Tab";
 
 const props = defineProps<{
-  default: string;
-  tabs: Tab[];
+  defaultTab: number;
+  tabs: string[];
 }>();
-const activeTab = ref(props.default);
+const activeTab = ref(props.defaultTab);
 
 defineEmits(["tab:changed"]);
 defineExpose({ activeTab });
@@ -55,7 +54,7 @@ defineExpose({ activeTab });
       outline: none;
       background: none;
       font-weight: 700;
-      padding: 0 5px 5px;
+      padding: 0 5px 7px;
       font-size: 16px;
       line-height: 19px;
       text-align: center;
@@ -66,6 +65,7 @@ defineExpose({ activeTab });
 
       &.active {
         color: #076b9c;
+        padding: 0 5px 5px;
         border-bottom: 3px solid #076b9c;
       }
 

package/src/components/structural/LoadingSpinner.vue

@@ -21,7 +21,7 @@ defineProps<{
   width: 80px;
   height: 80px;
   border: 7px solid #b5e187;
-  border-top: 7px solid transparent;
+  border-top: 7px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   animation: spin 1s infinite;
   animation-timing-function: linear;

package/src/components/structural/Modal.vue

@@ -3,7 +3,7 @@
     <Transition name="fade">
       <div v-show="active" class="modal-backdrop">
         <div class="modal-overlay" @click.self="closeModal">
-          <div class="modal-container" :class="class" ref="modalContainer">
+          <div class="modal-container" ref="modalContainer">
             <button
               type="button"
               class="btn-close"
@@ -31,9 +31,8 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 
-const props = defineProps<{
+defineProps<{
   title?: string;
-  class?: string;
 }>();
 
 const active = ref(false);
@@ -65,6 +64,10 @@ const closeModal = () => {
 
 const toggleModal = () => {
   active.value = !active.value;
+
+  if (!active.value) {
+    emit("close");
+  }
 };
 
 defineExpose({ active, openModal, closeModal, toggleModal });

package/src/histoire.setup.ts

@@ -0,0 +1,2 @@
+import "./assets/main.scss";
+import "./assets/iconia/style.scss";