@avakhula/ui 0.0.10

package/src/components/Button/Button.vue

@@ -0,0 +1,165 @@
+<template>
+  <component
+    :is="href.length ? 'a' : 'button'"
+    @click="onClick($event)"
+    v-bind="attrs"
+  >
+    <slot name="icon"></slot>
+    <slot></slot>
+
+    <form
+      v-if="href.length && linkMethod.toUpperCase() !== 'GET'"
+      ref="form"
+      :method="formMethod"
+      :action="href"
+      v-show="false"
+    >
+      <input type="hidden" name="_method" :value="linkMethod" />
+      <input type="hidden" name="_token" :value="token" />
+      <input
+        v-for="(optionKey, index) in Object.keys(postOptions)"
+        :key="index"
+        type="hidden"
+        :name="optionKey"
+        :value="postOptions[optionKey]"
+      />
+    </form>
+  </component>
+</template>
+
+<script>
+import { buttonKindOptions } from "./constants";
+import removeEvents from "../../helpers/removeEvents";
+
+export default {
+  name: "IbButton",
+  props: {
+    kind: {
+      type: String,
+      default: buttonKindOptions.primary,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    preventDefault: {
+      type: Boolean,
+      default: null,
+    },
+    confirmMessage: {
+      type: String,
+      default: "",
+    },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    href: {
+      type: String,
+      default: "",
+    },
+    linkMethod: {
+      type: String,
+      default: "get",
+    },
+    disableAfterClick: {
+      type: Boolean,
+      default: false,
+    },
+    postOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isDisabled: this.disabled,
+    };
+  },
+  watch: {
+    disabled(newVal) {
+      this.isDisabled = newVal;
+    },
+  },
+  methods: {
+    onClick(e) {
+      if (this.preventDefault || this.isDisabled) {
+        e.preventDefault();
+      }
+
+      if (this.confirmMessage.length > 0) {
+        if (!confirm(this.confirmMessage)) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      if (
+        !this.isDisabled &&
+        this.href.length &&
+        !this.preventDefault &&
+        this.linkMethod.toUpperCase() !== "GET"
+      ) {
+        e.preventDefault();
+        this.$refs.form.submit();
+      }
+
+      if (!this.isDisabled) {
+        this.$emit("click", e);
+      }
+
+      if (this.disableAfterClick && !this.disabled) {
+        this.isDisabled = true;
+      }
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-button"];
+      classList.push(`ib-btn-${this.kind}`);
+
+      if (this.isDisabled) {
+        classList.push("ib-btn-disabled");
+      }
+
+      if (this.block) {
+        classList.push("ib-btn-block");
+      }
+
+      if (this.hasIcon) {
+        classList.push("ib-btn-has-icon");
+      }
+
+      return classList;
+    },
+    attrs() {
+      const attrsList = { ...removeEvents({ ...this.$attrs }) };
+
+      attrsList.class = [...this.classes, attrsList.class];
+      attrsList.disabled = this.isDisabled;
+
+      if (this.href.length) {
+        attrsList.href = this.href;
+      }
+
+      return attrsList;
+    },
+    hasIcon() {
+      return !!this.$slots.icon;
+    },
+    formMethod() {
+      return this.linkMethod === "GET" ? "GET" : "POST";
+    },
+    token() {
+      return document.head.querySelector('meta[name="csrf-token"]').content;
+    },
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss">
+@import "./button.scss";
+</style>

package/src/components/Button/button.scss

@@ -0,0 +1,217 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+// Primary button colors
+$primary-btn-background: $blue-800;
+$primary-btn-color: $white;
+$primary-btn-hover-background: $blue-700;
+$primary-btn-focus-background: $blue-800;
+$primary-btn-active-background: $blue-900;
+
+// Secondary button colors
+$secondary-btn-background: $blue-50;
+$secondary-btn-color: $blue-800;
+$secondary-btn-hover-background: $blue-100;
+$secondary-btn-focus-background: $blue-50;
+$secondary-btn-active-background: $blue-50;
+$secondary-btn-active-color: $blue-900;
+
+// Tertiary button colors
+$tertiary-btn-background: $gray-100;
+$tertiary-btn-color: $neutral-900;
+$tertiary-btn-hover-background: $blue-100;
+$tertiary-btn-hover-color: $blue-700;
+$tertiary-btn-focus-background: $gray-100;
+$tertiary-btn-focus-color: $neutral-900;
+$tertiary-btn-active-background: $blue-50;
+$tertiary-btn-active-color: $blue-900;
+
+// Danger button colors
+$danger-btn-background: $red-800;
+$danger-btn-color: $white;
+$danger-btn-hover-background: $red-700;
+$danger-btn-focus-background: $red-800;
+$danger-btn-active-background: $red-900;
+
+// Ghost button colors
+$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 danger button colors
+$ghostDanger-btn-background: transparent;
+$ghostDanger-btn-color: $red-800;
+$ghostDanger-btn-hover-color: $red-700;
+$ghostDanger-btn-hover-background: $red-100;
+$ghostDanger-btn-disabled-background: transparent;
+$ghostDanger-btn-active-color: $red-900;
+$ghostDanger-btn-active-background: $red-50;
+
+// Disabled button colors
+$disabled-btn-background: $gray-100;
+$disabled-btn-color: $neutral-500;
+
+.ib-button {
+  @include Ib-H4-medium;
+  padding: 0 15px;
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  transition: color 0.3s, background 0.3s;
+
+  &.ib-btn-has-icon {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    ion-icon {
+      font-size: 16px;
+      margin-right: 5px;
+      color: inherit;
+    }
+  }
+
+  &:focus {
+    @include focus(2px);
+  }
+
+  &.ib-btn {
+    &-primary {
+      color: $primary-btn-color;
+      background: $primary-btn-background;
+
+      &:hover {
+        background: $primary-btn-hover-background;
+      }
+
+      &:focus {
+        background: $primary-btn-focus-background;
+      }
+
+      &:active {
+        background: $primary-btn-active-background;
+      }
+    }
+
+    &-secondary {
+      color: $secondary-btn-color;
+      background: $secondary-btn-background;
+
+      &:hover {
+        background: $secondary-btn-hover-background;
+      }
+
+      &:focus {
+        background: $secondary-btn-focus-background;
+      }
+
+      &:active {
+        color: $secondary-btn-active-color;
+        background: $secondary-btn-active-background;
+      }
+    }
+
+    &-tertiary {
+      color: $tertiary-btn-color;
+      background: $tertiary-btn-background;
+
+      &:hover {
+        color: $tertiary-btn-hover-color;
+        background: $tertiary-btn-hover-background;
+      }
+
+      &:focus {
+        color: $tertiary-btn-focus-color;
+        background: $tertiary-btn-focus-background;
+      }
+
+      &:active {
+        color: $tertiary-btn-active-color;
+        background: $tertiary-btn-active-background;
+      }
+    }
+
+    &-ghost {
+      color: $ghost-btn-color;
+      background: $ghost-btn-background;
+
+      &:hover {
+        color: $ghost-btn-hover-color;
+        background: $ghost-btn-hover-background;
+      }
+
+      &:active {
+        color: $ghost-btn-active-color;
+        background: $ghost-btn-active-background;
+      }
+
+      &.ib-btn-disabled {
+        &:disabled {
+          background: $ghost-btn-disabled-background;
+        }
+      }
+    }
+
+    &-danger {
+      color: $danger-btn-color;
+      background: $danger-btn-background;
+
+      &:hover {
+        background: $danger-btn-hover-background;
+      }
+
+      &:focus {
+        background: $danger-btn-focus-background;
+      }
+
+      &:active {
+        background: $danger-btn-active-background;
+      }
+    }
+
+    &-ghostDanger {
+      color: $ghostDanger-btn-color;
+      background: $ghostDanger-btn-background;
+
+      &:hover {
+        color: $ghostDanger-btn-hover-color;
+        background: $ghostDanger-btn-hover-background;
+      }
+
+      &:active {
+        color: $ghostDanger-btn-active-color;
+        background: $ghostDanger-btn-active-background;
+      }
+
+      &.ib-btn-disabled {
+        &:disabled {
+          background: $ghostDanger-btn-disabled-background;
+        }
+      }
+    }
+  }
+
+  &.ib-btn-block {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+
+  &.ib-btn-disabled {
+    &:disabled {
+      background: $disabled-btn-background;
+      color: $disabled-btn-color;
+    }
+  }
+}

package/src/components/Button/constants.js

@@ -0,0 +1,8 @@
+export const buttonKindOptions = {
+  primary: "primary",
+  secondary: "secondary",
+  tertiary: "tertiary",
+  ghost: "ghost",
+  danger: "danger",
+  ghostDanger: "ghostDanger",
+};

package/src/components/Button/readme.mdx

@@ -0,0 +1,118 @@
+# IbButton
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+## Overview
+
+Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
+
+### When to use
+
+Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
+
+### When not to use
+
+Do not use buttons as navigational elements. Instead, use [links](?path=/story/links--inline-link) when the desired action is to take the user to a new page.
+
+### Props
+
+| Name              | type    | Default Value | Description                                                                                                                         |
+| ----------------- | ------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| kind              | String  | primary       | The kind of button to be displayed. Possible values are: `primary`, `secondary`, `tertiary`, `ghost`, `danger`, and `ghost-danger`. |
+| disabled          | Boolean | false         | Whether the button is disabled or not.                                                                                              |
+| confirmMessage    | String  | ""            | A message to be displayed in a confirmation dialog before the button action is triggered.                                           |
+| block             | Boolean | false         | Whether the button should be displayed as a block element or not.                                                                   |
+| href              | String  | ""            | The URL to be navigated to when the button is clicked                                                                               |
+| linkMethod        | String  | "get"         | The HTTP method to be used when submitting a form.                                                                                  |
+| disableAfterClick | Boolean | false         | Whether the button should be disabled after it is clicked or not.                                                                   |
+| postOptions       | Object  | {}            | The options to be included in a POST request when submitting a form.                                                                |
+
+### Slots
+
+| Slot name | Description                                           |
+| --------- | ----------------------------------------------------- |
+| icon      | An icon to be displayed inside the button container. |
+| default   | The default slot for the button text or content.      |
+
+### Events
+
+| Event name | Parameters | Description                         |
+| ---------- | ---------- | ----------------------------------- |
+| click      | event      | Emitted when the button is clicked. |
+
+### Default
+
+<Canvas>
+  <Story id="button--default" />
+</Canvas>
+
+### With icon
+
+Example when we added the icon
+
+<Canvas>
+  <Story id="button--button-with-icon" />
+</Canvas>
+
+### Kind
+
+Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they message the correct actions.
+
+<Canvas>
+  <Story id="button--kinds" />
+</Canvas>
+
+### Description for all types
+
+#### Primary
+
+For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel).
+
+<Canvas>
+  <Story id="button--default" />
+</Canvas>
+
+#### Seconsary
+
+For secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. Do not use a secondary button in isolation and do not use a secondary button for a positive action.
+
+<Canvas>
+  <Story id="button--secondary" />
+</Canvas>
+
+#### Tertiary
+
+For less prominent, and sometimes independent, actions. Tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Tertiary buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.
+
+<Canvas>
+  <Story id="button--tertiary" />
+</Canvas>
+
+#### Ghost
+
+For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for forward action, the secondary button is for “Back”, and the ghost button is for “Cancel”.
+
+<Canvas>
+  <Story id="button--ghost" />
+</Canvas>
+
+#### Danger
+
+For actions that could have destructive effects on the user’s data (for example, delete or remove). Danger button has two styles: primary and ghost.
+
+<Canvas>
+  <Story id="button--danger" />
+</Canvas>
+
+#### Danger ghost
+
+For actions that could have destructive effects on the user’s data (for example, delete or remove). Danger button has two styles: primary and ghost.
+
+<Canvas>
+  <Story id="button--danger-ghost" />
+</Canvas>
+
+
+## <a href="./docks/button.pdf" target="_blank">Read more</a>

package/src/components/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,27 @@
+import IbButtonGroup from "./ButtonGroup.vue";
+import IbButton from "../Button/Button.vue";
+import readme from "./readme.mdx";
+export default {
+  title: "Button group",
+  component: IbButtonGroup,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbButtonGroup, IbButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-button-group>
+    <ib-button>primary</ib-button>
+    <ib-button kind='secondary'>secondary</ib-button>
+  </ib-button-group>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="ib-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IbButtonGroup",
+};
+</script>
+
+<style lang="scss">
+.ib-button-group {
+  display: flex;
+
+  button,
+  a {
+    &:not(:first-child) {
+      margin-left: 15px;
+    }
+  }
+}
+</style>

package/src/components/ButtonGroup/readme.mdx

@@ -0,0 +1,10 @@
+# IbButtonGroup
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Button Groups are an easy way to group a series of buttons together.
+
+### Default
+
+<Canvas>
+  <Story id="button-group--default" />
+</Canvas>

package/src/components/Dropdown/Dropdown.spec.js

@@ -0,0 +1,90 @@
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, vi } from "vitest";
+import Dropdown from "./Dropdown.vue";
+
+const $globalEvents = {
+  $on: vi.fn(),
+  $off: vi.fn(),
+  $emit: vi.fn(),
+};
+
+const $emitEvent = vi.fn();
+
+const defaultContent = "<div>Test</div>";
+const triggerContent = "<button>Trigger</button>";
+
+const slotsList = {
+  trigger: triggerContent,
+  body: defaultContent,
+};
+const createComponent = (props = {}, slots = slotsList) => {
+  return mount(Dropdown, {
+    global: {
+      mocks: {
+        $globalEvents,
+        $emitEvent,
+      },
+    },
+    slots: slots,
+    propsData: props,
+    attachTo: document.body,
+  });
+};
+
+describe("Dropdown", () => {
+  it("Default state", () => {
+    const component = createComponent();
+    const menu = component.find(".dropdown-body");
+    const trigger = component.find(".dropdown-trigger");
+
+    expect(trigger.html()).toContain(triggerContent);
+    expect(trigger.isVisible()).toBe(true);
+
+    expect(menu.html()).toContain(defaultContent);
+    expect(menu.isVisible()).toBe(false);
+  });
+
+  it("Should open when click to trigger", async () => {
+    const component = createComponent();
+
+    const trigger = component.find(".dropdown-trigger");
+    await trigger.trigger("click");
+
+    const menu = component.find(".dropdown-body");
+    expect(menu.isVisible()).toBe(true);
+  });
+
+  it("Close when click is outside", async () => {
+    const App = {
+      render() {
+        return h("span", { id: "container" }, [
+          h(Dropdown, null, {
+            trigger: () =>
+              h("button", { className: "dropdown-trigger" }, "test"),
+            body: () =>
+              h("div", { className: "dropdown-body" }, "Body content"),
+          }),
+        ]);
+      },
+    };
+    const wrapper = mount(App, {
+      attachTo: document.body,
+      global: {
+        mocks: {
+          $globalEvents,
+          $emitEvent,
+        },
+      },
+    });
+
+    const container = wrapper.find("#container");
+    const trigger = wrapper.find(".dropdown-trigger");
+    let menu = wrapper.find(".dropdown-body");
+
+    await trigger.trigger("click");
+    expect(menu.isVisible()).toBe(true);
+    await container.trigger("click");
+    expect(menu.isVisible()).toBe(false);
+  });
+});