@avakhula/ui 0.0.10

package/src/components/TagPill/TagPill.vue

@@ -0,0 +1,133 @@
+<template>
+  <div :class="classes">
+    <ib-icon v-if="showIcon && iconName.length" :name="iconName" />
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import { tagPillSTatuses } from "./constants";
+import IbIcon from "../Icon.vue";
+
+export default {
+  props: {
+    status: {
+      type: String,
+      default: tagPillSTatuses.neutral,
+      validator: (value) => Object.keys(tagPillSTatuses).includes(value),
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-tag-pill"];
+      classList.push(`ib-tag-pill-${this.status}`);
+
+      return classList;
+    },
+    iconName() {
+      switch (this.status) {
+        case tagPillSTatuses.success:
+          return "checkmark-outline";
+        case tagPillSTatuses.neutral:
+          return "time-outline";
+        case tagPillSTatuses.info:
+          return "information-circle-outline";
+        case tagPillSTatuses.error:
+          return "close-outline";
+        default:
+          return "";
+      }
+    },
+  },
+  components: { IbIcon },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/variables/colors.scss";
+
+$neutral-tag-bg: $gray-100;
+$neutral-tag-color: $neutral-600;
+
+$success-tag-bg: $green-100;
+$success-tag-color: $green-800;
+
+$info-tag-bg: $blue-200;
+$info-tag-color: $blue-800;
+
+$error-tag-bg: $red-100;
+$error-tag-color: $red-800;
+
+$new-tag-bg: $navy-600;
+$new-tag-color: $white;
+
+$pending-tag-bg: $indigo-400;
+$pending-tag-color: $white;
+
+$favorite-tag-bg: $gray-600;
+$favorite-tag-color: $white;
+
+.ib-tag-pill {
+  @include Ib-H5-regular;
+  display: flex;
+  align-content: center;
+  padding: 0 4px;
+  width: fit-content;
+  border-radius: 4px;
+
+  span {
+    max-width: 215px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+  .ib-icon {
+    align-self: center;
+    font-size: 12px;
+    margin-right: 2px;
+  }
+
+  &-neutral {
+    background-color: $neutral-tag-bg;
+    color: $neutral-tag-color;
+  }
+
+  &-success {
+    background-color: $success-tag-bg;
+    color: $success-tag-color;
+  }
+
+  &-info {
+    background-color: $info-tag-bg;
+    color: $info-tag-color;
+  }
+
+  &-error {
+    background-color: $error-tag-bg;
+    color: $error-tag-color;
+  }
+
+  &-new {
+    background-color: $new-tag-bg;
+    color: $new-tag-color;
+  }
+
+  &-pending {
+    background-color: $pending-tag-bg;
+    color: $pending-tag-color;
+  }
+
+  &-favorite {
+    background-color: $favorite-tag-bg;
+    color: $favorite-tag-color;
+  }
+}
+</style>

package/src/components/TagPill/constants.js

@@ -0,0 +1,9 @@
+export const tagPillSTatuses = {
+  success: "success",
+  neutral: "neutral",
+  info: "info",
+  error: "error",
+  new: "new",
+  favorite: "favorite",
+  pending: "pending",
+};

package/src/components/TagPill/readme.mdx

@@ -0,0 +1,37 @@
+# IbTagPill
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+A status Pill is a visual indicator used to highlight an item's status for quick recognition.
+
+**Best practice**
+Use the icon together with the label in Lozenge to help user quicker understand item status.
+
+### Default
+
+<Canvas>
+  <Story id="tag-pill--default" />
+</Canvas>
+
+### Temporary status Pills
+
+Status Pills with labels “New” and “Pending” considered as a temporary statuses.
+Pending - status for the analytic datasets that require approving. Once it approved or declined status pill can be removed or changed to “Approved”, “Declined”, or “New” status pills.
+New - status for the analytic datasets that were added to the Library page. It is removed once the user opened data details, or when 30 days pass if the user never opens it.
+
+### Props
+
+| Prop name | Type    | Default   | Description                                                                                                                                               |
+| --------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| status    | String  | "neutral" | The status prop determines the color of the tag pill. It accepts one of the values: `neutral`, `success`, `info`, `error`, `new`, `favorite` or `pending` |
+| showIcon  | Boolean | false     | When set to true, an icon is displayed to the left of the text label.                                                                                     |
+
+### Events
+
+This component not suports events.
+
+### Slots
+
+| Slot name | Description                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------- |
+| default   | The default slot is used to pass the label text that will be displayed inside the tag pill. |

package/src/components/ToggleTip/ToggleTip.stories.js

@@ -0,0 +1,98 @@
+import IbToggleTip from "./ToggleTip.vue";
+import IbButton from "../Button/Button.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbIcon from "../Icon.vue";
+import { toggleTipPosition } from "./constants";
+import { ref } from "vue";
+import readme from "./readme.mdx"
+
+export default {
+  title: "ToggleTip",
+  components: IbToggleTip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(toggleTipPosition),
+    },
+    isActive: { type: "boolean" },
+    onClose: { action: "close" },
+    onOpen: { action: "open" },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbToggleTip, IbIcon, IbIconButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div>
+    <ib-icon-button kind="ghost">
+      <ib-icon name="information-circle-outline" />
+    </ib-icon-button>
+ 
+    <ib-toggle-tip v-bind="args">
+      <p>Toggle tip should be used in place of tooltip if your content will contain interactive elements.</p>
+    </ib-toggle-tip>
+  </div>
+    `,
+});
+
+const TemplateWithButtons = (args) => ({
+  components: { IbToggleTip, IbButton, IbIcon, IbIconButton },
+  setup() {
+    const visible = ref(true);
+    const onClick = () => (visible.value = true);
+    const onClose = () => (visible.value = false);
+
+    return { args, onClick, onClose, visible };
+  },
+  template: `
+  <div>
+    <ib-icon-button @click="onClick" kind="ghost">
+      <ib-icon name="information-circle-outline" />
+    </ib-icon-button>
+    
+    <ib-toggle-tip v-bind="args" @close="onClose" :is-open="visible">
+      <p>Toggle tip should be used in place of tooltip if your content will contain interactive elements.</p>
+        
+        <template #buttons class="button-set">
+          <ib-button kind="ghost">
+            test
+          </ib-button>
+          <ib-button kind="tertiary">
+            test
+          </ib-button>
+        </template>
+      </ib-toggle-tip>
+  </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Title",
+  isActive: true,
+};
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+
+export const HasButtons = TemplateWithButtons.bind({});
+HasButtons.args = {
+  title: "Title",
+};
+HasButtons.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/ToggleTip/ToggleTip.vue

@@ -0,0 +1,112 @@
+<template>
+  <Transition>
+    <div :class="classes" v-show="isOpenedState">
+      <div class="ib-toggle-tip-head">
+        <p>
+          {{ title }}
+        </p>
+
+        <ib-icon-button
+          class="close-button"
+          kind="ghost"
+          @click.prevent="close"
+        >
+          <ib-icon name="close-outline" />
+        </ib-icon-button>
+      </div>
+
+      <div class="ib-toggle-tip-content">
+        <slot></slot>
+      </div>
+
+      <div class="ib-toggle-tip-button-set">
+        <slot name="buttons"></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { toggleTipPosition } from "./constants";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbIcon from "../Icon.vue";
+
+export default {
+  name: "IbTooltip",
+  props: {
+    position: {
+      type: String,
+      default: toggleTipPosition.topCenter,
+    },
+    title: {
+      type: String,
+    },
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.parentNode = this.$el.parentNode;
+
+      if (getComputedStyle(this.parentNode).position !== "absolute") {
+        this.parentNode.style.position = "relative";
+      }
+    });
+  },
+  data() {
+    return {
+      isOpenedState: this.isOpen,
+    };
+  },
+  methods: {
+    open() {
+      this.isOpenedState = true;
+      this.$emit("open");
+    },
+    close() {
+      this.isOpenedState = false;
+      this.$emit("close");
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-toggle-tip"];
+      classList.push(`ib-${this.position}`);
+
+      return classList;
+    },
+  },
+  watch: {
+    isOpen(value) {
+      if (value) {
+        this.open();
+      } else {
+        this.close();
+      }
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./toggleTip.scss";
+</style>
+
+<style lang="scss" scoped>
+// Transition
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/ToggleTip/constants.js

@@ -0,0 +1,14 @@
+export const toggleTipPosition = {
+  topLeft: "top-Left",
+  topCenter: "top-center",
+  topRight: "top-right",
+  rightTop: "right-top",
+  rightCenter: "right-center",
+  rightBottom: "right-bottom",
+  bottomLeft: "bottom-left",
+  bottomCenter: "bottom-center",
+  bottomRight: "bottom-right",
+  leftTop: "left-top",
+  leftCenter: "left-center",
+  leftBottom: "left-bottom",
+};

package/src/components/ToggleTip/readme.mdx

@@ -0,0 +1,46 @@
+# IbToggleTip
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Toggletips use the disclosure pattern to toggle the visibility of a popover. They display additional, hidden information upon the click of a UI trigger element and can contain interactive elements.
+Toggletip should be used in place of tooltip if your content will contain interactive elements. If it does not have any interactive content, consider using [Tooltip](?path=/story/tooltip--default) or [Popover](?path=/story/popover--default) instead.
+
+## Overview
+
+Toggletips reveal supplemental content when a user clicks a button or another UI element and remains actively open until a user dismisses it. Toggletips can include a wide variety of information and interactive elements as long as accessibility requirements are maintained including focus order and ensuring all functionality is operable through a keyboard interface.
+
+### When to use
+
+Use when an interactive element must be placed within the container
+Use for quick, in context editing
+Use for non-essntial transitional function related to triggered conponent
+
+### When to not use
+
+Don’t use to present critical information or request required input needed to complete a workflow. Use the [modal component](?path=/story/modal--default) instead.
+
+
+
+### States
+
+The toggletip component has two states—active and inactive. By default, the toggletip is hidden and inactive.
+
+### Props
+
+| Name     | type    | Default Value  | Description                                                                                                                                                                                                                                         |
+| -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| isOpen   | Boolean | false          | Controls the visibility of the ToggleTip.                                                                                                                                                                                                           |
+| title    | String  | false          | Use this slot to insert a title.                                                                                                                                                                                                                    |
+| position | String  | '`top-center`' | The position of tooltip. Possible values are: '`top-left`', '`top-center`', '`top-right`', '`right-top`', '`right-center`', '`right-bottom`', '`bottom-left`', '`bottom-center`', '`bottom-right`', '`left-top`', '`left-center`', '`left-bottom`'. |
+
+### Events
+
+| Event name | Parameters | Description                           |
+| ---------- | ---------- | ------------------------------------- |
+| open       |            | Emitted when the Toggletip is opened. |
+| close      |            | Emitted when the Toggletip is closed. |
+
+### Default
+<Canvas>
+  <Story id="toggletip--has-buttons" />
+</Canvas>

package/src/components/ToggleTip/toggleTip.scss

@@ -0,0 +1,55 @@
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins/tooltip-position.scss";
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/variables/shadows.scss";
+
+$background: $white;
+$textColor: $neutral-900;
+$shadow: $ib-shadow-4;
+
+
+.ib-toggle-tip {
+  position: absolute;
+  padding: 10px;
+  width: 240px;
+  background-color: $background;
+  color: $textColor;
+  border-radius: 4px;
+  box-shadow: $shadow;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  @include TooltipPosition;
+
+  &-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+
+    p {
+      @include Ib-H4-medium;
+    }
+
+    .close-button {
+      .ib-icon {
+        font-size: 20px
+      }
+    }
+  }
+
+  &-content {
+    @include Ib-H4-regular;
+  }
+
+  &-button-set {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 5px;
+
+    .ib-button:not(:first-child) {
+      margin-left: 10px;
+    }
+  }
+}

package/src/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,56 @@
+import IbTooltip from "./Tooltip.vue";
+import IbButton from "../Button/Button.vue";
+import { popoverPosition } from "../Popover/constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Tooltip",
+  component: IbTooltip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(popoverPosition),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbTooltip, IbButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-button>
+    Test
+    <ib-tooltip v-bind="args"></ib-tooltip>
+  </ib-button>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Default text",
+};
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+
+export const Large = Template.bind({});
+Large.args = {
+  title: "Title",
+  text: "Data type must be one of the following: text, number, int",
+};
+Large.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,49 @@
+<template>
+  <ib-popover :position="position" class="ib-tooltip">
+    <b v-if="title">{{ title }}</b>
+    <p>{{ text }}</p>
+  </ib-popover>
+</template>
+
+<script>
+import IbPopover from "../Popover/Popover.vue";
+
+export default {
+  name: "IbTooltip",
+  props: {
+    position: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    text: {
+      type: String,
+    },
+  },
+  components: { IbPopover },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+.ib-tooltip {
+  padding: 10px;
+  max-width: 240px;
+
+  b,
+  p {
+    @include lineClamp;
+  }
+
+  b {
+    @include Ib-H4-medium;
+  }
+
+  p {
+    @include Ib-H4-regular;
+  }
+}
+</style>

package/src/components/Tooltip/readme.mdx

@@ -0,0 +1,43 @@
+# IbTooltip
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Tooltips display additional information upon hover or focus. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
+
+## Overview
+
+A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element. The tooltip should be paired with an interactive UI element like a button. Tooltips should be used sparingly and contain succinct, supplementary information. Although tooltips used to allow for interactive elements such as buttons and links, do not include these elements in tooltips and use toggletip instead.
+
+### When to use
+
+- Describe icon buttons
+- When more information is useful in helping a user make decisions
+- When an element needs more context or explanation
+- Use when defining a term or inline item
+
+### When not to use
+
+- Since a tooltip disappears when a user hovers away, do not include information that is pertinent for the user to complete their task. Use helper text that is always visible and accessible for vital information such as required fields.
+- Do not include interactive elements within a tooltip. Interactive elements in tooltips are inaccessible for some users and are hard to use for all users since tooltips do not receive focus. If images, buttons, or links need to be included in supplemental information, use the toggletip component
+
+### Usage
+For correct use component `<ib-polltip>`, need to insert inside the element that should show this `<ib-polltip>` when hovering and focusing.
+<Canvas>
+  <Story id="tooltip--default" />
+</Canvas>
+
+
+### Props
+| Name  | type   | Default Value  | required | Description                                                                                                                                                                                                                                         |
+| ----- | ------ | -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title | String |                | No       | The title of the tooltip.                                                                                                                                                                                                                           |
+| text  | String |                | No       | The text to be displayed in the tooltip.                                                                                                                                                                                                            |
+| position  | String | '`top-center`' | No       | The position of tooltip. Possible values are: '`top-left`', '`top-center`', '`top-right`', '`right-top`', '`right-center`', '`right-bottom`', '`bottom-left`', '`bottom-center`', '`bottom-right`', '`left-top`', '`left-center`', '`left-bottom`'. |
+
+### Events
+This component not suports events.
+
+
+### Slots
+This component not suports events.
+