@avakhula/ui 0.0.11 → 0.0.13

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "source": "src/index.js",
+  "type": "module",
+  "private": false,
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -27,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.1",
-    "@storybook/addon-actions": "^7.0.1",
-    "@storybook/addon-docs": "^7.0.1",
-    "@storybook/addon-essentials": "^7.0.1",
-    "@storybook/addon-interactions": "^7.0.1",
-    "@storybook/addon-links": "^7.0.1",
-    "@storybook/addon-mdx-gfm": "^7.0.2",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@storybook/vue3": "^7.0.1",
-    "@storybook/vue3-vite": "^7.0.2",
+    "@storybook/addon-a11y": "^7.0.9",
+    "@storybook/addon-actions": "^7.0.9",
+    "@storybook/addon-docs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-interactions": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addon-mdx-gfm": "^7.0.9",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/vue3": "^7.0.9",
+    "@storybook/vue3-vite": "^7.0.9",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -54,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.2",
+    "storybook": "^7.0.9",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/App.vue

@@ -1,37 +1,40 @@
 <template>
-  <button @click="onClick">
-    test
-  </button>
 
-  <ib-modal :active="active" @close="onClose" :class-list="'test'">
+  <button @click="active = !active">test</button>
+  <ib-modal :active="active" @close="onClose">
     <template #body>
       test
     </template>
   </ib-modal>
-
 </template>
 
 <script>
