@avakhula/ui 0.0.10

package/src/components/Dropdown/readme.mdx

@@ -0,0 +1,88 @@
+# IbDropdown
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+### Default
+
+<Canvas>
+  <Story id="dropdown--default" />
+</Canvas>
+
+### Props
+
+| Prop name     | Type    | Default  | Description                                                                         |
+| ------------- | ------- | -------- | ----------------------------------------------------------------------------------- |
+| vertical      | String  | 'bottom' | The vertical position of the dropdown. Can be either 'top' or 'bottom.              |
+| horizontal    | String  | 'left'   | The horizontal position of the dropdown. Can be either 'left', 'right' or 'center'. |
+| triggerClass  | String  | ''       | Custom classes for the trigger element.                                             |
+| isOpened      | Boolean | false    | Whether the dropdown is initially open or closed.                                   |
+| showCloseIcon | Boolean | false    | Whether to show the close icon on the dropdown.                                     |
+| closeOnClick  | Boolean | false    | Whether to close the dropdown on click inside the dropdown.                         |
+| disabled      | Boolean | false    | Whether the dropdown is disabled.                                                   |
+| triggerType   | String  | 'click'  | The type of the trigger event. Can be either 'click' or 'hover'.                    |
+| destroyOnHide | Boolean | false    | Whether to destroy the dropdown content when the dropdown is hidden.                |
+
+### Slots
+
+| Slot name  | Description                                                                                                  |
+| ---------- | ------------------------------------------------------------------------------------------------------------ |
+| trigger    | The content of the trigger element.                                                                          |
+| body       | The content of the dropdown body. The slot scope has isOpenedState to know if the dropdown is opened or not. |
+| close      | The content of the close button, is show when a is true.                                                     |
+| footerslot | The content that will be displayed as the footer of the dropdown.                                            |
+| before     | The content that will be displayed before the dropdown.                                                      |
+
+### Events
+
+| Event name | Parameters | Description                          |
+| ---------- | ---------- | ------------------------------------ |
+| open       |            | Emitted when the dropdown is opened. |
+| close      |            | Emitted when the dropdown is closed. |
+
+### Global Events
+
+| Event name    | Parameters               | Description                          |
+| ------------- | ------------------------ | ------------------------------------ |
+| dropdown:open | this (dropdown instanse) | Emitted when the dropdown is opened. |
+
+# IbDropdownList
+
+Dropdowns present a list of options from which a user can select one option, or several. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content.
+
+There are two different variants of drop-downs that support various kinds of functionality— Single-Select Drop-Down, Multi-Select.
+
+### When to use:
+
+- Dropdowns can be used in forms on full pages, in modals, or on side panels. The dropdown component is used to filter or sort contents on a page. It is a stylized version of the select component, and can be styled as needed.
+
+### When not to use:
+
+- It is best practice not to use a dropdown if there are two options to choose from. In this case, use a radio button group instead.
+  Do not nest dropdowns or use them to display overly complex information. Keep option selections as straight forward as possible.
+
+<Canvas>
+  <Story id="dropdown--dropdown-list" />
+</Canvas>
+
+### Props
+
+| Prop name     | Type    | Default  | Description                                                                         |
+| ------------- | ------- | -------- | ----------------------------------------------------------------------------------- |
+| vertical      | String  | 'bottom' | The vertical position of the dropdown. Can be either 'top' or 'bottom.              |
+| horizontal    | String  | 'left'   | The horizontal position of the dropdown. Can be either 'left', 'right' or 'center'. |
+| isOpened      | Boolean | false    | Whether the dropdown is initially open or closed.                                   |
+| disabled      | Boolean | false    | Whether the dropdown is disabled.                                                   |
+| closeOnClick  | Boolean | false    | Whether to close the dropdown on click inside the dropdown.                         |
+
+
+### Events 
+This component duplicate all dropdown events
+
+### Slots
+
+| Slot name  | Description                                                                                                  |
+| ---------- | ------------------------------------------------------------------------------------------------------------ |
+| trigger    | The content of the trigger element.                                                                          |
+| body       | The content of the dropdown body. The slot scope has isOpenedState to know if the dropdown is opened or not. |
+
+TODO: Add docs for diveder and dropdown-item.

