@avakhula/ui 0.0.10

package/src/components/Form/Toggle/toggle.scss

@@ -0,0 +1,166 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$switcher-slider-on: $blue-800;
+$switcher-slider-on-hover: $blue-700;
+$switcher-slider-on-active: $blue-900;
+$switcher-slider-off: $gray-600;
+$switcher-slider-off-hover: $gray-500;
+$switcher-slider-off-active: $neutral-600;
+$switcher-slider-disabled: $neutral-500;
+$switcher-circle: $white;
+
+.ib-toggle-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &.label-position-left {
+    flex-direction: row-reverse;
+
+    .toggle-label {
+      padding-right: 15px;
+      padding-left: 0;
+    }
+  }
+
+  .toggle-label {
+    @include Ib-H4-regular;
+    padding-left: 15px;
+    cursor: pointer;
+  }
+
+  .toggle-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+    width: 32px;
+    height: 18px;
+
+    .toggle {
+      position: relative;
+      display: inline-block;
+      margin-bottom: 0 !important;
+      width: 32px;
+      height: 18px;
+      z-index: 10;
+      cursor: pointer;
+
+      .ib-icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 12px;
+        color: #fff;
+        z-index: 11;
+      }
+
+      .unchecked-icon {
+        right: 2px;
+      }
+
+      .checked-icon {
+        left: 2px;
+      }
+    }
+
+    /* Hide default HTML checkbox */
+    .toggle input {
+      display: none;
+    }
+
+    /* The slider */
+    .toggle-slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $switcher-slider-off;
+      -webkit-transition: 0.4s;
+      transition: background-color 0.4s;
+    }
+
+    .toggle-slider:before {
+      position: absolute;
+      content: "";
+      height: 14px;
+      width: 14px;
+      left: 2px;
+      bottom: 2px;
+      background-color: $switcher-circle;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+  }
+
+  input:checked + .toggle-slider {
+    background-color: $switcher-slider-on;
+  }
+
+  input:disabled + .toggle-slider {
+    background-color: $switcher-slider-disabled;
+  }
+
+  input:checked + .toggle-slider:before {
+    transform: translateX(14px);
+  }
+
+  /* Rounded sliders */
+  .toggle-slider.round {
+    border-radius: 100px;
+  }
+
+  .toggle-slider.round:before {
+    border-radius: 50%;
+  }
+
+  &:hover {
+    .toggle-slider {
+      background-color: $switcher-slider-off-hover;
+    }
+  }
+
+  &:active {
+    .toggle-slider {
+      background-color: $switcher-slider-off-active;
+    }
+  }
+
+  &:focus {
+    border-radius: 4px;
+    @include outline(2px);
+  }
+
+  &.toggle-on {
+    &:hover {
+      .toggle-slider {
+        background-color: $switcher-slider-on-hover;
+      }
+    }
+
+    &:active {
+      .toggle-slider {
+        background-color: $switcher-slider-on-active;
+      }
+    }
+  }
+
+  &.toggle-disabled {
+    &:hover {
+      .toggle-slider,
+      .toggle,
+      .toggle-label {
+        cursor: default;
+      }
+    }
+
+    &:focus {
+      outline: none!important;
+    }
+    .toggle-label {
+      color: $switcher-slider-disabled;
+    }
+  }
+}

package/src/components/Icon.vue

@@ -0,0 +1,41 @@
+<template>
+  <ion-icon
+    :style="styles"
+    :name="name"
+    :class="classes + ' ib-icon' + ' icon-' + name"
+    ref="icon"
+  ></ion-icon>
+</template>
+
+<script>
+export default {
+  name: "IbIcon",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    styles: {
+      type: [String, Object],
+      default: "",
+    },
+  },
+  mounted() {
+    const interval = setInterval(() => {
+      if (this.$refs.icon?.shadowRoot?.querySelector("title")) {
+        this.$refs.icon.shadowRoot.querySelector("title").innerHTML = "";
+        clearInterval(interval);
+      }
+    }, 1000);
+  },
+};
+</script>
+<style>
+.ib-icon {
+  visibility: visible;
+}
+</style>

