@avakhula/ui 0.0.10

package/src/components/Form/Radio/radio.scss

@@ -0,0 +1,187 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+//checkbox
+$radio-text: $neutral-900;
+$radio-text-disabled: $neutral-500;
+$radio-text-error: $neutral-900;
+$radio-bg: transparent;
+$radio-bg-hover: $blue-100;
+$radio-bg-active: $blue-200;
+$radio-bg-disabled: $gray-100;
+$radio-bg-error: transparent;
+$radio-border: $gray-500;
+$radio-border-hover: $blue-300;
+$radio-border-active: $blue-200;
+$radio-border-disabled: $neutral-500;
+$radio-text-disabled: $neutral-500;
+$radio-border-error: $red-800;
+$radio-border-error-hover: $red-800;
+$radio-bg-error-hover: $red-50;
+$radio-text-filled: $neutral-900;
+$radio-bg-filled: transparent;
+$radio-border-filled: $blue-800;
+$radio-border-filled-hover: $blue-700;
+$radio-bg-filled-hover: transparent;
+$radio-border-filled-active: $blue-900;
+$radio-border-filled-disabled: $neutral-500;
+
+.ib-radio {
+  display: inline-flex;
+  cursor: pointer;
+
+  input {
+    opacity: 0;
+    position: absolute;
+    top: -100%;
+    right: -100%;
+
+    &:focus + .ib-radio-body {
+      border-radius: 4px;
+      @include outline(2px);
+    }
+  }
+
+  &-body {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    &.without-text {
+      transform: translateY(3px);
+      .ib-radio-input {
+        transform: translateY(0);
+      }
+    }
+  }
+
+  &-label {
+    @include Ib-H4-regular;
+    color: $radio-text;
+    margin-left: 15px;
+  }
+
+  &-input {
+    height: 16px;
+    width: 16px;
+    background-color: $radio-bg;
+    border-radius: 50%;
+    border: 1.25px solid $radio-border;
+    transition: border 0.3s;
+  }
+
+  &:hover {
+    .ib-radio-input {
+      border-width: 2px;
+      border-color: $radio-border-hover;
+      background-color: $radio-bg-hover;
+    }
+  }
+
+  &:active {
+    .ib-radio-input {
+      border-color: $radio-border-active;
+      background-color: $radio-bg-active;
+    }
+  }
+
+  &.radio-filled {
+    .ib-radio-input {
+      border-color: $radio-border-filled;
+      position: relative;
+
+      &::before {
+        content: '';
+        background-color: $radio-border-filled;
+        width: 11.25px;
+        height: 11.25px;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    &:hover {
+      .ib-radio-input {
+        border-width: 1.25px;
+        border-color: $radio-border-filled-hover;
+        background-color: $radio-bg-filled-hover;
+
+        &::before {
+          background-color: $radio-border-filled-hover;
+        }
+      }
+    }
+
+    &:active {
+      .ib-radio-input {
+        border-color: $radio-border-filled-active;
+
+        &::before {
+          background-color: $radio-border-filled-active;
+        }
+      }
+    }
+
+    &.radio-disabled {
+      .ib-radio-input {
+        border-color: $radio-border-filled-disabled;
+
+        &::before {
+          background-color: $radio-border-filled-disabled;
+        }
+      }
+    }
+  }
+
+  &.radio-disabled {
+    .ib-radio-body {
+      cursor: default;
+    }
+
+    .ib-radio-input {
+      border-width: 1.25px;
+      background-color: $radio-bg-disabled!important;
+      border-color: $radio-border-disabled;
+    }
+
+    .ib-radio-label {
+      border-color: $radio-text-disabled;
+    }
+  }
+
+  &.has-error {
+
+    .ib-radio-input {
+      border-width: 2px;
+      background-color: $radio-bg-error;
+      border-color: $radio-border-error;
+    }
+
+    &:active {
+      .ib-radio-input {
+        border-color: $radio-border-active;
+        background-color: $radio-bg-active;
+      }
+    }
+
+    &:hover {
+      .ib-radio-input {
+        border-color: $radio-border-error-hover;
+        background-color: $radio-bg-error-hover;
+      }
+    }
+
+    &.radio-filled {
+      background-color: $radio-bg-filled;
+
+      .ib-radio-input {
+        border-width: 1.25px;
+        border-color: $radio-border-filled;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+# IbRadio
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+
+## Overview
+
+#### Form
+
+Can be used in tiles, data tables, modals, side panels, and in forms on full pages.
+
+#### Settings
+
+Used to change from one setting to another in a menu, page, or component. It can often act as a filtering mechanism.
+
+#### When not to use
+
+If a user can select from multiple options, use [checkboxes](?path=/story/form-checkbox--default) instead of radio buttons. Radio buttons allow the user to select only one item in a set whereas checkboxes allow the user to select multiple items.
+
+### Default
+
+<Canvas>
+  <Story id="form-radio--default" />
+</Canvas>
+
+### Props
+
+| Name      | type    | Default Value | Description                            |
+| --------- | ------- | ------------- | -------------------------------------- |
+| label     | String  | ''            | The label for the radio input.         |
+| error     | Boolean | False         | The error state of the radio input.    |
+| name      | String  |               | The name of the radio input.           |
+| id        | String  |               | The id of the radio input.             |
+| value     | String  |               | The value of the radio input.          |
+| isChecked | Boolean | false         | The checked state of the radio input.  |
+| disabled  | Boolean | false         | The disabled state of the radio input. |
+
+### Slots
+
+The component has no named slots, but you can place any content inside the component.
+
+### Events
+
+| Event name | Parameters | Description                                  |
+| ---------- | ---------- | -------------------------------------------- |
+| input      | Boolean    | The event emitted when the radio is changes. |
+| change     | Boolean    | The event emitted when the radio is changes. |

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

@@ -0,0 +1,58 @@
+import IbTextEditor from "./TextEditor.vue";
+import IbFormGroup from "../FormGroup/FormGroup.vue";
+import IbLabel from "../Label/Label.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Text Editor",
+  component: IbTextEditor,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbTextEditor },
+  setup() {
+    return { args };
+  },
+  template: `<ib-text-editor style="height: 100px" v-bind="args" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  characterLimit: 0,
+};
+Default.decorators = [
+  () => ({
+    template: '<div style="padding-top: 20px"><story /></div>',
+  }),
+];
+
+const TemplateWidthFormGroup = (args) => ({
+  components: { IbTextEditor, IbFormGroup, IbLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-form-group :disable="args.disable" support-text="Supporting text">
+      <ib-label required id="description">Description</ib-label>
+      <ib-text-editor required for="description" v-bind="args" />
+    </ib-form-group>
+  `,
+});
+
+export const WidthFormGroup = TemplateWidthFormGroup.bind({});
+WidthFormGroup.args = {
+  placeholder: "Placeholder Text",
+};
+
+export const ErrorState = TemplateWidthFormGroup.bind({});
+ErrorState.args = {
+  placeholder: "Placeholder Text",
+  error: true,
+  errorMessage: "error",
+  characterLimit: 0,
+};

package/src/components/Form/TextEditor/TextEditor.vue

@@ -0,0 +1,305 @@
+<template>
+  <div
+    class="textarea-wrapper"
+    :class="{
+      error: characterOverLimit || error || errorMessage.length,
+      focus: isFocus,
+      disable: disable,
+    }"
+  >
+    <ib-character-count
+      v-if="characterLimit"
+      :character-limit="characterLimit"
+      :character-length="characterLength"
+    />
+    <ib-alert class="error-message" v-if="errorMessage.length">
+      {{ errorMessage }}
+    </ib-alert>
+
+    <ib-alert
+      class="error-message"
+      v-show="characterLimitErrorMessage.length && characterOverLimit"
+    >
+      {{ characterLimitErrorMessage }}
+    </ib-alert>
+
+    <div class="ib-text-editor-wrapper" :class="{ disable: disable }">
+      <div
+        class="ib-text-editor"
+        :style="{ height: height ? height + 'px' : '' }"
+        ref="wrapper"
+      >
+        <QuillEditor
+          @textChange="onChange"
+          @blur="onBlur"
+          @focus="onFocus"
+          ref="quill"
+          toolbar="#toolbar"
+          v-model:content="data"
+          contentType="html"
+          :options="config"
+          :modules="modules"
+        ></QuillEditor>
+      </div>
+      <div id="toolbar" class="toolbar" ref="toolbar">
+        <div class="toolbar-group header-toolbar-group">
+          <select class="ql-header">
+            <option value="1"></option>
+            <option value="2"></option>
+            <option value="3"></option>
+            <option value="4"></option>
+            <option value="5"></option>
+            <option value="6"></option>
+            <option selected></option>
+          </select>
+        </div>
+
+        <div class="toolbar-group">
+          <ib-icon-button
+            class="toolbar-item ql-bold"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="toolbar-item ql-italic"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="toolbar-item ql-underline"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="toolbar-item ql-strike"
+            kind="ghost"
+          ></ib-icon-button>
+        </div>
+
+        <div class="toolbar-group">
+          <select class="ql-background"></select>
+          <select class="ql-color"></select>
+        </div>
+
+        <div class="toolbar-group">
+          <ib-icon-button
+            class="toolbar-item ql-code-block"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="toolbar-item ql-link"
+            kind="ghost"
+          ></ib-icon-button>
+        </div>
+
+        <div class="toolbar-group">
+          <ib-icon-button
+            class="toolbar-item ql-align"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="ql-align toolbar-item"
+            value="center"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="ql-align toolbar-item"
+            value="right"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="ql-align toolbar-item"
+            value="justify"
+            kind="ghost"
+          ></ib-icon-button>
+        </div>
+
+        <div class="toolbar-group">
+          <ib-icon-button
+            class="ql-list toolbar-item"
+            value="ordered"
+            kind="ghost"
+          ></ib-icon-button>
+          <ib-icon-button
+            class="ql-list toolbar-item"
+            value="bullet"
+            kind="ghost"
+          ></ib-icon-button>
+
+          <ib-icon-button
+            class="ql-alphabet-list alphabet-list toolbar-item"
+            kind="ghost"
+          ></ib-icon-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { QuillEditor, Quill } from "@vueup/vue-quill";
+import IbIconButton from "../../IconButton/IconButton.vue";
+import IbAlert from "../../Alert/Alert.vue";
+import IbCharacterCount from "../CharactersCount.vue";
+import { AlphabetList, AlphabetListItem } from "./plugins/alphabetList";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+
+import {
+  BOLD,
+  ITALIC,
+  UNDERLINE,
+  STRIKE,
+  CODE,
+  LINK,
+  ALIGN_LEFT,
+  ALIGN_CENTER,
+  ALIGN_RIGHT,
+  ALIGN_JUSTIFY,
+  LIST_ORDERED,
+  LIST_BULLET,
+  LIST_ALPHABET,
+} from "./icons/toolbarIcons";
+
+const icons = Quill.import("ui/icons");
+icons.bold = BOLD;
+icons.italic = ITALIC;
+icons.underline = UNDERLINE;
+icons.strike = STRIKE;
+icons["code-block"] = CODE;
+icons.link = LINK;
+icons.align[""] = ALIGN_LEFT;
+icons.align.center = ALIGN_CENTER;
+icons.align.right = ALIGN_RIGHT;
+icons.align.justify = ALIGN_JUSTIFY;
+icons.list.ordered = LIST_ORDERED;
+icons.list.bullet = LIST_BULLET;
+icons["alphabet-list"] = LIST_ALPHABET;
+
+Quill.register({
+  "formats/alphabet-list": AlphabetList,
+  "formats/alphabet-list/item": AlphabetListItem,
+});
+
+Quill.register(icons);
+Quill.debug("error");
+
+export default {
+  name: "IbTextEditor",
+  props: {
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: String,
+    },
+    content: {
+      type: String,
+      default: "",
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    enable: {
+      type: Boolean,
+      default: true,
+    },
+    modules: {
+      type: [Object, Array],
+      default: () => {},
+    },
+    options: {
+      type: Object,
+      default: () => {},
+    },
+    characterLimit: {
+      type: [String, Number],
+      default: null,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    characterLimitErrorMessage: {
+      type: String,
+      default: "",
+    },
+    height: {
+      type: String,
+    },
+  },
+  mounted() {
+    // Reset default styles for toolbar
+    this.$refs.toolbar.classList.remove("ql-toolbar");
+
+    // Change default placeholder for link input
+    const input = this.$refs.wrapper.querySelector("input[data-link]");
+    input.dataset.link = "Enter Link";
+
+    this.updateCharacterLength();
+  },
+  data() {
+    return {
+      data: this.modelValue ? this.modelValue : this.content,
+      characterLength: 0,
+      isFocus: false,
+    };
+  },
+  watch: {
+    content(val) {
+      this.data = val;
+    },
+    data(val) {
+      this.$emit("update:modelValue", val);
+    },
+  },
+  methods: {
+    onChange() {
+      this.updateCharacterLength();
+      this.$emit("change", this.data);
+    },
+    onBlur(instance) {
+      this.$emit("blur", this.data, instance);
+      this.isFocus = false;
+    },
+    onFocus() {
+      this.isFocus = true;
+    },
+    updateCharacterLength() {
+      this.characterLength = this.$refs.quill.getText().length - 1;
+    },
+  },
+  computed: {
+    config() {
+      const config = {
+        placeholder: this.data.length ? "" : this.placeholder,
+        readOnly: this.readOnly ? this.readOnly : this.disable,
+        enable: this.enable,
+      };
+
+      return Object.assign(config, this.options);
+    },
+    characterOverLimit() {
+      return (
+        !!this.characterLimit && this.characterLength > this.characterLimit
+      );
+    },
+  },
+  components: {
+    QuillEditor,
+    IbIconButton,
+    IbAlert,
+    IbCharacterCount,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./textEditor.scss";
+</style>

package/src/components/Form/TextEditor/icons/svg/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 5.75L8 10.25L12.5 5.75" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>