@avakhula/ui 0.0.10

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,90 @@
+import IbProgressBar from "./ProgressBar.vue";
+import { progressBarStates } from "./constants";
+import { ref } from "vue";
+import readme from "./readme.mdx";
+
+const storyWrapper = '<div style="padding: 30px"><story /></div>';
+
+export default {
+  title: "Progress Bar",
+  component: IbProgressBar,
+  argTypes: {
+    states: {
+      control: { type: "select" },
+      options: Object.values(progressBarStates),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbProgressBar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-progress-bar v-bind="args" />
+  `,
+});
+export const Default = Template.bind({});
+Default.args = {
+  progress: 20,
+};
+Default.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+
+const AnimatedTemplate = () => ({
+  components: { IbProgressBar },
+
+  setup() {
+    let progress = ref(50);
+    let status = ref("progress");
+
+    const timer = setInterval(() => {
+      progress.value += 1;
+      if (progress.value >= 100) {
+        status.value = "success";
+        clearInterval(timer);
+      }
+    }, 900);
+    return { progress, status };
+  },
+  template: `
+    <ib-progress-bar :states="status" :progress="progress" />
+  `,
+});
+
+export const Animated = AnimatedTemplate.bind({});
+Animated.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+Animated.parameters = { controls: { disable: true } };
+
+const AllStatesTemplate = () => ({
+  components: { IbProgressBar },
+
+  setup() {
+    const states = Object.values(progressBarStates)
+
+    return { states };
+  },
+  template: `
+    <ib-progress-bar v-for="status in states" :states="status" :progress="75" style="margin-bottom: 50px" />
+  `,
+});
+export const States = AllStatesTemplate.bind({});
+States.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+States.parameters = { controls: { disable: true } };

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="ib-progress-bar-wrapper">
+    <div :class="classes">
+      <div class="progress" :style="{ width: progress + '%' }">
+        <div class="gradient"></div>
+      </div>
+      <div></div>
+    </div>
+    <ib-icon v-show="iconName.length" class="status-icon" :name="iconName" />
+  </div>
+</template>
+
+<script>
+import IbIcon from "../Icon.vue";
+import { progressBarStates } from "./constants";
+
+export default {
+  props: {
+    states: {
+      type: String,
+      default: progressBarStates.PROGRESS,
+    },
+    progress: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-progress-bar"];
+      classList.push(`progress-bar-${this.states}`);
+
+      return classList;
+    },
+    iconName() {
+      if (this.states === progressBarStates.SUCCESS) {
+        return "checkmark-circle";
+      }
+
+      if (
+        this.states === progressBarStates.FAILED ||
+        this.states === progressBarStates.CANCELED
+      ) {
+        return "close-circle";
+      }
+
+      return "";
+    },
+  },
+  components: {
+    IbIcon,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./progressBar.scss";
+</style>

package/src/components/ProgressBar/constants.js

@@ -0,0 +1,6 @@
+export const progressBarStates = {
+  PROGRESS: "progress",
+  SUCCESS: "success",
+  FAILED: "failed",
+  CANCELED: "canceled",
+};

package/src/components/ProgressBar/progressBar.scss

@@ -0,0 +1,116 @@
+@import "../../assets/scss/variables/colors.scss";
+
+$progress-bar-bg: $gray-300;
+$progress-bar-gradient: linear-gradient(
+  90deg,
+  rgba(255, 255, 255, 0) 0%,
+  rgba(255, 255, 255, 0.3) 35.73%,
+  rgba(255, 255, 255, 0.3) 64.37%,
+  rgba(255, 255, 255, 0) 100%
+);
+$progress-bar-progress-bg: $blue-800;
+$progress-bar-success-bg: $green-800;
+$progress-bar-failed-bg: $red-800;
+$progress-bar-canceled-bg: $gray-500;
+
+.ib-progress-bar-wrapper {
+  position: relative;
+
+  .ib-progress-bar {
+    position: relative;
+    width: 100%;
+    background: $progress-bar-bg;
+    border-radius: 4px;
+    height: 8px;
+    overflow: hidden;
+    display: flex;
+
+    @keyframes animation {
+      0% {
+        left: -180px;
+      }
+      100% {
+        left: 100%;
+      }
+    }
+
+    .gradient {
+      display: none;
+      width: 180px;
+      height: 8px;
+      background: $progress-bar-gradient;
+      position: absolute;
+      left: 0;
+      top: 0;
+      animation-name: animation;
+      animation-duration: 4s;
+      animation-delay: 1s;
+      animation-iteration-count: infinite;
+    }
+
+    & + .status-icon {
+      font-size: 20px;
+      position: absolute;
+      right: 0;
+      bottom: -35px;
+    }
+
+    .progress {
+      border-radius: inherit;
+      height: 100%;
+      max-width: 100%;
+      transition: width 0.4s, background-color 0.4s;
+
+      & + div {
+        width: auto;
+        flex: auto;
+        background: $progress-bar-bg;
+        position: relative;
+        z-index: 100;
+      }
+    }
+
+    &.progress-bar-progress {
+      .progress {
+        background-color: $progress-bar-progress-bg;
+      }
+
+      .gradient {
+        display: block;
+      }
+    }
+
+    &.progress-bar-success {
+      .progress {
+        background-color: $progress-bar-success-bg;
+        min-width: 100%;
+      }
+
+      & + .status-icon {
+        color: $progress-bar-success-bg;
+      }
+    }
+
+    &.progress-bar-failed {
+      .progress {
+        background-color: $progress-bar-failed-bg;
+        min-width: 100%;
+      }
+
+      & + .status-icon {
+        color: $progress-bar-failed-bg;
+      }
+    }
+
+    &.progress-bar-canceled {
+      .progress {
+        min-width: 100%;
+        background-color: $progress-bar-canceled-bg;
+      }
+
+      & + .status-icon {
+        color: $progress-bar-canceled-bg;
+      }
+    }
+  }
+}

package/src/components/ProgressBar/readme.mdx

@@ -0,0 +1,67 @@
+# IbProgressBar
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+A progress bar provides feedback about the duration and progression of a process, such as a download, file transfer, or installation, to indicate how long a user will be waiting.
+
+## Overview
+
+A progress bar indicates that the user’s request has been received and the application is making progress toward completing the requested action. Progress bars inform users about the status of ongoing processes, the estimated time of how long a process will take, or if a request is being executed.
+
+### When to use
+
+- For a long operation or a process that can take a considerable or unknown amount of time.
+- When the process can be described with quantitative information, such as a percentage.
+- To visually show the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates.
+- To convey that data is being requested, transferred, or processed.
+
+#### When not to use
+
+- When the load time is expected to display expanded information, use skeleton states instead (in future updates).
+- When manual user actions are required to progress, use a progress indicator instead (in future updates).
+- When the progress is determined by user actions such as tutorials completed, or storage space, rather than system actions
+- If the process takes less than 5 seconds to load, use loading instead (for future documentation).
+
+### Progress Overview
+
+Determinate progress bars are used when the loading progress can be tracked and translated into a bar indicator which fills the track from 0% to 100% and never decreases in value or resets.
+Use a determinate progress bar when the progress can be calculated against a specific goal.
+It’s best to give the user transparency about the process which usually leads to increased trust in the software or platform.
+
+<Canvas>
+  <Story id="progress-bar--default" />
+</Canvas>
+
+### Props
+
+| Name     | type             | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| -------- | ---------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| states   | String           | progress      | The states prop determines the state of the progress bar. It can be one of the following values: <ul><li>**progress:** Indicates that the progress bar is currently in progress.</li><li>**success:** Indicates that the progress bar has completed successfully.</li><li>**failed:** Indicates that the progress bar has failed to complete.</li><li>**canceled:** Indicates that the progress bar has been canceled.</li></ul> |
+| progress | String or Number | false         | The progress prop determines the current progress of the progress bar. It can be a value between 0 and 100, which represents the percentage of completion.                                                                                                                                                                                                                                                                       |
+
+when state is **success**, **failed** or **canceled** progress bar is full
+
+### Events
+
+This component not suports events.
+
+### Slots
+
+This component not suports slots.
+
+### States 
+There are four states for the progress bar: in progress, success, error, cancelled.
+ - **In Progress.** The active loading state, represented by an animated blue bar indicator, conveys that the action is still in progress.
+ - **Success.** The success loading state, conveyed by a full-width green progress bar and checkmark icon, indicates that the action completed successfully.
+ - **Error.** The error loading state indicates that the action did not successfully complete. If an error occurs, an inline notification or error handling within the form should appear. As soon as a process fails, the indicator bar’s progress spans full width, turns red, and remains visible. A failed icon is also shown.
+ - **Cancelled.** -
+<Canvas>
+  <Story id="progress-bar--states" />
+</Canvas>
+
+### Percent-done animation
+
+Use for actions that take **10 seconds** or more.
+Percent-done progress indicators are the most informative type of wait-animation feedback. They show the current progress, how much has already been accomplished, and how much is left. They convey important information about (approximately) how long the wait time is. This information gives users control (that is, they can decide whether to wait or not); it decreases uncertainty about the length of the process and may reduce the perceived wait time. Progress bars or circles that fill from 0-100% are examples of this type of feedback.
+
+A percent-done indicator may be used for actions that take less than 10 seconds, if the action involves processing a series of documents or registries, because the user understands that the system is working with a set number of records.

package/src/components/Sorting/Sorting.stories.js

@@ -0,0 +1,35 @@
+import IbSorting from "./Sorting.vue";
+import { typesSorting, typesSortingView } from "./constants.js";
+
+export default {
+  title: "Sorting",
+  component: IbSorting,
+  argTypes: {
+    sort: {
+      control: { type: "select" },
+      options: Object.values(typesSorting),
+    },
+    viewSorting: {
+      control: { type: "select" },
+      options: Object.values(typesSortingView),
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbSorting },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-sorting
+      v-bind="args"
+    />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  viewSorting: typesSortingView.TABLE_VIEW,
+  title: "sorting",
+};

package/src/components/Sorting/Sorting.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="sorting-wrapper">
+    <div
+      class="table-sorting-wrapper"
+      :class="{
+        active: currentTypeSort,
+        disabled: disableSorting,
+      }"
+      v-if="viewSorting === sortingTypesView.TABLE_VIEW"
+    >
+      <button class="sorting-label" type="button">
+        {{ title }}
+        <ib-tooltip v-if="tooltipTextSorting" :text="tooltipTextSorting">
+        </ib-tooltip>
+      </button>
+      <ib-icon-button kind="white" size="s" @click="clickHandler">
+        <ion-icon :name="iconType"></ion-icon>
+        <ib-tooltip v-if="tooltipIconSorting" :text="tooltipIconSorting">
+        </ib-tooltip>
+      </ib-icon-button>
+    </div>
+
+    <button
+      v-else
+      class="sorting-button"
+      type="button"
+      :aria-label="sort"
+      @click="clickHandler"
+      :class="{
+        active: currentTypeSort,
+        disabled: disableSorting,
+      }"
+    >
+      {{ title }}
+      <ib-icon
+        v-if="iconType"
+        :name="iconType"
+        :style="{
+          fontSize: iconSize + 'px',
+        }"
+      ></ib-icon>
+      <ib-tooltip v-if="tooltipTextSorting" :text="tooltipTextSorting">
+      </ib-tooltip>
+    </button>
+  </div>
+</template>
+
+<script>
+import IbIcon from "../Icon.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
+import { typesSorting, typesSortingView } from "./constants.js";
+
+export default {
+  name: "IbSorting",
+  props: {
+    tooltipTextSorting: {
+      type: String,
+    },
+    tooltipIconSorting: {
+      type: String,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    sort: {
+      type: String,
+      default: null,
+    },
+    viewSorting: {
+      type: String,
+      required: true,
+    },
+    disableSorting: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      sortingTypes: typesSorting,
+      sortingTypesView: typesSortingView,
+      currentTypeSort: this.sort,
+    };
+  },
+  watch: {
+    currentTypeSort: function () {
+      this.updateTypeSorting();
+    },
+  },
+  methods: {
+    clickHandler() {
+      if (!this.currentTypeSort) {
+        this.currentTypeSort = this.sortingTypes.TYPE_ASC;
+        return;
+      } else if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
+        this.currentTypeSort = this.sortingTypes.TYPE_DESC;
+        return;
+      }
+      this.currentTypeSort = null;
+    },
+    updateTypeSorting() {
+      this.$emit("update-sorting", this.typeSort);
+    },
+  },
+  computed: {
+    iconType() {
+      if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
+        return "arrow-up";
+      } else if (this.currentTypeSort === this.sortingTypes.TYPE_DESC) {
+        return "arrow-down";
+      } else if (this.viewSorting !== this.sortingTypesView.GRID_VIEW) {
+        return "swap-vertical";
+      }
+      return null;
+    },
+  },
+  components: {
+    IbIcon,
+    IbIconButton,
+    IbTooltip,
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./sorting.scss";
+</style>

package/src/components/Sorting/constants.js

@@ -0,0 +1,10 @@
+export const typesSortingView = {
+  LIST_VIEW: "list-sorting",
+  GRID_VIEW: "grid-sorting",
+  TABLE_VIEW: "table-sorting",
+};
+
+export const typesSorting = {
+  TYPE_ASC: "asc",
+  TYPE_DESC: "desc",
+};

package/src/components/Sorting/sorting.scss

@@ -0,0 +1,87 @@
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/reset.scss";
+@import "../../assets/scss/mixins.scss";
+
+button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+}
+
+.sorting-wrapper {
+
+  .table-sorting-wrapper{
+    display: flex;
+    align-items: center;
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    .sorting-label {
+      border: solid 2px transparent;
+      padding: 0 4px;
+      border-radius: 4px;
+      margin-right: 2px;
+      @include Ib-H4-regular;
+      color: $neutral-900;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      transition: background-color .3s;
+      transition: color .3s;
+
+      &:hover {
+        color: $blue-700;
+        border-color: $blue-300;
+        cursor: pointer;
+        background-color: $blue-100;
+      }
+
+      &:active {
+        border-color: transparent;
+        color: $blue-900;
+        background-color: $blue-200;
+        transition: background-color .3s;
+        transition: color .3s;
+      }
+
+      &:focus {
+        z-index: 1;
+        @include focus(2px);
+      }
+    }
+  }
+
+  .sorting-button {
+    display: flex;
+    align-items: center;
+    @include Ib-H4-regular;
+    color: $neutral-900;
+    transition: color .3s;
+
+    ion-icon {
+      margin-left: 2px;
+    }
+
+    &.active {
+      color: $blue-900;
+    }
+
+    &:hover {
+      color: $blue-700;
+      transition: all .3s;
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    &:focus {
+      border-radius: 4px;
+      @include focus(2px);
+    }
+  }
+}

package/src/components/SplitButton/SplitButton.stories.js

@@ -0,0 +1,39 @@
+import IbSplitButton from "./SplitButton.vue";
+import IbSplitButtonItem from "./SplitButtonItem.vue";
+import { splitButtonKindOptions } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "SplitButton",
+  component: IbSplitButton,
+  argTypes: {
+    kind: {
+      control: { type: "select" },
+      options: Object.values(splitButtonKindOptions),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbSplitButton, IbSplitButtonItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-split-button v-bind="args">
+    <ib-split-button-item>Button 1</ib-split-button-item>
+    <ib-split-button-item>Button 2</ib-split-button-item>
+    <ib-split-button-item>Button 3</ib-split-button-item>
+    <ib-split-button-item href="#">Link 4</ib-split-button-item>
+  </ib-split-button>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  id: "test",
+};