cja-phoenix 0.6.0 → 0.6.2

package/src/components/structural/CjaButton.vue

@@ -0,0 +1,332 @@
+<template>
+  <component
+    class="cja-btn"
+    :is="href ? 'a' : 'button'"
+    :href="href"
+    :target="target"
+    :class="[
+      `btn-${type}`,
+      `btn-size-${size}`,
+      `btn-color-${color}`,
+      `icon-${iconPosition}`,
+      { 'btn-loading': loading, 'btn-icon-only': !$slots.default && icon },
+    ]"
+  >
+    <Scaffold v-if="!loading">
+      <slot></slot>
+      <span v-if="icon" class="icon" :class="icon"></span>
+    </Scaffold>
+    <div class="spinner" v-else></div>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { AnchorHTMLAttributes } from "vue";
+import Scaffold from "./Scaffold.vue";
+
+withDefaults(
+  defineProps<{
+    type?: "primary" | "secondary" | "tertiary";
+    color?: "blue" | "orange" | "white";
+    size?: "sm" | "md" | "lg";
+    icon?: string;
+    iconPosition?: "left" | "right";
+    loading?: boolean;
+    href?: AnchorHTMLAttributes["href"];
+    target?: AnchorHTMLAttributes["target"];
+  }>(),
+  {
+    type: "primary",
+    color: "blue",
+    size: "md",
+    iconPosition: "right",
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
+.cja-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  background: none;
+  text-decoration: none;
+  font-family: Nunito Sans, Helvetica, sans-serif;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:hover {
+    box-shadow: none;
+    text-decoration: none;
+  }
+
+  &.icon-left {
+    flex-direction: row-reverse;
+  }
+
+  &.btn-size-sm {
+    font-size: 14px;
+    line-height: 18px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    gap: 8px;
+
+    &.btn-icon-only,
+    &.btn-loading {
+      padding: 4px 10px;
+    }
+
+    &.btn-loading .spinner {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &.btn-size-md {
+    font-size: 18px;
+    line-height: 18px;
+    padding: 8px 24px;
+    border-radius: 8px;
+    gap: 8px;
+
+    &.btn-icon-only,
+    &.btn-loading {
+      padding: 8px 12px;
+    }
+
+    &.btn-loading .spinner {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.btn-size-lg {
+    font-size: 22px;
+    line-height: 22px;
+    padding: 16px 32px;
+    border-radius: 8px;
+    gap: 12px;
+
+    &.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: #076b9c;
+      border-color: #076b9c;
+      color: #fff;
+
+      &:hover {
+        background: #0d2745;
+        border-color: #0d2745;
+      }
+
+      &:focus {
+        background: #155072;
+        border-color: #155072;
+      }
+    }
+
+    &.btn-color-orange:not(:disabled) {
+      background: #f58423;
+      border-color: #f58423;
+      color: #fff;
+
+      &:hover {
+        background: #ea730b;
+        border-color: #ea730b;
+      }
+
+      &:focus {
+        background: #f9b377;
+        border-color: #f9b377;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      background: #fff;
+      border-color: #fff;
+      color: #0d2745;
+
+      &:hover {
+        background: #fafafa;
+        border-color: #fafafa;
+      }
+
+      &:focus {
+        background: #ebebeb;
+        border-color: #ebebeb;
+      }
+    }
+
+    &:disabled {
+      background: #f1f5f9;
+      border-color: #f1f5f9;
+      color: #9fabbc;
+      cursor: auto;
+    }
+
+    &.btn-loading .spinner {
+      border-color: #fff;
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &.btn-secondary {
+    &.btn-color-blue:not(:disabled) {
+      border-color: #076b9c;
+      color: #076b9c;
+
+      &:hover {
+        background: #f4f9fc;
+        border-color: #155072;
+        color: #155072;
+      }
+
+      &:focus {
+        border-color: #0d2745;
+        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);
+    }
+  }
+
+  &.btn-loading {
+    cursor: auto;
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      animation: spin 1s infinite;
+      animation-timing-function: linear;
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/structural/CollapseContainer.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="collapse-container" :class="{ active: active }">
+    <div class="collapse-header" @click="toggleCollapse">
+      <div class="header-wrapper">
+        <slot name="header"></slot>
+      </div>
+      <span class="m-cgg-icon--chevron-down"></span>
+    </div>
+    <Transition name="slide" @enter="slideEnter" @leave="slideLeave">
+      <div
+        v-show="active"
+        ref="contentContainer"
+        class="content-container"
+        :style="{ height: containerHeight }"
+      >
+        <div ref="contentWrapper" class="content-wrapper">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    active?: boolean;
+    scrollToContent?: {
+      element: HTMLElement;
+    };
+  }>(),
+  {
+    active: false,
+  }
+);
+
+const active = ref(props.active);
+const contentContainer = ref();
+const contentWrapper = ref();
+const containerHeight = ref();
+
+const emit = defineEmits([
+  "toggle:collapse",
+  "open:collapse",
+  "close:collapse",
+]);
+
+const toggleCollapse = () => {
+  active.value = !active.value;
+  emit("toggle:collapse", active.value);
+};
+
+const openCollapse = () => {
+  active.value = true;
+  emit("open:collapse");
+};
+
+const closeCollapse = () => {
+  active.value = false;
+  emit("close:collapse");
+};
+
+const slideEnter = () => {
+  containerHeight.value = "0";
+
+  requestAnimationFrame(() => {
+    if (contentContainer.value && contentWrapper.value) {
+      containerHeight.value = `${contentWrapper.value.clientHeight}px`;
+
+      setTimeout(() => {
+        containerHeight.value = "";
+      }, 200);
+
+      if (active.value && props.scrollToContent) {
+        setTimeout(() => {
+          props.scrollToContent?.element.scrollTo({
+            top: contentWrapper.value.offsetTop,
+            left: 0,
+            behavior: "smooth",
+          });
+        }, 250);
+      }
+    }
+  });
+};
+
+const slideLeave = () => {
+  containerHeight.value = `${contentWrapper.value.clientHeight}px`;
+
+  requestAnimationFrame(() => {
+    containerHeight.value = "0";
+  });
+};
+
+defineExpose({ toggleCollapse, openCollapse, closeCollapse });
+</script>
+
+<style lang="scss" scoped>
+.collapse-container {
+  .collapse-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    cursor: pointer;
+    user-select: none;
+
+    > span {
+      transition: all 0.2s linear;
+    }
+  }
+
+  .content-container {
+    transition: all 0.2s linear;
+
+    &.slide-leave-active,
+    &.slide-enter-active {
+      overflow: hidden;
+    }
+
+    .content-wrapper {
+      padding-top: 16px;
+    }
+  }
+
+  &.active {
+    .collapse-header > span {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:not(.active) {
+    .content-container {
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/components/structural/ContentTabs.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="content-tabs">
+    <div class="control-container">
+      <button
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :class="{ active: activeTab == i }"
+        @click="
+          activeTab = i;
+          $emit('tab:changed', i);
+        "
+      >
+        {{ tab }}
+      </button>
+    </div>
+    <div class="content-container">
+      <TransitionGroup name="fade">
+        <div
+          v-for="(tab, i) in tabs"
+          :key="i"
+          v-show="activeTab == i"
+          :class="`tab-${i}`"
+        >
+          <slot :name="i"></slot>
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const props = defineProps<{
+  defaultTab: number;
+  tabs: string[];
+}>();
+const activeTab = ref(props.defaultTab);
+
+defineEmits(["tab:changed"]);
+defineExpose({ activeTab });
+</script>
+
+<style lang="scss" scoped>
+.content-tabs {
+  .control-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-bottom: 30px;
+
+    button {
+      flex-grow: 1;
+      outline: none;
+      background: none;
+      font-weight: 700;
+      padding: 0 5px 7px;
+      font-size: 16px;
+      line-height: 19px;
+      text-align: center;
+      border: none;
+      color: #979290;
+      cursor: pointer;
+      border-bottom: 1px solid #979290;
+
+      &.active {
+        color: #076b9c;
+        padding: 0 5px 5px;
+        border-bottom: 3px solid #076b9c;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .content-container {
+    position: relative;
+    overflow: hidden;
+
+    .fade-leave-active {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .fade-enter-active {
+      transition: all 0.3s ease-in-out 0.3s;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
+
+    .fade-enter-to,
+    .fade-leave-from {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/structural/FixedContainer.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="fixed-container"
+    :style="{ height: fixedContainerHeight }"
+    ref="fixedContainer"
+    v-if="active"
+  >
+    <div
+      class="fixed-wrapper"
+      :class="{ 'position-fixed': positionFixed }"
+      :style="{ ...size, ...position, maxWidth: fixedWrapperWidth }"
+      ref="fixedWrapper"
+    >
+      <slot></slot>
+    </div>
+  </div>
+  <slot v-else></slot>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, onMounted, watch } from "vue";
+import { ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    active?: boolean;
+    scrollThreshold?: number;
+    fixWidth?: boolean;
+    size?: {
+      height?: string;
+      width?: string;
+    };
+    position?: {
+      left?: string;
+      top?: string;
+      right?: string;
+      bottom?: string;
+    };
+  }>(),
+  {
+    active: true,
+    scrollThreshold: 0,
+    fixWidth: true,
+  }
+);
+
+const positionFixed = ref(false);
+const fixedContainer = ref();
+const fixedContainerHeight = ref("");
+const fixedWrapper = ref();
+const fixedWrapperWidth = ref("");
+
+const fixPosition = () => {
+  if (fixedContainer.value && props.active) {
+    positionFixed.value =
+      window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
+
+    fixedContainerHeight.value = positionFixed.value
+      ? `${fixedWrapper.value.clientHeight}px`
+      : "";
+  } else {
+    positionFixed.value = false;
+    fixedContainerHeight.value = "";
+  }
+};
+
+const setWidth = () => {
+  fixedWrapperWidth.value =
+    props.active && fixedContainer.value
+      ? `${fixedContainer.value.offsetWidth}px`
+      : "";
+};
+
+watch(
+  () => props.active,
+  () => {
+    if (props.fixWidth) {
+      setWidth();
+    }
+  }
+);
+
+onMounted(() => {
+  window.addEventListener("scroll", fixPosition);
+  fixPosition();
+
+  if (props.fixWidth) {
+    window.addEventListener("resize", setWidth);
+    setWidth();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", fixPosition);
+  window.removeEventListener("resize", setWidth);
+});
+
+defineExpose({ positionFixed });
+</script>
+
+<style lang="scss" scoped>
+.fixed-wrapper {
+  &.position-fixed {
+    position: fixed;
+  }
+}
+</style>