@tekkare/auriga 0.1.9 → 0.1.10

package/dist/runtime/components/argStyle.vue

@@ -265,6 +265,9 @@ button {
 .oip_row.gap-4 {
   gap: 4px;
 }
+.oip_row.gap-6 {
+  gap: 4px;
+}
 .oip_row.gap-8 {
   gap: 8px;
 }
@@ -277,6 +280,12 @@ button {
 .oip_row.gap-16 {
   gap: 16px;
 }
+.oip_row.gap-24 {
+  gap: 16px;
+}
+.oip_row.gap-32 {
+  gap: 16px;
+}
 
 /** BUTTONS **/
 
@@ -689,21 +698,21 @@ button {
 /*** TAGS ***/
 
 .oip_tag {
-  padding: 4px 12px !important;
-  background: var(--independence) !important;
-  color: var(--pure-white) !important;
-  font-style: normal !important;
-  font-weight: bold;
-  font-size: 12px !important;
-  line-height: 14px !important;
-  border-radius: 20px !important;
-  border: 1px solid var(--independence) !important;
-  height: 20px !important;
-  width: fit-content !important;
-  font-family: "Figtree", sans-serif !important;
+  padding: 4px 8px;
+  background: var(--independence);
+  color: var(--pure-white);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border-radius: 4px;
+  width: fit-content;
+  font-family: "Figtree", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
   align-items: center;
-  display: flex;
   gap: 8px;
+  height: 16px;
 }
 .oip_tag > svg {
   cursor: pointer;
@@ -713,48 +722,80 @@ button {
 .oip_tag.is_disabled {
   background-color: var(--pure-white) !important;
   color: var(--lavendar-grey) !important;
-  border: 1px solid var(--lavendar-grey) !important;
 }
 .oip_tag.is_red {
-  background: var(--red) !important;
-  border: 1px solid var(--red) !important;
+  background: rgba(244, 63, 94, 0.1) !important;
+  color: #9f1239;
+}
+.oip_tag.is_pink {
+  background: rgba(236, 72, 153, 0.1) !important;
+  color: #9d174d;
+}
+.oip_tag.is_lilac {
+  background: rgba(217, 70, 239, 0.1) !important;
+  color: #86198f;
+}
+.oip_tag.is_purple {
+  background: rgba(168, 85, 247, 0.1) !important;
+  color: #6b21a8;
+}
+.oip_tag.is_indigo {
+  background: rgba(139, 92, 246, 0.1) !important;
+  color: #5b21b6;
+}
+.oip_tag.is_blue {
+  background: rgba(99, 102, 241, 0.1) !important;
+  color: #3730a3;
+}
+.oip_tag.is_sapphire {
+  background: rgba(14, 165, 233, 0.1) !important;
+  color: #075985;
+}
+.oip_tag.is_turquoise {
+  background: rgba(6, 182, 212, 0.1) !important;
+  color: #155e75;
+}
+.oip_tag.is_teal {
+  background: rgba(20, 184, 166, 0.1) !important;
+  color: #115e59;
+}
+.oip_tag.is_emerald {
+  background: rgba(16, 185, 129, 0.1) !important;
+  color: #065f46;
 }
+.oip_tag.is_green {
+  background: rgba(34, 197, 94, 0.1) !important;
+  color: #166534;
+}
+.oip_tag.is_olive {
+  background: rgba(132, 204, 22, 0.1) !important;
+  color: #3f6212;
+}
+.oip_tag.is_yellow {
+  background: rgba(234, 179, 8, 0.1) !important;
+  color: #854d0e;
+}
+.oip_tag.is_beige {
+  background: rgba(245, 158, 11, 0.1) !important;
+  color: #92400e;
+}
+.oip_tag.is_coral {
+  background: rgba(249, 115, 22, 0.1) !important;
+  color: #9a3412;
+}
+
 .oip_tag.is_orange {
   background: var(--orange) !important;
   border: 1px solid var(--orange) !important;
 }
-.oip_tag.is_yellow {
-  background: var(--yellow) !important;
-  border: 1px solid var(--yellow) !important;
-}
 .oip_tag.is_lime {
   background: var(--lime) !important;
   border: 1px solid var(--lime) !important;
 }
-.oip_tag.is_green {
-  background: var(--green) !important;
-  border: 1px solid var(--green) !important;
-}
 .oip_tag.is_cyan {
   background: var(--cyan) !important;
   border: 1px solid var(--cyan) !important;
 }
-.oip_tag.is_blue {
-  background: var(--blue) !important;
-  border: 1px solid var(--blue) !important;
-}
-.oip_tag.is_navy {
-  background: var(--navy) !important;
-  border: 1px solid var(--navy) !important;
-}
-.oip_tag.is_purple {
-  background: var(--purple) !important;
-  border: 1px solid var(--purple) !important;
-}
-.oip_tag.is_pink {
-  background: var(--pink) !important;
-  border: 1px solid var(--pink) !important;
-}
 .oip_tag.is_primary {
   background: var(--primary) !important;
   border: 1px solid var(--primary) !important;
@@ -777,12 +818,6 @@ button {
 }
 .oip_tag.is_light_grey {
   background: var(--background) !important;
-  border-radius: 10px !important;
-  border: 1px solid var(--background) !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--independence) !important;
 }
 .oip_tag.is_light_grey svg {
@@ -791,32 +826,14 @@ button {
 }
 .oip_tag.is_light_red {
   background: rgba(251, 70, 84, 0.1) !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--alert) !important;
 }
 .oip_tag.is_light_green {
   background: rgba(50, 209, 117, 0.1) !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--success) !important;
 }
 .oip_tag.is_light_primary {
   background: #e9f1ff !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--primary) !important;
 }
 .oip_tag .oip_tag__close {
@@ -898,7 +915,7 @@ button {
 }
 .oip_card .oip_card__header .oip_card__header_buttons {
   display: flex;
-  column-gap: 8px;
+  column-li: 8px;
 }
 @media screen and (max-width: 1000px) {
   .oip_card .oip_card__header .oip_card__header_buttons .oip_download_button,

package/dist/runtime/components/argTags.vue

@@ -16,7 +16,7 @@ export default defineComponent({
   name: "argTags",
   components: { argIcon, argStyle },
   props: {
-    setStyle: { type: String, default: "primary" },
+    setStyle: { type: String, default: "light_grey" },
     haveClose: { type: Boolean, default: false }
   },
   emits: ["onClose"],

package/dist/runtime/components/argTipsBox.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    v-show="displayTip"
+    class="arg_tips_box"
+    :class="showMore ? 'arg_tips_open' : 'arg_tips_collapse'"
+  >
+    <div class="tips_visible_content">
+      <div class="oip_row v-center gap-8">
+        <arg-emoji emoji-size="20" emoji-name="Lightbulb" />
+        <slot name="Text" />
+      </div>
+      <div v-if="haveClose" class="tip_action" @click="displayTip = false">
+        {{ tipsLang === "fr" ? "Fermer" : "Close" }}
+      </div>
+      <div
+        v-else-if="haveMore"
+        class="oip_row v-start gap-6 tip_action"
+        @click="showMore = !showMore"
+      >
+        <arg-icon
+          name="CaretDown"
+          size="20"
+          :class="['action-icon', showMore ? 'icon-rotate' : '']"
+        />
+        <p>
+          {{
+            tipsLang === "fr"
+              ? showMore
+                ? "Réduire"
+                : "En savoir plus"
+              : showMore
+              ? "Hide"
+              : "Learn more"
+          }}
+        </p>
+      </div>
+    </div>
+    <div :class="['more_tips', showMore ? 'arg_more_tips' : 'arg_hide_more']">
+      <slot name="More" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  defineComponent
+} from "vue";
+import argEmoji from "./argEmoji.vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argInfoBox",
+  components: { argEmoji, argIcon },
+  props: {
+    haveClose: {
+      type: Boolean,
+      default: false
+    },
+    haveMore: {
+      type: Boolean,
+      default: false
+    },
+    tipsLang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
+  },
+  setup(props, { emit }) {
+    const displayTip = ref(true);
+    const showMore = ref(false);
+    return {
+      displayTip,
+      showMore
+    };
+  }
+});
+</script>
+
+<style scoped>
+.arg_tips_box {
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--base-dividers, #ececf2);
+  background: rgba(253, 253, 255, 0.8);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  transition: all ease 0.5s;
+}
+
+.arg_tips_open {
+  max-height: 5000px;
+  overflow: visible;
+}
+
+.arg_tips_collapse {
+  max-height: 32px;
+  overflow: hidden;
+}
+
+.tips_visible_content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+  align-self: stretch;
+}
+
+.lightbulb_icon {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+
+.tip_action {
+  cursor: pointer;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  padding: 6px;
+  border-radius: 4px;
+}
+
+.tip_action:hover {
+  background: var(--background) !important;
+}
+
+.action-icon {
+  transition: transform 0.5s;
+}
+
+.icon-rotate {
+  transform: rotateX(180deg);
+}
+
+.more_tips {
+  transition: all ease 0.5s;
+  padding-left: 30px;
+}
+.arg_hide_more {
+  visibility: hidden;
+}
+
+.arg_more_tips {
+  visibility: visible;
+}
+</style>

package/dist/runtime/components/argTipsBox.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    haveClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    haveMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tipsLang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}, {
+    displayTip: import("vue").Ref<boolean>;
+    showMore: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    haveClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    haveMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tipsLang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+}>>, {
+    haveClose: boolean;
+    haveMore: boolean;
+    tipsLang: string;
+}, {}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
     "patch": "nuxt-module-build && npm version patch && npm publish"
   },
   "dependencies": {
+    "@esbuild/darwin-x64": "^0.19.8",
     "@nuxt/kit": "^3.7.3",
     "apexcharts": "^3.43.0",
     "vue-apexcharts": "^1.6.2",