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

* Chore: Adds color variants to label * Move component to UI folder
2021-05-05 22:53:23 +05:30
parent b30ecb27a6
commit 381c358ffd
6 changed files with 159 additions and 94 deletions
--- a/app/javascript/dashboard/components/ui/stories/Label.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/Label.stories.js
@@ -0,0 +1,64 @@
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/Label',
+  argTypes: {
+    title: {
+      defaultValue: 'sales',
+      control: {
+        type: 'text',
+      },
+    },
+    colorScheme: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
+      },
+    },
+    description: {
+      defaultValue: 'label',
+      control: {
+        type: 'text',
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+    },
+    bgColor: {
+      defaultValue: '#a83262',
+      control: {
+        type: 'text',
+      },
+    },
+    small: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+    showClose: {
+      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'),
+};