@avakhula/ui 0.0.66 → 0.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "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/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/Sorting/sorting.scss

@@ -25,7 +25,7 @@ button {
       padding: 0 4px;
       border-radius: 4px;
       margin-right: 2px;
-      @include Ib-H4-regular;
+      @include Ib-H4-medium;
       color: $neutral-900;
       height: 24px;
       display: flex;

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);