cja-phoenix 0.3.6 → 0.4.0

package/dist/types/components/structural/Modal.vue.d.ts

@@ -1,25 +1,65 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
-        type: import("vue").PropType<string>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    maxWidth?: {
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+}>, {
+    maxWidth: () => {
+        md: string;
+        lg: string;
+        xl: string;
     };
-}, {
+}>, {
     active: import("vue").Ref<boolean>;
     openModal: () => void;
     closeModal: () => void;
     toggleModal: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: import("vue").PropType<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    maxWidth?: {
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+}>, {
+    maxWidth: () => {
+        md: string;
+        lg: string;
+        xl: string;
     };
-}>> & {
+}>>> & {
     onClose?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
+}, {
+    maxWidth: {
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    };
+}, {}>, {
+    header?(_: {}): any;
     body?(_: {}): any;
     footer?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "cja-phoenix",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "scripts": {
     "build:dev": "rimraf dist && vue-tsc && vite build -m development",
     "build:link": "rimraf dist && vue-tsc && vite build -m development && npm link",
     "build:prod": "rimraf dist && vue-tsc && vite build -m production",
     "publish:lib": "npm run build:prod && npm publish",
-    "docs:dev": "vitepress dev docs",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview"
@@ -23,9 +22,9 @@
   },
   "devDependencies": {
     "@gtm-support/vue-gtm": "^2.0.0",
-    "@histoire/plugin-vue": "^0.16.1",
     "@types/node": "^17.0.14",
     "@vitejs/plugin-vue": "^2.0.0",
+    "@histoire/plugin-vue": "^0.16.1",
     "histoire": "^0.16.2",
     "intl-tel-input": "^17.0.19",
     "maska": "^2.1.7",
@@ -35,7 +34,6 @@
     "typescript": "^4.4.4",
     "vee-validate": "^4.7.2",
     "vite": "^3.0.0",
-    "vitepress": "^0.21.6",
     "vue": "^3.3.4",
     "vue-currency-input": "^3.0.5",
     "vue-i18n": "^9.2.2",
@@ -46,8 +44,7 @@
   },
   "files": [
     "src",
-    "dist",
-    "public"
+    "dist"
   ],
   "types": "./dist/types/index.d.ts",
   "module": "./dist/cja-phoenix.es.js",

package/src/assets/breakpoints.scss

@@ -0,0 +1,12 @@
+$break-xs-max: 419px;
+
+$break-sm-min: 420px;
+$break-sm-max: 767px;
+
+$break-md-min: 768px;
+$break-md-max: 1023px;
+
+$break-lg-min: 1024px;
+$break-lg-max: 1199px;
+
+$break-xl-min: 1200px;

package/src/assets/forms.scss

@@ -14,10 +14,10 @@ $md-padding-h: 12px;
 $md-font-size: 16px;
 $md-line-height: 18px;
 
-$lg-padding-v: 12px;
+$lg-padding-v: 16px;
 $lg-padding-h: 18px;
-$lg-font-size: 16px;
-$lg-line-height: 20px;
+$lg-font-size: 18px;
+$lg-line-height: 22px;
 
 @mixin input-template {
   background-color: #fff;

package/src/assets/main.scss

@@ -1,3 +1,4 @@
+@import "breakpoints";
 @import "fonts";
 
 html,

package/src/components/composite/CheckoutCrossSell.vue

@@ -309,6 +309,8 @@ const submit = () => {
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .cross-sell-container {
   .cross-sell-wrapper {
     max-width: 1050px;

package/src/components/composite/CheckoutMilestones.vue

@@ -33,6 +33,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .checkout-milestones {
   ul {
     list-style: none;
@@ -75,7 +77,7 @@ defineProps<{
           line-height: 20px;
           font-weight: 700;
 
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: $break-md-min) {
             font-size: 20px;
             line-height: 24px;
           }
@@ -85,7 +87,7 @@ defineProps<{
           font-size: 14px;
           line-height: 17px;
 
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: $break-md-min) {
             font-size: 16px;
             line-height: 19px;
           }

package/src/components/composite/CjaMenuBar.vue

@@ -19,16 +19,13 @@
           <slot name="content" v-else-if="$slots.content"></slot>
         </div>
 
-        <div class="side-info" v-if="sideInfo">
-          <slot name="side">
-            <div class="contact-container">
-              <a class="contact" href="tel:211165765">
-                <span class="m-cgg-icon--phone"></span>
-                <span class="number">211 165 765</span>
-              </a>
-              <div class="time">Seg - Sex: 10h às 19h</div>
-            </div>
-          </slot>
+        <div class="side-info" v-if="hasSideInfo">
+          <slot name="side"></slot>
+          <button
+            class="contact m-cgg-icon--phone"
+            v-if="hasContact"
+            @click="callModal.openModal()"
+          ></button>
         </div>
       </div>
       <FixedContainer
@@ -40,6 +37,32 @@
       </FixedContainer>
     </FixedContainer>
   </header>
+
+  <Modal
+    ref="callModal"
+    v-if="hasContact"
+    :maxWidth="{ md: '470px', lg: '470px', xl: '470px' }"
+  >
+    <template #header>Precisa de ajuda?</template>
+    <template #body>
+      <div class="call-modal-body">
+        <div class="call-info">
+          <a class="phone-link" href="tel:211165765">
+            <span class="m-cgg-icon--phone"></span>
+            <span>211 165 765</span>
+          </a>
+          <div class="hours-wrapper">Seg - Sex: 10h às 19h</div>
+        </div>
+        <div class="call-cost">Custo de chamada para a rede fixa nacional</div>
+        <div class="btn-container">
+          <CjaButton :type="'secondary'" @click="callModal.closeModal()">
+            Voltar
+          </CjaButton>
+          <CjaButton @click="callContact">Ligar</CjaButton>
+        </div>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script lang="ts" setup>
@@ -47,23 +70,31 @@ import { inject } from "vue";
 import FixedContainer from "../structural/FixedContainer.vue";
 import { MacroStep } from "../../types";
 import JourneyMacroSteps from "./JourneyMacroSteps.vue";
+import Modal from "../structural/Modal.vue";
 import { ref } from "vue";
-import { onMounted } from "vue";
-import { provide } from "vue";
+import { CjaButton } from "..";
 
 const activeViewport: any = inject("activeViewport");
 withDefaults(
   defineProps<{
     homeNavigationEnabled?: boolean;
-    sideInfo?: boolean;
+    hasSideInfo?: boolean;
     macroStepList?: MacroStep[];
+    hasContact?: boolean;
   }>(),
   {
     homeNavigationEnabled: true,
-    sideInfo: true,
+    hasSideInfo: true,
+    hasContact: true,
   }
 );
 
+const callModal = ref();
+
+const callContact = () => {
+  window.open("tel:211165765", "_self");
+};
+
 const baseImgUrl = process.env.VUE_APP_IMG_URL;
 </script>
 
@@ -77,10 +108,9 @@ header.main-header-container {
   .main-header {
     position: relative;
     z-index: 1;
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: auto 1fr 265px;
     align-items: center;
-    justify-content: space-between;
     gap: 16px;
     background-color: #fff;
     padding: 20px;
@@ -110,57 +140,93 @@ header.main-header-container {
     }
 
     .side-info {
-      @media screen and (min-width: 1024px) {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .contact {
+        background: #076b9c;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        padding: 0;
+        border: none;
+        outline: none;
+        gap: 8px;
+        font-weight: 700;
+        font-size: 10px;
+        color: #fff;
       }
+    }
+  }
+}
+
+.call-modal-body {
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+  line-height: 18px;
+
+  @media screen and (min-width: 420px) {
+    font-size: 16px;
+    line-height: 20px;
+  }
 
-      .contact-container {
+  .call-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+
+    a {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      color: inherit;
+
+      .m-cgg-icon--phone {
+        background-color: #076b9c;
+        height: 20px;
+        width: 20px;
         display: flex;
+        flex-direction: row;
         align-items: center;
-        gap: 15px;
-
-        .contact {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 17px;
-          color: inherit;
-
-          &:hover {
-            text-decoration: none;
-          }
-
-          .m-cgg-icon--phone {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background-color: #076b9c;
-            color: #fff;
-            font-size: 10px;
-          }
-
-          .number {
-            display: none;
-
-            @media screen and (min-width: 768px) {
-              display: block;
-            }
-          }
-        }
-
-        .time {
-          display: none;
-
-          @media screen and (min-width: 768px) {
-            display: block;
-          }
-        }
+        justify-content: center;
+        color: #fff;
+        border-radius: 50%;
+        font-size: 9px;
+      }
+    }
+
+    .hours-wrapper {
+      padding-left: 10px;
+      margin-left: 10px;
+      border-left: 1px solid #dedede;
+
+      @media screen and (min-width: 420px) {
+        padding-left: 15px;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .call-cost {
+    text-align: center;
+  }
+
+  .btn-container {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    .btn-cancel {
+      @media screen and (max-width: 419px) {
+        display: none;
       }
     }
   }

package/src/components/composite/FunnelLayout.vue

@@ -71,6 +71,8 @@ defineEmits(["btn:previous"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .funnel-container {
   padding-bottom: 100px;
 
@@ -106,7 +108,7 @@ defineEmits(["btn:previous"]);
     padding: 20px 0;
     overflow: hidden;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       padding: 30px 0;
     }
 
@@ -126,7 +128,7 @@ defineEmits(["btn:previous"]);
   align-items: center;
   margin-bottom: 30px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     gap: 20px;
     grid-template-columns: 90px 1fr 90px;
     padding-bottom: 20px;
@@ -136,7 +138,7 @@ defineEmits(["btn:previous"]);
   .back-container {
     grid-area: 2 / 1 / 3 / 2;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 1 / 2 / 2;
     }
 
@@ -164,7 +166,7 @@ defineEmits(["btn:previous"]);
     height: 16px;
     border-radius: 30px;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 2 / 2 / 3;
     }
 
@@ -186,7 +188,7 @@ defineEmits(["btn:previous"]);
     line-height: 14px;
     color: #155072;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 3 / 2 / 4;
     }
   }

package/src/components/composite/FunnelTitle.vue

@@ -21,6 +21,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .title-container {
   text-align: center;
   margin-bottom: 25px;
@@ -36,7 +38,7 @@ defineProps<{
     margin-bottom: 20px;
     color: #076b9c;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       font-size: 26px;
       line-height: 30px;
     }

package/src/components/forms/TextInput.vue

@@ -17,6 +17,8 @@
         :placeholder="placeholder && placeholder"
         :type="type"
         :value="value"
+        :min="min"
+        :max="max"
         @input="
           emit('update:modelValue', (<HTMLInputElement>$event.target).value)
         "
@@ -59,6 +61,8 @@ const props = withDefaults(
     type?: InputHTMLAttributes["type"];
     autocomplete?: InputHTMLAttributes["autocomplete"];
     suffix?: string;
+    min?: InputHTMLAttributes["min"];
+    max?: InputHTMLAttributes["max"];
   }>(),
   {
     layout: "vertical",
@@ -106,6 +110,18 @@ const emit = defineEmits(["update:modelValue"]);
         color: #0d2745;
       }
     }
+
+    &[type="number"] {
+      /* Firefox */
+      -moz-appearance: textfield;
+
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
 
   &.error {

package/src/components/forms/structure/InputError.vue

@@ -11,12 +11,14 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
+
 .input-error {
   color: #ff533f;
   font-size: 14px;
   line-height: 16px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     font-size: 16px;
     line-height: 18px;
   }

package/src/components/forms/structure/InputTitle.vue

@@ -18,6 +18,7 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
 @import "../../../assets/forms.scss";
 
 .input-title {
@@ -32,7 +33,7 @@ defineProps<{
     font-size: 18px;
     color: #076b9c;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       font-size: 20px;
     }
   }

package/src/components/structural/CjaButton.vue

@@ -1,6 +1,7 @@
 <template>
-  <button
+  <component
     class="cja-btn"
+    :is="href ? 'a' : 'button'"
     :class="[
       `btn-${type}`,
       `btn-size-${size}`,
@@ -10,11 +11,11 @@
     ]"
   >
     <Scaffold v-if="!loading">
-      <span v-if="$slots.default"><slot></slot></span>
-      <span v-if="icon" :class="icon"></span>
+      <slot></slot>
+      <span v-if="icon" class="icon" :class="icon"></span>
     </Scaffold>
     <div class="spinner" v-else></div>
-  </button>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +29,7 @@ withDefaults(
     icon?: string;
     iconPosition?: "left" | "right";
     loading?: boolean;
+    href?: string;
   }>(),
   {
     type: "primary",
@@ -42,11 +44,7 @@ withDefaults(
 @import "../../assets/shadows.scss";
 
 .cja-btn {
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
+  display: inline-block;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -63,15 +61,27 @@ withDefaults(
     box-shadow: none;
   }
 
+  span {
+    vertical-align: middle;
+  }
+
   &.btn-size-sm {
     font-size: 14px;
     line-height: 18px;
     padding: 8px 12px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 8px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 8px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
-      padding: 4px;
+      padding: 4px 10px;
     }
 
     &.btn-loading .spinner {
@@ -86,9 +96,17 @@ withDefaults(
     padding: 8px 24px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 8px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 8px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
-      padding: 8px;
+      padding: 8px 12px;
     }
 
     &.btn-loading .spinner {
@@ -103,6 +121,14 @@ withDefaults(
     padding: 16px 32px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 12px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 12px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
       padding: 16px;
@@ -291,10 +317,6 @@ withDefaults(
     }
   }
 
-  &.icon-left {
-    flex-direction: row-reverse;
-  }
-
   &.btn-loading {
     cursor: auto;