@avakhula/ui 0.0.10

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

@@ -0,0 +1,137 @@
+import IbInput from "../Input/Input.vue";
+import IbCheckbox from "../Checkbox/Checkbox.vue";
+import IbCheckboxGroup from "../CheckboxGroup/CheckboxGroup.vue";
+import { inputTypeOptions } from "./constants";
+import { horizontalPosition, verticalPosition } from "../../Dropdown/constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Input",
+  component: IbInput,
+  argTypes: {
+    onBlur: {},
+    onInput: {},
+    type: {
+      control: { type: "select" },
+      options: Object.values(inputTypeOptions),
+    },
+    settingsVerticalPosition: {
+      control: { type: "select" },
+      options: Object.values(verticalPosition),
+    },
+    settingsHorizontalPosition: {
+      control: { type: "select" },
+      options: Object.values(horizontalPosition),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbInput },
+  setup() {
+    return { args };
+  },
+  template: '<ib-input placeholder="Placeholder" v-bind="args" />',
+});
+
+export const Text = Template.bind({});
+Text.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];
+
+export const Password = Template.bind({});
+Password.args = {
+  type: inputTypeOptions.password,
+  showPasswordMessage: "Show password",
+  hidePasswordMessage: "Hide password",
+};
+Password.decorators = [
+  () => ({
+    template: '<div style="padding: 50px"><story /></div>',
+  }),
+];
+
+const TemplateSearch = (args) => ({
+  components: { IbInput, IbCheckbox, IbCheckboxGroup },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-input v-bind="args">
+      <template #settings>
+        <div style="display: flex;">
+          <ib-checkbox-group label-text="Group Label:" style="margin-right: 15px;">
+            <ib-checkbox label="Item 1" />
+            <ib-checkbox label="Item 2" />
+            <ib-checkbox label="Item 3" />
+          </ib-checkbox-group>
+
+          <ib-checkbox-group label-text="Group Label:">
+            <ib-checkbox label="Item 1" />
+            <ib-checkbox label="Item 2" />
+            <ib-checkbox label="Item 3" />
+          </ib-checkbox-group>
+        </div>
+      </template>
+    </ib-input>`,
+});
+
+export const Search = TemplateSearch.bind({});
+Search.args = {
+  showIcon: true,
+};
+Search.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+
+const TemplateSearchLarge = (args) => ({
+  components: { IbInput, IbCheckbox, IbCheckboxGroup },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-input v-bind="args">
+      <template #settings>
+        <div style="display: flex;">
+          <ib-checkbox-group label-text="Group Label:" style="margin-right: 15px;">
+            <ib-checkbox label="Item 1" />
+            <ib-checkbox label="Item 2" />
+            <ib-checkbox label="Item 3" />
+          </ib-checkbox-group>
+
+          <ib-checkbox-group style="margin-right: 15px;" label-text="Group Label:">
+            <ib-checkbox label="Item 1" />
+            <ib-checkbox label="Item 2" />
+            <ib-checkbox label="Item 3" />
+          </ib-checkbox-group>
+
+          <ib-checkbox-group label-text="Group Label:">
+            <ib-checkbox label="Item 1" />
+            <ib-checkbox label="Item 2" />
+            <ib-checkbox label="Item 3" />
+          </ib-checkbox-group>
+        </div>
+      </template>
+    </ib-input>`,
+});
+
+export const SearchLarge = TemplateSearchLarge.bind({});
+SearchLarge.args = {
+  showIcon: true,
+};
+SearchLarge.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/Input/Input.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <ib-alert v-if="errorMessage">{{ errorMessage }}</ib-alert>
+
+    <div class="ib-input-wrapper" :class="{ 'has-settings': hasSettings }">
+      <input
+        v-bind="attrs"
+        v-model="actualValue"
+        :disabled="disabled"
+        :id="id"
+        :class="classes"
+        @input="onInput($event)"
+        @blur="onBlur($event)"
+        @focus="onFocus($event)"
+      />
+
+      <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
+
+      <ib-icon-button
+        kind="ghost"
+        class="button-clear"
+        @click.prevent="clearInput"
+        :help-text="clearButtonMessage"
+        v-if="actualValue?.length && type !== 'password' && showClearButton"
+      >
+        <ib-icon name="close-outline"></ib-icon>
+      </ib-icon-button>
+
+      <ib-icon-button
+        kind="ghost"
+        class="toggle-password"
+        :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
+        @click.prevent="toggleShowPassword"
+        v-if="actualValue?.length && type === 'password'"
+      >
+        <ib-icon
+          :name="showPassword ? 'eye-off-outline' : 'eye-outline'"
+        ></ib-icon>
+      </ib-icon-button>
+
+      <ib-dropdown
+        v-if="hasSettings"
+        class="settings-dropdown-wrapper"
+        :horizontal="settingsHorizontalPosition"
+        :vertical="settingsVerticalPosition"
+      >
+        <template #trigger>
+          <ib-icon-button
+            :help-text="settingsButtonMessage"
+            class="options-trigger"
+            kind="ghost"
+          >
+            <ib-icon name="options" />
+          </ib-icon-button>
+        </template>
+
+        <template #body>
+          <div class="settings-wrapper">
+            <slot name="settings"></slot>
+          </div>
+        </template>
+      </ib-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import IbAlert from "../../Alert/Alert.vue";
+import IbIconButton from "../../IconButton/IconButton.vue";
+import IbIcon from "../../Icon.vue";
+import IbDropdown from "../../Dropdown/Dropdown.vue";
+import { inputTypeOptions } from "./constants";
+import generateUID from "../../../helpers/generateUID";
+import removeEvents from "../../../helpers/removeEvents";
+import {
+  verticalPosition,
+  horizontalPosition,
+} from "./../../Dropdown/constants";
+
+export default {
+  name: "IbInput",
+  props: {
+    type: {
+      type: String,
+      default: inputTypeOptions.text,
+      validator: (value) => Object.keys(inputTypeOptions).includes(value),
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: [String],
+      default() {
+        return generateUID();
+      },
+    },
+    debounce: {
+      type: [Number, String],
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+    showClearButton: {
+      type: Boolean,
+      default: true,
+    },
+    clearButtonMessage: {
+      type: String,
+      default: "",
+    },
+    settingsButtonMessage: {
+      type: String,
+      default: "",
+    },
+    showPasswordMessage: {
+      type: String,
+      default: "",
+    },
+    hidePasswordMessage: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    settingsVerticalPosition: {
+      type: String,
+      default: verticalPosition.bottom,
+    },
+    settingsHorizontalPosition: {
+      type: String,
+      default: horizontalPosition.right,
+    },
+  },
+  data() {
+    return {
+      actualValue: this.value,
+      showPassword: false,
+    };
+  },
+  methods: {
+    toggleShowPassword() {
+      this.showPassword = !this.showPassword;
+    },
+    clearInput() {
+      this.actualValue = "";
+      this.$emit("input", this.actualValue);
+    },
+    onBlur(e) {
+      this.$emit("blur", e.target.value);
+    },
+    onFocus(e) {
+      this.$emit("focus", e.target.value);
+    },
+    onInput(e) {
+      if (this.debounce) {
+        this.delayedInput(e.target.value);
+      } else {
+        this.$emit("input", e.target.value);
+      }
+    },
+    delayedInput(value) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+
+      this.timer = setTimeout(() => {
+        this.$emit("input", value);
+      }, this.debounce);
+    },
+  },
+  computed: {
+    hasSettings() {
+      return !!this.$slots.settings;
+    },
+    classes() {
+      const classList = ["ib-input"];
+
+      if (this.error || this.errorMessage.length) {
+        classList.push("ib-error");
+      }
+
+      if (this.showIcon) {
+        classList.push("ib-input-has-icon");
+      }
+
+      return classList;
+    },
+    attrs() {
+      let attrs = removeEvents({ ...this.$attrs });
+
+      attrs.type =
+        this.type === inputTypeOptions.password
+          ? inputTypeOptions.password && this.showPassword
+            ? "text"
+            : "password"
+          : this.type;
+      return attrs;
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.actualValue = newVal;
+    },
+  },
+  components: {
+    IbAlert,
+    IbIconButton,
+    IbIcon,
+    IbDropdown,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./input.scss";
+</style>

package/src/components/Form/Input/constants.js

@@ -0,0 +1,5 @@
+export const inputTypeOptions = {
+  text: "text",
+  password: "password",
+  number: "number",
+};

package/src/components/Form/Input/input.scss

@@ -0,0 +1,133 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$input-bg: $gray-100;
+$input-color: $neutral-900;
+$input-border-color: $gray-500;
+$input-placeholder-color: $neutral-600;
+$input-disabled-color: $neutral-500;
+$input-disabled-bg: $gray-100;
+$input-disabled-border-color: $neutral-500;
+$input-disabled-placeholder-color: $neutral-500;
+$input-hover-color: $neutral-900;
+$input-hover-bg: $blue-200;
+$input-hover-border-color: $blue-700;
+$input-hover-placeholder-color: $neutral-600;
+$input-hover-error-color: $red-800;
+
+.ib-input-wrapper {
+  position: relative;
+
+  .toggle-password,
+  .button-clear {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 11;
+  }
+
+  .icon-search {
+    font-size: 12px;
+    position: absolute;
+    color: $neutral-900;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 11;
+  }
+
+  &.has-settings {
+    input {
+      position: relative;
+      z-index: 10;
+      padding-right: 55px;
+    }
+
+    .settings-dropdown-wrapper {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      min-width: 100%;
+      width: fit-content;
+
+      .options-trigger {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 11;
+      }
+
+      .settings-wrapper {
+        padding: 20px;
+      }
+    }
+
+    .button-clear {
+      right: 29px;
+    }
+  }
+
+  .ib-input {
+    width: 100%;
+    @include Ib-H4-regular;
+    padding: 0 30px 0 15px;
+    height: 36px;
+    border-radius: 4px 4px 0 0;
+    background-color: $input-bg;
+    color: $input-color;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid $input-border-color;
+    transition: color 0.3s, border-radius 0.3s, border-bottom-color 0.3s,
+      background-color 0.3s;
+
+    &::placeholder {
+      @include Ib-H4-regular-italic;
+      color: $input-placeholder-color;
+    }
+
+    &:hover {
+      color: $input-hover-color;
+      background-color: $input-hover-bg;
+      border-bottom-color: $input-hover-border-color;
+
+      &::placeholder {
+        color: $input-hover-placeholder-color;
+      }
+    }
+
+    &:disabled {
+      color: $input-disabled-color;
+      background-color: $input-disabled-bg;
+      border-bottom-color: $input-disabled-border-color;
+
+      &::placeholder {
+        color: $input-disabled-placeholder-color;
+      }
+    }
+
+    &:focus {
+      border-radius: 4px;
+      border-color: transparent;
+      @include focus();
+    }
+
+    &-has-icon {
+      padding-left: 35px;
+    }
+
+    &.ib-error {
+      border-radius: 4px;
+      border-color: transparent;
+      @include outline(-2px, $input-hover-error-color);
+    }
+  }
+}
+
+.ib-alert {
+  margin-bottom: 5px;
+}

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

@@ -0,0 +1,68 @@
+# IbInput
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas text area is for longer, multi-line entries.
+
+### When to use:
+
+- A user needs to input unique information that cannot be predicted with a preset of options.
+- A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex control.
+
+### When not to use:
+
+- If a user can only enter an option from a predefined list then avoid using a free-form text input as it is likely to result in an error. Consider using a selection control such as a select dropdown, or radio button group instead.
+
+<Canvas>
+  <Story id="form-input--text" />
+</Canvas>
+
+### Props
+
+| Prop name                  | Type             | Default                 | Description                                                                                                                         |
+| -------------------------- | ---------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| type                       | String           | 'text'                  | The type of input field. Valid options are 'text', 'password', and 'number'.                                                        |
+| disabled                   | Boolean          | false                   | Whether the input is disabled                                                                                                       |
+| error                      | Boolean          | false                   | Whether the input has error state                                                                                                   |
+| errorMessage               | String           | ''                      | Show error message and input has error state                                                                                        |
+| id                         | String           | auto generate unique id | The ID of the input field.                                                                                                          |
+| debounse                   | Number or string |                         | The debounce time in milliseconds for the input event. If not provided, the input event will fire immediately after the user types. |
+| showIcon                   | Boolean          | false                   | If true, shows an icon inside the input field.                                                                                      |
+| showClearButton            | Boolean          | true                    | If true, shows a clear button when the input field is not empty.                                                                    |
+| clearButtonMessage         | String           | ''                      | The tooltip text for the clear button.                                                                                              |
+| settingsButtonMessage      | String           | ''                      | The tooltip text for the settings button.                                                                                           |
+| showPasswordMessage        | String           | ''                      | The tooltip text for the show password button when the password is hidden.                                                          |
+| hidePasswordMessage        | String           | ''                      | The tooltip text for the hide password button when the password is visible.                                                         |
+| value                      | String           | ''                      | The value of the input field.                                                                                                       |
+| settingsVerticalPosition   | String           | 'bottom'                | The vertical position of the settings dropdown. Valid options are 'top' and 'bottom'.                                               |
+| settingsHorizontalPosition | String           | 'right'                 | The horizontal position of the settings dropdown. Valid options are 'left' and 'right'                                              |
+
+### Events
+
+| Event name | Parameters    | Description                                         |
+| ---------- | ------------- | --------------------------------------------------- |
+| input      | value: String | The event emitted when the input value changes.     |
+| focus      | value: String | The event emitted when the input field loses focus. |
+| blur       | value: String | The event emitted when the input field gains focus. |
+
+### Slots
+
+| Slot name | Description                                          |
+| --------- | ---------------------------------------------------- |
+| settings  | Content that will be displayed in the dropdown menu. |
+
+## Hass custom dropdown
+
+<Canvas>
+  <Story id="form-input--search" />
+</Canvas>
+
+<Canvas>
+  <Story id="form-input--search-large" />
+</Canvas>
+
+## Password
+
+<Canvas>
+  <Story id="form-input--password" />
+</Canvas>

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

@@ -0,0 +1,29 @@
+import IbLabel from "./Label.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Label",
+  component: IbLabel,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbLabel },
+  setup() {
+    return { args };
+  },
+  template: '<ib-label v-bind="args">Full Name</ib-label>',
+});
+
+export const Default = Template.bind({});
+// TODO: move this to storybook helpers
+Default.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/Label/Label.vue

