@avakhula/ui 0.0.67 → 0.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -29,16 +29,16 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-docs": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/addon-mdx-gfm": "^7.0.11",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/vue3": "^7.0.11",
-    "@storybook/vue3-vite": "^7.0.11",
+    "@storybook/addon-a11y": "^7.0.22",
+    "@storybook/addon-actions": "^7.0.22",
+    "@storybook/addon-docs": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addon-mdx-gfm": "^7.0.22",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/vue3": "^7.0.22",
+    "@storybook/vue3-vite": "^7.0.22",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.11",
+    "storybook": "^7.0.22",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/assets/scss/variables/shadows.json

@@ -1,58 +1,42 @@
 [
-  {
-    "name": "$ib-shadow-m1",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.2)"
-  },
-  {
-    "name": "$ib-shadow-m2",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.25)"
-  },
-  {
-    "name": "$ib-shadow-m3",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1)"
-  },
   {
     "name": "$ib-shadow-1",
-    "value": "0px 0px 10px rgba(49, 63, 80, 0.05)"
+    "value": "0px 0px 4px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-2",
-    "value": "0px 4px 4px rgba(49, 63, 80, 0.1)"
+    "value": "0px 1px 8px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-3",
-    "value": "0px 3px 10px rgba(49, 63, 80, 0.14)"
+    "value": "0px 2px 10px 0px rgba(49, 63, 80, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-4",
-    "value": "0px 1px 10px rgba(49, 63, 80, 0.25)"
+    "value": "0px 4px 15px 0px rgba(49, 63, 80, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-5",
-    "value": "0px 5px 15px rgba(80, 80, 80, 0.15)"
+    "value": "0px 8px 20px 0px rgba(49, 63, 80, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-6",
-    "value": "0px 7px 20px rgba(49, 63, 80, 0.15)"
-  },
-  {
-    "name": "$ib-shadow-7",
-    "value": "0px 15px 25px rgba(49, 63, 80, 0.05)"
-  },
-  {
-    "name": "$ib-shadow-r",
-    "value": "-2px 0px 7px rgba(80, 80, 80, 0.1)"
+    "value": "0px 12px 25px 0px rgba(49, 63, 80, 0.15), 0px 6px 5px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-r1",
-    "value": "-4px 0px 14px rgba(80, 80, 80, 0.1)"
+    "value": "-2px 0px 7px 0px rgba(80, 80, 80, 0.10)"
   },
   {
-    "name": "$ib-shadow-l",
-    "value": "2px 0px 7px rgba(80, 80, 80, 0.1)"
+    "name": "$ib-shadow-r2",
+    "value": "-4px 0px 14px 0px rgba(80, 80, 80, 0.10)"
   },
   {
     "name": "$ib-shadow-l1",
-    "value": "4px 0px 14px rgba(80, 80, 80, 0.1)"
+    "value": "2px 0px 7px 0px rgba(80, 80, 80, 0.10)"
+  },
+  {
+    "name": "$ib-shadow-l2",
+    "value": "4px 0px 14px 0px rgba(80, 80, 80, 0.10)"
   }
 ]

package/src/assets/scss/variables/shadows.scss

