cja-phoenix 0.2.14 → 0.2.16

package/src/assets/iconia/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'CGG-icomoon';
-  src:  url('fonts/CGG-icomoon.eot?4aj4fi');
-  src:  url('fonts/CGG-icomoon.eot?4aj4fi#iefix') format('embedded-opentype'),
-    url('fonts/CGG-icomoon.ttf?4aj4fi') format('truetype'),
-    url('fonts/CGG-icomoon.woff?4aj4fi') format('woff'),
-    url('fonts/CGG-icomoon.svg?4aj4fi#CGG-icomoon') format('svg');
+  src:  url('fonts/CGG-icomoon.eot?581rb2');
+  src:  url('fonts/CGG-icomoon.eot?581rb2#iefix') format('embedded-opentype'),
+    url('fonts/CGG-icomoon.ttf?581rb2') format('truetype'),
+    url('fonts/CGG-icomoon.woff?581rb2') format('woff'),
+    url('fonts/CGG-icomoon.svg?581rb2#CGG-icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--filters:before {
+  content: "\ea31";
+}
+.m-cgg-icon--search:before {
+  content: "\ea32";
+}
 .m-cgg-icon--macro-step-contact:before {
   content: "\ea24";
 }

package/src/assets/iconia/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4aj4fi');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4aj4fi#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?4aj4fi') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?4aj4fi') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?4aj4fi##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?581rb2');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?581rb2#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?581rb2') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?581rb2') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?581rb2##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,6 +27,16 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--filters {
+  &:before {
+    content: $m-cgg-icon--filters; 
+  }
+}
+.m-cgg-icon--search {
+  &:before {
+    content: $m-cgg-icon--search; 
+  }
+}
 .m-cgg-icon--macro-step-contact {
   &:before {
     content: $m-cgg-icon--macro-step-contact; 

package/src/assets/iconia/variables.scss

@@ -1,6 +1,8 @@
 $icomoon-font-family: "CGG-icomoon" !default;
 $icomoon-font-path: "fonts" !default;
 
+$m-cgg-icon--filters: "\ea31";
+$m-cgg-icon--search: "\ea32";
 $m-cgg-icon--macro-step-contact: "\ea24";
 $m-cgg-icon--macro-step-checkout: "\ea2e";
 $m-cgg-icon--macro-step-results: "\ea2f";

package/src/components/composite/CjaMenuBar.vue

@@ -1,49 +1,64 @@
 <template>
   <header class="main-header-container" id="page-header">
-    <div class="main-header">
-      <div class="logo-container">
-        <div class="log-wrapper">
-          <a href="/" v-if="homeNavigationEnabled">
-            <img :src="baseImgUrl + 'CPJ-logo-header.svg'" />
-          </a>
-          <img :src="baseImgUrl + 'CPJ-logo-header.svg'" v-else />
-        </div>
-      </div>
-      <div
-        class="content-container macro-steps"
-        v-if="activeViewport.lg && $slots['macro-steps']"
-      >
-        <slot name="macro-steps"></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>
+    <FixedContainer :active="activeViewport.lg" :size="{ width: '100%' }">
+      <div class="main-header">
+        <div class="logo-container">
+          <div class="log-wrapper">
+            <a href="/" v-if="homeNavigationEnabled">
+              <img :src="baseImgUrl + 'CPJ-logo-header.svg'" />
             </a>
-            <div class="time">Seg - Sex: 10h às 19h</div>
+            <img :src="baseImgUrl + 'CPJ-logo-header.svg'" v-else />
           </div>
-        </slot>
+        </div>
+        <div
+          class="content-container macro-steps"
+          v-if="activeViewport.lg && macroStepList"
+        >
+          <JourneyMacroSteps :stepList="macroStepList" />
+        </div>
+        <div
+          class="content-container"
+          v-else-if="activeViewport.lg && $slots.content"
+        >
+          <slot name="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>
       </div>
-    </div>
-    <div
-      class="content-container macro-steps"
-      v-if="!activeViewport.lg && $slots['macro-steps']"
-    >
-      <slot name="macro-steps"></slot>
-    </div>
+      <FixedContainer
+        v-if="!activeViewport.lg && macroStepList"
+        :size="{ width: '100%' }"
+        :position="{ left: '0', top: '0' }"
+      >
+        <div class="content-container macro-steps">
+          <JourneyMacroSteps :stepList="macroStepList" />
+        </div>
+      </FixedContainer>
+    </FixedContainer>
   </header>
 </template>
 
 <script lang="ts" setup>
 import { inject } from "vue";
+import FixedContainer from "../structural/FixedContainer.vue";
+import { MacroStep } from "../../types";
+import JourneyMacroSteps from "./JourneyMacroSteps.vue";
 
 const activeViewport: any = inject("activeViewport");
 withDefaults(
   defineProps<{
     homeNavigationEnabled?: boolean;
     sideInfo?: boolean;
+    macroStepList?: MacroStep[];
   }>(),
   {
     homeNavigationEnabled: true,
@@ -58,6 +73,9 @@ const baseImgUrl = process.env.VUE_APP_IMG_URL;
 @import "../../assets/shadows.scss";
 
 header.main-header-container {
+  position: relative;
+  z-index: 1;
+
   .main-header {
     position: relative;
     z-index: 1;

package/src/components/composite/JourneyMacroSteps.vue

@@ -43,8 +43,8 @@ defineProps<{
       display: none;
 
       @media screen and (min-width: 1024px) {
-        font-size: 16px;
-        line-height: 19px;
+        font-size: 14px;
+        line-height: 17px;
       }
 
       @media screen and (min-width: 1200px) {

package/src/components/composite/ResultsLayout.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="results-container">
-    <slot name="mobile-controls" v-if="!activeViewport.lg"></slot>
+    <FixedContainer
+      v-if="!activeViewport.lg"
+      :size="{ width: '100%' }"
+      :scrollThreshold="-headerHeight"
+      :position="{ left: '0', top: `${headerHeight}px` }"
+    >
+      <slot name="mobile-controls"></slot>
+    </FixedContainer>
     <GridContainer class="results-grid">
       <GridItem :size-lg="3" v-if="activeViewport.lg">
         <div class="back-container">
@@ -9,9 +16,24 @@
             <span>Voltar</span>
           </button>
         </div>
-        <ResultsSidebar>
-          <slot name="sidebar"></slot>
-        </ResultsSidebar>
+        <FixedContainer
+          ref="fixedContainer"
+          :scrollThreshold="-headerHeight - 16"
+          :position="{ top: `${headerHeight + 16}px`, bottom: '16px' }"
+        >
+          <div
+            ref="sidebarContainer"
+            class="sidebar-container"
+            :class="{ 'position-fixed': fixedContainer?.positionFixed }"
+            :style="{
+              maxHeight: !fixedContainer?.positionFixed ? sidebarMaxHeight : '',
+            }"
+          >
+            <div class="sidebar-body">
+              <slot name="sidebar"></slot>
+            </div>
+          </div>
+        </FixedContainer>
       </GridItem>
       <GridItem :size-sm="2" :size-md="4" :size-lg="9">
         <slot name="content"></slot>
@@ -24,10 +46,57 @@
 import { inject } from "vue";
 import GridContainer from "../structural/GridContainer.vue";
 import GridItem from "../structural/GridItem.vue";
-import ResultsSidebar from "./ResultsSidebar.vue";
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { onUnmounted } from "vue";
+import FixedContainer from "../structural/FixedContainer.vue";
+
+const fixedContainer = ref();
+const sidebarContainer = ref();
+const sidebarMaxHeight = ref("0px");
+
+const headerHeight = ref(0);
 
 const activeViewport: any = inject("activeViewport");
 
+const setSidebarHeight = () => {
+  if (sidebarContainer.value)
+    sidebarMaxHeight.value = `${
+      window.innerHeight -
+      sidebarContainer.value.offsetTop -
+      16 +
+      window.scrollY
+    }px`;
+};
+
+const setHeaderHeight = () => {
+  headerHeight.value =
+    (
+      document.querySelector(
+        `#page-header ${
+          activeViewport.value.lg
+            ? ".main-header"
+            : ".content-container.macro-steps"
+        }`
+      ) as HTMLElement
+    )?.offsetHeight || 0;
+};
+
+onMounted(() => {
+  setHeaderHeight();
+  window.addEventListener("resize", setHeaderHeight);
+
+  if (activeViewport.value.lg) {
+    setSidebarHeight();
+    window.addEventListener("scroll", setSidebarHeight);
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", setSidebarHeight);
+  window.removeEventListener("resize", setHeaderHeight);
+});
+
 defineEmits(["btn:previous"]);
 </script>
 
@@ -64,4 +133,24 @@ defineEmits(["btn:previous"]);
     }
   }
 }
+
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+  background: #ffffff;
+  border: 1px solid #dedede;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+
+  &.position-fixed {
+    max-height: 100%;
+  }
+
+  .sidebar-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-grow: 1;
+  }
+}
 </style>

package/src/components/composite/ResultsSidebar.vue

@@ -1,8 +1,8 @@
 <template>
   <FixedContainer
     ref="fixedContainer"
-    :scrollThreshold="-16"
-    :position="{ top: '16px', bottom: '16px' }"
+    :scrollThreshold="-headerHeight - 16"
+    :position="{ top: `${headerHeight + 16}px`, bottom: '16px' }"
   >
     <div
       ref="sidebarContainer"
@@ -29,10 +29,16 @@ const fixedContainer = ref();
 const sidebarContainer = ref();
 const sidebarMaxHeight = ref();
 
+const headerHeight = ref(0);
+
 const setSidebarHeight = () => {
   sidebarMaxHeight.value = `${
     window.innerHeight - sidebarContainer.value.offsetTop - 16 + window.scrollY
   }px`;
+
+  headerHeight.value = (
+    document.querySelector("#page-header .main-header") as HTMLElement
+  ).offsetHeight;
 };
 
 onMounted(() => {

package/src/components/forms/RadioInput.vue

@@ -9,7 +9,11 @@
           @change="handleChange"
         />
         <div class="radio-icon"></div>
-        <div class="text-container" v-html="label"></div>
+        <div
+          class="text-container"
+          :class="[`size-${size}`]"
+          v-html="label"
+        ></div>
       </label>
     </div>
 
@@ -26,6 +30,7 @@ const props = withDefaults(
     value: any;
     label: string;
     modelValue?: any;
+    size?: "sm" | "md" | "lg";
     error?: string;
     errorDisplay?: boolean;
   }>(),
@@ -44,6 +49,8 @@ const emit = defineEmits(["update:modelValue"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
 .input-container-radio {
   label {
     display: flex;
@@ -71,8 +78,8 @@ const emit = defineEmits(["update:modelValue"]);
     }
 
     .text-container {
-      font-size: 16px;
-      line-height: 19px;
+      @include input-title;
+
       user-select: none;
 
       a {

package/src/components/forms/{InputToggle.vue → ToggleInput.vue}

@@ -53,10 +53,6 @@ defineEmits(["update:modelValue"]);
     justify-content: space-between;
   }
 
-  .label {
-    font-weight: 700;
-  }
-
   .toggler {
     position: relative;
     width: 36px;

package/src/components/index.ts

@@ -17,7 +17,7 @@ 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 ToggleInput from "./forms/ToggleInput.vue";
 import SelectionTiles from "./forms/SelectionTiles.vue";
 
 import JourneyMacroSteps from "./composite/JourneyMacroSteps.vue";
@@ -47,7 +47,7 @@ export {
   LoadingSpinner,
   Scaffold,
   ProductDetails,
-  InputToggle,
+  ToggleInput,
   FileInput,
   ContentTabs,
   CollapseContainer,

package/src/components/structural/FixedContainer.vue

@@ -3,6 +3,7 @@
     class="fixed-container"
     :style="{ height: fixedContainerHeight }"
     ref="fixedContainer"
+    v-if="active"
   >
     <div
       class="fixed-wrapper"
@@ -13,6 +14,7 @@
       <slot></slot>
     </div>
   </div>
+  <slot v-else></slot>
 </template>
 
 <script lang="ts" setup>