-import IbModal from "./components/Modal/Modal.vue"
+import IbModal from "./components/Modal/Modal.vue";
 
 export default {
-  components: {
-    IbModal,
-  },
+  components: { IbModal },
   data() {
     return {
-      active: true,
+      active: false
     };
   },
   methods: {
-    onClick() {
-      this.active = true;
-    },
-
     onClose() {
-      console.log("close");
-      this.active = false;
+      console.log('called OnClose')
+      this.active = !this.active
     }
   },
-};
-</script>
+  watch: {
+    active(val, oldVal) {
+      console.log("active has ben changet")
+    
+      if(val) {
+        setTimeout(() => {
+          this.active = false
+        }, 5000)
+      }
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,418 @@
+[
+  {
+    "name": "$blue-900",
+    "value": "#0057C2"
+  },
+  {
+    "name": "$blue-800",
+    "value": "#0060D6"
+  },
+  {
+    "name": "$blue-700",
+    "value": "#0369E8"
+  },
+  {
+    "name": "$blue-600",
+    "value": "#0085FC"
+  },
+  {
+    "name": "$blue-500",
+    "value": "#0093FF"
+  },
+  {
+    "name": "$blue-400",
+    "value": "#23A3FF"
+  },
+  {
+    "name": "$blue-300",
+    "value": "#A6CEFF"
+  },
+  {
+    "name": "$blue-200",
+    "value": "#D9EAFF"
+  },
+  {
+    "name": "$blue-100",
+    "value": "#ECF4FF"
+  },
+  {
+    "name": "$blue-50",
+    "value": "#F2F5FE"
+  },
+  {
+    "name": "$gray-900",
+    "value": "#3B424B"
+  },
+  {
+    "name": "$gray-800",
+    "value": "#4A5561"
+  },
+  {
+    "name": "$gray-700",
+    "value": "#5A6877"
+  },
+  {
+    "name": "$gray-600",
+    "value": "#677788"
+  },
+  {
+    "name": "$gray-500",
+    "value": "#8296AB"
+  },
+  {
+    "name": "$gray-400",
+    "value": "#B3C2D3"
+  },
+  {
+    "name": "$gray-300",
+    "value": "#CFD5E7"
+  },
+  {
+    "name": "$gray-200",
+    "value": "#E7EAF3"
+  },
+  {
+    "name": "$gray-100",
+    "value": "#F2F3F5"
+  },
+  {
+    "name": "$gray-50",
+    "value": "#F8F9FC"
+  },
+  {
+    "name": "$white",
+    "value": "#FFFFFF"
+  },
+  {
+    "name": "$white-t20",
+    "value": "rgba(255, 255, 255, 0.20)"
+  },
+  {
+    "name": "$black",
+    "value": "#000000"
+  },
+  {
+    "name": "$black-t20",
+    "value": "rgba(0, 0, 0, 0.20)"
+  },
+  {
+    "name": "$neutral-900",
+    "value": "#1A1A1A"
+  },
+  {
+    "name": "$neutral-800",
+    "value": "#3A3A3A"
+  },
+  {
+    "name": "$neutral-700",
+    "value": "#595959"
+  },
+  {
+    "name": "$neutral-600",
+    "value": "#606060"
+  },
+  {
+    "name": "$neutral-500",
+    "value": "#B2B2B2"
+  },
+  {
+    "name": "$neutral-400",
+    "value": "#B4B4B4"
+  },
+  {
+    "name": "$neutral-300",
+    "value": "#D8D8D8"
+  },
+  {
+    "name": "$neutral-200",
+    "value": "#E8E8E8"
+  },
+  {
+    "name": "$neutral-100",
+    "value": "#F2F2F2"
+  },
+  {
+    "name": "$neutral-50",
+    "value": "#F9F9F9"
+  },
+  {
+    "name": "$red-900",
+    "value": "#B9091F"
+  },
+  {
+    "name": "$red-800",
+    "value": "#C8182E"
+  },
+  {
+    "name": "$red-700",
+    "value": "#D91A33"
+  },
+  {
+    "name": "$red-600",
+    "value": "#E72C3A"
+  },
+  {
+    "name": "$red-500",
+    "value": "#F6363B"
+  },
+  {
+    "name": "$red-400",
+    "value": "#F04B55"
+  },
+  {
+    "name": "$red-300",
+    "value": "#E66F76"
+  },
+  {
+    "name": "$red-200",
+    "value": "#EF989C"
+  },
+  {
+    "name": "$red-100",
+    "value": "#FFE9E9"
+  },
+  {
+    "name": "$red-50",
+    "value": "#FFF5F2"
+  },
+  {
+    "name": "$purple-900",
+    "value": "#2D00B9"
+  },
+  {
+    "name": "$purple-800",
+    "value": "#4A00C2"
+  },
+  {
+    "name": "$purple-700",
+    "value": "#5A0CC8"
+  },
+  {
+    "name": "$purple-600",
+    "value": "#6919D0"
+  },
+  {
+    "name": "$purple-500",
+    "value": "#7800D6"
+  },
+  {
+    "name": "$purple-400",
+    "value": "#990BF0"
+  },
+  {
+    "name": "$purple-300",
+    "value": "#A06CE4"
+  },
+  {
+    "name": "$purple-200",
+    "value": "#BB98EB"
+  },
+  {
+    "name": "$purple-100",
+    "value": "#D6C1F3"
+  },
+  {
+    "name": "$purple-50",
+    "value": "#F0E6FA"
+  },
+  {
+    "name": "$yellow-900",
+    "value": "#ED7A00"
+  },
+  {
+    "name": "$yellow-800",
+    "value": "#F0A30C"
+  },
+  {
+    "name": "$yellow-700",
+    "value": "#F1BC19"
+  },
+  {
+    "name": "$yellow-600",
+    "value": "#F2D323"
+  },
+  {
+    "name": "$yellow-500",
+    "value": "#F0E327"
+  },
+  {
+    "name": "$yellow-400",
+    "value": "#F3E84C"
+  },
+  {
+    "name": "$yellow-300",
+    "value": "#F6ED6E"
+  },
+  {
+    "name": "$yellow-200",
+    "value": "#F8F298"
+  },
+  {
+    "name": "$yellow-100",
+    "value": "#FBF7C1"
+  },
+  {
+    "name": "$yellow-50",
+    "value": "#FFFEEB"
+  },
+  {
+    "name": "$brown-900",
+    "value": "#582422"
+  },
+  {
+    "name": "$brown-800",
+    "value": "#69322C"
+  },
+  {
+    "name": "$brown-700",
+    "value": "#783F33"
+  },
+  {
+    "name": "$brown-600",
+    "value": "#894B3D"
+  },
+  {
+    "name": "$brown-500",
+    "value": "#965544"
+  },
+  {
+    "name": "$brown-400",
+    "value": "#C27C69"
+  },
+  {
+    "name": "$brown-300",
+    "value": "#BF8778"
+  },
+  {
+    "name": "$brown-200",
+    "value": "#DBA79A"
+  },
+  {
+    "name": "$brown-100",
+    "value": "#F5C7BB"
+  },
+  {
+    "name": "$brown-50",
+    "value": "#FFE5D6"
+  },
+  {
+    "name": "$green-900",
+    "value": "#006025"
+  },
+  {
+    "name": "$green-800",
+    "value": "#0D7F39"
+  },
+  {
+    "name": "$green-700",
+    "value": "#199044"
+  },
+  {
+    "name": "$green-600",
+    "value": "#25A24F"
+  },
+  {
+    "name": "$green-500",
+    "value": "#2EB159"
+  },
+  {
+    "name": "$green-400",
+    "value": "#53BD72"
+  },
+  {
+    "name": "$green-300",
+    "value": "#73C98A"
+  },
+  {
+    "name": "$green-200",
+    "value": "#9DD8AC"
+  },
+  {
+    "name": "$green-100",
+    "value": "#DCF9D2"
+  },
+  {
+    "name": "$green-50",
+    "value": "#F5FFF2"
+  },
+  {
+    "name": "$indigo-900",
+    "value": "#362D5E"
+  },
+  {
+    "name": "$indigo-800",
+    "value": "#443E71"
+  },
+  {
+    "name": "$indigo-700",
+    "value": "#4C477E"
+  },
+  {
+    "name": "$indigo-600",
+    "value": "#54518A"
+  },
+  {
+    "name": "$indigo-500",
+    "value": "#5B5993"
+  },
+  {
+    "name": "$indigo-400",
+    "value": "#7172A2"
+  },
+  {
+    "name": "$indigo-300",
+    "value": "#898CB2"
+  },
+  {
+    "name": "$indigo-200",
+    "value": "#A9ACC9"
+  },
+  {
+    "name": "$indigo-100",
+    "value": "#CACCDF"
+  },
+  {
+    "name": "$indigo-50",
+    "value": "#EAEBF2"
+  },
+  {
+    "name": "$navy-900",
+    "value": "#36497C"
+  },
+  {
+    "name": "$navy-800",
+    "value": "#45659C"
+  },
+  {
+    "name": "$navy-700",
+    "value": "#4D75AF"
+  },
+  {
+    "name": "$navy-600",
+    "value": "#4E79AD"
+  },
+  {
+    "name": "$navy-500",
+    "value": "#5786C1"
+  },
+  {
+    "name": "$navy-400",
+    "value": "#6EA3D5"
+  },
+  {
+    "name": "$navy-300",
+    "value": "#81B3DC"
+  },
+  {
+    "name": "$navy-200",
+    "value": "#A0C8E7"
+  },
+  {
+    "name": "$navy-100",
+    "value": "#C3DDF1"
+  },
+  {
+    "name": "$navy-50",
+    "value": "#E6F1F9"
+  }
+]

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

@@ -0,0 +1,58 @@
+[
+  {
+    "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)"
+  },
+  {
+    "name": "$ib-shadow-2",
+    "value": "0px 4px 4px rgba(49, 63, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-3",
+    "value": "0px 3px 10px rgba(49, 63, 80, 0.14)"
+  },
+  {
+    "name": "$ib-shadow-4",
+    "value": "0px 1px 10px rgba(49, 63, 80, 0.25)"
+  },
+  {
+    "name": "$ib-shadow-5",
+    "value": "0px 5px 15px rgba(80, 80, 80, 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)"
+  },
+  {
+    "name": "$ib-shadow-r1",
+    "value": "-4px 0px 14px rgba(80, 80, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-l",
+    "value": "2px 0px 7px rgba(80, 80, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-l1",
+    "value": "4px 0px 14px rgba(80, 80, 80, 0.1)"
+  }
+]

package/src/components/Alert/Alert.stories.js

@@ -25,45 +25,53 @@ const Template = (args) => ({
   },
   template: `
   <ib-alert v-bind="args">
-    Alert message
+    {{args.default}}
+
+    <template #link v-if="args.link">
+      <span v-html="args.link"></span>
+    </template>
   </ib-alert>`,
 });
 
 export const Default = Template.bind({});
-
+Default.args = {
+  default: "Default message",
+};
 const Type = (args) => ({
   components: { IbAlert },
   setup() {
     return { args };
   },
   template: `
-    <ib-alert style="margin-bottom: 5px;">Alert message</ib-alert>
-    <ib-alert style="margin-bottom: 5px;" type="warning">Warning message</ib-alert>
-    <ib-alert style="margin-bottom: 5px;" type="success">Success message</ib-alert>
-    <ib-alert type="info">Info message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;">
+      {{args.default}}
+    </ib-alert>
+
+    <ib-alert style="margin-bottom: 5px;" type="warning">
+      {{args.default}}
+    </ib-alert>
+    
+    <ib-alert style="margin-bottom: 5px;" type="success">
+      {{args.default}}
+    </ib-alert>
+    
+    <ib-alert type="info">
+      {{args.default}}
+    </ib-alert>
   `,
 });
 
 export const Types = Type.bind({});
+Types.args = {
+  default: "Default message",
+};
 Type.parameters = { controls: { disable: true } };
 
-const LargeTemplate = (args) => ({
-  components: { IbAlert },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ib-alert v-bind="args">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      <template #link>
-        <a href="#" class="ib-standalone-link">View Server</a>
-      </template>
-    </ib-alert>`,
-});
-
-export const LargeAlert = LargeTemplate.bind({});
+export const LargeAlert = Template.bind({});
 LargeAlert.args = {
   showCloseButton: true,
   showIcon: true,
   title: "It is Title",
+  default: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  link: `<a class='ib-standalone-link'>View Server</a>`,
 };

package/src/components/Alert/readme.mdx

@@ -54,7 +54,6 @@ Limit action labels to one or two words. For a list of recommended action labels
 ### Default
 <Canvas of={AlertStories.Default} />
 
-
 ### All alert types
 <Canvas of={AlertStories.Types} />
 

package/src/components/Badge/readme.mdx

@@ -1,6 +1,7 @@
 # IbBadge
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as BadgeStories from "./Badge.stories";
 
 The `IbBadge` component is a small component used to display a notification badge with a count or indicator on a parent component.
 ### Usage
@@ -28,11 +29,7 @@ The IbBadge component does not have any slots.
 The IbBadge component does not emit any events.
 
 ### Default
-<Canvas>
-    <Story id="badge--default"/>
-</Canvas>
+<Canvas of={BadgeStories.Default} />
 
 ### Large
-<Canvas>
-    <Story id="badge--large"/>
-</Canvas>
+<Canvas of={BadgeStories.Large} />