package/src/components/IconButton/IconButton.scss

@@ -0,0 +1,91 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/mixins.scss";
+
+.ib-icon-button {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+
+  &.ib-icon {
+    &-btn-rounded {
+      border-radius: 100%;
+    }
+
+    &-btn-m {
+      width: 36px;
+      height: 36px;
+    }
+
+    &-btn-s {
+      width: 24px;
+      height: 24px;
+    }
+
+    &-btn-xs {
+      width: 16px;
+      height: 16px;
+
+      .ib-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &:focus {
+        outline-offset: 2px;
+      }
+    }
+
+    &-btn-tertiary {
+      border: 2px solid transparent;
+      transition: border 0.3s;
+
+      &:hover {
+        border-color: $blue-300;
+      }
+
+      &:active {
+        border-color: transparent;
+        color: $blue-900;
+        background-color: $blue-200;
+      }
+    }
+
+    &-btn-ghost {
+      border: 2px solid transparent;
+      transition: border 0.3s;
+      color: $neutral-900;
+
+      &:hover {
+        border-color: $blue-300;
+      }
+
+      &:active {
+        border-color: transparent;
+        color: $blue-900;
+        background-color: $blue-200;
+      }
+    }
+
+    &-btn-white {
+      border: 2px solid transparent;
+      background-color: $white;
+      color: $neutral-900;
+
+      &:hover {
+        color: $blue-700;
+        background-color: $blue-100;
+        border-color: $blue-300;
+      }
+
+      &:active {
+        border-color: transparent;
+        color: $blue-900;
+        background-color: $blue-200;
+      }
+    }
+  }
+}

package/src/components/IconButton/IconButton.stories.js

@@ -0,0 +1,115 @@
+import IbIconButton from "./IconButton.vue";
+import IbIcon from "../Icon.vue";
+import { iconButtonKindOptions, iconButtonSize } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Icon Button",
+  component: IbIconButton,
+  argTypes: {
+    onClick: { action: "click" },
+    kind: {
+      control: { type: "select" },
+      options: Object.values(iconButtonKindOptions),
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(iconButtonSize),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const storyWrapper = '<div style="display: flex; align-items:center; justify-content: center; width: 200px; height: 200px; margin: 0 auto"><story /></div>';
+
+const Template = (args) => ({
+  components: { IbIconButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-icon-button v-bind="args">
+    <ion-icon style="font-size=20px" name="add"></ion-icon>
+  </ib-icon-button>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  kind: iconButtonKindOptions.primary,
+};
+Default.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+export const RoundedButton = Template.bind({});
+RoundedButton.args = {
+  rounded: true,
+};
+RoundedButton.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+const ButtonWithTooltipTemplate = (args) => ({
+  components: { IbIconButton, IbIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-icon-button v-bind="args">
+    <ib-icon style="font-size=20px" name="information-circle-outline"></ib-icon>
+  </ib-icon-button>
+  `,
+});
+
+export const ButtonWithTooltip = ButtonWithTooltipTemplate.bind({});
+ButtonWithTooltip.args = {
+  helpText: "Test",
+  kind: "ghost",
+};
+ButtonWithTooltip.decorators = [
+  () => ({
+    template: storyWrapper,
+  }),
+];
+
+const SizesTemplate = (args) => ({
+  components: { IbIconButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-icon-button size="xs">
+    <ion-icon name="add"></ion-icon>
+  </ib-icon-button>
+
+  <ib-icon-button size="s">
+    <ion-icon name="add"></ion-icon>
+  </ib-icon-button>
+
+  <ib-icon-button size="m">
+    <ion-icon name="add"></ion-icon>
+  </ib-icon-button>
+  `,
+});
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; gap: 10px; padding: 20px;"><story /></div>',
+  }),
+];
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: `All sizes: ${Object.keys(iconButtonSize)}`,
+    },
+  },
+};

package/src/components/IconButton/IconButton.vue