@@ -0,0 +1,87 @@
+<template>
+  <label :class="classes">
+    <span v-if="required" class="required">* </span>
+    <slot></slot>
+
+    <ib-icon-button
+      v-if="infoText.length"
+      size="xs"
+      class="info-button"
+      kind="ghost"
+    >
+      <ib-icon name="information-circle-outline" />
+      <ib-tooltip :text="infoText"></ib-tooltip>
+    </ib-icon-button>
+  </label>
+</template>
+
+<script>
+import IbIconButton from "../../IconButton/IconButton.vue";
+import IbTooltip from "../../Tooltip/Tooltip.vue";
+import IbIcon from "../../Icon.vue";
+
+export default {
+  name: "IbLabel",
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    infoText: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-label"];
+
+      if (this.infoText.length) {
+        classList.push("has-info-text");
+      }
+
+      return classList;
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+    IbTooltip,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/variables/colors.scss";
+
+.ib-label {
+  @include Ib-H4-regular;
+  color: $neutral-900;
+  margin-bottom: 5px;
+  span.required {
+    color: $red-800;
+    display: contents;
+  }
+
+  &.has-info-text {
+    display: flex;
+    align-items: center;
+  }
+
+  .info-button {
+    display: inline-block;
+    margin-left: 3px;
+    .ib-icon {
+      color: $gray-600;
+      font-size: 16px;
+    }
+
+    &:hover {
+      .ib-icon {
+        color: $blue-700;
+      }
+    }
+  }
+}
+</style>