@designcrowd/fe-shared-lib 1.0.10 → 1.0.11

package/src/atoms/components/Button/Buttons.stories.js

@@ -1,778 +1,778 @@
-/* eslint-disable vue/one-component-per-file */
-/* eslint-disable vue/no-reserved-component-names */
-import { defineComponent } from 'vue';
-import Button from './Button.vue';
-
-export default {
-  title: 'Components/Buttons',
-  component: Button,
-};
-
-const generateSampleButtonVariants = (buttonVariant) => {
-  const buttonSizes = ['Large', undefined, 'Medium', 'Small', 'Small-Wide', 'Small-Medium'];
-
-  let variants = buttonSizes
-    .map((buttonSize) => [
-      {
-        label: `Regular Button${buttonSize ? ` (${buttonSize})` : ''}`,
-        size: buttonSize?.toLocaleLowerCase(),
-        variant: buttonVariant,
-      },
-      {
-        label: `Button Anchor Link${buttonSize ? ` (${buttonSize})` : ''}`,
-        size: buttonSize?.toLocaleLowerCase(),
-        // eslint-disable-next-line no-script-url
-        url: 'javascript:',
-        variant: buttonVariant,
-      },
-    ])
-    .flat();
-
-  variants = [
-    ...variants,
-    {
-      icon: 'other',
-      variant: buttonVariant,
-    },
-    {
-      label: 'Icon Top',
-      iconTop: 'download',
-      iconTopSize: 'md',
-      variant: buttonVariant,
-    },
-    {
-      label: 'Icon Left',
-      iconLeft: 'download',
-      variant: buttonVariant,
-      attrs: { 'data-testing-attr': true },
-    },
-    {
-      label: 'Icon Right',
-      iconRight: 'download',
-      variant: buttonVariant,
-    },
-    {
-      label: 'Icon Left And Right',
-      iconLeft: 'download',
-      iconRight: 'lock',
-      variant: buttonVariant,
-      // eslint-disable-next-line no-script-url
-    },
-    {
-      label: 'All Icons',
-      iconTop: 'download',
-      iconLeft: 'download',
-      iconRight: 'lock',
-      variant: buttonVariant,
-    },
-    {
-      label: 'Icon Left Link',
-      iconLeft: 'download',
-      variant: buttonVariant,
-      // eslint-disable-next-line no-script-url
-      url: 'javascript:',
-    },
-    {
-      label: 'Icon Right Link',
-      iconRight: 'download',
-      variant: buttonVariant,
-      // eslint-disable-next-line no-script-url
-      url: 'javascript:',
-    },
-    {
-      label: 'Rigid Corners Button',
-      rounded: false,
-      variant: buttonVariant,
-    },
-    {
-      label: 'Rigid Left Corners Button',
-      rounded: false,
-      roundedRight: true,
-      variant: buttonVariant,
-    },
-    {
-      label: 'Rigid Right Corners Button',
-      rounded: false,
-      roundedLeft: true,
-      variant: buttonVariant,
-    },
-    {
-      label: 'Open In New Tab Button',
-      variant: buttonVariant,
-      target: '_blank',
-      url: 'https://www.google.com',
-    },
-    {
-      label: 'IsBusy Button',
-      variant: buttonVariant,
-      isBusy: true,
-      disabled: true,
-    },
-    {
-      label: 'IsBusy Button with text',
-      variant: buttonVariant,
-      isBusy: true,
-      isBusyLabel: 'IsBusy Button with text',
-      disabled: true,
-    },
-    {
-      label: 'Disabled',
-      variant: buttonVariant,
-      disabled: true,
-    },
-  ];
-
-  variants = variants.map((v) => {
-    return {
-      ...v,
-      attrs: { 'data-test-tag': `test-${v.variant.toLowerCase()}` },
-    };
-  });
-
-  return variants;
-};
-
-const generateSampleButtonActiveVariants = (variant) => {
-  const variants = generateSampleButtonVariants(variant);
-  // eslint-disable-next-line no-param-reassign,no-return-assign
-  variants.forEach((v) => (v.active = true));
-  return variants;
-};
-
-const generateSampleButtonWhiteVariants = (variant) => {
-  const variants = generateSampleButtonVariants(variant);
-  // eslint-disable-next-line no-param-reassign,no-return-assign
-  variants.forEach((v) => (v.white = true));
-  return variants;
-};
-
-const StorybookButtonComponent = defineComponent({
-  components: {
-    Button,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    fullWidth: {
-      type: Boolean,
-      required: true,
-    },
-    greyOutLeft: {
-      type: Boolean,
-      required: true,
-    },
-    justify: {
-      type: String,
-      required: true,
-    },
-    variants: {
-      type: Array,
-      required: true,
-    },
-  },
-  template: `
-    <table class="tw-w-full">
-    <thead>
-    <tr>
-      <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
-      <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr v-for="variant in variants" class="tw-bg-grayscale-200">
-      <td class="tw-p-4">
-        <Button
-            :full-width="fullWidth"
-            :greyOutLeft="greyOutLeft"
-            :justify="justify"
-            :label="variant.label"
-            :variant="variant.variant"
-            :size="variant.size"
-            :url="variant.url"
-            :icon="variant.icon"
-            :icon-left="variant.iconLeft"
-            :icon-right="variant.iconRight"
-            :icon-top="variant.iconTop"
-            :icon-top-size="variant.iconTopSize"
-            :rounded="variant.rounded"
-            :rounded-left="variant.roundedLeft"
-            :rounded-right="variant.roundedRight"
-            :disabled="variant.disabled"
-            :active="variant.active"
-            :white="variant.white"
-            :target="variant.target"
-            :attrs="variant.attrs"
-            :is-busy="variant.isBusy"
-            :is-busy-label="variant.isBusyLabel"
-        />
-      </td>
-      <td class="tw-p-4">
-        <code
-            class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-          &lt;Button
-          label="{{ variant.label }}"
-          variant="{{ variant.variant }}"
-          {{ (variant.size ? 'size="' + variant.size + '"' : '') }}
-          {{ (variant.url ? 'url="' + variant.url + '"' : '') }}
-          {{ (variant.icon ? 'icon="' + variant.icon + '"' : '') }}
-          {{ (variant.iconLeft ? 'icon-left="' + variant.iconLeft + '"' : '') }}
-          {{ (variant.iconRight ? 'icon-right="' + variant.iconRight + '"' : '') }}
-          {{ (variant.iconTop ? 'icon-top="' + variant.iconTop + '"' : '') }}
-          {{ (variant.iconTopSize ? 'icon-top-size="' + variant.iconTopSize + '"' : '') }}
-          {{ (typeof variant.rounded !== 'undefined' ? ':rounded="' + variant.rounded + '"' : '') }}
-          {{ (typeof variant.roundedLeft !== 'undefined' ? ':rounded-left="' + variant.roundedLeft + '"' : '') }}
-          {{ (typeof variant.roundedRight !== 'undefined' ? ':rounded-right="' + variant.roundedRight + '"' : '') }}
-          {{ (variant.disabled ? ':disabled="true"' : '') }}
-          {{ (variant.target ? ':target="' + variant.target + '"' : '') }}
-          {{ (justify === 'center' ? '' : 'justify="' + justify + '"') }}
-          {{ (fullWidth ? ':fullwidth="true"' : '') }}
-          {{ (greyOutLeft ? ':grey-out-left="true"' : '') }}
-          {{ (variant.isBusy ? ':is-busy="true"' : '') }}
-          {{ (variant.isBusyLabel ? 'is-busy-label="' + variant.isBusyLabel + '"' : '') }}
-          /&gt;
-        </code>
-      </td>
-    </tr>
-    </tbody>
-    </table>
-  `,
-});
-
-const controlArgs = {
-  disabled: false,
-  fullWidth: false,
-  greyOutLeft: false,
-  justify: 'center',
-};
-
-const controlArgTypes = {
-  justify: {
-    control: { type: 'radio' },
-    options: ['center', 'between'],
-  },
-};
-
-export const PrimarySamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('primary'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-PrimarySamples.args = controlArgs;
-PrimarySamples.argTypes = controlArgTypes;
-
-export const SecondarySamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('secondary'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-SecondarySamples.args = controlArgs;
-SecondarySamples.argTypes = controlArgTypes;
-
-export const WarningSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('warning'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-WarningSamples.args = controlArgs;
-WarningSamples.argTypes = controlArgTypes;
-
-export const SuccessSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('success'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-SuccessSamples.args = controlArgs;
-SuccessSamples.argTypes = controlArgTypes;
-
-export const OutlineSuccessSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('outline-success'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-OutlineSuccessSamples.args = controlArgs;
-OutlineSuccessSamples.argTypes = controlArgTypes;
-
-export const OutlineNoHover = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('outline-no-hover'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-OutlineNoHover.args = controlArgs;
-OutlineNoHover.argTypes = controlArgTypes;
-
-export const InfoFilledSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('info-filled'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-InfoFilledSamples.args = controlArgs;
-InfoFilledSamples.argTypes = controlArgTypes;
-
-export const GraySamples = () => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    data() {
-      return {
-        variants: generateSampleButtonVariants('gray'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent :variants="variants"/>
-    `,
-  };
-};
-
-export const PrimaryWithIconSamples = () => {
-  return {
-    components: {
-      Button,
-    },
-    methods: {
-      test() {
-        // eslint-disable-next-line no-alert
-        alert('on click');
-      },
-    },
-    template: `
-      <table class="tw-w-full">
-      <thead>
-      <tr>
-        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
-        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr class="tw-bg-grayscale-200">
-        <td class="tw-p-4">
-          <Button
-              label="Regular Button"
-              variant="primary-with-icon"
-              icon="chevron-right-wide"
-              iconViewBox="0 0 24 24"
-              @on-click="test"
-          />
-        </td>
-        <td class="tw-p-4">
-          <code
-              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-            &lt;Button
-            label="Regular Button"
-            variant="primary-with-icon"
-            icon="chevron-right-wide"
-            iconViewBox="0 0 24 24"
-            /&gt;
-          </code>
-        </td>
-      </tr>
-      <tr>
-        <td class="tw-p-4">
-          <Button
-              label="Button Anchor Link"
-              variant="primary-with-icon"
-              icon="chevron-right-wide"
-              iconViewBox="0 0 24 24"
-              url="http://www.google.com"
-          />
-        </td>
-        <td class="tw-p-4">
-          <code
-              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-            &lt;Button
-            label="Button Anchor Link"
-            variant="primary-with-icon"
-            icon="chevron-right-wide"
-            iconViewBox="0 0 24 24"
-            url="http://www.google.com"
-            /&gt;
-          </code>
-        </td>
-      </tr>
-      <tr class="tw-bg-grayscale-200">
-        <td class="tw-p-4">
-          <Button
-              label="Disabled Button"
-              variant="primary-with-icon"
-              icon="chevron-right-wide"
-              iconViewBox="0 0 24 24"
-              :disabled="true"
-              @on-click="test"
-          />
-        </td>
-        <td class="tw-p-4">
-          <code
-              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-            &lt;Button
-            label="Regular Button"
-            variant="primary-with-icon"
-            icon="chevron-right-wide"
-            iconViewBox="0 0 24 24"
-            :disabled="true"
-            /&gt;
-          </code>
-        </td>
-      </tr>
-      </tbody>
-      </table>
-    `,
-  };
-};
-
-export const OutlineSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('outline'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-OutlineSamples.args = controlArgs;
-OutlineSamples.argTypes = controlArgTypes;
-
-export const InfoSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('info'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-InfoSamples.args = controlArgs;
-InfoSamples.argTypes = controlArgTypes;
-
-export const NoBorderSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('no-border'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-NoBorderSamples.args = controlArgs;
-NoBorderSamples.argTypes = controlArgTypes;
-
-export const FlatSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('flat'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-FlatSamples.args = controlArgs;
-FlatSamples.argTypes = controlArgTypes;
-
-export const PillSamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('pill'),
-        activeVariants: generateSampleButtonActiveVariants('pill'),
-      };
-    },
-    template: `
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="activeVariants"/>
-      </div>
-    `,
-  };
-};
-PillSamples.args = controlArgs;
-PillSamples.argTypes = controlArgTypes;
-
-export const DarkModePill = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('dark-mode-pill'),
-        activeVariants: generateSampleButtonActiveVariants('dark-mode-pill'),
-      };
-    },
-    template: `
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="activeVariants"/>
-      </div>
-    `,
-  };
-};
-DarkModePill.args = controlArgs;
-DarkModePill.argTypes = controlArgTypes;
-
-export const OutlineWhite = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonWhiteVariants('outline'),
-      };
-    },
-    template: `
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      </div>
-    `,
-  };
-};
-OutlineWhite.args = controlArgs;
-OutlineWhite.argTypes = controlArgTypes;
-
-PrimarySamples.story = {
-  name: 'Primary',
-};
-
-SecondarySamples.story = {
-  name: 'Secondary',
-};
-
-WarningSamples.story = {
-  name: 'Warning',
-};
-
-SuccessSamples.story = {
-  name: 'Success',
-};
-
-OutlineSuccessSamples.story = {
-  name: 'Outline Success',
-};
-
-OutlineNoHover.story = {
-  name: 'Outline no hover',
-};
-
-InfoFilledSamples.story = {
-  name: 'Info Filled',
-};
-
-GraySamples.story = {
-  name: 'Gray',
-};
-
-PrimaryWithIconSamples.story = {
-  name: 'Primary With Icon',
-};
-
-OutlineSamples.story = {
-  name: 'Outline',
-};
-
-InfoSamples.story = {
-  name: 'Info',
-};
-
-NoBorderSamples.story = {
-  name: 'No Border',
-};
-
-FlatSamples.story = {
-  name: 'Flat',
-};
-
-PillSamples.story = {
-  name: 'Pill',
-};
+/* eslint-disable vue/one-component-per-file */
+/* eslint-disable vue/no-reserved-component-names */
+import { defineComponent } from 'vue';
+import Button from './Button.vue';
+
+export default {
+  title: 'Components/Buttons',
+  component: Button,
+};
+
+const generateSampleButtonVariants = (buttonVariant) => {
+  const buttonSizes = ['Large', undefined, 'Medium', 'Small', 'Small-Wide', 'Small-Medium'];
+
+  let variants = buttonSizes
+    .map((buttonSize) => [
+      {
+        label: `Regular Button${buttonSize ? ` (${buttonSize})` : ''}`,
+        size: buttonSize?.toLocaleLowerCase(),
+        variant: buttonVariant,
+      },
+      {
+        label: `Button Anchor Link${buttonSize ? ` (${buttonSize})` : ''}`,
+        size: buttonSize?.toLocaleLowerCase(),
+        // eslint-disable-next-line no-script-url
+        url: 'javascript:',
+        variant: buttonVariant,
+      },
+    ])
+    .flat();
+
+  variants = [
+    ...variants,
+    {
+      icon: 'other',
+      variant: buttonVariant,
+    },
+    {
+      label: 'Icon Top',
+      iconTop: 'download',
+      iconTopSize: 'md',
+      variant: buttonVariant,
+    },
+    {
+      label: 'Icon Left',
+      iconLeft: 'download',
+      variant: buttonVariant,
+      attrs: { 'data-testing-attr': true },
+    },
+    {
+      label: 'Icon Right',
+      iconRight: 'download',
+      variant: buttonVariant,
+    },
+    {
+      label: 'Icon Left And Right',
+      iconLeft: 'download',
+      iconRight: 'lock',
+      variant: buttonVariant,
+      // eslint-disable-next-line no-script-url
+    },
+    {
+      label: 'All Icons',
+      iconTop: 'download',
+      iconLeft: 'download',
+      iconRight: 'lock',
+      variant: buttonVariant,
+    },
+    {
+      label: 'Icon Left Link',
+      iconLeft: 'download',
+      variant: buttonVariant,
+      // eslint-disable-next-line no-script-url
+      url: 'javascript:',
+    },
+    {
+      label: 'Icon Right Link',
+      iconRight: 'download',
+      variant: buttonVariant,
+      // eslint-disable-next-line no-script-url
+      url: 'javascript:',
+    },
+    {
+      label: 'Rigid Corners Button',
+      rounded: false,
+      variant: buttonVariant,
+    },
+    {
+      label: 'Rigid Left Corners Button',
+      rounded: false,
+      roundedRight: true,
+      variant: buttonVariant,
+    },
+    {
+      label: 'Rigid Right Corners Button',
+      rounded: false,
+      roundedLeft: true,
+      variant: buttonVariant,
+    },
+    {
+      label: 'Open In New Tab Button',
+      variant: buttonVariant,
+      target: '_blank',
+      url: 'https://www.google.com',
+    },
+    {
+      label: 'IsBusy Button',
+      variant: buttonVariant,
+      isBusy: true,
+      disabled: true,
+    },
+    {
+      label: 'IsBusy Button with text',
+      variant: buttonVariant,
+      isBusy: true,
+      isBusyLabel: 'IsBusy Button with text',
+      disabled: true,
+    },
+    {
+      label: 'Disabled',
+      variant: buttonVariant,
+      disabled: true,
+    },
+  ];
+
+  variants = variants.map((v) => {
+    return {
+      ...v,
+      attrs: { 'data-test-tag': `test-${v.variant.toLowerCase()}` },
+    };
+  });
+
+  return variants;
+};
+
+const generateSampleButtonActiveVariants = (variant) => {
+  const variants = generateSampleButtonVariants(variant);
+  // eslint-disable-next-line no-param-reassign,no-return-assign
+  variants.forEach((v) => (v.active = true));
+  return variants;
+};
+
+const generateSampleButtonWhiteVariants = (variant) => {
+  const variants = generateSampleButtonVariants(variant);
+  // eslint-disable-next-line no-param-reassign,no-return-assign
+  variants.forEach((v) => (v.white = true));
+  return variants;
+};
+
+const StorybookButtonComponent = defineComponent({
+  components: {
+    Button,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    fullWidth: {
+      type: Boolean,
+      required: true,
+    },
+    greyOutLeft: {
+      type: Boolean,
+      required: true,
+    },
+    justify: {
+      type: String,
+      required: true,
+    },
+    variants: {
+      type: Array,
+      required: true,
+    },
+  },
+  template: `
+    <table class="tw-w-full">
+    <thead>
+    <tr>
+      <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+      <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr v-for="variant in variants" class="tw-bg-grayscale-200">
+      <td class="tw-p-4">
+        <Button
+            :full-width="fullWidth"
+            :greyOutLeft="greyOutLeft"
+            :justify="justify"
+            :label="variant.label"
+            :variant="variant.variant"
+            :size="variant.size"
+            :url="variant.url"
+            :icon="variant.icon"
+            :icon-left="variant.iconLeft"
+            :icon-right="variant.iconRight"
+            :icon-top="variant.iconTop"
+            :icon-top-size="variant.iconTopSize"
+            :rounded="variant.rounded"
+            :rounded-left="variant.roundedLeft"
+            :rounded-right="variant.roundedRight"
+            :disabled="variant.disabled"
+            :active="variant.active"
+            :white="variant.white"
+            :target="variant.target"
+            :attrs="variant.attrs"
+            :is-busy="variant.isBusy"
+            :is-busy-label="variant.isBusyLabel"
+        />
+      </td>
+      <td class="tw-p-4">
+        <code
+            class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+          &lt;Button
+          label="{{ variant.label }}"
+          variant="{{ variant.variant }}"
+          {{ (variant.size ? 'size="' + variant.size + '"' : '') }}
+          {{ (variant.url ? 'url="' + variant.url + '"' : '') }}
+          {{ (variant.icon ? 'icon="' + variant.icon + '"' : '') }}
+          {{ (variant.iconLeft ? 'icon-left="' + variant.iconLeft + '"' : '') }}
+          {{ (variant.iconRight ? 'icon-right="' + variant.iconRight + '"' : '') }}
+          {{ (variant.iconTop ? 'icon-top="' + variant.iconTop + '"' : '') }}
+          {{ (variant.iconTopSize ? 'icon-top-size="' + variant.iconTopSize + '"' : '') }}
+          {{ (typeof variant.rounded !== 'undefined' ? ':rounded="' + variant.rounded + '"' : '') }}
+          {{ (typeof variant.roundedLeft !== 'undefined' ? ':rounded-left="' + variant.roundedLeft + '"' : '') }}
+          {{ (typeof variant.roundedRight !== 'undefined' ? ':rounded-right="' + variant.roundedRight + '"' : '') }}
+          {{ (variant.disabled ? ':disabled="true"' : '') }}
+          {{ (variant.target ? ':target="' + variant.target + '"' : '') }}
+          {{ (justify === 'center' ? '' : 'justify="' + justify + '"') }}
+          {{ (fullWidth ? ':fullwidth="true"' : '') }}
+          {{ (greyOutLeft ? ':grey-out-left="true"' : '') }}
+          {{ (variant.isBusy ? ':is-busy="true"' : '') }}
+          {{ (variant.isBusyLabel ? 'is-busy-label="' + variant.isBusyLabel + '"' : '') }}
+          /&gt;
+        </code>
+      </td>
+    </tr>
+    </tbody>
+    </table>
+  `,
+});
+
+const controlArgs = {
+  disabled: false,
+  fullWidth: false,
+  greyOutLeft: false,
+  justify: 'center',
+};
+
+const controlArgTypes = {
+  justify: {
+    control: { type: 'radio' },
+    options: ['center', 'between'],
+  },
+};
+
+export const PrimarySamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('primary'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+PrimarySamples.args = controlArgs;
+PrimarySamples.argTypes = controlArgTypes;
+
+export const SecondarySamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('secondary'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+SecondarySamples.args = controlArgs;
+SecondarySamples.argTypes = controlArgTypes;
+
+export const WarningSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('warning'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+WarningSamples.args = controlArgs;
+WarningSamples.argTypes = controlArgTypes;
+
+export const SuccessSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('success'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+SuccessSamples.args = controlArgs;
+SuccessSamples.argTypes = controlArgTypes;
+
+export const OutlineSuccessSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-success'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlineSuccessSamples.args = controlArgs;
+OutlineSuccessSamples.argTypes = controlArgTypes;
+
+export const OutlineNoHover = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-no-hover'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlineNoHover.args = controlArgs;
+OutlineNoHover.argTypes = controlArgTypes;
+
+export const InfoFilledSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('info-filled'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+InfoFilledSamples.args = controlArgs;
+InfoFilledSamples.argTypes = controlArgTypes;
+
+export const GraySamples = () => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    data() {
+      return {
+        variants: generateSampleButtonVariants('gray'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent :variants="variants"/>
+    `,
+  };
+};
+
+export const PrimaryWithIconSamples = () => {
+  return {
+    components: {
+      Button,
+    },
+    methods: {
+      test() {
+        // eslint-disable-next-line no-alert
+        alert('on click');
+      },
+    },
+    template: `
+      <table class="tw-w-full">
+      <thead>
+      <tr>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Regular Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              @on-click="test"
+          />
+        </td>
+        <td class="tw-p-4">
+          <code
+              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+            &lt;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td class="tw-p-4">
+          <Button
+              label="Button Anchor Link"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              url="http://www.google.com"
+          />
+        </td>
+        <td class="tw-p-4">
+          <code
+              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+            &lt;Button
+            label="Button Anchor Link"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            url="http://www.google.com"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Disabled Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              :disabled="true"
+              @on-click="test"
+          />
+        </td>
+        <td class="tw-p-4">
+          <code
+              class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+            &lt;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            :disabled="true"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      </tbody>
+      </table>
+    `,
+  };
+};
+
+export const OutlineSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlineSamples.args = controlArgs;
+OutlineSamples.argTypes = controlArgTypes;
+
+export const InfoSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('info'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+InfoSamples.args = controlArgs;
+InfoSamples.argTypes = controlArgTypes;
+
+export const NoBorderSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('no-border'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+NoBorderSamples.args = controlArgs;
+NoBorderSamples.argTypes = controlArgTypes;
+
+export const FlatSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('flat'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+FlatSamples.args = controlArgs;
+FlatSamples.argTypes = controlArgTypes;
+
+export const PillSamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('pill'),
+        activeVariants: generateSampleButtonActiveVariants('pill'),
+      };
+    },
+    template: `
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    `,
+  };
+};
+PillSamples.args = controlArgs;
+PillSamples.argTypes = controlArgTypes;
+
+export const DarkModePill = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('dark-mode-pill'),
+        activeVariants: generateSampleButtonActiveVariants('dark-mode-pill'),
+      };
+    },
+    template: `
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    `,
+  };
+};
+DarkModePill.args = controlArgs;
+DarkModePill.argTypes = controlArgTypes;
+
+export const OutlineWhite = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonWhiteVariants('outline'),
+      };
+    },
+    template: `
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      </div>
+    `,
+  };
+};
+OutlineWhite.args = controlArgs;
+OutlineWhite.argTypes = controlArgTypes;
+
+PrimarySamples.story = {
+  name: 'Primary',
+};
+
+SecondarySamples.story = {
+  name: 'Secondary',
+};
+
+WarningSamples.story = {
+  name: 'Warning',
+};
+
+SuccessSamples.story = {
+  name: 'Success',
+};
+
+OutlineSuccessSamples.story = {
+  name: 'Outline Success',
+};
+
+OutlineNoHover.story = {
+  name: 'Outline no hover',
+};
+
+InfoFilledSamples.story = {
+  name: 'Info Filled',
+};
+
+GraySamples.story = {
+  name: 'Gray',
+};
+
+PrimaryWithIconSamples.story = {
+  name: 'Primary With Icon',
+};
+
+OutlineSamples.story = {
+  name: 'Outline',
+};
+
+InfoSamples.story = {
+  name: 'Info',
+};
+
+NoBorderSamples.story = {
+  name: 'No Border',
+};
+
+FlatSamples.story = {
+  name: 'Flat',
+};
+
+PillSamples.story = {
+  name: 'Pill',
+};