@avakhula/ui 0.0.10

package/src/components/Form/CheckboxGroup/CheckboxGroup.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="ib-checkbox-group"
+    :class="{ 'ib-checkbox-group-horizontal': horizontal }"
+  >
+    <ib-label
+      v-if="labelText.length"
+      class="ib-checkbox-group-label"
+      :required="required"
+    >
+      {{ labelText }}
+    </ib-label>
+
+    <ib-alert v-if="errorMessage.length" class="ib-error-message">
+      {{ errorMessage }}
+    </ib-alert>
+
+    <div class="ib-checkbox-group-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import IbLabel from "../Label/Label.vue";
+import IbAlert from "../../Alert/Alert.vue";
+
+export default {
+  name: "IbInputGroup",
+  props: {
+    labelText: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      required: false,
+    },
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    IbLabel,
+    IbAlert,
+  },
+};
+</script>
+
+<style lang="scss">
+.ib-checkbox-group {
+  .ib-checkbox-group-label {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .ib-checkbox-group-content {
+    display: flex;
+    flex-direction: column;
+    .ib-radio:not(:last-child),
+    .ib-checkbox:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+
+  .ib-error-message {
+    margin-bottom: 5px;
+  }
+
+  &.ib-checkbox-group-horizontal {
+    .ib-checkbox-group-content {
+      flex-direction: row;
+
+      .ib-radio:not(:last-child),
+      .ib-checkbox:not(:last-child) {
+        margin-bottom: 0;
+        margin-right: 25px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+# IbCheckboxGroup
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+The IbCheckboxGroup component is a wrapper component that helps to group and display a set of checkboxes or radio buttons together. It provides a label, an error message and an option to display the checkboxes or radio buttons horizontally.
+
+## Default
+
+<Canvas>
+  <Story id="form-checkbox-group--default" />
+</Canvas>
+
+### Props
+
+| Prop name    | Type    | Default | Description                                                             |
+| ------------ | ------- | ------- | ----------------------------------------------------------------------- |
+| labelText    | String  | ''      | The text that will be displayed as the label for the checkbox group     |
+| required     | Boolean | false   | If true, a required indicator will be displayed next to the label       |
+| horizontal   | Boolean | false   | If true, the checkboxes or radio buttons will be displayed horizontally |
+| errorMessage | String  | ''      | Responsible for displaying an error                                     |
+
+### Slots
+
+| Slot name | Description                                                       |
+| --------- | ----------------------------------------------------------------- |
+| default   | The slot where the checkboxes or radio buttons will be displayed. |
+
+### Events
+
+This component does not emit any events.
+
+### Aligmens
+
+Checkbox labels are positioned to the right of their inputs. If there is a checkbox grouping, they can be laid out vertically or horizontally depending on the use case and the structure of the UI. When possible, arrange the checkbox and radio button groups vertically for easier reading.
+
+- #### Vertical
+
+  <Canvas>
+    <Story id="form-checkbox-group--default" />
+  </Canvas>
+
+- #### Horizontal
+  <Canvas>
+    <Story id="form-checkbox-group--horizontal-alignment" />
+  </Canvas>
+
+### Use radio
+
+<Canvas>
+  <Story id="form-checkbox-group--radio-group" />
+</Canvas>
+
+### Has error
+<Canvas>
+  <Story id="form-checkbox-group--checkbox-group-error" />
+</Canvas>

package/src/components/Form/DatePicker/DatePicker.scss

@@ -0,0 +1,479 @@
+@import "../../../assets/scss/mixins.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/variables/shadows.scss";
+
+$datepicker-shadow: $ib-shadow-3;
+$datepicker-bg: $white;
+
+// Prev/Next month buttons
+$ghost-btn-background: transparent;
+$ghost-btn-hover-background: $blue-100;
+$ghost-btn-color: $neutral-900;
+$ghost-btn-hover-color: $blue-700;
+$ghost-btn-disabled-background: transparent;
+$ghost-btn-active-background: $blue-50;
+$ghost-btn-active-color: $blue-900;
+$ghost-btn-hover-border-color: $blue-300;
+
+// Week day
+$weekday-color: $gray-600;
+
+// Day of the week
+$day-prev-next-color: $gray-600;
+$day-color: $neutral-900;
+$day-border: transparent;
+$day-hover-color: $blue-700;
+$day-hover-border-color: $blue-700;
+$day-hover-bg: $blue-100;
+$day-selected-color: $blue-900;
+$day-selected-bg: $blue-200;
+$day-selected-in-range: $gray-100;
+$day-start-end-range-color: $blue-900;
+$day-start-end-range-bg: $blue-200;
+$day-today-color: $white;
+$day-today-bg: $blue-800;
+// Input
+$input-bg: $gray-100;
+$input-color: $neutral-900;
+$input-border-color: $gray-500;
+$input-placeholder-color: $neutral-900;
+$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-900;
+$input-hover-error-color: $red-800;
+$input-active-bg: $blue-50;
+
+// Calendar icon 
+$calendar-icon: $neutral-900;
+$calendar-active-icon: $blue-900;
+$calendar-hover-icon: $blue-700;
+$calendar-disabled-icon: $neutral-500;
+$calendar-focus-icon: $blue-900;
+
+.flatpickr-wrapper {
+  width: 100%;
+
+  .label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .support-text {
+    @include Ib-H5-regular;
+    margin-top: 5px;
+    color: $neutral-900;
+  }
+
+  .input-wrapper {
+    position: relative;
+
+    .calendar-icon {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: $calendar-icon;
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    &.active {
+      .date-picker-input {
+        border-bottom-color: $blue-900;
+        background-color: $input-active-bg;
+      }
+
+      .calendar-icon {
+        color: $calendar-active-icon;
+      }
+    }
+  }
+
+  .error-message {
+    margin-bottom: 5px;
+  }
+
+  .dropdown {
+    position: relative;
+
+    .flatpickr-calendar {
+      position: absolute;
+      top: 5px !important;
+      left: 0 !important;
+      right: auto !important;
+    }
+  }
+
+  &.has-error {
+    position: relative;
+
+    &.has-labels,
+    &.has-label {
+      padding-top: 24px;
+    }
+
+    .label {
+      top: 0;
+      position: absolute;
+    }
+  }
+
+  &.is-range {
+    max-width: 312px;
+
+    .input-group-wrapper {
+      width: calc(50% - 7.5px);
+    }
+    .inputs-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+
+
+
+.date-picker-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;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  border-bottom: 1px solid $input-border-color;
+  transition: color 0.3s, border-bottom-color 0.3s, border-radius 0.3s, background-color 0.3s;
+
+  &::placeholder {
+    @include Ib-H4-regular;
+    color: $input-placeholder-color;
+  }
+
+  &:disabled {
+    color: $input-disabled-color;
+    background-color: $input-disabled-bg;
+    border-bottom-color: $neutral-900;
+
+    &::placeholder {
+      color: $input-disabled-placeholder-color;
+    }
+
+    & + .calendar-icon {
+      color: $calendar-disabled-icon;
+    }
+  }
+
+  &:focus {
+    border-radius: 4px;
+    border-bottom-color: transparent; 
+    @include focus();
+
+    & + .calendar-icon {
+      color: $calendar-focus-icon;
+    }
+  }
+}
+.input-wrapper:hover {
+  .date-picker-input {
+    color: $input-hover-color;
+    background-color: $input-hover-bg;
+    border-bottom-color: $input-hover-border-color;
+
+    &::placeholder {
+      color: $input-hover-placeholder-color;
+    }
+
+    & + .calendar-icon {
+      color: $calendar-hover-icon;
+    }
+  }
+}
+
+.flatpickr-wrapper {
+  position: relative;
+}
+
+.flatpickr-calendar {
+  padding: 15px;
+  box-shadow: $datepicker-shadow;
+  width: 312px;
+  min-width: 312px;
+  max-width: 312px;
+  background-color: $datepicker-bg;
+
+  &::after,
+  &::before {
+    display: none;
+  }
+
+  .numInputWrapper {
+    width: 60px;
+    padding: 5px 0px 5px 10px;
+  }
+
+  .cur-year {
+    padding: 0 !important;
+  }
+
+  .numInputWrapper,
+  .flatpickr-monthDropdown-months {
+    @include Ib-H4-medium;
+    padding: 5px 10px;
+    border-radius: 4px;
+    border: 2px solid transparent;
+
+    &:hover {
+      border-color: $blue-300;
+      background-color: $blue-100;
+    }
+  }
+
+  .numInput {
+    @include Ib-H4-medium;
+    font-weight: 500!important;
+  }
+
+  .flatpickr-months {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    margin-bottom: 5px;
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    position: initial;
+    width: 24px;
+    height: 24px;
+    border: 2px solid transparent;
+    transition: border 0.3s;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 4px;
+    background: $ghost-btn-background;
+
+    svg {
+      width: 16px;
+      height: 16px;
+
+      path {
+        stroke: $ghost-btn-color;
+      }
+    }
+
+    &:focus,
+    &:hover {
+      background: $ghost-btn-hover-background;
+      border-color: $ghost-btn-hover-border-color;
+
+      svg {
+        fill: transparent;
+
+        path {
+          stroke: $ghost-btn-hover-color;
+        }
+      }
+    }
+
+    &:active {
+      color: $ghost-btn-active-color;
+      background: $ghost-btn-active-background;
+      svg path {
+        stroke: $ghost-btn-active-color;
+      }
+    }
+  }
+  .flatpickr-days,
+  .flatpickr-innerContainer {
+    overflow: visible;
+  }
+
+  .flatpickr-current-month {
+    @include Ib-H4-medium;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .flatpickr-weekday {
+    @include Ib-H4-medium;
+    color: $weekday-color;
+  }
+
+  .flatpickr-weekdaycontainer,
+  .dayContainer {
+    width: 287px;
+    max-width: 287px;
+    min-width: 287px;
+    margin-left: -5px;
+  }
+
+  .flatpickr-day {
+    @include Ib-H4-medium;
+    color: $day-color;
+    border-radius: 4px;
+    border: 2px solid $day-border;
+
+    &.prevMonthDay,
+    &.nextMonthDay {
+      color: $day-prev-next-color;
+    }
+
+    &:focus {
+      border: transparent;
+      background-color: transparent;
+    }
+
+    &:hover {
+      color: $day-hover-color;
+      background-color: $day-hover-bg;
+      border-color: $day-hover-border-color;
+    }
+
+    &:focus {
+      @include focus(2px);
+    }
+
+    &.selected {
+      color: $day-selected-color;
+      background-color: $day-selected-bg;
+    }
+
+    &.startRange {
+      box-shadow: 5px 0 0 $day-selected-in-range;
+      &.startRange:hover {
+        box-shadow: none;
+      }
+    }
+
+    &.endRange {
+      box-shadow: -5px 0 0 $day-selected-in-range;
+    }
+
+    &.startRange,
+    &.endRange {
+      color: $day-start-end-range-color;
+      background-color: $day-start-end-range-bg;
+      border-radius: 4px;
+    }
+
+    &.startRange.endRange {
+      color: $day-start-end-range-color;
+      background-color: $day-start-end-range-bg;
+      border-radius: 4px;
+      box-shadow: none;
+    }
+
+    &.inRange {
+      border-radius: 4px !important;
+      border-radius: 0;
+      background-color: $day-selected-in-range;
+      box-shadow: -5px 0 0 $day-selected-in-range,
+        5px 0 0 $day-selected-in-range;
+
+      &.prevMonthDay,
+      &.nextMonthDay {
+        color: $day-color;
+        border: transparent;
+      }
+
+      &:focus {
+        z-index: 100;
+      }
+    }
+
+    &.inRange {
+      border-radius: 4px;
+
+      &:hover {
+        position: relative;
+        color: $day-hover-color;
+        background-color: $day-hover-bg;
+        border: 2px solid $day-hover-border-color;
+        z-index: 1000;
+      }
+    }
+
+    &.today.inRange,
+    &.today {
+      color: $white;
+      border-color: transparent;
+      background-color: $blue-800;
+      transition: border 0.3s, color 0.3s, background-color 0.3s;
+
+      &:focus,
+      &:hover {
+        border: transparent;
+        background-color: $blue-700;
+      }
+
+      &:active {
+        border: transparent;
+        background-color: $blue-900;
+      }
+    }
+
+    &:nth-child(7n) {
+      border-radius: 0 4px 4px 0 !important;
+
+      &.inRange {
+        box-shadow: -5px 0 0 $day-selected-in-range;
+      }
+
+      &.selected,
+      &:hover,
+      &:focus {
+        border-radius: 4px !important;
+      }
+    }
+
+    &:nth-child(7n + 1) {
+      border-radius: 4px 0 0 4px !important;
+
+      &.inRange {
+        box-shadow: 5px 0 0 $day-selected-in-range;
+      }
+
+      &.endRange {
+        box-shadow: none !important;
+      }
+
+      &.selected,
+      &:hover,
+      &:focus {
+        border-radius: 4px !important;
+      }
+    }
+  }
+
+  .flatpickr-day,
+  .flatpickr-weekday {
+    display: flex;
+    height: 36px;
+    width: 36px;
+    max-width: 36px;
+    min-width: 36px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0 5px 5px;
+  }
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -5px 0 0 $day-selected-in-range;
+}

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

@@ -0,0 +1,78 @@
+import IbDatePicker from "./DatePicker.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Form/Date Picker",
+  component: IbDatePicker,
+  argTypes: {
+    mode: {
+      control: { type: "select" },
+      options: ["single", "range"],
+    },
+    onInput: { action: "input" },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbDatePicker },
+  setup() {
+    return { args };
+  },
+  template: `<ib-date-picker v-bind="args"></ib-date-picker>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "YY-MM-DD",
+};
+
+export const SingleMax = Template.bind({});
+SingleMax.args = {
+  placeholder: "YY-MM-DD",
+  required: true,
+  label: "Date",
+  supportText: "Supporting text",
+};
+
+export const SingleWithError = Template.bind({});
+SingleWithError.args = {
+  placeholder: "YY-MM-DD",
+  required: true,
+  label: "Date",
+  supportText: "Supporting text",
+  errorMessage: "Error message",
+};
+
+export const Range = Template.bind({});
+Range.args = {
+  mode: "range",
+  placeholder: "YY-MM-DD",
+};
+
+export const RangeMax = Template.bind({});
+RangeMax.args = {
+  placeholder: "YY-MM-DD",
+  required: true,
+  mode: "range",
+  label: "Date",
+  endDateLabel: "End date",
+  supportText: "Supporting text",
+  endDateSupportText: "Supporting text",
+};
+
+export const RangeWithError = Template.bind({});
+RangeWithError.args = {
+  placeholder: "YY-MM-DD",
+  required: true,
+  mode: "range",
+  label: "Start Date",
+  endDateLabel: "End date",
+  supportText: "Supporting text",
+  endDateSupportText: "Supporting text",
+  errorMessage: "Error message",
+};