@avakhula/ui 0.0.10

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

@@ -0,0 +1,25 @@
+# IbLabel
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+This component styles the default `<label>` component
+
+### Default
+
+<Canvas>
+  <Story id="form-label--default" />
+</Canvas>
+
+
+### Props
+
+| Name     | type    | Default Value | Description                                                                                            |
+| -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------ |
+| required | Boolean | false         | If true, display a required indicator with a red asterisk.                                             |
+| infoText | String  | ''            | The text that will be displayed inside the tooltip when the information button is hover or have focus. |
+
+### Events
+This component does not emit any events.
+
+### Slots
+This component does not emit any events.

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

@@ -0,0 +1,43 @@
+import IbPhoneInput from "./PhoneInput.vue";
+import IbFormGroup from "../FormGroup/FormGroup.vue";
+import IbLabel from "../Label/Label.vue";
+import IbAlert from "../../Alert/Alert.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Phone Input",
+  component: IbPhoneInput,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbPhoneInput },
+  setup() {
+    return { args };
+  },
+  template: '<ib-phone-input v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+
+const TemplateWithError = (args) => ({
+  components: { IbFormGroup, IbPhoneInput, IbLabel, IbAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-form-group>
+    <ib-label required>Phone</ib-label>
+    <ib-phone-input v-bind="args" />
+  </ib-form-group>
+  `,
+});
+
+export const Error = TemplateWithError.bind({});
+Error.args = {
+  errorMessage: "Error message",
+};

package/src/components/Form/PhoneInput/PhoneInput.vue

@@ -0,0 +1,105 @@
+<template>
+  <ib-alert class="ib-phone-error-message" v-if="errorMessage.length">
+    {{ errorMessage }}
+  </ib-alert>
+
+  <vue-tel-input
+    v-outside="clickOutside"
+    v-model="phone"
+    v-bind="$attrs"
+    @country-changed="countryChanged"
+    :input-options="{ name: inputName, id: inputName }"
+    :auto-default-country="autoDefaultCountry"
+    :dropdown-options="{ showSearchBox: true, showFlags: true }"
+    :defaultCountry="defaultCountry"
+    :ignoredCountries="ignoredCountries"
+    :class="{ error: error || errorMessage.length }"
+    style-classes="ib-phone-input"
+    ref="vueTel"
+  >
+    <template #arrow-icon>
+      <ib-icon name="chevron-down-outline"></ib-icon>
+    </template>
+  </vue-tel-input>
+</template>
+
+<script>
+import { VueTelInput } from "vue-tel-input";
+import IbIcon from "../../Icon.vue";
+import IbAlert from "../../Alert/Alert.vue";
+import { OutsideDirective as Outside } from "../../../directives/outside/outside";
+
+export default {
+  directives: { Outside },
+  props: {
+    inputName: {
+      type: String,
+      default: "phone",
+    },
+    autoDefaultCountry: {
+      type: Boolean,
+      default: true,
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    ignoredCountries: {
+      type: Array,
+      default: () => [],
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    VueTelInput,
+    IbAlert,
+    IbIcon,
+  },
+  data() {
+    return {
+      vueTel: null,
+      phone: "",
+      dialCode: "",
+      defaultCountry: "US",
+    };
+  },
+  mounted() {
+    this.vueTel = this.$refs.vueTel;
+
+    if (this.value) {
+      this.phone = this.value[0] === "+" ? this.value : "+" + this.value;
+    }
+  },
+  methods: {
+    countryChanged(data) {
+      this.$globalEvents.$on("countrySelectValue", (value) => {
+        this.vueTel.choose(value);
+      });
+
+      if (!this.phone || this.phone.length - 1 < this.dialCode.length) {
+        this.phone = "+" + data.dialCode;
+      } else if (this.dialCode) {
+        this.phone = this.phone.replace(this.dialCode, data.dialCode);
+      }
+      this.dialCode = data.dialCode;
+    },
+    clickOutside() {
+      if (this.vueTel.open) {
+        this.vueTel.clickedOutside();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./phoneInput.scss";
+</style>
+<style src="vue-tel-input/vue-tel-input.css"></style>

package/src/components/Form/PhoneInput/phoneInput.scss

@@ -0,0 +1,197 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/variables/shadows.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$input-bg: $gray-100;
+$input-color: $neutral-900;
+$input-placeholder-color: $neutral-600;
+$input-hover-color: $neutral-900;
+$input-hover-bg: $blue-200;
+$input-hover-border-color: $blue-800;
+$input-border-color: $gray-500;
+$input-active-border: $blue-900;
+$input-hover-error-color: $red-800;
+
+$dropdown-bg: $gray-100;
+$dropdown-hover-bg: $blue-100;
+$dropdown-focus-bg: $blue-50;
+$dropdown-active-bg: $blue-50;
+$dropdown-active-icon-color: $blue-900;
+
+$dropdown-item-color: $neutral-900;
+$dropdown-item-hover-color: $gray-100;
+$dropdown-item-selected-color: $gray-100;
+$dropdown-item-selected-border-color: $blue-900;
+
+.ib-phone-error-message {
+  margin-bottom: 5px;
+}
+
+.ib-phone-input.vue-tel-input {
+  position: relative;
+  border: none;
+
+  &:focus-within {
+    box-shadow: none;
+  }
+
+  &.error {
+    .vti__input {
+      border-radius: 4px;
+      @include outline(-2px, $input-hover-error-color);
+    }
+  }
+
+  .vti__dropdown {
+    padding: 0;
+    border-radius: 4px 4px 0 0;
+    position: initial;
+
+    &:focus {
+      outline: none;
+
+      .vti__selection {
+        background-color: $dropdown-focus-bg;
+        @include outline();
+        border-radius: 4px;
+        border-color: transparent;
+      }
+    }
+
+    .ib-icon {
+      transition: transform 0.3s, color 0.3s;
+    }
+
+    &:hover {
+      .vti__selection {
+        background-color: $dropdown-hover-bg;
+        border-color: $input-hover-border-color;
+      }
+    }
+
+    &.open {
+      .vti__selection {
+        background-color: $dropdown-active-bg;
+        border-bottom-color: $input-active-border;
+      }
+
+      .ib-icon {
+        color: $dropdown-active-icon-color;
+        transform: rotate(180deg);
+      }
+    }
+
+    .vti__selection {
+      height: 36px;
+      padding: 0 10px;
+      position: relative;
+      overflow: hidden;
+      border-radius: 4px 4px 0 0;
+      background-color: $dropdown-bg;
+      transition: border 0.3s, border-radius 0.3s, background-color 0.3s;
+      border-bottom: 1px solid $input-border-color;
+    }
+
+    .vti__flag {
+      margin-left: 0;
+    }
+
+    .vti__input {
+      background-color: transparent;
+      width: 100%;
+      margin: 0;
+      margin-bottom: 6.5px;
+      border-left: 0px;
+      border-right: 0px;
+      border-top: 0px;
+      border-radius: 0;
+
+      &::placeholder {
+        @include Ib-H4-regular-italic;
+        color: $input-placeholder-color;
+      }  
+
+      &:focus {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .vti__input {
+    @include Ib-H4-regular;
+    background-color: $input-bg;
+    padding: 0 15px;
+    border-radius: 4px 4px 0 0;
+    height: 36px;
+    margin-left: 2px;
+    color: $input-color;
+    transition: color 0.3s, border 0.3s, border-radius 0.3s, background-color 0.3s;
+    border-bottom: 1px solid $input-border-color;
+
+    &::placeholder {
+      @include Ib-H4-regular-italic;
+      color: $input-placeholder-color;
+    }
+
+    &:hover {
+      color: $input-hover-color;
+      background-color: $input-hover-bg;
+      border-color: $input-hover-border-color;
+    }
+
+    &:focus {
+      @include focus();
+      border-radius: 4px;
+      border-color: transparent;
+    }
+  }
+
+  .vti__dropdown-list {
+    width: 100%;
+    padding: 6.5px 0;
+    max-height: 373px;
+
+    &.below {
+      top: 41px;
+      border: none;
+      border-radius: 4px;
+      box-shadow: $ib-shadow-3;
+    }
+
+    .vti__dropdown-item {
+      padding: 0 15px 0 13px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      border-left: 2px solid transparent;
+
+      .vti__flag {
+        margin-right: 15px;
+      }
+
+      strong,
+      span {
+        @include Ib-H4-regular;
+        color: $dropdown-item-color;
+      }
+
+      &:focus {
+        @include focus();
+      }
+
+      &.highlighted {
+        background-color: inherit;
+      }
+
+      &:hover {
+        background-color: $dropdown-item-hover-color;
+      }
+
+      &[aria-selected="true"] {
+        border-left-color: $dropdown-item-selected-border-color;
+        background-color: $dropdown-item-selected-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+# IbPhoneInput
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+This component provides a phone input field with country code selection functionality. It utilizes the VueTelInput library for the phone input and allows users to select a country from a dropdown menu.
+
+### Default
+
+<Canvas>
+  <Story id="form-phone-input--default" />
+</Canvas>
+
+### Props
+
+| Name               | type    | Default Value | Description                                           |
+| ------------------ | ------- | ------------- | ----------------------------------------------------- |
+| inputName          | String  | "phone"       | The name of the phone input field.                    |
+| autoDefaultCountry | Boolean | true          | To fetch default country based on IP address of user. |
+| value              | String  | ''            | The value of the phone input field.                   |
+| ignoredCountries   | Array   | []            | List of countries will NOT be shown on the dropdown.  |
+| error              | Boolean | false         | Whether the input has an error.                       |
+| errorMessage       | string  | ''            | The error message to display.                         |
+
+### Slots
+
+This component has no slots.
+
+### Events
+This component has no default events but has global events `countrySelectValue` and return input values. Fires when country changed (even for the first time).
+
+#
+
+### Error state
+
+<Canvas>
+  <Story id="form-phone-input--error" />
+</Canvas>

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

@@ -0,0 +1,34 @@
+import IbRadio from "./Radio.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Radio",
+  component: IbRadio,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbRadio },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div>
+    <ib-radio value="a" label="Item 1" name="Checkbox" v-bind="args"/>
+    <ib-radio isChecked style="margin-left: 15px" value="b" label="Item 2" name="Checkbox" v-bind="args"/>
+  </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; flex-direction: column;"><story/></div>',
+  }),
+];

package/src/components/Form/Radio/Radio.vue

@@ -0,0 +1,109 @@
+<template>
+  <label :class="classes" :for="id">
+    <input
+      type="radio"
+      :name="name"
+      :id="id"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      ref="radio"
+      @input.stop
+      @click="onClick"
+      @change="onChange"
+    />
+    <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
+      <span class="ib-radio-input"></span>
+      <span class="ib-radio-label" v-if="label?.length">{{ label }}</span>
+    </span>
+  </label>
+</template>
+
+<script>
+import generateUID from "../../../helpers/generateUID";
+
+export default {
+  name: "IbRadio",
+  model: {
+    prop: "isChecked",
+    event: "input",
+  },
+  props: {
+    label: String,
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+    },
+    id: {
+      type: String,
+      default() {
+        return generateUID();
+      },
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    isChecked: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    isChecked(value) {
+      this.checked = value;
+    },
+  },
+  mounted() {
+    this.$globalEvents.$on("radio:update", (name) => {
+      if (name === this.name) {
+        this.checked = this.$refs.radio?.checked;
+      }
+    });
+  },
+  data() {
+    return {
+      checked: this.isChecked,
+    };
+  },
+  methods: {
+    onClick() {
+      if (!this.disabled) {
+        this.checked = this.$refs.radio?.checked;
+        this.$emit("input", this.checked);
+        this.$emit("change", this.checked);
+        this.$globalEvents.$emit("radio:update", this.name);
+      }
+    },
+    onChange() {
+      if (!this.disabled) {
+        this.checked = this.$refs.radio?.checked;
+        this.$emit("change", this.checked);
+        this.$emit("input", this.checked);
+        this.$globalEvents.$emit("radio:update", this.name);
+      }
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "ib-radio": true,
+        "has-error": this.error,
+        "radio-filled": this.checked,
+        "radio-disabled": this.disabled,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./radio.scss";
+</style>