cja-phoenix 0.2.3 → 0.2.5

package/src/components/structural/InfoMessage.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="info-message"
+    :class="[
+      `color-${color}`,
+      { 'has-icon': $slots.icon, 'has-toggle': toggle },
+    ]"
+  >
+    <div class="icon-container" v-if="$slots.icon">
+      <slot name="icon"></slot>
+    </div>
+    <div class="text-container">
+      <h4 v-if="title">{{ title }}</h4>
+      <p v-if="description" v-html="description"></p>
+    </div>
+    <div class="btn-container" v-if="toggle">
+      <button class="m-cgg-icon--cross2" @click="$emit('btn:close')"></button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string;
+  description?: string;
+  toggle?: boolean;
+  color: "blue" | "green";
+}>();
+
+defineEmits(["btn:close"]);
+</script>
+
+<style lang="scss" scoped>
+.info-message {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 16px 24px;
+  border: 2px solid #000;
+  border-radius: 16px;
+
+  &.has-icon {
+    grid-template-columns: auto 1fr;
+  }
+
+  &.has-toggle {
+    grid-template-columns: 1fr 18px;
+  }
+
+  &.has-icon.has-toggle {
+    grid-template-columns: auto 1fr 18px;
+  }
+
+  &.color-green {
+    background-color: #f8faf5;
+    border-color: #c4dab1;
+    color: #56924b;
+  }
+
+  &.color-blue {
+    background-color: #f4f9fc;
+    border-color: #076b9c;
+    color: #076b9c;
+  }
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    h4 {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      margin: 0;
+    }
+
+    p {
+      font-size: 13px;
+      line-height: 17px;
+      margin: 0;
+    }
+  }
+
+  .btn-container {
+    button {
+      padding: 0;
+      border: none;
+      font-size: 18px;
+      line-height: 18px;
+      color: inherit;
+      cursor: pointer;
+      background: none;
+    }
+  }
+}
+</style>

package/src/index.ts

@@ -18,6 +18,7 @@ import "./assets/iconia/style.scss";
 
 export default { install };
 
+export * from "./types";
 export * from "./components";
 export * from "./constants";
 export * from "./utils";

package/src/types/MacroStep.ts

@@ -0,0 +1,5 @@
+export interface MacroStep {
+  label: string;
+  icon: string;
+  status: "past" | "current" | "future";
+}

package/src/types/index.ts

@@ -0,0 +1,6 @@
+import { MacroStep } from "./MacroStep";
+import { Tab } from "./Tab";
+import { SelectOption } from "./SelectOption";
+import { TileOption } from "./TileOption";
+
+export type { MacroStep, Tab, SelectOption, TileOption };