@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

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

@@ -1,117 +1,117 @@
-import Button from './Button.vue';
-
-export default {
-  title: 'Components/Buttons/Crazy Domains',
-  component: Button,
-};
-
-export const CrazyDomainPrimarySamples = () => {
-  return {
-    components: {
-      Button,
-    },
-    data() {
-      return {
-        themeCrazyDomains: 'crazyDomains',
-      };
-    },
-    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"
-              :theme="themeCrazyDomains"
-              variant="primary"
-            />
-          </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"
-                :theme="themeCrazyDomains"
-                variant="primary"
-              /&gt;
-            </code>
-          </td>
-        </tr>
-        <tr>
-          <td class="tw-p-4">
-            <Button
-              label="Button Anchor Link"
-              :theme="themeCrazyDomains"
-              variant="primary"
-              size="large"
-              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"
-                :theme="themeCrazyDomains"
-                variant="primary"
-                size="large"
-                url="http://www.google.com"
-              /&gt;
-            </code>
-          </td>
-        </tr>
-        <tr class="tw-bg-grayscale-200">
-          <td class="tw-p-4">
-            <Button
-              label="Regular Button (small)"
-              size="small"
-              :theme="themeCrazyDomains"
-              variant="primary"
-            />
-          </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 (small)"
-                size="small"
-                :theme="themeCrazyDomains"
-                variant="primary"
-              /&gt;
-            </code>
-          </td>
-        </tr>
-        <tr>
-          <td class="tw-p-4">
-            <Button
-              label="Button Anchor Link (small)"
-              size="small"
-              :theme="themeCrazyDomains"
-              variant="primary"
-              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 (small)"
-                size="small"
-                :theme="themeCrazyDomains"
-                variant="primary"
-                url="http://www.google.com"
-              /&gt;
-            </code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    `,
-  };
-};
-
-CrazyDomainPrimarySamples.story = {
-  name: 'Primary',
-};
+import Button from './Button.vue';
+
+export default {
+  title: 'Components/Buttons/Crazy Domains',
+  component: Button,
+};
+
+export const CrazyDomainPrimarySamples = () => {
+  return {
+    components: {
+      Button,
+    },
+    data() {
+      return {
+        themeCrazyDomains: 'crazyDomains',
+      };
+    },
+    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"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </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"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              size="large"
+              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"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                size="large"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr class="tw-bg-grayscale-200">
+          <td class="tw-p-4">
+            <Button
+              label="Regular Button (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </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 (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              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 (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    `,
+  };
+};
+
+CrazyDomainPrimarySamples.story = {
+  name: 'Primary',
+};

package/src/atoms/components/Button/variants/ButtonAi.vue

