@intellias/menu 1.0.0

package/components/buttons/action-button/ActionButton.scss

@@ -0,0 +1,133 @@
+@use "sass:map";
+@import "../../../scss/components/utils";
+@import "../../../scss/components/variables";
+
+.action-button {
+    position: relative;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    min-width: fit-content;
+    color: map.get($intems-colors, "text-on-color");
+    background: map.get($intems-colors, "primary");
+    text-transform: initial;
+    border-radius: 4px;
+    font-weight: 600;
+
+    &:hover {
+        background: map.get($intems-colors, "primary-hover");
+    }
+
+    &.btn-full {
+        @media #{$small-and-down} {
+            width: 100%;
+        }
+    }
+
+    &.is-btn-link {
+        @extend %clear-default-button-styles !optional;
+        color: map.get($intems-colors, "primary-hover");
+        background: transparent !important;
+
+        &:hover,
+        &:active {
+            .span-text {
+                text-decoration: underline;
+            }
+        }
+
+        &:disabled,
+        &.disabled {
+            pointer-events: none;
+            color: map.get($intems-colors, "text-disable") !important;
+        }
+    }
+
+    &.is-link {
+        color: map.get($intems-colors, "primary-hover");
+        background: transparent !important;
+
+        &:hover,
+        &:active {
+            text-decoration: underline;
+        }
+
+        &:disabled,
+        &.disabled {
+            pointer-events: none;
+            color: map.get($intems-colors, "text-disable") !important;
+        }
+    }
+
+    &.btn-transparent {
+        background: transparent;
+        color: map.get($intems-colors, "primary-hover");
+
+        &:hover,
+        &:focus {
+            background: map.get($intems-colors, "hover");
+        }
+
+        &:disabled {
+            color: map.get($intems-colors, "text-disable");
+            background: transparent !important;
+        }
+    }
+
+    .left-icon {
+        margin-right: 4px;
+    }
+
+    .spinner-solid {
+        color: map.get($intems-colors, "text-on-color");
+        animation: spin 2s linear infinite;
+        vertical-align: middle;
+        transition: width 300ms, height 300ms;
+        margin-left: 8px;
+    }
+
+    .span-text {
+        vertical-align: middle;
+    }
+
+    span.tooltipped {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        cursor: pointer;
+        pointer-events: all;
+    }
+
+    &button {
+        span.tooltipped {
+            margin-left: -16px;
+        }
+    }
+
+    &.btn-secondary {
+        border: 1px solid map.get($intems-colors, "border");
+        background-color: map.get($intems-colors, "surface-primary");
+    }
+
+    &.disabled:not(a),
+    &:not(a, .is-btn-link):disabled,
+    &[disabled]:not(a, .is-btn-link) {
+        background-color: map.get($intems-colors, "disable") !important;
+        color: map.get($intems-colors, "text-disable") !important;
+
+        .spinner-solid {
+            color: map.get($intems-colors, "text-tertiary") !important;
+        }
+    }
+
+    i.icon {
+        vertical-align: middle;
+    }
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/components/buttons/action-button/ActionButton.ts

@@ -0,0 +1,57 @@
+import VueRouter from "vue-router";
+
+export default {
+  name: "ActionButton",
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    mini: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    href: {
+      type: String,
+      default: "",
+    },
+    tooltip: {
+      type: String,
+      default: "",
+    },
+    to: undefined as VueRouter,
+    isLink: {
+      type: Boolean,
+      default: false,
+    },
+    iconLeft: {
+      type: String,
+      default: "",
+    },
+    iconRight: {
+      type: String,
+      default: "",
+    },
+    transparent: {
+      type: Boolean,
+      default: false,
+    },
+    btnLink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    toHref(): VueRouter {
+      return this.href instanceof VueRouter ? this.href : null;
+    },
+  },
+};

package/components/buttons/action-button/ActionButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <router-link
+    class="action-button"
+    :class="{ 'btn-mini': mini, btn: !isLink, 'is-link': isLink }"
+    v-if="to"
+    :to="to"
+  >
+    <i v-if="iconLeft" class="left-icon icon icon-small" :class="iconLeft"></i>
+    <slot></slot>
+  </router-link>
+  <a
+    v-else-if="href || isLink"
+    class="action-button pointer"
+    :class="{ 'btn-mini': mini, disabled: isDisabled, 'is-link': isLink }"
+    :href="!isDisabled && href !== '#' ? href : null"
+  >
+    <span v-if="tooltip" class="tooltipped" v-tooltip.bottom="tooltip"></span>
+    <i v-if="iconLeft" class="left-icon icon icon-small" :class="iconLeft"></i>
+    <slot></slot>
+  </a>
+  <button
+    type="button"
+    class="action-button"
+    :class="{
+      'btn-mini': mini,
+      'btn-large': large,
+      btn: !isLink,
+      'btn-transparent': transparent,
+      'is-btn-link': btnLink,
+      'waves-effect': !btnLink,
+    }"
+    :disabled="isDisabled"
+    v-else
+  >
+    <i v-if="iconLeft" class="left-icon icon icon-small" :class="iconLeft"></i>
+    <span v-if="tooltip" class="tooltipped" v-tooltip.bottom="tooltip"></span>
+    <span class="span-text"><slot>Click me</slot></span>
+    <i v-show="isLoading" class="icon icon-small spinner-solid loading"></i>
+  </button>
+</template>
+
+<script>
+import ActionButton from "./ActionButton";
+
+export default ActionButton;
+</script>
+
+<style lang="scss">
+@import "ActionButton.scss";
+</style>

