cja-phoenix 0.6.2 → 0.6.4

package/src/assets/iconia/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'CGG-icomoon';
-  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');
+  src:  url('fonts/CGG-icomoon.eot?jsyom4');
+  src:  url('fonts/CGG-icomoon.eot?jsyom4#iefix') format('embedded-opentype'),
+    url('fonts/CGG-icomoon.ttf?jsyom4') format('truetype'),
+    url('fonts/CGG-icomoon.woff?jsyom4') format('woff'),
+    url('fonts/CGG-icomoon.svg?jsyom4#CGG-icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,24 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--facebook-2:before {
+  content: "\ea33";
+}
+.m-cgg-icon--linkedin-2:before {
+  content: "\ea34";
+}
+.m-cgg-icon--twitter-2:before {
+  content: "\ea35";
+}
+.m-cgg-icon--whatsapp-2:before {
+  content: "\ea36";
+}
+.m-cgg-icon--reddit:before {
+  content: "\ea37";
+}
+.m-cgg-icon--telegram:before {
+  content: "\ea38";
+}
 .m-cgg-icon--filters:before {
   content: "\ea31";
 }

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?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');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?jsyom4');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?jsyom4#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?jsyom4') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?jsyom4') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?jsyom4##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,6 +27,36 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--facebook-2 {
+  &:before {
+    content: $m-cgg-icon--facebook-2; 
+  }
+}
+.m-cgg-icon--linkedin-2 {
+  &:before {
+    content: $m-cgg-icon--linkedin-2; 
+  }
+}
+.m-cgg-icon--twitter-2 {
+  &:before {
+    content: $m-cgg-icon--twitter-2; 
+  }
+}
+.m-cgg-icon--whatsapp-2 {
+  &:before {
+    content: $m-cgg-icon--whatsapp-2; 
+  }
+}
+.m-cgg-icon--reddit {
+  &:before {
+    content: $m-cgg-icon--reddit; 
+  }
+}
+.m-cgg-icon--telegram {
+  &:before {
+    content: $m-cgg-icon--telegram; 
+  }
+}
 .m-cgg-icon--filters {
   &:before {
     content: $m-cgg-icon--filters; 

package/src/assets/iconia/variables.scss

@@ -1,6 +1,12 @@
 $icomoon-font-family: "CGG-icomoon" !default;
 $icomoon-font-path: "fonts" !default;
 
+$m-cgg-icon--facebook-2: "\ea33";
+$m-cgg-icon--linkedin-2: "\ea34";
+$m-cgg-icon--twitter-2: "\ea35";
+$m-cgg-icon--whatsapp-2: "\ea36";
+$m-cgg-icon--reddit: "\ea37";
+$m-cgg-icon--telegram: "\ea38";
 $m-cgg-icon--filters: "\ea31";
 $m-cgg-icon--search: "\ea32";
 $m-cgg-icon--macro-step-contact: "\ea24";

package/src/components/index.ts

@@ -1,4 +1,5 @@
 import Modal from "./structural/Modal.vue";
+import Drawer from "./structural/Drawer.vue";
 import CjaButton from "./structural/CjaButton.vue";
 import LoadingSpinner from "./structural/LoadingSpinner.vue";
 import ContentTabs from "./structural/ContentTabs.vue";
@@ -37,6 +38,7 @@ import InfoShowcase from "./composite/InfoShowcase.vue";
 
 export {
   Modal,
+  Drawer,
   CjaButton,
   TextInput,
   PhoneInput,

package/src/components/structural/Drawer.vue

@@ -0,0 +1,193 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        class="drawer-backdrop"
+        v-if="backdrop && active"
+        @click="closeDrawer"
+      ></div>
+    </Transition>
+    <Transition name="slide">
+      <div
+        class="drawer-container"
+        :class="[`drawer-${type}`, { active: active }]"
+        :style="{ height, ...cssVars }"
+      >
+        <slot></slot>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    defaultActive?: boolean;
+    type?:
+      | "vertical-top"
+      | "vertical-bottom"
+      | "horizontal-left"
+      | "horizontal-right";
+    maxWidth?: {
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+    height?: string;
+    backdrop?: boolean;
+  }>(),
+  {
+    defaultActive: false,
+    type: "vertical-bottom",
+    backdrop: false,
+    close: true,
+    maxWidth: () => ({
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px",
+    }),
+  }
+);
+
+const cssVars = computed(() => ({
+  "--md-max-width": props.maxWidth.md,
+  "--lg-max-width": props.maxWidth.lg,
+  "--xl-max-width": props.maxWidth.xl,
+}));
+
+const active = ref(props.defaultActive);
+
+const emit = defineEmits(["close", "open"]);
+
+const openDrawer = () => {
+  active.value = true;
+  emit("open");
+};
+
+const closeDrawer = () => {
+  active.value = false;
+  emit("close");
+};
+
+const toggleDrawer = () => {
+  active.value = !active.value;
+
+  emit(active.value ? "open" : "close");
+};
+
+defineExpose({ active, openDrawer, closeDrawer, toggleDrawer });
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+@import "../../assets/backdrop.scss";
+
+.drawer-backdrop {
+  @include backdrop;
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  &.fade-enter-to,
+  &.fade-leave-from {
+    opacity: 1;
+  }
+}
+
+.drawer-container {
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+
+  @media screen and (min-width: $break-md-min) {
+    max-width: var(--md-max-width);
+  }
+
+  @media screen and (min-width: $break-lg-min) {
+    max-width: var(--lg-max-width);
+  }
+
+  @media screen and (min-width: $break-xl-min) {
+    max-width: var(--xl-max-width);
+  }
+
+  &.drawer-vertical-top {
+    top: 0;
+
+    &.active {
+      transform: translateY(0);
+    }
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateY(-100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateY(0);
+    }
+  }
+
+  &.drawer-vertical-bottom {
+    bottom: 0;
+    transform: translateY(100%);
+
+    &.active {
+      transform: translateY(0);
+    }
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateY(100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateY(0);
+    }
+  }
+
+  &.drawer-horizontal-left {
+    left: 0;
+
+    &.active {
+      transform: translateX(0);
+    }
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateX(-100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateX(0);
+    }
+  }
+
+  &.drawer-horizontal-right {
+    right: 0;
+
+    &.active {
+      transform: translateX(0);
+    }
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateX(100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateX(0);
+    }
+  }
+}
+</style>