@avakhula/ui 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,144 +1,32 @@
 <template>
-  <ib-pagination
-    current="1"
-    countRows="222"
-    limitSelector="25"
-    labelInput="Go to:"
-    labelSelect="Rows per page:"
-    @select="() => console.log('paggination call emit select')"
-    @set-limit="() => console.log('paggination call emit set limit')"
-
-    />
-
-  <ib-select
-    v-model="test"
-    :options="options"
-    :is-required="true"
-    :is-multiple="false"
-    @close="onClose"
-  />
-
-  <button @click="changeValue">Change value</button>
-  <button @click="changeValueInProps">Change value in props</button>
-
-  <ib-checkbox @input="test1" class="hello" />
-
-  <ib-button style="margin-bottom: 1020px;" v-tooltip="'test'" >HOVER ME</ib-button>
-  <ib-button style="margin-bottom: 20px;" v-tooltip="'second test'" >HOVER ME</ib-button>
-
-  <p class="test" v-TextOverflowTooltipTooltip="'test'">
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore maxime porro exercitationem. Deserunt temporibus quasi rerum numquam tenetur dolor illum nemo
-  </p>
-
+  test
+  <ib-panel>
+    <template #title>
+      Some title
+    </template>
+    <template #head-content>Some long long description</template>
+    <template #body>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+      <p>tests</p>
+    </template>
+  </ib-panel>
 </template>
 
 <script>
-import IbButton from "./components/Button/Button.vue"
-import { TooltipDirective as Tooltip} from "./directives/tooltip/tooltip"
-import { TextOverflowTooltipDirective as TextOverflowTooltipTooltip} from "./directives/tooltip/textOverflowTooltip"
-
-import IbSelect from "./components/TreeSelect/Select.vue";
-import IbCheckbox from "./components/Form/Checkbox/Checkbox.vue";
-import IbPagination from "./components/Pagination/Pagination.vue";
-const testData = [
-  // {
-  //   id: "1",
-  //   title: "Education",
-  //   is_category: true,
-  //   initiallyVisible: true,
-  //   visible: true,
-  //   isDisabled: false,
-  //   checked: true,
-  //   isChildrenVisible: true,
-  //   },
-  {
-    id: 2,
-    title: "test role",
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-  },
-  // {
-  //   id: "2",
-  //   title: "Education 2",
-  //   is_category: true,
-  //   initiallyVisible: true,
-  //   visible: true,
-  //   isDisabled: false,
-  //   checked: false,
-  //   isChildrenVisible: true,
-  // },
-  // {
-  //   id: "3",
-  //   title: "Education 3",
-  //   is_category: true,
-  //   initiallyVisible: true,
-  //   visible: true,
-  //   isDisabled: false,
-  //   checked: false,
-  //   isChildrenVisible: true,
-  // },
-  // {
-  //   id: "4",
-  //   title: "Education 4",
-  //   is_category: true,
-  //   initiallyVisible: true,
-  //   visible: true,
-  //   isDisabled: false,
-  //   checked: false,
-  //   isChildrenVisible: true,
-  // },
-];
-
+// import IbPanel from "./components/Panel/Panel.vue"
+import { IbPanel } from "./index";
 export default {
-  data() {
-    return {
-      options: testData,
-      test: testData[0].id,
-    };
-  },
-  directives: {
-    Tooltip,
-    TextOverflowTooltipTooltip,
-  },
-  watch: {
-    test(val) {
-      console.log("test", val);
-    },
-  },
   components: {
-    IbButton,
-    IbSelect,
-    IbCheckbox,
-    IbPagination,
-  },
-  methods: {
-    test1() {
-      console.log("test 1");
-    },
-
-    changeValue() {
-      console.log("test");
-      this.test = "";
-    },
-    changeValueInProps() {
-      console.log("test");
-      this.test = testData[0].id;
-    },
-    onClose(a) {
-      console.log("onClose", a)
-    }
+    IbPanel,
   },
 };
 </script>
-
-<style>
-.test {
-  overflow: hidden;
-display: -webkit-box;
--webkit-line-clamp: 1;
--webkit-box-orient: vertical;
-
-}
+<style lang="scss">
 </style>

package/src/components/Accordion/Accordion.vue

@@ -20,10 +20,12 @@
 </template>
 
 <script>
