@avakhula/ui 0.0.10

package/src/components/Form/DatePicker/DatePicker.vue

@@ -0,0 +1,284 @@
+<template>
+  <div
+    class="flatpickr-wrapper"
+    :class="{
+      'has-labels': label.length || endDateLabel.length,
+      'has-label': label.length,
+      'has-error': errorMessage.length,
+      'is-range': mode === 'range',
+    }"
+  >
+    <ib-alert class="error-message" v-if="errorMessage.length">{{
+      errorMessage
+    }}</ib-alert>
+
+    <div class="inputs-wrapper">
+      <div class="input-group-wrapper">
+        <ib-label class="label" v-if="label.length" :required="required">
+          {{ label }}
+        </ib-label>
+        <div class="input-wrapper" @click="open" :class="{ active: isOpen }">
+          <input
+            :placeholder="placeholder"
+            ref="date"
+            class="date-picker-input"
+          />
+
+          <ib-icon name="today-outline" class="calendar-icon" />
+        </div>
+
+        <div ref="dropdown" class="dropdown"></div>
+
+        <p v-if="supportText.length" class="support-text">
+          {{ supportText }}
+        </p>
+      </div>
+
+      <div v-if="mode === 'range'" class="input-group-wrapper">
+        <ib-label
+          class="end-date-label label"
+          v-if="endDateLabel.length"
+          :required="required"
+          >{{ endDateLabel }}</ib-label
+        >
+        <div
+          class="input-wrapper"
+          @click="openEndDate"
+          :class="{ active: isOpenEndDate }"
+        >
+          <input
+            class="date-picker-input"
+            :placeholder="placeholder"
+            ref="toDate"
+          />
+
+          <ib-icon name="today-outline" class="calendar-icon" />
+        </div>
+
+        <p v-if="endDateSupportText.length" class="support-text">
+          {{ endDateSupportText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Flatpickr from "flatpickr";
+
+import IbIcon from "../../Icon.vue";
+import IbLabel from "../Label/Label.vue";
+import IbAlert from "../../Alert/Alert.vue";
+import "flatpickr/dist/flatpickr.css";
+import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
+import chevronBackIcon from "./Icons/chevron-back";
+import chevronForwardIcon from "./Icons/chevron-forward";
+import { ESC_KEY_CODE } from "../../../constants/keyCodes";
+
+export const SINGLE_MODE = "single";
+export const RANGE_MODE = "range";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "Date",
+    },
+    modelValue: [String, Array],
+    value: [String, Array],
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    mode: {
+      type: String,
+      default: SINGLE_MODE,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    endDateLabel: {
+      type: String,
+      default: "",
+    },
+    supportText: {
+      type: String,
+      default: "",
+    },
+    endDateSupportText: {
+      type: String,
+      default: "",
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+    document.addEventListener("keyup", this.onDocumentKeyDown, true);
+
+    this.$nextTick(() => {
+      this.initFlatpickr();
+    });
+  },
+  watch: {
+    config() {
+      this.initFlatpickr();
+    },
+    value() {
+      this.initFlatpickr();
+    },
+    modelValue() {
+      this.initFlatpickr();
+    },
+  },
+  data() {
+    return {
+      pickerOptions: {},
+      data: this.modelValue,
+      flat: null,
+      isOpen: false,
+      isOpenEndDate: false,
+    };
+  },
+  methods: {
+    initFlatpickr() {
+      this.flat = new Flatpickr(this.$refs.date, this.pickerConfigs());
+    },
+    pickerConfigs() {
+      const ignoredFocusElements = document.querySelectorAll(".calendar-icon");
+
+      let defaultConfig = {
+        dateFormat: "Y-m-d",
+        altInput: true,
+        altFormat: "Y-m-d",
+        position: "left",
+        mode: this.mode,
+        appendTo: this.$refs.dropdown,
+        prevArrow: chevronBackIcon,
+        nextArrow: chevronForwardIcon,
+        ignoredFocusElements: Array.from(ignoredFocusElements),
+        locale: {
+          weekdays: {
+            shorthand: ["S", "M", "T", "W", "T", "F", "S"],
+            longhand: [
+              "Sunday",
+              "Monday",
+              "Tuesday",
+              "Wednesday",
+              "Thursday",
+              "Friday",
+              "Saturday",
+            ],
+          },
+        },
+        onReady(dates, value, instance) {
+          instance.setDate(value, true);
+        },
+        onChange: (str, value) => this.onChange(value),
+        onClose: () => this.onClose(),
+      };
+
+      if (this.mode === RANGE_MODE) {
+        defaultConfig.plugins = [new rangePlugin({ input: this.$refs.toDate })];
+      }
+
+      if (this.value || this.modelValue) {
+        if (this.mode === RANGE_MODE) {
+          defaultConfig.defaultDate = this.modelValue.length
+            ? [this.modelValue[0], this.modelValue[1]]
+            : [this.value[0], this.value[1]];
+        } else {
+          defaultConfig.defaultDate = this.modelValue
+            ? this.modelValue
+            : this.value;
+        }
+      }
+
+      const config = Object.assign({}, defaultConfig, this.config);
+      this.pickerOptions = config;
+      return config;
+    },
+    onClose() {
+      this.triggerChange();
+      this.$nextTick(() => {
+        this.isOpen = false;
+        this.isOpenEndDate = false;
+      });
+    },
+    onChange(value) {
+      if (this.mode === RANGE_MODE) {
+        this.data = value.split(" to ");
+      } else {
+        this.data = value;
+      }
+    },
+    onDocumentKeyDown(e) {
+      if (e.keyCode === ESC_KEY_CODE) {
+        this.close();
+      }
+    },
+    triggerChange() {
+      setTimeout(() => {
+        if (this.pickerOptions.mode === "range") {
+          let values = this.data;
+
+          if (values.length < 2) {
+            this.$emit("input", "");
+            this.$emit("update:modelValue", this.data);
+          } else {
+            this.$emit("input", [values[0], values[1]]);
+            this.$emit("update:modelValue", this.data);
+          }
+        } else {
+          if (this.data === "") {
+            this.$emit("input", "");
+            this.$emit("update:modelValue", this.data);
+          } else {
+            this.$emit("input", this.data);
+            this.$emit("update:modelValue", this.data);
+          }
+        }
+      });
+    },
+    open() {
+      if (!this.isOpen) {
+        this.isOpen = true;
+        this.isOpenEndDate = false;
+        this.flat.open();
+      }
+    },
+    openEndDate() {
+      this.isOpen = false;
+      this.isOpenEndDate = true;
+      this.$refs.toDate.click();
+    },
+  },
+  computed: {
+    values() {
+      if (!this.data) return [];
+      return this.data?.split(" to ");
+    },
+  },
+  beforeUnmount() {
+    document.removeEventListener("keyup", this.onDocumentKeyDown);
+  },
+  components: {
+    IbIcon,
+    IbLabel,
+    IbAlert,
+  },
+};
+</script>
+<style lang="scss">
+@import "./DatePicker.scss";
+</style>

package/src/components/Form/DatePicker/Icons/chevron-back.js

@@ -0,0 +1,5 @@
+export default `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.25 3.5L5.75 8L10.25 12.5" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;

package/src/components/Form/DatePicker/Icons/chevron-forward.js

@@ -0,0 +1,5 @@
+export default `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.75 3.5L10.25 8L5.75 12.5" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;

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

@@ -0,0 +1,115 @@
+# IbDatePicker
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Date and time pickers allow users to select a single instance or range of dates and times.
+
+## Overview
+
+Date pickers allow users to select past, present, or future dates. The type of date you are asking the user for will determine which date picker is best to use. The time picker helps users to select a specific time.
+
+### When to use
+
+- When asking the user for an exact, approximate, or memorable date or time.
+- For scheduling tasks.
+
+### DateControllers
+
+- Date Input
+- Date Select
+
+### Date format (Date Input)
+
+- The date format can be displayed differently depending on your location. For example, some countries use month/day/year while other use day/month/year.
+- Include the format as supporting text below the input field.
+- When using calendar picker the date format will be automated if the user selects from the calendar menu.
+- Only including the date format as placeholder text inside the field is problematic because it will disappear from view once the user begins typing.
+
+### Future update: Time format
+
+(At the moment we do not have a new component for using time, it will be made in the future. If the development team needs this component, please contact the design team.)
+
+- Both the 12-hour and 24-hour time systems are allowed.
+- If using the 12-hour format it must be accompanied by an AM/PM selection.
+- Use uppercase letters and no periods for the abbreviations AM and PM.
+- Specific times should specify a timezone.
+
+### Internationalization
+
+Internationalization, also referred to as globalization, refers to software adapting to different languages, regional peculiarities, and technical requirements of a target locale without additional code changes. This means that if the location is known, then formatting of a date or time can automatically change to the acceptable local format. You should always try to design for internationalization.
+
+<Canvas>
+  <Story id="form-date-picker--default" />
+</Canvas>
+
+### Props
+
+| Prop name          | Type    | Default  | Description                                                       |
+| ------------------ | ------- | -------- | ----------------------------------------------------------------- |
+| name               | String  | 'Date'   | The name attribute for the input element.                         |
+| modelValue         | String  |          | Used to support v-model.                                          |
+| value              | String  |          | The value of the input element.                                   |
+| placeholder        | String  | ''       | The placeholder text for the input element.                       |
+| required           | Bollean | ''       | Whether the input is required or not.                             |
+| config             | Object  | {}       | The configuration object for Flatpickr.                           |
+| mode               | String  | 'single' | The mode of the date picker. Can be either 'single' or 'range'.   |
+| label              | String  | ''       | The label for the input element.                                  |
+| endDateLabel       | String  | ''       | The label for the second input element when in range mode.        |
+| supportText        | String  | ''       | The support text for the input element.                           |
+| endDateSupportText | String  | ''       | The support text for the second input element when in range mode. |
+| errorMesage        | String  | ''       | The error message to display.                                     |
+
+### Slots
+
+This component does not support any slots
+
+### Events
+
+| Event name | Parameters | Description                               |
+| ---------- | ---------- | ----------------------------------------- |
+| input      | String     | Emitted when the user changes the input.. |
+
+## Simple date input
+
+The simple date input provides the user with only a text field in which they can manually input a date. It allows dates to be entered without adding unnecessary interactions that come with the calendar menu or a dropdown.
+
+The simple date input can include month/year or month/day/year. The formatting may be localized and rearranged in sequence of appearance.
+
+<Canvas>
+  <Story id="form-date-picker--single-max" />
+</Canvas>
+
+#### When to use
+
+**Use for memorable dates**
+
+Simple date select are typically used when the date is known by the user, such as a date of birth or credit card expiration.
+
+**Use for memorable dates**
+
+Simple date select are best for when asking the user for an approximate date instead of an exact date, especially in regards to past dates. For example, when was asking a user when a purchase was made they will most likely easily recall the month and year (November 2019) versus the specific date (November 22, 2019).
+
+**Entering a date**
+
+A date can be selected by manually entering a date in the text input field.
+
+**Example single date picker width error**
+
+<Canvas>
+  <Story id="form-date-picker--single-with-error" />
+</Canvas>
+
+## Range Input
+
+Date range picker
+The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date. For each date in the range, users have the option to manually enter the date in a text field or select the date in the calendar. Each point requires a day, month, and year to be selected.
+
+<Canvas>
+  <Story id="form-date-picker--range-max" />
+</Canvas>
+
+**Example range date picker width error**
+
+<Canvas>
+  <Story id="form-date-picker--range-with-error" />
+</Canvas>

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

@@ -0,0 +1,48 @@
+import IbFormGroup from "./FormGroup.vue";
+import IbInput from "../Input/Input.vue";
+import IbLabel from "../Label/Label.vue";
+
+export default {
+  title: "Form/Form Group",
+  component: IbFormGroup,
+};
+
+const Template = (args) => ({
+  components: { IbFormGroup, IbInput, IbLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-form-group v-bind="args">
+      <ib-label>Full Name</ib-label>
+      <ib-input disabled placeholder="Surname Name" />
+    </ib-form-group>
+  `,
+});
+
+export const Default = Template.bind({});
+
+const TemplateMax = (args) => ({
+  components: { IbFormGroup, IbInput, IbLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-form-group 
+      support-text="Supporting text"  
+      v-bind="args"
+    >
+      <ib-label required info-text="Some information text">
+        Full Name
+      </ib-label>
+      <ib-input required placeholder="Surname Name" />
+    </ib-form-group>
+  `,
+});
+
+export const Max = TemplateMax.bind({});
+Max.decorators = [
+  () => ({
+    template: '<div style="padding-top: 30px"><story /></div>',
+  }),
+];

package/src/components/Form/FormGroup/FormGroup.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="ib-form-group" :class="{ disable: disable }">
+    <slot></slot>
+    <p class="support-text" v-if="supportText.length">{{ supportText }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IbInputGroup",
+  props: {
+    supportText: {
+      type: String,
+      default: "",
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/variables/colors.scss";
+
+.ib-form-group {
+  display: flex;
+  flex-direction: column;
+
+  .support-text {
+    @include Ib-H5-regular;
+    margin-top: 5px;
+  }
+
+  &.disable {
+    .support-text {
+      color: $neutral-500;
+    }
+
+    .ib-label {
+      color: $neutral-500;
+
+      .info-button {
+        background-color: transparent;
+        border-color: transparent;
+
+        .ib-icon {
+          color: $neutral-500;
+        }
+        &:hover {
+          .ib-icon {
+            color: $neutral-500;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Form/FormGroup/FormGroupSet.stories.js

@@ -0,0 +1,32 @@
+import IbFormGroupSet from "./FormGroupSet.vue";
+import IbFormGroup from "../FormGroup/FormGroup.vue";
+import IbInput from "../Input/Input.vue";
+import IbLabel from "../Label/Label.vue";
+
+export default {
+  title: "Form/Form Group Set",
+  component: IbFormGroupSet,
+};
+
+const Template = (args) => ({
+  components: { IbFormGroupSet, IbFormGroup, IbInput, IbLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+
+  <ib-form-group-set v-bind="args">
+    <ib-form-group>
+      <ib-label required>Password</ib-label>
+      <ib-input required type="password" placeholder="Password" />
+    </ib-form-group>
+    <ib-form-group>
+      <ib-label required>Confirm password</ib-label>
+      <ib-input required type="password" placeholder="Confirm password" />
+    </ib-form-group>
+  </ib-form-group-set>
+  
+    `,
+});
+
+export const Default = Template.bind({});

package/src/components/Form/FormGroup/FormGroupSet.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ib-form-group-set" :class="{ 'has-error': errorMessage.length }">
+    <ib-alert class="error-message" v-show="errorMessage.length">
+      {{ errorMessage }}
+    </ib-alert>
+
+    <div class="group-set-content">
+      <slot></slot>
+    </div>
+
+    <p class="support-text" v-if="supportText.length">
+      {{ supportText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import IbAlert from "../../Alert/Alert.vue";
+
+export default {
+  props: {
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    supportText: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    IbAlert,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../../assets/scss/typography.scss";
+.ib-form-group-set {
+  max-width: 476px;
+  width: fit-content;
+
+  .ib-label {
+    transition: margin 0.3s;
+  }
+
+  .group-set-content {
+    display: flex;
+    justify-content: space-between;
+    .ib-form-group {
+      width: calc(50% - 7.5px);
+    }
+  }
+
+  .support-text {
+    @include Ib-H5-regular;
+    margin-top: 5px;
+  }
+
+  &.has-error {
+    position: relative;
+    padding-top: 24px;
+
+    .error-message {
+      margin-bottom: 5px;
+    }
+
+    .ib-label {
+      position: absolute;
+      top: 0;
+      margin-bottom: 0px;
+    }
+  }
+}
+</style>