package/src/components/Form/CharactersCount.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="character-count">
+    <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>
+      /
+      <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>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    characterLimit: {
+      type: [String, Number],
+      required: true,
+    },
+    characterLength: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+
+$textarea-character-count-color: $gray-600;
+$textarea-character-count-limited-color: $red-900;
+
+.character-count {
+  display: flex;
+  color: $textarea-character-count-color;
+
+  p {
+    @include Ib-H4-medium;
+
+    &.val-limited {
+      color: $textarea-character-count-limited-color;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,226 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$checkbox-bg-disabled: $gray-100;
+$checkbox-border-disabled: $neutral-500;
+$checkbox-border: $gray-500;
+$checkbox-bg: transparent;
+$checkbox-checkmark: $neutral-900;
+$checkbox-border-hover: $blue-300;
+$checkbox-bg-hover: $blue-100;
+$checkbox-border-active: transparent;
+$checkbox-bg-active: $blue-300;
+$checkbox-text-color-disabled: $neutral-500;
+$checkbox-bg-error: transparent;
+$checkbox-border-error: $red-800;
+$checkbox-bg-error-hover: $red-50;
+$checkbox-border-error-hover: $red-700;
+$checkbox-bg-error-active: $blue-300;
+$checkbox-border-error-active: $blue-300;
+$checkbox-bg-filed: $blue-800;
+$checkbox-border-filed: $blue-800;
+$checkbox-bg-filed-hover: $blue-700;
+$checkbox-border-filed-hover: $blue-700;
+$checkbox-bg-filed-active: $blue-900;
+$checkbox-border-filed-active: $blue-900;
+$checkbox-bg-filed-disabled: $neutral-500;
+$checkbox-border-filed-disabled: $neutral-500;
+$checkbox-border-indeterminate: $blue-800;
+$checkbox-bg-indeterminate: $blue-800;
+
+.ib-checkbox {
+  outline: none;
+
+  &:focus {
+    .ib-checkbox-body {
+      border-radius: 4px;
+      @include outline(2px);
+    }
+  }
+
+  .ib-checkbox-body {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  
+  /* Hide default HTML checkbox */
+  input {
+    display: none;
+  }
+
+  &-label {
+    @include Ib-H4-regular;
+    margin-left: 15px;
+
+    span.required {
+      color: $red-800;
+    }
+
+    &.ib-checkbox-label-left {
+      margin-left: 0;
+      margin-right: 13px;
+    }
+  }
+
+  &-input {
+    border-radius: 2px;
+    height: 16px;
+    width: 16px;
+    border: 1.25px solid;
+    border-color: $checkbox-border;
+    background-color: $checkbox-bg;
+    color: $checkbox-checkmark;
+    transition: border 0.3s, background-color 0.3s, border 0.3s;
+    position: relative;
+
+    ion-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 12px;
+    }
+  }
+
+  .ib-checkbox-body {
+    &:hover {
+      .ib-checkbox-input {
+        border-width: 2px;
+        border-color: $checkbox-border-hover;
+        background-color: $checkbox-bg-hover;
+      }
+    }
+
+    &:active {
+      .ib-checkbox-input {
+        border-color: $checkbox-border-active;
+        background-color: $checkbox-bg-active;
+      }
+    }
+  }
+
+  &.ib-checkbox-disabled {
+    cursor: not-allowed;
+
+    .ib-checkbox-input {
+      background-color: $checkbox-bg-disabled;
+      border-color: $checkbox-border-disabled;
+    }
+
+    &:focus {
+      .ib-checkbox-body  {
+        outline: none!important;
+      }
+    }
+
+    .ib-checkbox-body {
+      cursor: default;
+
+      &:hover {
+        .ib-checkbox-input {
+          border-width: 1.25px;
+          background-color: $checkbox-bg-disabled;
+          border-color: $checkbox-border-disabled;
+        }
+      }
+
+      &:active {
+        .ib-checkbox-input {
+          background-color: $checkbox-bg-disabled;
+          border-color: $checkbox-border-disabled;
+        }
+      }
+    }
+
+    .ib-checkbox-label {
+      color: $checkbox-text-color-disabled;
+    }
+  }
+
+  &.ib-has-error {
+    .ib-checkbox-input {
+      border-width: 2px;
+      background-color: $checkbox-bg-error;
+      border-color: $checkbox-border-error;
+    }
+
+    .ib-checkbox-body {
+      &:hover {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-error-hover;
+          background-color: $checkbox-bg-error-hover;
+        }
+      }
+
+      &:active {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-error-active;
+          background-color: $checkbox-bg-error-active;
+        }
+      }
+    }
+  }
+
+  &.ib-checkbox-filled {
+    .ib-checkbox-input {
+      border-color: $checkbox-border-filed;
+      background-color: $checkbox-bg-filed;
+
+      ion-icon {
+        color: $white;
+      }
+    }
+
+    .ib-checkbox-body {
+      &:hover {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-filed-hover;
+          background-color: $checkbox-bg-filed-hover;
+        }
+      }
+
+      &:active {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-filed-active;
+          background-color: $checkbox-bg-filed-active;
+        }
+      }
+    }
+
+    &.checkbox-disabled {
+      .checkbox-input {
+        background-color: $checkbox-bg-filed-disabled;
+        border-color: $checkbox-border-filed-disabled;
+      }
+    }
+  }
+
+  &.ib-checkbox-indeterminate {
+    .ib-checkbox-input {
+      border-color: $checkbox-border-indeterminate;
+      background-color: $checkbox-bg-indeterminate;
+
+      ion-icon {
+        color: $white;
+      }
+    }
+
+    .ib-checkbox-body {
+      &:hover {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-filed-hover;
+          background-color: $checkbox-bg-filed-hover;
+        }
+      }
+
+      &:active {
+        .ib-checkbox-input {
+          border-color: $checkbox-border-filed-active;
+          background-color: $checkbox-bg-filed-active;
+        }
+      }
+    }
+  }
+}