package/components/buttons/secondary-button/SecondaryButton.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@import "../../../scss/components/utils";
+@import "../../../scss/components/variables";
+
+.secondary-button {
+    position: relative;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: map.get($intems-colors, "text-primary");
+    text-transform: initial;
+    border-radius: 4px;
+    font-weight: 600;
+    line-height: 38px;
+
+    i.icon {
+        vertical-align: middle;
+    }
+
+    .spinner-solid {
+        color: map.get($intems-colors, "text-primary");
+        animation: spin 2s linear infinite;
+        vertical-align: middle;
+        transition: width 300ms, height 300ms;
+        margin-left: 8px;
+    }
+
+    .left-icon {
+        margin-right: 4px;
+    }
+
+    &.disabled,
+    &.btn-secondary:disabled,
+    &.btn[disabled] {
+        background-color: map.get($intems-colors, "disable") !important;
+        color: map.get($intems-colors, "text-disable");
+
+        .spinner-solid {
+            color: map.get($intems-colors, "text-disable") !important;
+        }
+    }
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/components/buttons/secondary-button/SecondaryButton.ts

@@ -0,0 +1,28 @@
+import VueRouter from "vue-router";
+
+export default {
+  name: "SecondaryButton",
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    mini: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    iconLeft: {
+      type: String,
+      default: "",
+    },
+    to: undefined as VueRouter,
+  },
+};

package/components/buttons/secondary-button/SecondaryButton.vue

@@ -0,0 +1,27 @@
+<template>
+    <router-link class="btn btn-secondary secondary-button waves-effect" v-if="to" :to="to">
+        <slot></slot>
+    </router-link>
+    <button
+        v-else
+        type="button"
+        class="btn btn-secondary secondary-button waves-effect"
+        :class="{ 'btn-mini': mini, 'btn-large': large }"
+        :disabled="isDisabled"
+    >
+        <i v-if="iconLeft" class="left-icon icon icon-small" :class="iconLeft"></i>
+        <span class="span-text">
+            <slot>Click me</slot>
+        </span>
+        <i v-show="isLoading" class="icon icon-small spinner-solid loading"></i>
+    </button>
+</template>
+
+<script lang="ts">
+import SecondaryButton from './SecondaryButton.ts';
+
+export default SecondaryButton;
+</script>
+<style lang="scss">
+@import 'SecondaryButton';
+</style>

package/components/confirm/Confirm.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+@import "../../scss/components/utils";
+@import "../../scss/components/variables";
+
+.modal.confirm {
+    box-sizing: border-box;
+    min-width: 280px;
+    min-height: 150px;
+    flex-direction: column;
+    background-color: map.get($intems-colors, "text-on-color");
+    position: fixed;
+
+    &.open {
+        display: flex !important;
+    }
+
+    .header {
+        padding-bottom: 10px;
+
+        i.modal-close {
+            float: right;
+            height: 24px;
+            line-height: 24px;
+        }
+
+        h3 {
+            color: map.get($intems-colors, "text-primary");
+        }
+
+        + .modal-footer {
+            padding-top: 30px;
+        }
+    }
+
+    .modal-content {
+        white-space: normal;
+        color: map.get($intems-colors, "text-primary");
+        overflow: initial;
+        font-weight: normal;
+        line-height: normal;
+        margin-right: 0;
+        padding-right: 0;
+    }
+}

package/components/confirm/Confirm.ts

@@ -0,0 +1,82 @@
+import Modal from "../modal/Modal.vue";
+import ActionButton from "../../components/buttons/action-button/ActionButton.vue";
+import SecondaryButton from "../../components/buttons/secondary-button/SecondaryButton.vue";
+import { required, maxLength } from "vuelidate/lib/validators";
+import { onlyLatin } from "../../helpers/Validations";
+
+export type Comment = {
+  placeholder?: string;
+  description?: string;
+  required?: boolean;
+};
+
+type Form = {
+  comment?: string;
+};
+
+export default {
+  components: { Modal, SecondaryButton, ActionButton },
+  props: {
+    title: String,
+    description: String,
+    submitBtn: {
+      type: String,
+      default: "Yes",
+    },
+    rejectBtn: {
+      type: String,
+      default: "No",
+    },
+    comment: undefined as Comment,
+  },
+  validations: {
+    form: {
+      comment: { required, maxLength: maxLength(300), onlyLatin },
+    },
+  },
+  methods: {
+    open(payload?: unknown): void {
+      this.payload = payload;
+      this.$modal.show("confirm");
+    },
+    confirm(): void {
+      this.$emit(
+        "confirmed",
+        Object.keys(this.form).length ? this.form : this.payload
+      );
+      this.$modal.hide("confirm");
+      this.reset();
+    },
+    confirmWithValidation(): void {
+      this.$v.$touch();
+      if (!this.$v.$invalid) {
+        this.confirm();
+      }
+    },
+    reject(): void {
+      this.$modal.hide("confirm");
+      this.reset();
+
+      this.$emit("rejected", this.payload);
+    },
+    reset(): void {
+      this.$v.$reset();
+      this.form = {};
+    },
+  },
+  computed: {
+    hasForm(): boolean {
+      return this.comment;
+    },
+    hasDefaultSlot() {
+      return !!this.$slots.default;
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      payload: undefined,
+      options: { dismissible: false },
+      form: {} as Form,
+    };
+  },
+};

