chore: Add color variants to label component (#2226)

* Chore: Adds color variants to label

* Move component to UI folder

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -380,8 +380,8 @@ $form-button-radius: $global-radius;
 // 20. Label
 // ---------
 
-$label-background: lighten($primary-color, 40%);
+$label-background: $primary-color;
-$label-color: $primary-color;
+$label-color: $white;
 $label-color-alt: $black;
 $label-palette: $foundation-palette;
 $label-font-size: $font-size-mini;

app/javascript/dashboard/components/index.js

@@ -7,7 +7,7 @@ import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
 import Input from './widgets/forms/Input.vue';
-import Label from './widgets/Label.vue';
+import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';

app/javascript/dashboard/components/ui/Label.vue

@@ -0,0 +1,148 @@
+<template>
+  <div :class="labelClass" :style="labelStyle" :title="description">
+    <i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
+    <span v-if="!href">{{ title }}</span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <i v-if="showClose" class="close--icon ion-close" @click="onClick" />
+  </div>
+</template>
+<script>
+import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    href: {
+      type: String,
+      default: '',
+    },
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    colorScheme: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    textColor() {
+      return getContrastingTextColor(this.bgColor);
+    },
+    labelClass() {
+      return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
+    },
+    labelStyle() {
+      if (this.bgColor) {
+        return { background: this.bgColor, color: this.textColor };
+      }
+      return {};
+    },
+    anchorStyle() {
+      if (this.bgColor) {
+        return { color: this.textColor };
+      }
+      return {};
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click', this.title);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables';
+
+.label {
+  font-weight: var(--font-weight-medium);
+  margin-right: var(--space-smaller);
+  margin-bottom: var(--space-smaller);
+
+  &.small {
+    font-size: var(--font-size-micro);
+  }
+
+  .label--icon {
+    cursor: pointer;
+  }
+  .label--icon,
+  .close--icon {
+    font-size: var(--font-size-micro);
+  }
+
+  &.small .label--icon,
+  &.small .close--icon {
+    font-size: var(--font-size-nano);
+  }
+
+  a {
+    font-size: var(--font-size-mini);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* Color Schemes */
+  &.primary {
+    background: var(--w-100);
+    color: var(--w-900);
+    border: 1px solid var(--w-200);
+    a {
+      color: var(--w-900);
+    }
+  }
+  &.secondary {
+    background: var(--s-100);
+    color: var(--s-900);
+    border: 1px solid var(--s-200);
+    a {
+      color: var(--s-900);
+    }
+  }
+  &.success {
+    background: var(--g-100);
+    color: var(--g-900);
+    border: 1px solid var(--g-200);
+    a {
+      color: var(--g-900);
+    }
+  }
+  &.alert {
+    background: var(--r-100);
+    color: var(--r-900);
+    border: 1px solid var(--r-200);
+    a {
+      color: var(--r-900);
+    }
+  }
+  &.warning {
+    background: var(--y-100);
+    color: var(--y-900);
+    border: 1px solid var(--y-300);
+    a {
+      color: var(--y-900);
+    }
+  }
+}
+</style>

app/javascript/dashboard/components/ui/stories/Label.stories.js

@@ -9,6 +9,12 @@ export default {
         type: 'text',
       },
     },
+    colorScheme: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
+      },
+    },
     description: {
       defaultValue: 'label',
       control: {
@@ -32,7 +38,7 @@ export default {
         type: 'boolean',
       },
     },
-    showIcon: {
+    showClose: {
       defaultValue: false,
       control: {
         type: 'boolean',

app/javascript/dashboard/components/widgets/Label.vue

@@ -1,88 +0,0 @@
-<template>
-  <div
-    :class="labelClass"
-    :style="{ background: bgColor, color: textColor }"
-    :title="description"
-  >
-    <span v-if="!href">{{ title }}</span>
-    <a v-else :href="href" :style="{ color: textColor }">{{ title }}</a>
-    <i v-if="showIcon" class="label--icon" :class="icon" @click="onClick" />
-  </div>
-</template>
-<script>
-import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    href: {
-      type: String,
-      default: '',
-    },
-    bgColor: {
-      type: String,
-      default: '#1f93ff',
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    showIcon: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: 'ion-close',
-    },
-  },
-  computed: {
-    textColor() {
-      return getContrastingTextColor(this.bgColor);
-    },
-    labelClass() {
-      return `label ${this.small ? 'small' : ''}`;
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('click', this.title);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.label {
-  font-weight: var(--font-weight-medium);
-  margin-right: var(--space-smaller);
-  margin-bottom: var(--space-smaller);
-
-  &.small {
-    font-size: var(--font-size-micro);
-
-    .label--icon {
-      font-size: var(--font-size-nano);
-    }
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.label--icon {
-  cursor: pointer;
-  font-size: var(--font-size-micro);
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/labels/AddLabelToConversation.vue

@@ -21,7 +21,7 @@
               :title="label.title"
               :description="label.description"
               :bg-color="label.color"
-              :show-icon="true"
+              :show-close="true"
               @click="onRemove"
             />
           </div>
@@ -44,7 +44,6 @@
               :title="label.title"
               :description="label.description"
               :bg-color="label.color"
-              :show-icon="true"
               icon="ion-plus"
               @click="onAdd"
             />