@@ -1,63 +1,63 @@
-<template>
-  <button
-    v-if="!url"
-    style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
-    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
-    :class="[
-      classes,
-      {
-        'tw-cursor-pointer': !disabled,
-        'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white && !disabled,
-        'tw-border-white tw-text-white hover:tw-bg-info-400': white && !disabled,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-      computedClasses,
-    ]"
-    :disabled="disabled"
-    :type="type"
-    v-bind="attrs"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-  <a
-    v-else
-    :href="computedUrl"
-    class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
-    :class="[
-      commonUrlButtonClasses,
-      classes,
-      {
-        'tw-cursor-pointer': !disabled,
-        'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white,
-        'tw-border-white tw-text-white hover:tw-bg-info-400': white,
-        'tw-cursor-not-allowed': disabled,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-      computedClasses,
-    ]"
-    :download="download"
-    v-bind="attrs"
-    :target="target"
-    @click="onClick"
-  >
-    <slot />
-  </a>
-</template>
-<script>
-import ButtonVariant from '../ButtonVariant.mixin.vue';
-
-export default {
-  mixins: [ButtonVariant],
-  props: {
-    white: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-};
-</script>
+<template>
+  <button
+    v-if="!url"
+    style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
+    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
+    :class="[
+      classes,
+      {
+        'tw-cursor-pointer': !disabled,
+        'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white && !disabled,
+        'tw-border-white tw-text-white hover:tw-bg-info-400': white && !disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+      computedClasses,
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      {
+        'tw-cursor-pointer': !disabled,
+        'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white,
+        'tw-border-white tw-text-white hover:tw-bg-info-400': white,
+        'tw-cursor-not-allowed': disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+      computedClasses,
+    ]"
+    :download="download"
+    v-bind="attrs"
+    :target="target"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+  props: {
+    white: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>

package/src/atoms/components/Button/variants/ButtonDarkModePill.vue

@@ -1,52 +1,52 @@
-<template>
-  <button
-    v-if="!url"
-    class="tw-rounded-full tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
-    :class="[
-      classes,
-      {
-        'tw-text-xs': size === 'small',
-        'tw-text-sm': size !== 'small',
-        'tw-cursor-not-allowed': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
-      },
-    ]"
-    :disabled="disabled"
-    :type="type"
-    v-bind="attrs"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-  <a
-    v-else
-    :href="computedUrl"
-    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
-    :class="[
-      classes,
-      {
-        'tw-text-xs': size === 'small',
-        'tw-text-sm': size !== 'small',
-        'tw-cursor-not-allowed': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
-      },
-    ]"
-    :download="download"
-    v-bind="attrs"
-    :target="target"
-    @click="onClick"
-  >
-    <slot />
-  </a>
-</template>
-<script>
-import ButtonVariant from '../ButtonVariant.mixin.vue';
-
-export default {
-  mixins: [ButtonVariant],
-};
-</script>
+<template>
+  <button
+    v-if="!url"
+    class="tw-rounded-full tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
+    :class="[
+      classes,
+      {
+        'tw-text-xs': size === 'small',
+        'tw-text-sm': size !== 'small',
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-text-secondary-600 tw-bg-white': active,
+        'tw-text-white tw-bg-transparent': !active || disabled,
+      },
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
+    :class="[
+      classes,
+      {
+        'tw-text-xs': size === 'small',
+        'tw-text-sm': size !== 'small',
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-text-secondary-600 tw-bg-white': active,
+        'tw-text-white tw-bg-transparent': !active || disabled,
+      },
+    ]"
+    :download="download"
+    v-bind="attrs"
+    :target="target"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+};
+</script>

package/src/atoms/components/Button/variants/ButtonFlat.vue

@@ -1,65 +1,65 @@
-<template>
-  <button
-    v-if="!url"
-    class="tw-bg-white tw-font-sans tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4"
-    :class="[
-      classes,
-      {
-        'tw-cursor-not-allowed': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-border-secondary-200 tw-text-secondary-500 hover:tw-bg-secondary-100': !isBusy,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-      computedClasses,
-    ]"
-    :disabled="disabled"
-    v-bind="attrs"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-  <a
-    v-else
-    :href="computedUrl"
-    class="tw-bg-white tw-font-sans tw-inline-flex tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4 tw-no-underline"
-    :class="[
-      commonUrlButtonClasses,
-      classes,
-      {
-        'tw-cursor-not-allowed': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-border-secondary-200 tw-text-secondary-500 hover:tw-text-secondary-500 hover:tw-bg-secondary-100': !isBusy,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-      computedClasses,
-    ]"
-    :download="download"
-    :target="target"
-    :type="type"
-    v-bind="attrs"
-    @click="onClick"
-  >
-    <slot />
-  </a>
-</template>
-<script>
-import ButtonVariant from '../ButtonVariant.mixin.vue';
-
-export default {
-  mixins: [ButtonVariant],
-  props: {
-    white: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-};
-</script>
+<template>
+  <button
+    v-if="!url"
+    class="tw-bg-white tw-font-sans tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4"
+    :class="[
+      classes,
+      {
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-secondary-200 tw-text-secondary-500 hover:tw-bg-secondary-100': !isBusy,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+      computedClasses,
+    ]"
+    :disabled="disabled"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-bg-white tw-font-sans tw-inline-flex tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4 tw-no-underline"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      {
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-secondary-200 tw-text-secondary-500 hover:tw-text-secondary-500 hover:tw-bg-secondary-100': !isBusy,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+      computedClasses,
+    ]"
+    :download="download"
+    :target="target"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+  props: {
+    white: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
+</script>