@@ -1,17 +1,12 @@
-$ib-shadow-m1: 0px 0px 1px rgba(0, 0, 0, 0.2);
-$ib-shadow-m2: 0px 0px 1px rgba(0, 0, 0, 0.25);
-$ib-shadow-m3: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1);
+$ib-shadow-1: 0px 0px 4px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-2: 0px 1px 8px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-3: 0px 2px 10px 0px rgba(49, 63, 80, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-4: 0px 4px 15px 0px rgba(49, 63, 80, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-5: 0px 8px 20px 0px rgba(49, 63, 80, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-6: 0px 12px 25px 0px rgba(49, 63, 80, 0.15), 0px 6px 5px 0px rgba(0, 0, 0, 0.15);
 
-$ib-shadow-1: 0px 0px 10px rgba(49, 63, 80, 0.05);
-$ib-shadow-2: 0px 4px 4px rgba(49, 63, 80, 0.1);
-$ib-shadow-3: 0px 3px 10px rgba(49, 63, 80, 0.14);
-$ib-shadow-4: 0px 1px 10px rgba(49, 63, 80, 0.25);
-$ib-shadow-5: 0px 5px 15px rgba(80, 80, 80, 0.15);
-$ib-shadow-6: 0px 7px 20px rgba(49, 63, 80, 0.15);
-$ib-shadow-7: 0px 15px 25px rgba(49, 63, 80, 0.05);
+$ib-shadow-r1: -2px 0px 7px 0px rgba(80, 80, 80, 0.10);
+$ib-shadow-r2: -4px 0px 14px 0px rgba(80, 80, 80, 0.10);
 
-$ib-shadow-r: -2px 0px 7px rgba(80, 80, 80, 0.1);
-$ib-shadow-r1: -4px 0px 14px rgba(80, 80, 80, 0.1);
-
-$ib-shadow-l: 2px 0px 7px rgba(80, 80, 80, 0.1);
-$ib-shadow-l1: 4px 0px 14px rgba(80, 80, 80, 0.1);
+$ib-shadow-l1: 2px 0px 7px 0px rgba(80, 80, 80, 0.10);
+$ib-shadow-l2: 4px 0px 14px 0px rgba(80, 80, 80, 0.10);

package/src/components/Dropdown/Dropdown.vue

@@ -224,7 +224,7 @@ export default {
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/variables/shadows.scss";
 
-$menu-shadow: $ib-shadow-3;
+$menu-shadow: $ib-shadow-4;
 $menu-bg: $white;
 
 .ib-dropdown {

package/src/components/Modal/Modal.vue

@@ -11,7 +11,7 @@
 
   <Teleport to="body">
     <div class="modal" :class="classList" v-show="isActive" ref="modal">
-      <div class="modal-body" :style="bodyStyles" v-outside="clickOutside">
+      <div :class="bodyClassList" :style="bodyStyles" v-outside="clickOutside">
         <ib-icon-button
           v-if="showCloseButton"
           class="modal-close-icon"
@@ -172,6 +172,25 @@ export default {
 
       return styleList;
     },
+    bodyClassList() {
+      const classList = ["modal-body"];
+      if (this.size === modalSizes.S) {
+        classList.push("modal-body-s");
+      }
+
+      if (this.size === modalSizes.M) {
+        classList.push("modal-body-m");
+      }
+
+      if (this.size === modalSizes.L) {
+        classList.push("modal-body-l");
+      }
+
+      if (this.size === modalSizes.XL) {
+        classList.push("modal-body-xl");
+      }
+      return classList;
+    },
     hasTrigger() {
       return !!this.$slots.trigger;
     },
@@ -202,7 +221,9 @@ export default {
 $backdrop-bg: $black-t20;
 $modal-title-color: $neutral-900;
 $modal-bg: $white;
-$modal-shadow: $ib-shadow-6;
+$modal-small-shadow: $ib-shadow-5;
+$modal-large-shadow: $ib-shadow-6;
+
 body.modal-open {
   overflow: hidden;
 }
@@ -234,10 +255,19 @@ body.modal-open {
   min-width: 380px;
   border-radius: 8px;
   max-width: calc(100% - 40px);
-  box-shadow: $modal-shadow;
   display: flex;
   flex-direction: column;
 
+  &.modal-body-s,
+  &.modal-body-m {
+    box-shadow: $modal-small-shadow;
+  }
+
+  &.modal-body-l,
+  &.modal-body-xl {
+    box-shadow: $modal-large-shadow;
+  }
+
   .modal-header {
     @include Ib-H2-medium;
     color: $modal-title-color;

package/src/components/Panel/Panel.stories.js

@@ -1,15 +1,8 @@
 import IbPanel from "./Panel.vue";
-import { panelVariant } from "./constants";
 
 export default {
   title: "Panel",
   component: IbPanel,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: Object.values(panelVariant),
-    },
-  },
 };
 
 const Template = (args) => ({

package/src/components/Panel/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classList">
+  <div class="panel">
     <div class="panel-head">
       <div class="head-title">
         <slot name="title" />
@@ -24,7 +24,6 @@
 
 <script>
 import expandAnimation from "../../mixins/expandAnimation";
-import { panelVariant } from "./constants";
 
 export default {
   name: "IbPanel",
@@ -34,22 +33,14 @@ export default {
       type: Boolean,
       default: true,
     },
-    variant: {
-      type: String,
-      default: panelVariant.primary,
-    },
-  },
-  computed: {
-    classList() {
-      const classList = ["panel", `panel-${this.variant}`];
-
-      return classList;
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+
 .expand-enter-active,
 .expand-leave-active {
   transition: height 1s ease-in-out;
@@ -61,15 +52,10 @@ export default {
   height: 0;
 }
 
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-
 $panel-border-color: $gray-200;
 $panel-title-color: $neutral-900;
-$panel-divider-color: $gray-200;
-$description-color: $gray-600;
-$panel-primary-body-bg: $gray-50;
-$panel-secondary-body-bg: $white;
+$panel-divider-color: $gray-300;
+$description-color: $gray-700;
 
 .panel {
   border: 1px solid $panel-border-color;
@@ -80,6 +66,7 @@ $panel-secondary-body-bg: $white;
     width: 100%;
     align-items: center;
     padding: 15px;
+    background-color: $gray-50;
 
     .head-title {
       @include Ib-H3-medium;
@@ -99,16 +86,5 @@ $panel-secondary-body-bg: $white;
       color: $description-color;
     }
   }
-  &.panel-primary {
-    .panel-body {
-      background-color: $panel-primary-body-bg;
-    }
-  }
-
-  &.panel-secondary {
-    .panel-body {
-      background-color: $panel-secondary-body-bg;
-    }
-  }
 }
 </style>

package/src/components/Popover/popover.scss

@@ -5,7 +5,7 @@
 
 $background: $white;
 $textColor: $neutral-900;
-$shadow: $ib-shadow-4;
+$shadow: $ib-shadow-3;
 
 .ib-popover {
   position: absolute;

package/src/components/Sorting/Sorting.vue

@@ -66,7 +66,6 @@ export default {
     tooltipPosition: {
       type: String,
     },
-    // ??????
     tooltipIconSorting: {
       type: String,
     },

package/src/components/ToggleTip/toggleTip.scss

@@ -5,8 +5,7 @@
 
 $background: $white;
 $textColor: $neutral-900;
-$shadow: $ib-shadow-4;
-
+$shadow: $ib-shadow-3;
 
 .ib-toggle-tip {
   position: absolute;

package/src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <ib-popover :position="position" class="ib-tooltip">
+  <ib-popover :position="position" :class="classList">
     <b v-if="title">{{ title }}</b>
     <p>{{ text }}</p>
   </ib-popover>
@@ -21,17 +21,34 @@ export default {
       type: String,
     },
   },
+  computed: {
+    classList() {
+      const classList = ["ib-tooltip"];
+
+      if (this.title) {
+        classList.push("ib-tooltip-large");
+      }
+
+      return classList;
+    },
+  },
   components: { IbPopover },
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../../assets/scss/typography.scss";
+@import "../../assets/scss/variables/shadows.scss";
 @import "../../assets/scss/mixins.scss";
 
 .ib-tooltip {
   padding: 10px;
   max-width: 240px;
+  box-shadow: $ib-shadow-1;
+
+  &.ib-tooltip-large {
+    box-shadow: $ib-shadow-2;
+  }
 
   b,
   p {

package/src/scripts/parseScssVariables.js

@@ -1,10 +1,26 @@
-import fs from "fs";
-import path from "path";
-
-const shadowFilePath = path.join("../assets/scss/variables/shadows.scss");
-const shadowOutputFile = path.join("../assets/scss/variables/shadows.json");
-const colorFilePath = path.join("../assets/scss/variables/colors.scss");
-const colorOutputFile = path.join("../assets/scss/variables/colors.json");
+import fs from "node:fs";
+import path, { dirname } from "node:path";
+
+const __filename = new URL(import.meta.url).pathname;
+const __dirname = dirname(__filename);
+
+const shadowFilePath = path.join(
+  __dirname,
+  "../assets/scss/variables/shadows.scss"
+);
+const shadowOutputFile = path.join(
+  __dirname,
+  "../assets/scss/variables/shadows.json"
+);
+
+const colorFilePath = path.join(
+  __dirname,
+  "../assets/scss/variables/colors.scss"
+);
+const colorOutputFile = path.join(
+  __dirname,
+  "../assets/scss/variables/colors.json"
+);
 
 parseFile(colorFilePath, colorOutputFile);
 parseFile(shadowFilePath, shadowOutputFile);

package/src/components/Panel/constants.js

@@ -1,4 +0,0 @@
-export const panelVariant = {
-  primary: "primary",
-  secondary: "secondary",
-};