@avakhula/ui 0.0.10

package/src/components/Form/Textarea/Textarea.spec.js

@@ -0,0 +1,107 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import Textarea from "./Textarea.vue";
+
+const ERROR_CLASS = "error";
+const CHARACTER_COUNT_CLASS = "character-count";
+const VAL_LENGTH_CLASS = "val-length";
+const CHARACTER_LIMIT_CLASS = "val-limit";
+const VALUE_OVER_LIMIT_CLASS = "character-count";
+
+const createComponent = (props = {}, slots) => {
+  return mount(Textarea, {
+    slots: slots,
+    propsData: props,
+    attachTo: document.body,
+  });
+};
+
+describe("Textarea", () => {
+  it("Default", () => {
+    const wrapper = createComponent();
+
+    expect(wrapper.find("textarea").exists()).toBe(true);
+    expect(wrapper.find(VAL_LENGTH_CLASS).exists()).toBe(false);
+    expect(wrapper.find(CHARACTER_LIMIT_CLASS).exists()).toBe(false);
+  });
+
+  it("disables textarea when disabled prop is true", () => {
+    const wrapper = createComponent({ disabled: true });
+    expect(wrapper.find("textarea").isDisabled()).toBe(true);
+  });
+
+  it("adds error class when error prop is true", () => {
+    const wrapper = createComponent({ error: true });
+    expect(wrapper.find("textarea").classes()).toContain(ERROR_CLASS);
+  });
+
+  it("displays error message when errorMessage is set", () => {
+    const errorMessage = "This is an error message";
+    const wrapper = createComponent({ errorMessage });
+
+    const alert = wrapper.findComponent({ name: "IbAlert" });
+    expect(alert.exists()).toBe(true);
+    expect(alert.text()).toBe(errorMessage);
+    expect(wrapper.find("textarea").classes()).toContain(ERROR_CLASS);
+  });
+
+  it("emits input event with the updated value when user types", async () => {
+    const VALUE = "test";
+    const wrapper = createComponent();
+
+    const textarea = wrapper.find("textarea");
+    await textarea.setValue(VALUE);
+
+    expect(wrapper.emitted("input")).toBeTruthy();
+    expect(wrapper.emitted().input[0]).toEqual([VALUE]);
+  });
+
+  it('emits "blur" event with input value on blur', () => {
+    const wrapper = createComponent();
+
+    const textarea = wrapper.find("textarea");
+    const inputText = "testing";
+
+    textarea.setValue(inputText);
+    textarea.trigger("blur");
+    expect(wrapper.emitted("blur")).toBeTruthy();
+    expect(wrapper.emitted("blur")[0]).toEqual([inputText]);
+  });
+
+  it("limits the number of characters to the provided characterLimit", async () => {
+    const VALUE = "test";
+    const VALUE_OVER_LIMIT = "test_test_test_test";
+
+    const LIMIT = 10;
+    const wrapper = createComponent({ characterLimit: LIMIT });
+    const textarea = wrapper.find("textarea");
+
+    const characterCountNode = wrapper.find(`.${CHARACTER_COUNT_CLASS}`);
+    let characterLimitNode = wrapper.find(`.${CHARACTER_LIMIT_CLASS}`);
+    let valueNode = wrapper.find(`.${VAL_LENGTH_CLASS}`);
+
+    expect(characterCountNode.exists()).toBe(true);
+    expect(characterLimitNode.exists()).toBe(true);
+    expect(characterLimitNode.html()).toContain(LIMIT);
+
+    expect(valueNode.exists()).toBe(false);
+
+    await textarea.setValue(VALUE);
+
+    valueNode = wrapper.find(`.${VAL_LENGTH_CLASS}`);
+    expect(valueNode.exists()).toBe(true);
+    expect(valueNode.text()).toBe(
+      (LIMIT - textarea.element.value.length).toString()
+    );
+
+    await textarea.setValue(VALUE_OVER_LIMIT);
+    const characterOverLimitNode = wrapper.find(`.${VALUE_OVER_LIMIT_CLASS}`);
+    characterLimitNode = wrapper.find(`.${CHARACTER_LIMIT_CLASS}`);
+
+    expect(characterLimitNode.exists()).toBe(false);
+    expect(characterOverLimitNode.exists()).toBe(true);
+    expect(characterOverLimitNode.text()).toBe(
+      (LIMIT - textarea.element.value.length).toString()
+    );
+  });
+});

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