package/components/confirm/Confirm.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="confirm">
+    <modal name="confirm" size="md">
+      <template slot="header">
+        {{ title ? title : "Confirm?" }}
+      </template>
+      <template slot="content">
+        <p>{{ description ? description : "" }}</p>
+        <form class="intems-form p-t-10" v-if="hasForm">
+          <div :class="{ 'form-group--error': $v.form.comment.$error }">
+            <div class="form-group">
+              <label v-if="comment.description" class="form__label">{{
+                comment.description
+              }}</label>
+              <textarea
+                ref="comment"
+                id="comment"
+                class="form__input"
+                spellcheck="false"
+                v-model="form.comment"
+                :placeholder="comment.placeholder"
+                @keydown.stop=""
+              ></textarea>
+              <div v-if="$v.form.comment.$error">
+                <div class="error" v-if="!$v.form.comment.required">
+                  Comment is required
+                </div>
+                <div class="error" v-if="!$v.form.comment.maxLength">
+                  Maximum length of this field is 300 symbols
+                </div>
+                <div class="error" v-if="!$v.form.comment.onlyLatin">
+                  Only Latin letters allowed
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+        <slot name="confirm-content"></slot>
+      </template>
+      <template slot="footer">
+        <slot name="footer-description"></slot>
+
+        <secondary-button @click.native="reject">
+          {{ rejectBtn }}
+        </secondary-button>
+        <action-button
+          @click.native="hasForm ? confirmWithValidation() : confirm()"
+        >
+          {{ submitBtn }}
+        </action-button>
+      </template>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Confirm from "./Confirm";
+
+export default Confirm;
+</script>
+
+<style lang="scss">
+@import "./Confirm";
+</style>

package/components/give-kudos-form/GiveKudosForm.scss

@@ -0,0 +1,114 @@
+@use "sass:map";
+@import "../../scss/components/variables";
+
+.give-kudos {
+    .user {
+        ul {
+            max-height: 200px;
+        }
+    }
+
+    a {
+        font-weight: bold;
+    }
+
+    .subtitle {
+        padding: 0px 0 30px 0;
+    }
+
+    .form {
+        .vs__selected-options {
+            span.vs__selected {
+                white-space: nowrap;
+            }
+
+            flex-wrap: nowrap;
+        }
+
+        display: grid;
+        grid-template-columns: auto 207px;
+        grid-gap: 15px;
+
+        .kudos-quantity {
+            height: 38px;
+            margin: 0;
+            border: solid 1px map.get($intems-colors, "border");
+            background-color: map.get($intems-colors, "surface-primary");
+            padding: 0 15px;
+            width: 175px;
+        }
+
+        input.kudos-quantity:focus {
+            border: solid 1px map.get($intems-colors, "primary");
+            box-shadow: none;
+        }
+
+        /* Chrome, Safari, Edge, Opera */
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        /* Firefox */
+        input[type="number"] {
+            -moz-appearance: textfield;
+        }
+
+        .user {
+            grid-column: span 2;
+            margin-right: 1px;
+        }
+
+        .block-kudos-quantity {
+            width: 190px;
+        }
+
+        .block-kudos-category {
+            margin-right: 5px;
+        }
+
+        .description {
+            grid-column: span 2;
+
+            textarea {
+                resize: none;
+                min-height: 100px;
+                max-height: 300px;
+                min-width: 100%;
+                max-width: 100%;
+                border-radius: 2px;
+                border: solid 1px map.get($intems-colors, "border");
+                outline: none;
+                padding: 10px;
+            }
+
+            margin-right: 1px;
+        }
+
+        label {
+            display: flex;
+            font-size: $font-size-14;
+            margin-bottom: 10px;
+            color: map.get($intems-colors, "text-primary");
+        }
+
+        .error {
+            font-size: $font-size-12;
+        }
+
+        .error-field {
+            border: solid 1px map.get($intems-colors, "error");
+        }
+    }
+
+    button.btn-large[disabled] {
+        background-color: map.get($intems-colors, "primary-container-tag") !important;
+    }
+
+    .vs__clear {
+        svg {
+            display: none;
+        }
+    }
+}