package/src/components/Form/Checkbox/Checkbox.stories.js

@@ -0,0 +1,63 @@
+import IbCheckbox from "./Checkbox.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Checkbox",
+  component: IbCheckbox,
+  argTypes: {
+    onInput: {},
+    labelPosition: {
+      control: { type: "select" },
+      options: ["right", "left"],
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbCheckbox },
+  setup() {
+    return { args };
+  },
+  template: '<ib-checkbox v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Default",
+};
+
+const IndeterminateTemplate = (args) => ({
+  components: { IbCheckbox },
+  setup() {
+    return { args };
+  },
+  template: '<ib-checkbox :is-checked="null" label="Indeterminate" />',
+});
+
+export const Indeterminate = IndeterminateTemplate.bind({});
+Indeterminate.args = {};
+
+Indeterminate.parameters = {
+  docs: {
+    description: {
+      story:
+        "To get **Indeterminate** state need set `isChecked` props to `null`",
+    },
+  },
+};
+
+const ErrorTemplate = (args) => ({
+  components: { IbCheckbox },
+  setup() {
+    return { args };
+  },
+  template: '<ib-checkbox :error="true" label="Remember me" />',
+});
+
+export const Error = ErrorTemplate.bind({});
+Indeterminate.args = {};

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

@@ -0,0 +1,128 @@
+<template>
+  <label
+    :class="classes"
+    :for="id"
+    :tabindex="disabled ? -1 : 0"
+    @keypress.prevent="onChange"
+  >
+    <input
+      tabindex="-1"
+      type="checkbox"
+      :name="name"
+      :id="id"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      @click="onChange"
+    />
+    <div class="ib-checkbox-body">
+      <span
+        v-if="labelPosition === 'left' && label.length"
+        class="ib-checkbox-label"
+        :class="{ 'ib-checkbox-label-left': labelPosition === 'left' }"
+      >
+        <span v-if="required" class="required">*</span>
+        {{ label }}
+      </span>
+
+      <span class="ib-checkbox-input">
+        <ib-icon name="checkmark-sharp" v-show="checked && !indeterminate" />
+        <ib-icon
+          :class="'checkbox-undeterminate-icon'"
+          name="remove-sharp"
+          v-show="indeterminate"
+        />
+      </span>
+
+      <span
+        v-if="labelPosition === 'right' && label?.length"
+        class="ib-checkbox-label"
+      >
+        <span v-if="required" class="required">*</span>
+        {{ label }}
+      </span>
+    </div>
+  </label>
+</template>
+<script>
+import generateUID from "../../../helpers/generateUID";
+import IbIcon from "../../Icon.vue";
+
+export default {
+  name: "IbCheckbox",
+  model: {
+    event: "input",
+  },
+  props: {
+    label: String,
+    error: {
+      type: [Boolean, null],
+      default: false,
+    },
+    name: String,
+    id: {
+      type: String,
+      default() {
+        return generateUID();
+      },
+    },
+    value: {
+      default: 1,
+    },
+    isChecked: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    labelPosition: {
+      type: String,
+      default: "right",
+    },
+  },
+  watch: {
+    isChecked(value) {
+      this.checked = value;
+    },
+  },
+  data() {
+    return {
+      checked: this.isChecked,
+    };
+  },
+  methods: {
+    onChange() {
+      this.checked = !this.checked;
+      this.$emit("input", this.checked);
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "ib-checkbox": true,
+        "ib-has-error": this.error,
+        "ib-checkbox-filled": this.checked,
+        "ib-checkbox-disabled": this.disabled,
+        "ib-checkbox-indeterminate": this.indeterminate,
+      };
+    },
+    indeterminate() {
+      return this.isChecked === null;
+    },
+  },
+  components: {
+    IbIcon,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./Checkbox.scss";
+</style>

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

@@ -0,0 +1,69 @@
+# IbCheckbox
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+
+## Overview
+
+Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+
+### Form
+
+Can be used in forms on a full page, in modals, or on side panels.
+
+### Filtering and batch action
+
+Used to filter data either on a page, in a menu, or within a component. Checkboxes are found in Data table for batch editing purposes.
+
+### Terms and conditions
+
+Turning the checkbox input on or off can indicate whether you agree to the terms.
+
+### Lists with sub-selections
+
+Used when there is a parent and child relationship. You can use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, you can select children individually when the parent is not selected, which is where the indeterminate state comes in to play.
+
+### Default
+
+<Canvas>
+  <Story id="form-checkbox--default" />
+</Canvas>
+
+### Props
+
+| Prop name     | Type    | Default                  | Description                                                                               |
+| ------------- | ------- | ------------------------ | ----------------------------------------------------------------------------------------- |
+| label         | String  | ''                       | The text to display as the label for the checkbox.                                        |
+| error         | Boolean | false                    | Indicates if the checkbox has an error state.                                             |
+| name          | String  | undefined                | The name attribute of the input element.                                                  |
+| id            | String  | auto-generated unique ID | The ID attribute of the input element.                                                    |
+| value         | any     | 1                        | The value attribute of the input element.                                                 |
+| isChecked     | Boolean | false                    | The initial checked state of the checkbox.                                                |
+| disabled      | Boolean | false                    | Indicates if the checkbox is disabled                                                     |
+| required      | Boolean | false                    | Indicates if the checkbox is required.                                                    |
+| labelPosition | String  | 'right'                  | The position of the label relative to the checkbox. Possible values are "left" or "right" |
+
+### Slots
+
+The component has no named slots, but you can place any content inside the component, and it will be displayed before or after the checkbox and the label, depending on the value of the labelPosition prop.
+
+### Events
+
+| Event name | Parameters | Description                                                                                                                                     |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| input      | Boolean    | The event emitted when the checkbox is changes, and the checked state changes. The event is emitted with the new value of the checked property. |
+
+### Indeterminate
+
+To get the indeterminate state, need isChecked prop set to null. The indeterminate state is visually represented by a horizontal line inside the checkbox.
+
+<Canvas>
+  <Story id="form-checkbox--indeterminate" />
+</Canvas>
+
+### Error state
+
+<Canvas>
+  <Story id="form-checkbox--error" />
+</Canvas>

package/src/components/Form/CheckboxGroup/CheckboxGroup.stories.js

@@ -0,0 +1,64 @@
+import IbCheckboxGroup from "./CheckboxGroup.vue";
+import IbCheckbox from "../Checkbox/Checkbox.vue";
+import IbRadio from "../Radio/Radio.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Checkbox group",
+  component: IbCheckboxGroup,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const TemplateCheckbox = (args) => ({
+  components: { IbCheckboxGroup, IbCheckbox },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-checkbox-group v-bind="args">
+      <ib-checkbox label="Item 1"/>
+      <ib-checkbox label="Item 2"/>
+      <ib-checkbox label="Item 3"/>
+    </ib-checkbox-group>
+  `,
+});
+
+export const Default = TemplateCheckbox.bind({});
+Default.args = {
+  labelText: "Group Label:",
+};
+
+export const HorizontalAlignment = TemplateCheckbox.bind({});
+Default.args = {
+  labelText: "Group Label:",
+};
+
+export const CheckboxGroupError = TemplateCheckbox.bind({});
+CheckboxGroupError.args = {
+  labelText: "Group Label:",
+  required: true,
+  errorMessage: "This checkbox is required",
+};
+
+const TemplateRadio = (args) => ({
+  components: { IbCheckboxGroup, IbRadio },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-checkbox-group v-bind="args">
+      <ib-radio isChecked name="checkbox" label="Item 1"/>
+      <ib-radio name="checkbox" label="Item 2"/>
+      <ib-radio name="checkbox" label="Item 3"/>
+    </ib-checkbox-group>
+  `,
+});
+
+export const RadioGroup = TemplateRadio.bind({});
+RadioGroup.args = {
+  labelText: "Group Label:",
+};