@avakhula/ui 0.0.10

package/src/components/Alert/readme.mdx

@@ -0,0 +1,63 @@
+# IbAlert
+
+import { Story, Canvas } from "@storybook/addon-docs";
+import * as AlertStories from "./Alert.stories";
+
+Notifications are an important method of communicating with users and providing feedback. They range from granular, inline responses to user actions to system-wide messages.
+
+Notifications provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.
+
+#### Title
+
+- The title type format should use the Title Case.
+- The title should be short and descriptive, explaining the most important piece of information.
+- When possible, communicate the main message using just the title.
+- Use a period only if the title is a full sentence.
+- When using rich text, such as in a title, a screen reader will read aloud the entire message as one sentence. Since the message will be read as one string, make sure that any text styling does not convey meaning.
+
+#### Body content
+
+- Be concise and avoid repeating or paraphrasing the title.
+- Limit content to one or two short sentences.
+- Explain how to resolve the issue by including any troubleshooting actions or next steps. You can include links within the notification body that redirect the user to next steps by using an actionable notification.
+
+#### Action (actionable only)
+
+- Only actionable notifications can contain interactive elements such as a
+  link or button.
+- Keep labels concise and clearly indicate the action the user can take.
+
+Limit action labels to one or two words. For a list of recommended action labels, see Carbon’s content guidelines.
+
+### Props
+
+| Name            | type    | Default Value | Required | Description                                                                 |
+| --------------- | ------- | ------------- | -------- | --------------------------------------------------------------------------- |
+| type            | String  | "alert"       | No       | The type of alert to be displayed. It can be "alert", "success", or "info". |
+| showIcon        | Boolean | false         | No       | Determines whether to display an icon with the alert message.               |
+| showCloseButton | Boolean | false         | No       | Determines whether to display a close button with the alert message.        |
+| title           | String  | ""            | No       | The title of the alert message.                                             |
+
+### Slots
+
+| Slot name | Description                                                        |
+| --------- | ------------------------------------------------------------------ |
+| link      | The link slot can be used to display a link with the alert message |
+| default   | default slot is used to display the text of the alert message.     |
+
+### Events
+
+| Events name | Description                                      |
+| ----------- | ------------------------------------------------ |
+| Close       | Emits when the close button is clicked on alert. |
+
+### Default
+<Canvas of={AlertStories.Default} />
+
+
+### All alert types
+<Canvas of={AlertStories.Types} />
+
+### Alert when we have large content and link
+<Canvas of={AlertStories.LargeAlert} />
+

package/src/components/Badge/Badge.stories.js

