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

* Chore: Adds color variants to label

* Move component to UI folder

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

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Label',
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    description: {
-      defaultValue: 'label',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      control: {
-        type: 'text',
-      },
-    },
-    bgColor: {
-      defaultValue: '#a83262',
-      control: {
-        type: 'text',
-      },
-    },
-    small: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    showIcon: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-close',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  template: '<woot-label v-bind="$props" @click="onClick"></woot-label>',
-});
-
-export const DefaultLabel = Template.bind({});
-DefaultLabel.args = {
-  onClick: action('clicked'),
-};

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>