cja-phoenix 0.24.19 → 0.24.21

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

@@ -12,12 +12,17 @@
 <script lang="ts" setup>
 import { InputHTMLAttributes } from "vue";
 
-defineProps<{
-  title: string;
-  tooltip?: string;
-  disabled?: InputHTMLAttributes["disabled"];
-  size?: "sm" | "md" | "lg";
-}>();
+withDefaults(
+  defineProps<{
+    title: string;
+    tooltip?: string;
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
+  }>(),
+  {
+    size: "md",
+  }
+);
 </script>
 
 <style lang="scss" scoped>

package/src/components/structural/CjaButton.vue

@@ -8,14 +8,19 @@
       `btn-${type}`,
       `btn-size-${size}`,
       `btn-color-${color}`,
+      `btn-align-${textAlign}`,
       { 'btn-loading': loading, 'btn-shadow': shadow, 'icon-only': iconOnly },
     ]"
   >
-    <span v-if="iconLeft" :class="iconLeft" />
-    <slot v-if="!iconOnly && !loading" />
-    <span v-if="iconRight" :class="iconRight" />
-    <Transition name="fade">
+    <Transition name="fade" mode="out-in">
       <div class="spinner" v-if="loading" />
+      <div class="text-wrapper" v-else>
+        <span v-if="iconLeft" :class="iconLeft" />
+        <span class="text" v-if="!iconOnly">
+          <slot />
+        </span>
+        <span v-if="iconRight" :class="iconRight" />
+      </div>
     </Transition>
   </component>
 </template>
@@ -28,6 +33,7 @@ withDefaults(
   defineProps<{
     type?: "primary" | "secondary" | "tertiary";
     color?: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
+    textAlign?: "center" | "left" | "right";
     size?: "sm" | "md" | "lg";
     shadow?: boolean;
     iconRight?: Icon;
@@ -43,19 +49,17 @@ withDefaults(
     type: "primary",
     color: "blue",
     size: "md",
+    textAlign: "center",
   }
 );
 </script>
 
 <style lang="scss" scoped>
 .cja-btn {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  font-family: Nunito Sans, Helvetica, sans-serif;
   font-weight: 700;
   cursor: pointer;
-  transition-property: background, color, width;
+  transition-property: background, color, border-color, width;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   border-width: 1px;
@@ -63,9 +67,17 @@ withDefaults(
   border-color: transparent;
   background: none;
   text-decoration: none;
-  font-family: Nunito Sans, Helvetica, sans-serif;
 
-  span {
+  .text-wrapper {
+    display: flex;
+    align-items: center;
+
+    .text {
+      flex-grow: 1;
+    }
+  }
+
+  * {
     pointer-events: none;
   }
 
@@ -82,19 +94,13 @@ withDefaults(
     line-height: 18px;
     padding: 8px 12px;
     border-radius: 8px;
-    gap: 8px;
 
-    &.icon-only {
-      padding: 6px 10px;
+    .text-wrapper {
+      gap: 8px;
     }
 
-    &.btn-loading {
-      min-width: 36px;
-    }
-
-    .spinner {
-      width: 14px;
-      height: 14px;
+    &.icon-only {
+      padding: 6px 10px;
     }
   }
 
@@ -103,19 +109,13 @@ withDefaults(
     border-radius: 8px;
     font-size: 16px;
     line-height: 20px;
-    gap: 8px;
-
-    &.icon-only {
-      padding: 9px 13px;
-    }
 
-    &.btn-loading {
-      min-width: 44px;
+    .text-wrapper {
+      gap: 8px;
     }
 
-    .spinner {
-      width: 18px;
-      height: 18px;
+    &.icon-only {
+      padding: 9px 13px;
     }
   }
 
@@ -124,19 +124,19 @@ withDefaults(
     line-height: 22px;
     padding: 16px;
     border-radius: 8px;
-    gap: 12px;
 
-    &.icon-only {
-      padding: 16px 18px;
+    .text-wrapper {
+      gap: 12px;
     }
 
-    &.btn-loading {
-      min-width: 56px;
+    &.icon-only {
+      padding: 16px 18px;
     }
+  }
 
-    .spinner {
-      width: 22px;
-      height: 22px;
+  @each $align in center, left, right {
+    &.btn-align-#{$align} {
+      text-align: $align;
     }
   }
 
@@ -193,11 +193,6 @@ withDefaults(
         border-color: $extra-dark-blue;
         color: $white;
       }
-
-      .spinner {
-        border-color: $main-blue;
-        border-top-color: $light-blue;
-      }
     }
 
     &.btn-color-white:not(:disabled) {
@@ -207,18 +202,12 @@ withDefaults(
 
       &:hover {
         background: $dark-white;
-        border-color: $dark-white;
       }
 
       &:focus {
         background: $light-grey;
         border-color: $light-grey;
       }
-
-      .spinner {
-        border-color: $main-blue;
-        border-top-color: $light-blue;
-      }
     }
 
     &:disabled {
@@ -227,11 +216,6 @@ withDefaults(
       color: $blue-grey;
       cursor: auto;
     }
-
-    .spinner {
-      border-color: $white;
-      border-top-color: rgba(255, 255, 255, 0.2);
-    }
   }
 
   &.btn-secondary {
@@ -309,10 +293,6 @@ withDefaults(
       color: $blue-grey;
       cursor: auto;
     }
-
-    .spinner {
-      border-top-color: rgba(255, 255, 255, 0.2);
-    }
   }
 
   &.btn-tertiary {
@@ -370,10 +350,6 @@ withDefaults(
       color: $disabled-grey;
       cursor: auto;
     }
-
-    .spinner {
-      border-top-color: rgba(255, 255, 255, 0.2);
-    }
   }
 
   &.btn-color-gradient-green-blue {
@@ -393,35 +369,63 @@ withDefaults(
 
   &.btn-loading {
     cursor: auto;
-
-    span:not(.spinner) {
-      opacity: 0;
-    }
-  }
-
-  span {
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  span:not(.spinner) {
-    transition-delay: 0.15s;
   }
 
   .spinner {
-    position: absolute;
     display: block;
     border-width: 2px;
     border-style: solid;
+    border-color: inherit;
+    border-top-color: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     animation: spin 1s infinite;
     animation-timing-function: linear;
 
-    &.fade-enter-active {
-      transition-delay: 0.15s;
+    &.fade-leave-active {
+      animation: none;
+    }
+  }
+
+  @mixin spinner-color($on-color, $off-color: rgba(255, 255, 255, 0.2)) {
+    .spinner {
+      border-color: $on-color;
+      border-top-color: $off-color;
+    }
+  }
+
+  @each $size, $value in "sm" 14px, "md" 18px, "lg" 22px {
+    &.btn-size-#{$size} .spinner {
+      width: $value;
+      height: $value;
+    }
+  }
+
+  &.btn-primary {
+    @include spinner-color($white);
+    @each $btn, $color in ("light-blue": $main-blue, "white": $light-grey) {
+      &.btn-color-#{$btn} {
+        @include spinner-color($color);
+      }
+    }
+  }
+
+  &.btn-tertiary {
+    @each $btn,
+      $color
+        in (
+          "blue": $main-blue,
+          "orange": $main-orange,
+          "light-blue": $light-blue,
+          "white": $white
+        )
+    {
+      &.btn-color-#{$btn} {
+        @include spinner-color($color);
+      }
     }
   }
 
-  @include fade-transition(0.3s);
+  @include fade-transition(0.2s);
 }
 
 @keyframes spin {