@avakhula/ui 0.0.10

package/src/assets/scss/variables/shadows.scss

@@ -0,0 +1,17 @@
+$ib-shadow-m1: 0px 0px 1px rgba(0, 0, 0, 0.2);
+$ib-shadow-m2: 0px 0px 1px rgba(0, 0, 0, 0.25);
+$ib-shadow-m3: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1);
+
+$ib-shadow-1: 0px 0px 10px rgba(49, 63, 80, 0.05);
+$ib-shadow-2: 0px 4px 4px rgba(49, 63, 80, 0.1);
+$ib-shadow-3: 0px 3px 10px rgba(49, 63, 80, 0.14);
+$ib-shadow-4: 0px 1px 10px rgba(49, 63, 80, 0.25);
+$ib-shadow-5: 0px 5px 15px rgba(80, 80, 80, 0.15);
+$ib-shadow-6: 0px 7px 20px rgba(49, 63, 80, 0.15);
+$ib-shadow-7: 0px 15px 25px rgba(49, 63, 80, 0.05);
+
+$ib-shadow-r: -2px 0px 7px rgba(80, 80, 80, 0.1);
+$ib-shadow-r1: -4px 0px 14px rgba(80, 80, 80, 0.1);
+
+$ib-shadow-l: 2px 0px 7px rgba(80, 80, 80, 0.1);
+$ib-shadow-l1: 4px 0px 14px rgba(80, 80, 80, 0.1);

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,94 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/mixins.scss";
+
+
+$title-bg: $gray-200;
+$title-color: $neutral-900;
+$title-chevron-color: $neutral-900;
+$title-border-color: transparent;
+
+$title-hover-bg: $blue-100;
+$title-hover-color: $blue-700;
+$title-hover-chevron-color: $blue-700;
+$title-hover-border-color: $blue-300;
+
+$title-active-bg: $blue-200;
+$title-active-color: $blue-900;
+$title-active-chevron-color: $blue-900;
+$title-active-border-color: transparent;
+
+$title-opened-chevron-color: $blue-900;
+
+$content-border-color: $gray-200;
+$content-bg: $gray-50;
+
+.ib-accordion {
+  .accordion-title {
+    text-align: start;
+    position: relative;
+    border-radius: 4px;
+    padding: 0 13px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    background-color: $title-bg;
+    border: 2px solid $title-border-color;
+    color: $title-color;
+    transition: border 0.3s, color 0.3s, background-color 0.3s;
+    width: 100%;
+    cursor: pointer;
+
+    .chevron-icon {
+      font-size: 16px;
+      color: $title-chevron-color;
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: color 0.3s, transform 0.3s;
+    }
+
+    &:hover {
+      color: $title-hover-color;
+      background-color: $title-hover-bg;
+      border-color: $title-hover-border-color;
+
+      .chevron-icon {
+        color: $title-hover-chevron-color;
+      }
+    }
+
+    &:active {
+      color: $title-active-color;
+      background-color: $title-active-bg;
+      border-color: $title-active-border-color;
+
+      .chevron-icon {
+        color: $title-active-chevron-color;
+      }
+    }
+
+    &:focus {
+      @include focus(2px);
+    }
+  }
+
+  .accordion-content {
+    border-radius: 0 0 4px 4px;
+    border: 1px solid $content-border-color;
+    padding:10px 15px 15px;
+    overflow: hidden;
+    transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
+    background-color: $content-bg;
+  }
+
+  &.active {
+    .accordion-title {
+      border-radius: 4px 4px 0 0;
+      .chevron-icon {
+        color: $title-opened-chevron-color;
+        transform: translateY(-50%) rotate(180deg);
+      }
+    }
+  }
+}

package/src/components/Accordion/Accordion.stories.js

@@ -0,0 +1,41 @@
+import IbAccordion from "./Accordion.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Accordion",
+  components: IbAccordion,
+  argTypes: {
+    isOpen: { control: "boolean" },
+    onOpen: { action: "open" },
+    onClose: { action: "close" },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbAccordion },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-accordion v-bind="args">
+    <template v-slot:title>
+      Title
+    </template>
+    <template v-slot:content>
+      <ul style="margin: 0;">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+        <li>Item 4</li>
+      </ul>
+    </template>
+  </ib-accordion>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="ib-accordion" :class="{ active: isActive }">
+    <button class="accordion-title" @click="onClick">
+      <slot name="title"></slot>
+
+      <ib-icon class="chevron-icon" name="chevron-down-outline" />
+    </button>
+
+    <Transition
+      name="expand"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @leave="leave"
+    >
+      <div v-show="isActive" class="accordion-content">
+        <slot name="content"></slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import IbIcon from "../Icon.vue";
+
+export default {
+  name: "IbAccordion",
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.isActive = val;
+    },
+  },
+  data() {
+    return {
+      isActive: this.isOpen,
+    };
+  },
+  methods: {
+    onClick() {
+      this.isActive = !this.isActive;
+      if (this.isActive) {
+        this.$emit("open", this.isActive);
+      } else {
+        this.$emit("close", this.isActive);
+      }
+    },
+    enter(element) {
+      const width = getComputedStyle(element).width;
+
+      element.style.width = width;
+      element.style.position = "absolute";
+      element.style.visibility = "hidden";
+      element.style.height = "auto";
+
+      const height = getComputedStyle(element).height;
+
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
+      getComputedStyle(element).height;
+      requestAnimationFrame(() => {
+        element.style.height = height;
+      });
+    },
+    afterEnter(element) {
+      element.style.height = "auto";
+    },
+    leave(element) {
+      const height = getComputedStyle(element).height;
+
+      element.style.height = height;
+      getComputedStyle(element).height;
+
+      requestAnimationFrame(() => {
+        element.style.height = 0;
+      });
+    },
+  },
+  components: {
+    IbIcon,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 1s ease-in-out;
+  overflow: hidden;
+}
+
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+
+@import "./Accordion.scss";
+</style>