@@ -0,0 +1,53 @@
+import ibBadge from "./Badge.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Badge",
+  component: ibBadge,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { ibBadge, IbIconButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="position: relative; width: fit-content;">
+        <ib-badge style="position: absolute; top: -2px; right: -2px;" v-bind="args"></ib-badge>
+    
+        <ib-icon-button kind="ghost">
+            <ion-icon style="font-size=20px" name="add"></ion-icon>
+        </ib-icon-button>
+    </div>
+  `,
+});
+
+const TemplateLarge = (args) => ({
+  components: { ibBadge, IbIconButton },
+  setup() {
+    return { args };
+  },
+  template: `
+      <div style="position: relative; width: fit-content;">
+          <ib-badge style="position: absolute; top: -7px; left: 16px;" v-bind="args"></ib-badge>
+      
+          <ib-icon-button kind="ghost">
+              <ion-icon style="font-size=20px" name="add"></ion-icon>
+          </ib-icon-button>
+      </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Large = TemplateLarge.bind({});
+Large.args = {
+  content: 10000,
+};

package/src/components/Badge/Badge.vue

@@ -0,0 +1,58 @@
+<template>
+  <span :class="classes">
+    {{ normalizeContent }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: "IbBadge",
+  props: {
+    content: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-badge"];
+
+      if (this.content.toString().length) {
+        classList.push("ib-badge-large");
+      }
+      return classList;
+    },
+    normalizeContent() {
+      if (typeof this.content === "number" && this.content > 99) {
+        return "99+";
+      }
+
+      return this.content;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/variables/colors.scss";
+
+$badge-bg: $blue-800;
+$badge-color: $white;
+
+.ib-badge {
+  width: 8px;
+  height: 8px;
+  background-color: $badge-bg;
+  border-radius: 100%;
+  color: $badge-color;
+
+  &-large {
+    @include Ib-H6-regular;
+    width: auto;
+    height: auto;
+    border-radius: 6px;
+    padding: 0 4px 1px;
+  }
+}
+</style>

package/src/components/Badge/readme.mdx

@@ -0,0 +1,38 @@
+# IbBadge
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+The `IbBadge` component is a small component used to display a notification badge with a count or indicator on a parent component.
+### Usage
+* Use badges with items to convey dynamic information associated with that destination
+* Small badges use only shape to indicate a status change or new notification
+* Large badges display numbers within a container to indicate a quantifiable status change
+
+#### There are 2 types of badges:
+1. **Small badge.** Simple dot, used to indicate an unread notification.
+2. **Large badge.** contains label text communicating item count information.
+
+#### **Large Badge Sizing**
+Label large badges with counts or a status. The maximum number of characters within large badge label text is tree, including a + to indicate more.
+
+### Props
+| Name    | type             | Default Value | Description                                                                                                           |
+| ------- | ---------------- | ------------- | --------------------------------------------------------------------------------------------------------------------- |
+| Content | String or Number | `""`          | The content to display within the badge. If a number greater than 99 is passed, the badge will display "99+" instead. |
+
+
+### Slots
+The IbBadge component does not have any slots.
+
+### Events
+The IbBadge component does not emit any events.
+
+### Default
+<Canvas>
+    <Story id="badge--default"/>
+</Canvas>
+
+### Large
+<Canvas>
+    <Story id="badge--large"/>
+</Canvas>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,98 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ul class="breadcrumb">
+      <li
+        class="breadcrumb-item"
+        :class="index === last ? 'active' : ''"
+        aria-current="page"
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <a
+          class="ib-link"
+          :href="item.url"
+          v-if="(index !== last && index > items.length - 4) || index === 0"
+        >
+          {{ item.title }}
+        </a>
+
+        <p v-if="index === last">
+          {{ item.title }}
+        </p>
+
+        <ib-dropdown-list
+          horizontal="center"
+          v-if="initContextMenu && index === items.length - 4"
+        >
+          <template #trigger>
+            <ib-icon-button kind="ghost">
+              <ib-icon name="ellipsis-horizontal-sharp" />
+              <ib-tooltip v-if="tooltipTextContext" :text="tooltipTextContext">
+              </ib-tooltip>
+            </ib-icon-button>
+          </template>
+
+          <template #body>
+            <ib-dropdown-item
+              v-for="(item, index) in setItemsContextMenu"
+              :key="index"
+            >
+              <a class="context-breadcrums" :href="item.url">
+                {{ item.title }}
+              </a>
+            </ib-dropdown-item>
+          </template>
+        </ib-dropdown-list>
+
+        <ib-icon
+          v-if="(index !== last && index > items.length - 5) || index === 0"
+          name="chevron-forward-outline"
+        />
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import IbIcon from "../Icon.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbDropdownList from "../Dropdown/DropdownList.vue";
+import IbDropdownItem from "../Dropdown/DropdownItem.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
+
+export default {
+  name: "IbBreadcrumbs",
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    tooltipTextContext: {
+      type: String,
+    },
+  },
+  computed: {
+    last() {
+      return this.items.length ? this.items.length - 1 : null;
+    },
+    initContextMenu() {
+      return this.items.length > 4 ? true : false;
+    },
+    setItemsContextMenu() {
+      let items = this.items.slice(0, -3);
+      return items;
+    },
+  },
+  components: {
+    IbIcon,
+    IbIconButton,
+    IbDropdownItem,
+    IbDropdownList,
+    IbTooltip,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./breadcrumbs.scss";
+</style>

package/src/components/Breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,77 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+@import "../../assets/scss/reset.scss";
+
+
+.breadcrumb {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+  .context-breadcrums {
+    @include Ib-H4-medium;
+    text-decoration: none;
+    color: $neutral-900;
+
+    &:hover {
+      text-decoration: none;
+      color: $neutral-900;
+    }
+  }
+
+  .breadcrumb-item{
+    display: flex;
+    align-items: center;
+    height: 36px;
+    display: flex;
+    align-items: center;
+
+
+    a {
+      text-decoration: none;
+      color: $neutral-900;
+      height: inherit;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      @include Ib-H4-medium;
+
+      &:hover {
+        text-decoration: none;
+        color: $blue-700;
+        text-decoration: underline $blue-700;
+        text-underline-offset: 4px;
+      }
+
+      &:active {
+        color: $blue-900;
+        text-decoration: underline $blue-900;
+        text-underline-offset: 4px;
+      }
+
+      &:focus {
+        @include focus(2px);
+        border-radius: 4px;
+      }
+    }
+
+    &>ion-icon {
+      color: $gray-600;
+      font-size: 12px;
+      padding: 0 5px;
+      padding-top: 3px;
+    }
+
+    p {
+      color: $gray-600;
+      @include Ib-H4-regular;
+      @include lineClamp(1);
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/src/components/Breadcrumbs/breadcrumbs.stories.js

@@ -0,0 +1,37 @@
+import IbBreadcrumbs from "./Breadcrumbs.vue";
+export default {
+  title: "Breadcrumbs",
+  component: IbBreadcrumbs,
+};
+const Template = (args) => ({
+  components: { IbBreadcrumbs },
+  setup() {
+    return { args };
+  },
+  template: '<ib-breadcrumbs v-bind="args" />',
+});
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      title: "Page 1",
+      url: "first URL",
+    },
+    {
+      title: "Page 2",
+      url: "second URL",
+    },
+    {
+      title: "Page 3",
+      url: "Third URL",
+    },
+    {
+      title: "Page 4",
+      url: "Fourth URL",
+    },
+    {
+      title: "Page 5",
+      url: "Fifth URL",
+    },
+  ],
+};

package/src/components/Button/Button.stories.js

@@ -0,0 +1,124 @@
+import IbButton from "./Button.vue";
+import { buttonKindOptions } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Button",
+  component: IbButton,
+  argTypes: {
+    onClick: { action: "click" },
+    kind: {
+      control: { type: "select" },
+      options: Object.values(buttonKindOptions),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbButton },
+  setup() {
+    return { args };
+  },
+  template: '<ib-button v-bind="args">Button</ib-button>',
+});
+
+const IconTemplate = (args) => ({
+  components: { IbButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-button v-bind="args">
+    <template #icon>
+      <ion-icon name="add"></ion-icon>
+    </template>
+    Button
+  </ib-button>`,
+});
+
+const KindsTemplate = (args) => ({
+  components: { IbButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-button style="margin-right: 5px;" kind="primary">
+    Primary
+  </ib-button>
+
+  <ib-button style="margin-right: 5px;" kind="secondary">
+    Secondary
+  </ib-button>
+
+  <ib-button style="margin-right: 5px;" kind="tertiary">
+    Tertiary
+  </ib-button>
+
+  <ib-button style="margin-right: 5px;" kind="ghost">
+    Ghost
+  </ib-button>
+
+  <ib-button style="margin-right: 5px;" kind="danger">
+    Danger
+  </ib-button>
+
+  <ib-button style="margin-right: 5px;" kind="ghostDanger">
+    Ghost Danger
+  </ib-button>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  kind: "secondary",
+};
+
+export const Tertiary = Template.bind({});
+Tertiary.args = {
+  kind: "tertiary",
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  kind: "ghost",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  kind: "danger",
+};
+
+export const DangerGhost = Template.bind({});
+DangerGhost.args = {
+  kind: "ghostDanger",
+};
+
+export const Block = Template.bind({});
+Block.args = {
+  block: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const ButtonWithIcon = IconTemplate.bind({});
+ButtonWithIcon.args = {};
+
+export const Kinds = KindsTemplate.bind({});
+Kinds.args = {};
+Kinds.decorators = [
+  () => ({
+    template:
+      '<div style="padding:20px; display: flex; flex: wrap: wrap; justify-content: space-between"><story /></div>',
+  }),
+];