+import expandAnimation from "../../mixins/expandAnimation";
 import IbIcon from "../Icon.vue";
 
 export default {
   name: "IbAccordion",
+  mixins: [expandAnimation],
   props: {
     isOpen: {
       type: Boolean,
@@ -49,38 +51,6 @@ export default {
         this.$emit("close", this.isActive);
       }
     },
-    enter(element) {
-      const width = getComputedStyle(element).width;
-
-      element.style.width = width;
-      element.style.position = "absolute";
-      element.style.visibility = "hidden";
-      element.style.height = "auto";
-
-      const height = getComputedStyle(element).height;
-
-      element.style.width = null;
-      element.style.position = null;
-      element.style.visibility = null;
-      element.style.height = 0;
-      getComputedStyle(element).height;
-      requestAnimationFrame(() => {
-        element.style.height = height;
-      });
-    },
-    afterEnter(element) {
-      element.style.height = "auto";
-    },
-    leave(element) {
-      const height = getComputedStyle(element).height;
-
-      element.style.height = height;
-      getComputedStyle(element).height;
-
-      requestAnimationFrame(() => {
-        element.style.height = 0;
-      });
-    },
   },
   components: {
     IbIcon,

package/src/components/Modal/Modal.stories.js

@@ -1,4 +1,5 @@
 import IbModal from "./Modal.vue";
+import { modalSizes } from "./constants";
 import IbButton from "../Button/Button.vue";
 import IbButtonGroup from "../ButtonGroup/ButtonGroup.vue";
 import readme from "./readme.mdx";
@@ -7,6 +8,10 @@ export default {
   title: "Modal",
   component: IbModal,
   argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(modalSizes),
+    },
     onOpen: { action: "open" },
     onClose: { action: "close" },
   },

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" v-outside="clickOutside">
+      <div class="modal-body" :style="bodyStyles" v-outside="clickOutside">
         <ib-icon-button
           v-if="showCloseButton"
           class="modal-close-icon"
@@ -40,6 +40,7 @@
 <script>
 import IbIconButton from "../IconButton/IconButton.vue";
 import IbIcon from "../Icon.vue";
+import { modalSizes } from "./constants";
 import { OutsideDirective as Outside } from "../../directives/outside/outside";
 import { ESC_KEY_CODE, TAB_KEY_CODE } from "../../constants/keyCodes";
 
@@ -67,6 +68,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    size: {
+      type: String,
+      default: modalSizes.S,
+    },
   },
   watch: {
     active(val) {
@@ -139,6 +144,34 @@ export default {
     },
   },
   computed: {
+    bodyStyles() {
+      const styleList = {};
+
+      if (this.size === modalSizes.S) {
+        styleList.width = "380px";
+        styleList.minHeight = "160px";
+        styleList.maxHeight = "680px";
+      }
+
+      if (this.size === modalSizes.M) {
+        styleList.width = "600px";
+        styleList.minHeight = "260px";
+        styleList.maxHeight = "680px";
+      }
+
+      if (this.size === modalSizes.L) {
+        styleList.width = "850px";
+        styleList.minHeight = "400px";
+        styleList.maxHeight = "680px";
+      }
+
+      if (this.size === modalSizes.XL) {
+        styleList.width = "80vw";
+        styleList.maxWidth = "1400px";
+      }
+
+      return styleList;
+    },
     hasTrigger() {
       return !!this.$slots.trigger;
     },
@@ -198,11 +231,12 @@ body.modal-open {
   left: 50%;
   transform: translate(-50%, -50%);
   position: relative;
-  width: fit-content;
   min-width: 380px;
   border-radius: 8px;
   max-width: calc(100% - 40px);
   box-shadow: $modal-shadow;
+  display: flex;
+  flex-direction: column;
 
   .modal-header {
     @include Ib-H2-medium;
@@ -226,7 +260,8 @@ body.modal-open {
   }
 
   .modal-footer {
-    margin-top: 20px;
+    margin-top: auto;
+    padding-top: 20px;
     display: flex;
     justify-content: flex-end;
   }

package/src/components/Modal/constants.js

@@ -0,0 +1,6 @@
+export const modalSizes = {
+  S: "s",
+  M: "m",
+  L: "l",
+  XL: "xl",
+};

package/src/components/Modal/readme.mdx

@@ -41,6 +41,7 @@ Modal container is a flexible component and its sizing depends on specific useca
 | classList       | String  | ""            | Classes for modal.                                 |
 | stopPropagation | Boolean | false         | Disable modal close on click outside and press ESC |
 | showCloseButton | Boolean | True          | Whether is show close button                       |
+| Size            | String  | s, m, l, xl   | Determines the size of the modal body              |
 
 ### Events
 
@@ -73,4 +74,4 @@ Modal content should never scroll horizontally; instead, use a larger size modal
 
 ### Default
 
-<Canvas of={Modal.Default}/>
+<Canvas of={ModalStories.Default}/>

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

@@ -0,0 +1,43 @@
+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) => ({
+  components: { IbPanel },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-panel v-bind="args">
+    <template #title>
+      Some title
+    </template>
+    <template #head-content>
+      Some long long description
+    </template>
+    <template #body>
+      <p>item 1</p>
+      <p>item 2</p>
+      <p>item 3</p>
+      <p>item 4</p>
+      <p>item 5</p>
+      <p>item 6</p>
+      <p>item 7</p>
+      <p>item 8</p>
+      <p>item 9</p>
+    </template>
+  </ib-panel>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/Panel/Panel.vue

@@ -0,0 +1,114 @@
+<template>
+  <div :class="classList">
+    <div class="panel-head">
+      <div class="head-title">
+        <slot name="title" />
+      </div>
+      <div class="divider"></div>
+      <div class="head-content">
+        <slot name="head-content" />
+      </div>
+    </div>
+    <Transition
+      name="expand"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @leave="leave"
+    >
+      <div v-show="isOpen" class="panel-body">
+        <slot name="body"></slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import expandAnimation from "../../mixins/expandAnimation";
+import { panelVariant } from "./constants";
+
+export default {
+  name: "IbPanel",
+  mixins: [expandAnimation],
+  props: {
+    isOpen: {
+      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>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 1s ease-in-out;
+  overflow: hidden;
+}
+
+.expand-enter,
+.expand-leave-to {
+  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 {
+  border: 1px solid $panel-border-color;
+  border-radius: 4px;
+
+  .panel-head {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: 15px;
+
+    .head-title {
+      @include Ib-H3-medium;
+      color: $panel-title-color;
+      flex: none;
+    }
+
+    .divider {
+      margin: 0 10px;
+      width: 1px;
+      height: 22px;
+      background-color: $panel-divider-color;
+    }
+
+    .head-content {
+      @include Ib-H4-regular;
+      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/Panel/constants.js

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

package/src/index.js

@@ -24,6 +24,7 @@ export { default as IbPagination } from "./components/Pagination/Pagination.vue"
 export { default as IbLimitSelector } from "./components/Pagination/LimitSelector.vue";
 export { default as IbProgressBar } from "./components/ProgressBar/ProgressBar.vue";
 export { default as IbStatusIndicator } from "./components/StatusIndicator/StatusIndicator.vue";
+export { default as IbPanel } from "./components/Panel/Panel.vue";
 
 // FORM
 export { default as IbInput } from "./components/Form/Input/Input.vue";

package/src/mixins/expandAnimation.js

@@ -0,0 +1,38 @@
+const expandAnimation = {
+  methods: {
+    enter(element) {
+      const width = getComputedStyle(element).width;
+
+      element.style.width = width;
+      element.style.position = "absolute";
+      element.style.visibility = "hidden";
+      element.style.height = "auto";
+
+      const height = getComputedStyle(element).height;
+
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
+      getComputedStyle(element).height;
+      requestAnimationFrame(() => {
+        element.style.height = height;
+      });
+    },
+    afterEnter(element) {
+      element.style.height = "auto";
+    },
+    leave(element) {
+      const height = getComputedStyle(element).height;
+
+      element.style.height = height;
+      getComputedStyle(element).height;
+
+      requestAnimationFrame(() => {
+        element.style.height = 0;
+      });
+    },
+  },
+};
+
+export default expandAnimation;

package/src/stories/link.readme.mdx

@@ -1,7 +1,7 @@
 # IbLink
 
 import { Canvas } from "@storybook/addon-docs";
-import * as LinkStories from "./Link.stories";
+import * as LinkStories from "./link.stories";
 
 ## Inline Link