package/src/components/Accordion/readme.mdx

@@ -0,0 +1,38 @@
+# IbAccordion
+
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import * as ButtonStories from './Accordion.stories';
+
+The expansion panel component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.
+
+Expansion panel can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
+
+### When to Use
+
+- To organize related information.
+- To shorten pages and reduce scrolling when content is not crucial to read in full.
+- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
+
+### Props
+
+| Name   | type    | Default Value | Description                                             |
+| ------ | ------- | ------------- | ------------------------------------------------------- |
+| isOpen | Boolean | false         | Sets whether the accordion is initially open or closed. |
+
+### Slots
+
+| Slot name | Description                                                                        |
+| --------- | ---------------------------------------------------------------------------------- |
+| title     | Used to provide the title of the accordion.                                        |
+| content   | Used to provide the content that will be displayed when the accordion is expanded. |
+
+### Events
+
+| Event name | Parameters | Description                           |
+| ---------- | ---------- | ------------------------------------- |
+| open       | True       | Emitted when the accordion is opened. |
+| close      | false      | Emitted when the accordion is closed. |
+
+### Default
+
+<Canvas of={ButtonStories.Default} />

package/src/components/Alert/Alert.stories.js

@@ -0,0 +1,69 @@
+import IbAlert from "./Alert.vue";
+import { alertTypeOptions } from "./constants";
+import readme from "./readme.mdx";
+export default {
+  title: "Alert",
+  component: IbAlert,
+  argTypes: {
+    onClose: { action: "close" },
+    type: {
+      control: { type: "select" },
+      options: Object.values(alertTypeOptions),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-alert v-bind="args">
+    Alert message
+  </ib-alert>`,
+});
+
+export const Default = Template.bind({});
+
+const Type = (args) => ({
+  components: { IbAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-alert style="margin-bottom: 5px;">Alert message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;" type="warning">Warning message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;" type="success">Success message</ib-alert>
+    <ib-alert type="info">Info message</ib-alert>
+  `,
+});
+
+export const Types = Type.bind({});
+Type.parameters = { controls: { disable: true } };
+
+const LargeTemplate = (args) => ({
+  components: { IbAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-alert v-bind="args">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      <template #link>
+        <a href="#" class="ib-standalone-link">View Server</a>
+      </template>
+    </ib-alert>`,
+});
+
+export const LargeAlert = LargeTemplate.bind({});
+LargeAlert.args = {
+  showCloseButton: true,
+  showIcon: true,
+  title: "It is Title",
+};

package/src/components/Alert/Alert.vue

@@ -0,0 +1,131 @@
+<template>
+  <div role="alert" :class="classes">
+    <div ref="content" class="content">
+      <span class="content-head">
+        <ib-icon v-if="showIcon" class="ib-alert-icon" :name="iconName" />
+        <b v-if="title?.length" class="ib-alert-title">
+          {{ title }}
+        </b>
+      </span>
+
+      <span class="text-content">
+        <slot></slot>
+      </span>
+
+      <div class="link">
+        <slot name="link"></slot>
+      </div>
+    </div>
+
+    <ib-icon-button
+      class="close-button"
+      v-if="showCloseButton"
+      @click="close"
+      kind="ghost"
+    >
+      <ib-icon class="close-button-icon" name="close-outline" />
+    </ib-icon-button>
+  </div>
+</template>
+
+<script>
+import IbIcon from "../Icon.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import { alertTypeOptions } from "./constants";
+
+export default {
+  name: "IbAlert",
+  props: {
+    type: {
+      type: String,
+      default: alertTypeOptions.alert,
+      validator: (value) => Object.keys(alertTypeOptions).includes(value),
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+    this.checkHeight();
+    window.addEventListener("resize", () => this.checkHeight());
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+    checkHeight() {
+      if (!this.$refs.content) {
+        return;
+      }
+
+      const contentStyle = getComputedStyle(this.$refs.content);
+      const parentWidth = this.$refs.content?.parentElement.offsetWidth;
+
+      if (!parentWidth || !contentStyle) return;
+
+      if (parseInt(contentStyle.width) <= parentWidth) {
+        this.$refs.content.classList.remove("large");
+      }
+
+      if (parseInt(contentStyle.height) > 37) {
+        this.$refs.content.classList.add("large");
+      }
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-alert"];
+      classList.push(`ib-alert-${this.type}`);
+
+      if (this.title.length) {
+        classList.push("has-title");
+      }
+
+      if (this.showIcon) {
+        classList.push("has-icon");
+      }
+
+      if (this.showCloseButton) {
+        classList.push("has-close-button");
+      }
+
+      if (this.$slots.link) {
+        classList.push("has-link");
+      }
+
+      return classList;
+    },
+    iconName() {
+      if (this.type === alertTypeOptions.info) {
+        return "information-circle-outline";
+      }
+
+      if (this.type === alertTypeOptions.success) {
+        return "checkmark-circle-outline";
+      }
+
+      return "alert-circle-outline";
+    },
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", () => this.checkHeight());
+  },
+  components: {
+    IbIcon,
+    IbIconButton,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./alert.scss";
+</style>

package/src/components/Alert/alert.scss

@@ -0,0 +1,166 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss//typography.scss";
+
+$alert-content-color: $neutral-900;
+$alert-alert-primary-color: $red-800;
+$alert-alert-secondary-color: $red-50;
+$alert-warning-primary-color: $brown-400;
+$alert-warning-secondary-color: $yellow-50;
+$alert-info-primary-color: $blue-700;
+$alert-info-secondary-color: $blue-50;
+$alert-success-primary-color: $green-800;
+$alert-success-secondary-color: $green-50;
+
+.ib-alert {
+  padding: 5px;
+  color: $alert-content-color;
+  border-radius: 2px;
+  border-left: 2px solid transparent;
+  position: relative;
+
+  &.has-title {
+    .content .text-content {
+      @include Ib-H4-regular;
+    }
+  }
+
+  .link {
+    padding-left: 10px;
+  }
+
+  &.has-icon {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  &.has-close-button {
+    padding-right: 44px;
+
+    .large + .close-button {
+      top: 10px;
+      transform: translateY(0);
+    }
+  }
+
+  &.has-close-button .content {
+    min-height: 24px;
+  }
+
+  &.has-link {
+    .content {
+      .link {
+        margin-left: auto;
+      }
+
+      &.large {
+        .link {
+          padding-bottom: 5px;
+          display: flex;
+        }
+      }
+    }
+    &.has-close-button {
+      .content {
+        &.large {
+          .link {
+            margin-right: -24px;
+          }
+        }
+      }
+    }
+  }
+
+  .content {
+    display: flex;
+    align-items: center;
+    width: auto;
+
+    .content-head {
+      display: flex;
+      align-items: center;
+    }
+
+    .text-content {
+      @include Ib-H5-regular;
+    }
+
+    &.large {
+      padding-left: 3px;
+      padding-right: 5px;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .text-content {
+        @include Ib-P1-regular;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding-left: 0;
+      }
+    }
+  }
+
+  &.has-icon {
+    .content.large .text-content {
+      padding-left: 25px;
+    }
+  }
+
+  .close-button {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .close-button-icon {
+      font-size: 20px;
+    }
+  }
+
+  &-title {
+    margin-right: 5px;
+    @include Ib-H4-medium;
+  }
+
+  &-icon {
+    display: inline-block;
+    font-size: 20px;
+    min-width: 20px;
+    margin-right: 5px;
+  }
+
+  &-alert {
+    border-left-color: $alert-alert-primary-color;
+    background-color: $alert-alert-secondary-color;
+
+    .ib-alert-icon {
+      color: $alert-alert-primary-color;
+    }
+  }
+
+  &-warning {
+    border-left-color: $alert-warning-primary-color;
+    background-color: $alert-warning-secondary-color;
+
+    .ib-alert-icon {
+      color: $alert-warning-primary-color;
+    }
+  }
+
+  &-info {
+    border-left-color: $alert-info-primary-color;
+    background-color: $alert-info-secondary-color;
+
+    .ib-alert-icon {
+      color: $alert-info-primary-color;
+    }
+  }
+
+  &-success {
+    border-left-color: $alert-success-primary-color;
+    background-color: $alert-success-secondary-color;
+
+    .ib-alert-icon {
+      color: $alert-success-primary-color;
+    }
+  }
+}

package/src/components/Alert/constants.js

@@ -0,0 +1,6 @@
+export const alertTypeOptions = {
+  alert: "alert",
+  warning: "warning",
+  info: "info",
+  success: "success",
+};