cja-phoenix 0.6.0 → 0.6.2

package/src/components/composite/FunnelLayout.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="funnel-container">
+    <GridContainer>
+      <GridItem
+        class="content-container"
+        :sizeSm="2"
+        :sizeMd="4"
+        :sizeLg="$slots.sidebar ? 8 : 12"
+      >
+        <div class="content-wrapper">
+          <div class="progress-container">
+            <div class="back-container">
+              <button
+                v-if="meta.displayStep && meta.displayStep > 1"
+                class="back-button"
+                @click="$emit('btn:previous')"
+              >
+                <em class="m-cgg-icon--chevron-left"></em>
+                Voltar
+              </button>
+            </div>
+            <div class="progress-bar">
+              <div class="progress" :style="{ width: progressWidth }"></div>
+            </div>
+            <div class="progress-details">
+              Passo {{ meta.displayStep }} de {{ meta.displayTotalSteps }}
+            </div>
+          </div>
+          <transition
+            :name="
+              meta.animation === 'slide-left' ? 'slide-left' : 'slide-right'
+            "
+            mode="out-in"
+          >
+            <div class="funnel-content" :key="path">
+              <slot name="content"></slot>
+            </div>
+          </transition>
+        </div>
+      </GridItem>
+      <GridItem v-if="activeViewport.lg && $slots.sidebar" :sizeLg="4">
+        <slot name="sidebar"></slot>
+      </GridItem>
+    </GridContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import GridContainer from "../structural/GridContainer.vue";
+import GridItem from "../structural/GridItem.vue";
+import { useViewportDetector } from "../../utils";
+
+const { activeViewport } = useViewportDetector();
+
+const props = defineProps<{
+  path: string;
+  meta: {
+    displayStep?: number;
+    displayTotalSteps?: number;
+    animation?: string;
+  };
+}>();
+
+const progressWidth = computed(() =>
+  props.meta.displayStep && props.meta.displayTotalSteps
+    ? `${(100 / props.meta.displayTotalSteps) * props.meta.displayStep}%`
+    : 0
+);
+
+defineEmits(["btn:previous"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.funnel-container {
+  padding-bottom: 100px;
+
+  @media screen and (min-width: 1024px) {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+
+  .funnel-content {
+    transition: all 0.3s linear;
+
+    &.slide-right-enter-from,
+    &.slide-left-leave-to {
+      opacity: 0;
+      transform: translate(20%, 0);
+    }
+
+    &.slide-right-leave-to,
+    &.slide-left-enter-from {
+      opacity: 0;
+      transform: translate(-20%, 0);
+    }
+
+    &.slide-left-enter-to,
+    &.slide-right-enter-to {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+
+  .content-wrapper {
+    background: #ffffff;
+    padding: 20px 0;
+    overflow: hidden;
+
+    @media screen and (min-width: $break-md-min) {
+      padding: 30px 0;
+    }
+
+    @media screen and (min-width: 1024px) {
+      border: 1px solid #dedede;
+      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
+      border-radius: 32px;
+      padding: 30px;
+    }
+  }
+}
+
+.progress-container {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  margin-bottom: 30px;
+
+  @media screen and (min-width: $break-md-min) {
+    gap: 20px;
+    grid-template-columns: 90px 1fr 90px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #dedede;
+  }
+
+  .back-container {
+    grid-area: 2 / 1 / 3 / 2;
+
+    @media screen and (min-width: $break-md-min) {
+      grid-area: 1 / 1 / 2 / 2;
+    }
+
+    .back-button {
+      color: #155072;
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 700;
+      padding: 0;
+      border: 0;
+      outline: none;
+      background-color: transparent;
+
+      em {
+        vertical-align: -2px;
+        margin-left: -6px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .progress-bar {
+    grid-area: 1 / 1 / 2 / 3;
+    background-color: #f4f9fc;
+    height: 16px;
+    border-radius: 30px;
+
+    @media screen and (min-width: $break-md-min) {
+      grid-area: 1 / 2 / 2 / 3;
+    }
+
+    .progress {
+      background: linear-gradient(218.56deg, #56924b 5.04%, #076b9c 62.92%);
+      height: 16px;
+      border-radius: 30px;
+      width: 0;
+      transition: width 0.5s;
+      -webkit-transition: width 0.5s;
+    }
+  }
+
+  .progress-details {
+    grid-area: 2 / 2 / 3 / 3;
+    text-align: right;
+    margin-left: auto;
+    font-size: 14px;
+    line-height: 14px;
+    color: #155072;
+
+    @media screen and (min-width: $break-md-min) {
+      grid-area: 1 / 3 / 2 / 4;
+    }
+  }
+}
+</style>

package/src/components/composite/FunnelSubmit.vue

@@ -0,0 +1,53 @@
+<template>
+  <Teleport to="body" :disabled="activeViewport.lg">
+    <div class="button-container">
+      <CjaButton
+        :color="'orange'"
+        :size="'lg'"
+        :loading="loading"
+        :icon="icon"
+        @click="$emit('btn:click')"
+      >
+        <slot>Continuar</slot>
+      </CjaButton>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import CjaButton from "../structural/CjaButton.vue";
+import { useViewportDetector } from "../../utils";
+
+const { activeViewport } = useViewportDetector();
+
+defineProps<{
+  loading?: boolean;
+  icon?: string;
+}>();
+
+defineEmits(["btn:click"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
+.button-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 15px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  box-shadow: $box-shadow-m;
+
+  @media screen and (min-width: 1024px) {
+    position: static;
+    margin: 30px 0 0;
+    padding: 0;
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/composite/FunnelSummary.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="summary-container">
+    <div class="summary-wrapper">
+      <div class="title-container">
+        <h3>{{ title }}</h3>
+        <button @click="toggleEdit">
+          <span class="m-cgg-icon--edit"></span>
+          <span>{{ customText.edit }}</span>
+        </button>
+      </div>
+      <div class="info-container" :class="{ 'edit-mode': editMode }">
+        <div class="info-wrapper" v-for="info in infoList">
+          <div class="info-title">
+            {{ info.title }}
+          </div>
+          <div class="info-display" v-if="!editMode">
+            {{ info.value || "-" }}
+          </div>
+          <div class="info-edit" v-else>
+            <slot :name="info.control"></slot>
+          </div>
+        </div>
+      </div>
+      <div class="summary-footer" v-if="editMode">
+        <CjaButton :type="'secondary'" :size="'sm'" @click="cancelEdit">
+          {{ customText.cancel }}
+        </CjaButton>
+        <CjaButton :size="'sm'" @click="saveEdit">
+          {{ customText.save }}
+        </CjaButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import CjaButton from "../structural/CjaButton.vue";
+
+const editMode = ref(false);
+
+const formLock = ref();
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    customText?: {
+      edit?: string;
+      cancel?: string;
+      save?: string;
+    };
+    infoList: {
+      title: string;
+      value: any;
+      control: string;
+    }[];
+    validateForm?: () => boolean;
+  }>(),
+  {
+    title: "O seu resumo",
+    customText: () => ({
+      edit: "Editar",
+      cancel: "Cancelar",
+      save: "Guardar",
+    }),
+  }
+);
+
+const toggleEdit = () => {
+  editMode.value = true;
+  formLock.value = false;
+
+  emit("btn:edit");
+};
+
+const cancelEdit = () => {
+  if (!formLock.value) {
+    formLock.value = true;
+    editMode.value = false;
+
+    emit("btn:cancel");
+  }
+};
+
+const saveEdit = () => {
+  if ((props.validateForm ? props.validateForm() : true) && !formLock.value) {
+    formLock.value = true;
+    editMode.value = false;
+
+    emit("btn:save");
+  }
+};
+
+defineExpose({ editMode });
+
+const emit = defineEmits(["btn:cancel", "btn:save", "btn:edit"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
+.summary-container {
+  .summary-wrapper {
+    background: #ffffff;
+    border: 1px solid #dedede;
+    box-shadow: $box-shadow-m;
+    border-radius: 16px;
+    padding: 20px 30px;
+
+    .title-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #dedede;
+
+      h3 {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 20px;
+        margin: 0;
+      }
+
+      button {
+        padding: 0;
+        border: none;
+        background: none;
+        color: #9fabbc;
+        font-size: 14px;
+        line-height: 14px;
+
+        &:focus,
+        &:focus-within {
+          outline: none;
+        }
+
+        span.m-cgg-icon--edit {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .info-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .info-wrapper {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 10px 20px;
+        font-size: 14px;
+        line-height: 14px;
+
+        .info-display {
+          text-align: right;
+          font-weight: 700;
+
+          &.active {
+            color: #56924b;
+          }
+        }
+
+        .info-error {
+          margin-top: 0;
+        }
+      }
+
+      &.edit-mode .info-wrapper {
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+
+        .info-title {
+          grid-area: 1 / 1 / 2 / 2;
+        }
+        .info-edit {
+          grid-area: 1 / 2 / 2 / 3;
+        }
+        .info-error {
+          grid-area: 2 / 1 / 3 / 3;
+        }
+      }
+    }
+
+    .summary-footer {
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 1px solid #dedede;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+  }
+}
+</style>

package/src/components/composite/FunnelTitle.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="title-container">
+    <div class="title-wrapper">
+      <span>
+        {{ title }}
+      </span>
+      <span v-if="tooltip" class="m-cgg-icon--help" v-tippy="tooltip"></span>
+    </div>
+    <div class="description" v-if="description">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  description?: string;
+  tooltip?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.title-container {
+  text-align: center;
+  margin-bottom: 24px;
+
+  .title-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 20px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: #076b9c;
+
+    @media screen and (min-width: $break-md-min) {
+      font-size: 26px;
+      line-height: 30px;
+    }
+
+    .m-cgg-icon--help {
+      flex-shrink: 0;
+      font-size: 20px;
+      color: #076b9c;
+    }
+  }
+
+  .description {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 20px;
+  }
+}
+</style>

package/src/components/composite/InfoShowcase.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="info-showcase">
+    <h2>{{ title }}</h2>
+    <div class="showcase-list">
+      <div class="showcase-item" v-for="item in items">
+        <div class="image-container">
+          <img :src="item.image" />
+        </div>
+        <div class="text-container">
+          <div class="title">
+            {{ item.title }}
+          </div>
+          <div class="description">
+            {{ item.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  items: {
+    title: string;
+    description: string;
+    image: string;
+  }[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.info-showcase {
+  padding: 24px 36px;
+  background: #fff;
+  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
+
+  h2 {
+    text-align: center;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 29px;
+    margin: 0 0 30px;
+  }
+
+  .showcase-list {
+    display: grid;
+    grid-template-columns: 1;
+    gap: 56px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @media screen and (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .showcase-item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 80px 1fr;
+    gap: 24px;
+
+    .image-container {
+      img {
+        display: block;
+        max-width: 100%;
+      }
+    }
+
+    .text-container {
+      .title {
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 22px;
+        margin-bottom: 10px;
+      }
+
+      .description {
+        font-size: 14px;
+        line-height: 17px;
+      }
+    }
+  }
+}
+</style>

package/src/components/composite/JourneyMacroSteps.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="macro-steps-container">
+    <div
+      class="macro-step"
+      :class="[`step-status-${step.status}`]"
+      v-for="(step, i) in stepList"
+    >
+      <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"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { MacroStep } from "../../types/Menu";
+
+defineProps<{
+  stepList: MacroStep[];
+}>();
+</script>
+
+<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;
+
+  @media screen and (min-width: 1024px) {
+    border-bottom: none;
+    padding: 0 16px;
+  }
+
+  .macro-step {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .step-description {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      line-height: 17px;
+      transition: all 0.2s ease-in-out;
+
+      .step-label {
+        text-transform: uppercase;
+        display: none;
+
+        @media screen and (min-width: 1200px) {
+          display: block;
+        }
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      span {
+        color: inherit;
+      }
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: none;
+        color: #076b9c;
+      }
+    }
+
+    &.step-status-future {
+      color: #9fabbc;
+    }
+
+    &.step-status-current {
+      color: #076b9c;
+      font-weight: 700;
+
+      .step-label {
+        display: block;
+      }
+    }
+  }
+}
+</style>
+../../types/Menu