Enhancement: Adds story for label component (#2222)

* Enhancement: Adds story for label component

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

@@ -15,10 +15,6 @@
   }
 }
 
-.label {
-  font-weight: $font-weight-bold;
-}
-
 .tooltip {
   border-radius: $space-smaller;
   font-size: $font-size-mini;

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

@@ -384,9 +384,9 @@ $label-background: lighten($primary-color, 40%);
 $label-color: $primary-color;
 $label-color-alt: $black;
 $label-palette: $foundation-palette;
-$label-font-size: $font-size-micro;
+$label-font-size: $font-size-mini;
 $label-padding: $space-smaller $space-small;
-$label-radius: $space-micro;
+$label-radius: var(--border-radius-small);
 
 // 21. Media Object
 // ----------------

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

@@ -0,0 +1,58 @@
+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

@@ -62,13 +62,16 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .label {
-  display: inline-block;
+  font-weight: var(--font-weight-medium);
-  font-size: $font-size-small;
+  margin-right: var(--space-smaller);
-  line-height: 1;
+  margin-bottom: var(--space-smaller);
-  margin: $space-micro;
 
   &.small {
-    font-size: $font-size-mini;
+    font-size: var(--font-size-micro);
+
+    .label--icon {
+      font-size: var(--font-size-nano);
+    }
   }
 
   a {
@@ -80,8 +83,6 @@ export default {
 
 .label--icon {
   cursor: pointer;
-  font-size: $font-size-micro;
+  font-size: var(--font-size-micro);
-  line-height: 1.5;
-  margin-left: $space-smaller;
 }
 </style>