@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/Button/button.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 // Primary button colors
 $primary-btn-background: $blue-800;
@@ -136,6 +136,7 @@ $disabled-btn-color: $neutral-500;
         background: $tertiary-btn-focus-background;
       }
 
+      &.active,
       &:active {
         color: $tertiary-btn-active-color;
         background: $tertiary-btn-active-background;
@@ -151,6 +152,7 @@ $disabled-btn-color: $neutral-500;
         background: $ghost-btn-hover-background;
       }
 
+      &.active,
       &:active {
         color: $ghost-btn-active-color;
         background: $ghost-btn-active-background;
@@ -209,6 +211,7 @@ $disabled-btn-color: $neutral-500;
     display: block;
     text-align: center;
     width: 100%;
+    line-height: 36px;
   }
 
   &.ib-btn-disabled {
@@ -216,6 +219,8 @@ $disabled-btn-color: $neutral-500;
     &:disabled {
       background: $disabled-btn-background;
       color: $disabled-btn-color;
+      cursor: auto;
+      pointer-events: none;
     }
   }
 }

package/src/components/Chips/Chips.stories.js

@@ -0,0 +1,30 @@
+import IbChips from "./Chips.vue";
+import Icon from "../Icon.vue";
+
+export default {
+title: "Chips",
+  component: IbChips,
+}
+
+const Template = (args) => ({
+  components: { IbChips },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args">Total Visits: 0-20</ib-chips>',
+});
+
+const TemplateWithIcon = (args) => ({
+  components: { IbChips, Icon },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args"><template #icon><icon name="people-outline" /></template>Users</ib-chips>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const ChipsWithIcon = TemplateWithIcon.bind({});
+ChipsWithIcon.args = {};
+

package/src/components/Chips/Chips.vue

@@ -0,0 +1,125 @@
+<template>
+  <button
+    :class="{
+      'ib-chips': true,
+      'ib-chips-active': active,
+      'ib-chips-error': error,
+      'ib-chips-disabled': disabled,
+    }"
+    :disabled="disabled"
+  >
+    <span v-if="hasIcon" class="ib-chips-icon-wrapper">
+      <slot class="ib-chips-icon" name="icon" />
+    </span>
+
+    <slot />
+
+    <span class="ib-chips-close-wrapper" v-if="showCloseIcon">
+      <icon class="ib-chips-icon" name="close-outline" />
+    </span>
+  </button>
+</template>
+
+<script>
+import Icon from "../Icon.vue";
+
+export default {
+  props: {
+    showCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasIcon() {
+      return this.$slots?.icon;
+    },
+  },
+  components: {
+    Icon,
+  },
+};
+</script>
+<style lang="scss" scoped>
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
+
+.ib-chips {
+  @include Ib-H4-medium;
+  padding: 8.5px 10px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  background-color: $gray-100;
+  color: $neutral-600;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  .ib-chips-close-wrapper,
+  .ib-chips-icon-wrapper {
+    width: 16px;
+    height: 16px;
+  }
+
+  .ib-chips-icon-wrapper {
+    margin-right: 5px;
+  }
+  .ib-chips-close-wrapper {
+    margin-left: 5px;
+  }
+
+  .ib-chips-icon {
+    color: inherit;
+    font-size: 16px;
+  }
+
+  &.ib-chips-active {
+    background-color: $blue-200;
+    color: $blue-800;
+  }
+
+  &.ib-chips-error {
+    border-color: $red-800;
+    color: $red-800;
+    background-color: $red-50;
+  }
+
+  &.ib-chips-disabled {
+    border-color: transparent!important;
+    color: $neutral-500!important;
+    background-color: $gray-100!important;
+    cursor: default;
+  }
+
+  &:hover {
+    border-color: $blue-300;
+    background-color: $blue-100;
+    color: $blue-700;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $blue-200;
+    color: $blue-900;
+  }
+
+  &:focus {
+    @include focus(2px);
+  }
+}
+</style>

package/src/components/Dropdown/Dropdown.vue

@@ -221,8 +221,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $menu-shadow: $ib-shadow-4;
 $menu-bg: $white;
@@ -286,7 +286,7 @@ $menu-bg: $white;
 }
 </style>
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-trigger {
   &.active {

package/src/components/Dropdown/DropdownDivider.vue

@@ -5,7 +5,7 @@
 <script></script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-divider {
   height: 1px;

package/src/components/Dropdown/DropdownItem.vue

@@ -1,12 +1,17 @@
 <template>
   <li class="dropdown-item-wrapper">
     <component
-      :is="href ? 'a' : 'div'"
+      :is="component"
       :class="checked ? 'active' : ''"
       v-bind="attrs"
       tabindex="0"
     >
-      <slot ref="slot"></slot>
+      <p>
+        <div v-show="$slots.icon" class="dropdown-item-icon">
+          <slot name="icon"></slot>
+        </div>
+        <slot ref="slot"></slot>
+      </p>
     </component>
   </li>
 </template>
@@ -21,8 +26,20 @@ export default {
     href: {
       type: String,
     },
+    to: {
+      type: [String, Object],
+    }
   },
   computed: {
+    component() {
+      if (this.href) {
+        return "a";
+      } else if (this.to) {
+        return "router-link";
+      } else {
+        return "div";
+      }
+    },
     attrs() {
       const attrs = {
         class: "ib-dropdown-item",
@@ -32,14 +49,18 @@ export default {
         attrs.href = this.href;
       }
 
+      if (this.to) {
+        attrs.to = this.to;
+      }
+
       return attrs;
     },
   },
 };
 </script>
 
-<style lang="scss">
-@import "../../assets/scss/mixins/dropdown-list-item.scss";
+<style lang="scss" scoped>
+@use "../../assets/scss/mixins/dropdown-list-item.scss" as *;
 @include DropdownListItem;
 
 .dropdown-item-wrapper {
@@ -50,8 +71,9 @@ export default {
   display: flex;
   align-items: center;
 
-  .ib-icon {
+  .dropdown-item-icon {
     font-size: 16px;
+    height: 16px;
     color: inherit;
     margin-right: 15px;
   }

package/src/components/Dropdown/DropdownList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown-list-wrapper">
+  <div class="dropdown-list-wrapper" :class="class">
     <ib-dropdown
       :horizontal="horizontal"
       :vertical="vertical"
@@ -50,6 +50,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    class: {
+      type: String,
+      default: "",
+    },
   },
   methods: {
     proxyEvents(eventInfo) {
@@ -73,7 +77,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-list-wrapper {
   .list {

package/src/components/Form/CharactersCount.vue

@@ -3,17 +3,13 @@
     <template v-if="!characterLength">
       <p class="val-limit">Max {{ characterLimit }}</p>
     </template>
-    <template v-else-if="characterLimit > characterLength">
-      <p class="val-length">{{ characterLimit - characterLength }}</p>
+    <template v-else-if="characterLimit >= characterLength">
+      <p class="val-length">{{ characterLength }}</p>
       /
       <p class="val-limit">{{ characterLimit }}</p>
     </template>
-    <template v-else-if="characterLimit === characterLength">0</template>
-
     <template v-else>
-      <p class="val-length val-limited">
-        {{ characterLimit - characterLength }}
-      </p>
+      <p class="val-length error">{{ characterLimit - characterLength }}</p>
     </template>
   </div>
 </template>
@@ -34,8 +30,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
 
 $textarea-character-count-color: $gray-600;
 $textarea-character-count-limited-color: $red-900;
@@ -51,5 +47,12 @@ $textarea-character-count-limited-color: $red-900;
       color: $textarea-character-count-limited-color;
     }
   }
+
+  .val-length,
+  .val-limit {
+    &.error {
+      color: $textarea-character-count-limited-color;
+    }
+  }
 }
 </style>

package/src/components/Form/Checkbox/Checkbox.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $checkbox-bg-disabled: $gray-100;
 $checkbox-filed-bg-disabled: $neutral-500;
@@ -45,7 +45,7 @@ $checkbox-bg-indeterminate: $blue-800;
     align-items: center;
     cursor: pointer;
   }
-  
+
   /* Hide default HTML checkbox */
   input {
     display: none;

package/src/components/Form/Checkbox/Checkbox.vue

@@ -1,9 +1,11 @@
 <template>
-  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class" :aria-checked="checked ? true : false">
+  <div class="ib-checkbox-wrapper" :class="this.$attrs.class">
     <label
       v-bind="attrs"
+      role="checkbox"
       :for="id"
       :tabindex="disabled | disableFocus ? -1 : 0"
+      :aria-checked="checked ? true : false"
       @click.prevent.stop="onChange"
       @keypress.prevent="onChange"
     >
@@ -12,12 +14,22 @@
         type="checkbox"
         :name="name"
         :id="id"
-        :value="value"
+        :value="value ?? 1"
         :disabled="disabled"
         :required="required"
         v-model="checked"
         @click="onChange"
       />
+
+      <input
+        v-if="!value && !checked"
+        value="0"
+        type="hidden"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+      />
+
       <div class="ib-checkbox-body">
         <span
           v-if="labelPosition === 'left' && label.length"
@@ -72,10 +84,10 @@ export default {
       },
     },
     value: {
-      default: 1,
+      type: [String, Number],
     },
     modelValue: {
-      type: Boolean,
+      type: [Boolean, String],
     },
     isChecked: {
       type: Boolean,
@@ -108,20 +120,21 @@ export default {
     },
     modelValue(value) {
       this.$emit("update:modelValue", this.modelValue);
-      this.checked = value;
+      this.checked = value === "0" ? false : Boolean(value);
     },
   },
   data() {
+    const value = this.modelValue
+      ? (this.modelValue === "0" ? false : Boolean(this.modelValue))
+      : this.isChecked;
+
     return {
-      checked: this.modelValue ? this.modelValue : this.isChecked,
+      checked: value,
     };
   },
   methods: {
     onChange(e) {
-      if (this.readonly) {
-        e.preventDefault();
-        return;
-      };
+      if (this.disabled || this.readonly) return;
 
       this.checked = !this.checked;
       this.$emit("update:modelValue", this.checked);
@@ -157,6 +170,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "./Checkbox.scss";
+<style lang="scss" scoped>
+@use "./Checkbox.scss" as *;
 </style>

package/src/components/Form/CheckboxGroup/CheckboxGroup.vue

@@ -7,6 +7,8 @@
       v-if="labelText.length"
       class="ib-checkbox-group-label"
       :required="required"
+      :info-text="infoText"
+      :tooltip-position="tooltipPosition"
     >
       {{ labelText }}
     </ib-label>
@@ -44,6 +46,17 @@ export default {
       type: String,
       default: "",
     },
+    infoText: {
+      type: String,
+      default: ""
+    },
+    height: {
+      type: String,
+      default: '290px'
+    },
+    tooltipPosition: {
+      type: String
+    }
   },
   components: {
     IbLabel,
@@ -62,6 +75,8 @@ export default {
   .ib-checkbox-group-content {
     display: flex;
     flex-direction: column;
+    flex-wrap: wrap;
+    max-height: v-bind(height);
     .ib-radio:not(:last-child),
     .ib-checkbox:not(:last-child) {
       margin-bottom: 10px;

package/src/components/Form/CheckboxGroup/readme.mdx

@@ -17,6 +17,8 @@ The IbCheckboxGroup component is a wrapper component that helps to group and dis
 | required     | Boolean | false   | If true, a required indicator will be displayed next to the label       |
 | horizontal   | Boolean | false   | If true, the checkboxes or radio buttons will be displayed horizontally |
 | errorMessage | String  | ''      | Responsible for displaying an error                                     |
+| infoText     | String  | ''      | The text that will be displayed inside the tooltip when the information button is hover or have focus. |
+| maxHeight    | String  | '290px' | Max height of container with radio elements.                                |
 
 ### Slots