@@ -0,0 +1,100 @@
+<template>
+  <ib-button
+    @click="onClick"
+    v-bind="attrs"
+    :href="href"
+    :kind="kind"
+    :disabled="disabled"
+    :tabindex="disabledFocus ? -1 : 0"
+  >
+    <slot></slot>
+    <ib-tooltip v-if="helpText.length" :text="helpText" />
+  </ib-button>
+</template>
+
+<script>
+import IbButton from "../Button/Button.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
+import { iconButtonKindOptions, iconButtonSize } from "./constants.js";
+import removeEvents from "../../helpers/removeEvents";
+
+export default {
+  name: "IbIconButton",
+  props: {
+    kind: {
+      type: String,
+      default: iconButtonKindOptions.primary,
+      validator: (value) => Object.keys(iconButtonKindOptions).includes(value),
+    },
+    size: {
+      type: String,
+      default: iconButtonSize.s,
+      validator: (value) => Object.keys(iconButtonSize).includes(value),
+    },
+    rounded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    href: {
+      type: String,
+      default: "",
+    },
+    helpText: {
+      type: String,
+      default: "",
+    },
+    disabledFocus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      tooltipVisible: false,
+    };
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-icon-button"];
+      classList.push(`ib-icon-btn-${this.kind}`);
+      classList.push(`ib-icon-btn-${this.size}`);
+
+      if (this.rounded) {
+        classList.push(`ib-icon-btn-rounded`);
+      }
+
+      if (this.disabled) {
+        classList.push(`ib-icon-btn-disabled`);
+      }
+
+      return classList;
+    },
+    attrs() {
+      const attrsList = { ...removeEvents({ ...this.$attrs }) };
+      attrsList.class = [...this.classes, attrsList.class];
+
+      return attrsList;
+    },
+  },
+  components: {
+    IbButton,
+    IbTooltip,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss">
+@import "./IconButton.scss";
+</style>

package/src/components/IconButton/constants.js

@@ -0,0 +1,14 @@
+import { buttonKindOptions } from "../Button/constants";
+
+export const iconButtonKindOptions = {
+  [buttonKindOptions.primary]: buttonKindOptions.primary,
+  [buttonKindOptions.tertiary]: buttonKindOptions.tertiary,
+  [buttonKindOptions.ghost]: buttonKindOptions.ghost,
+  white: "white",
+};
+
+export const iconButtonSize = {
+  xs: "xs",
+  s: "s",
+  m: "m",
+};

package/src/components/IconButton/readme.mdx

@@ -0,0 +1,66 @@
+# IbIconButton
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Icon buttons allow users to take actions, and make choices, with a single tap. The icon Button should always have a tooltip.
+
+## 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. This button type has no label, so you must use a [tooltip](?path=/story/tooltip--default) when hovering and focusing on this button.
+
+### 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       | Specifies the kind of button. Possible options are: `primary`, `tertiary`, `ghost`, and `white`. |
+| size          | String  | s             | Specifies the size of the button. Possible options are xs, s, m.                                 |
+| rounded       | Boolean | false         | Determines if the button should be displayed with circle.                                        |
+| disabled      | Boolean | false         | Determines if the button should be disabled or not.                                              |
+| href          | String  | ''            | Specifies the URL that the button should navigate to when clicked.                               |
+| helpText      | String  | ''            | Displays tooltip text when hovering or focus over the button.                                    |
+| disabledFocus | Boolean | false         | Determines if the button should be focusable..                                                   |
+
+### Slots
+
+| Slot name | Description                           |
+| --------- | ------------------------------------- |
+| default   | The default slot for the button icon. |
+
+### Events
+
+| Event name | Parameters | Description                         |
+| ---------- | ---------- | ----------------------------------- |
+| click      | event      | Emitted when the button is clicked. |
+
+### Default
+
+<Canvas>
+  <Story id="icon-button--default" />
+</Canvas>
+
+### Rounded
+
+<Canvas>
+  <Story id="icon-button--rounded-button" />
+</Canvas>
+
+### With tooltip
+
+<Canvas>
+  <Story id="icon-button--button-with-tooltip" />
+</Canvas>
+
+
+### All sizes
+
+<Canvas>
+  <Story id="icon-button--sizes" />
+</Canvas>