@@ -0,0 +1,68 @@
+import IbTextarea from "./Textarea.vue";
+import IbFormGroup from "../FormGroup/FormGroup.vue";
+import IbLabel from "../Label/Label.vue";
+import readme from "./readme.mdx";
+export default {
+  title: "Form/Textarea",
+  component: IbTextarea,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbTextarea },
+  setup() {
+    return { args };
+  },
+  template: '<ib-textarea placeholder="Placeholder text" v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+const TemplateWidthContent = (args) => ({
+  components: { IbTextarea },
+  setup() {
+    return { args };
+  },
+  template: '<ib-textarea value="Sample content" v-bind="args" />',
+});
+
+export const Disabled = TemplateWidthContent.bind({});
+Disabled.args = {
+  disabled: true,
+};
+Disabled.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+
+const TemplateWidthFormGroup = (args) => ({
+  components: { IbTextarea, IbFormGroup, IbLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-form-group :disable="args.disabled" support-text="Supporting text">
+      <ib-label required id="description">Description</ib-label>
+      <ib-textarea required for="description" v-bind="args" placeholder="Placeholder Text" />
+    </ib-form-group>
+  `,
+});
+
+export const WidthFormGroup = TemplateWidthFormGroup.bind({});
+WidthFormGroup.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/Form/Textarea/Textarea.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="textarea-wrapper" :class="{ disabled: disabled }">
+    <ib-character-count
+      v-if="characterLimit"
+      :character-limit="characterLimit"
+      :character-length="val.length"
+    />
+
+    <ib-alert v-show="errorMessage.length">{{ errorMessage }}</ib-alert>
+    <ib-alert v-show="characterLimitErrorMessage.length && characterOverLimit">
+      {{ characterLimitErrorMessage }}
+    </ib-alert>
+
+    <textarea
+      v-bind="$attrs"
+      v-model="val"
+      @input="onInput"
+      @blur="onBlur"
+      class="ib-textarea"
+      :class="classes"
+      :disabled="disabled"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+import generateUID from "../../../helpers/generateUID";
+import IbAlert from "../../Alert/Alert.vue";
+import IbCharacterCount from "../CharactersCount.vue";
+
+export default {
+  name: "IbTextarea",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default() {
+        return generateUID();
+      },
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    characterLimit: {
+      type: Number,
+      default: null,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    characterLimitErrorMessage: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      val: "",
+    };
+  },
+  methods: {
+    onInput() {
+      if (!this.characterOverLimit) {
+        this.$emit("input", this.val);
+      }
+    },
+    onBlur() {
+      if (!this.characterOverLimit) {
+        this.$emit("blur", this.val);
+      }
+    },
+  },
+  computed: {
+    characterOverLimit() {
+      return !!this.characterLimit && this.val.length > this.characterLimit;
+    },
+    classes() {
+      const classList = ["ib-textarea"];
+
+      if (this.error || this.errorMessage.length || this.characterOverLimit) {
+        classList.push("error");
+      }
+
+      return classList;
+    },
+  },
+  components: {
+    IbAlert,
+    IbCharacterCount,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./textarea.scss";
+</style>

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

@@ -0,0 +1,45 @@
+# IbTextArea
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+The IbTextarea component is a customizable textarea input that provides additional features such as character count and error messages. It can be used to receive and display large amounts of text input from the user.
+
+### Default
+
+<Canvas>
+  <Story id="form-textarea--default" />
+</Canvas>
+
+### Props
+
+| Name                       | type    | Default Value  | Description                                                                                                                                      |
+| -------------------------- | ------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| disabled                   | Boolean | false          | Disables the textarea.                                                                                                                           |
+| id                         | String  | auto-generated | Sets the unique ID for the textarea.                                                                                                             |
+| error                      | Boolean | false          | Sets the textarea to an error state.                                                                                                             |
+| characterLimit             | Number  | null           | Sets the character limit for the input. If set, the component will display the character count and limit the user input to the specified amount. |
+| characterLimitErrorMessage | String  | ''             | Show error message to be displayed when the user has exceeded the character limit.                                                               |
+| errorMessage               | String  | ''             | Sets the textarea to an error state and show error message.                                                                                      |
+
+### Slots
+
+This component has no slots.
+
+### Events
+
+| Event name | Parameters | Description                                                                 |
+| ---------- | ---------- | --------------------------------------------------------------------------- |
+| input      | String     | Emitted on every input change. The payload is the current input value.      |
+| blur       | String     | Emitted when the input loses focus. The payload is the current input value. |
+
+### Disabled
+
+<Canvas>
+  <Story id="form-textarea--disabled" />
+</Canvas>
+
+### Width Form Group
+
+<Canvas>
+  <Story id="form-textarea--width-form-group" />
+</Canvas>

package/src/components/Form/Textarea/textarea.scss

@@ -0,0 +1,84 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/mixins.scss";
+@import "../../../assets/scss/typography.scss";
+
+$textarea-bg: $gray-100;
+$textarea-text-color: $neutral-900;
+$textarea-border-color: $gray-500;
+$textarea-placeholder-color: $neutral-600;
+$textarea-disabled-text-color: $neutral-500;
+$textarea-disabled-bg: $gray-100;
+$textarea-disabled-border-color: $gray-500;
+$textarea-hover-bg: $blue-100;
+$textarea-hover-border-color: $blue-700;
+$textarea-error-outline-color: $red-800;
+
+.textarea-wrapper {
+  width: fit-content;
+  position: relative;
+
+  .character-count {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 5px);
+  }
+
+  .ib-alert {
+    margin-bottom: 5px;
+  }
+
+  &.disabled {
+    .character-count {
+      color: $neutral-500;
+    }
+  }
+}
+
+textarea.ib-textarea {
+  @include Ib-H4-regular;
+  height: 80px;
+  min-height: 36px;
+  border: none;
+  background-color: $textarea-bg;
+  color: $textarea-text-color;
+  padding: 10px 15px;
+  resize: vertical;
+  border-radius: 4px 4px 0px 0px;
+  border-bottom: 1px solid $textarea-border-color;
+  transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s,
+    color 0.3s;
+
+  &::placeholder {
+    @include Ib-H4-regular-italic;
+    color: $textarea-placeholder-color;
+  }
+
+  &:hover {
+    background-color: $textarea-hover-bg;
+    border-bottom-color: $textarea-hover-border-color;
+  }
+
+  &:focus {
+    border-radius: 4px;
+    border-bottom-color: transparent;
+    @include focus(0px);
+  }
+
+  &:disabled {
+    background-color: $textarea-disabled-bg;
+    color: $textarea-disabled-text-color;
+    border-bottom-color: $textarea-disabled-border-color;
+    cursor: not-allowed;
+    resize: none;
+
+    &::placeholder {
+      color: $textarea-disabled-text-color;
+    }
+  }
+
+  &.error {
+    border-radius: 4px;
+    border-bottom-color: transparent;
+    @include outline(0px, $textarea-error-outline-color);
+  }
+}

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

@@ -0,0 +1,44 @@
+import IbToggle from "./Toggle.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Toggle",
+  component: IbToggle,
+  argTypes: {
+    onInput: {},
+    labelPosition: {
+      control: { type: "select" },
+      options: ["right", "left"],
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbToggle },
+  setup() {
+    return { args };
+  },
+  template: "<ib-toggle style='width: fit-content;' v-bind='args'></ib-toggle>",
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Label",
+};
+
+export const HasTooltip = Template.bind({});
+HasTooltip.args = {
+  helpMessage: "Enable pull requests",
+};
+// TODO: move this to storybook helpers
+HasTooltip.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/Form/Toggle/Toggle.vue

@@ -0,0 +1,122 @@
+<template>
+  <label
+    :class="classes"
+    @keypress.space.prevent="onChange"
+    :tabindex="disabled ? -1 : 0"
+  >
+    <div class="toggle-wrapper" ref="wrapper">
+      <div class="toggle" ref="toggle">
+        <input
+          tabindex="-1"
+          type="checkbox"
+          value="1"
+          :name="name"
+          :checked="checked"
+          :id="id"
+          :disabled="disabled"
+          @click="onChange"
+          @input.stop
+        />
+        <span class="toggle-slider round"></span>
+        <ib-icon class="checked-icon" name="checkmark"></ib-icon>
+        <ib-icon class="unchecked-icon" name="close" />
+      </div>
+    </div>
+
+    <span v-if="label.length" class="toggle-label">{{ label }}</span>
+    <ib-tooltip
+      v-if="helpMessage.length"
+      :text="
+        checked
+          ? helpMessage
+          : helpMessageOff.length
+          ? helpMessageOff
+          : helpMessage
+      "
+    ></ib-tooltip>
+  </label>
+</template>
+
+<script>
+import generateUID from "../../../helpers/generateUID";
+import IbIcon from "../../Icon.vue";
+import IbTooltip from "../../Tooltip/Tooltip.vue";
+
+export default {
+  name: "IbToggle",
+  model: {
+    prop: "isChecked",
+    event: "input",
+  },
+  props: {
+    isChecked: {
+      type: Boolean,
+      required: false,
+    },
+    id: {
+      type: String,
+      default: () => generateUID(),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      default: "active",
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    labelPosition: {
+      type: String,
+      default: "right",
+    },
+    helpMessage: {
+      type: String,
+      default: "",
+    },
+    helpMessageOff: {
+      type: String,
+      default: "",
+    },
+  },
+  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-toggle-container": true,
+        "has-error": this.error,
+        "toggle-on": this.checked,
+        "toggle-disabled": this.disabled,
+        "label-position-left": this.labelPosition === "left",
+      };
+    },
+  },
+  components: { IbIcon, IbTooltip },
+};
+</script>
+
+<style lang="scss">
+@import "./toggle.scss";
+</style>

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

@@ -0,0 +1,39 @@
+# IbToogle
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
+
+## Overview
+
+Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.
+
+### Default
+
+<Canvas>
+  <Story id="form-toggle--default" />
+</Canvas>
+
+### Props
+
+| Prop name      | Type    | Default                  | Description                                                                                                                                                    |
+| -------------- | ------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| isChecked      | Boolean | false                    | The initial state of the toggle switch.                                                                                                                        |
+| id             | String  | auto-generated unique ID | The ID of the toggle switch.                                                                                                                                   |
+| disabled       | Boolean | auto-generated unique ID | Determines if a component is disabled.                                                                                                                         |
+| name           | String  | 'active'                 | The name of the toggle switch.                                                                                                                                 |
+| label          | String  | ''                       | The label text that appears next to the toggle switch.                                                                                                         |
+| error          | Nollean | false                    | Determines the toggle switch has an error state or not.                                                                                                        |
+| labelPosition  | String  | 'left'                   | The position of the label relative to the toggle switch. Possible values are "left" and "right".                                                               |
+| helpMessage    | String  | ''                       | The help message that appears in the tooltip when the toggle switch is in the "on" state.                                                                      |
+| helpMessageOff | String  | ''                       | The help message that appears in the tooltip when the toggle switch is in the "off" state. If this prop is not set, the helpMessage prop will be used instead. |
+
+### 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 toggle is changes, and the checked state changes. The event is emitted with the new value of the checked property. |