@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +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',
+};

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

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

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

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

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

@@ -0,0 +1,64 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'no-rounded-l': !rounded && !roundedLeft,
+        'no-rounded-r': !rounded && !roundedRight,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-400 hover:tw-bg-grayscale-400':
+          !disabled,
+        'tw-bg-grayscale-100 tw-border-grayscale-300 tw-cursor-not-allowed': disabled,
+      },
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-grayscale-800 hover:tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'no-rounded-l': !rounded && !roundedLeft,
+        'no-rounded-r': !rounded && !roundedRight,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-400 hover:tw-bg-grayscale-400':
+          !disabled,
+        'tw-bg-grayscale-100 tw-border-grayscale-100 tw-cursor-not-allowed': 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>
+
+<style scoped>
+.no-rounded-l {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.no-rounded-r {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'tw-cursor-pointer tw-border-info-500 tw-text-info-500 hover:tw-bg-info-100': !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,
+      },
+    ]"
+    :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-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300 tw-no-underline"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      computedClasses,
+      {
+        'tw-cursor-pointer tw-border-info-500 tw-text-info-500 hover:tw-bg-info-100': !disabled,
+        'tw-border-info-300 tw-text-info-300 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,
+      },
+    ]"
+    :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/ButtonInfoFilled.vue

@@ -0,0 +1,63 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-font-bold tw-text-white tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'no-rounded-l': !rounded && !roundedLeft,
+        'no-rounded-r': !rounded && !roundedRight,
+        'tw-cursor-pointer tw-bg-info-500 tw-border-info-500 hover:tw-border-info-600 hover:tw-bg-info-600': !disabled,
+        'tw-bg-info-300 tw-border-info-300 tw-cursor-not-allowed': disabled,
+      },
+    ]"
+    :disabled="disabled"
+    v-bind="attrs"
+    :type="type"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-white tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      computedClasses,
+      {
+        'no-rounded-l': !rounded && !roundedLeft,
+        'no-rounded-r': !rounded && !roundedRight,
+        'tw-cursor-pointer tw-bg-info-500 tw-border-info-500 hover:tw-border-info-600 hover:tw-bg-info-600': !disabled,
+        'tw-bg-info-300 tw-border-info-300 tw-cursor-not-allowed': 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>
+
+<style scoped>
+.no-rounded-l {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.no-rounded-r {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-border-0 tw-font-sans tw-text-left tw-cursor-pointer tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      {
+        'tw-cursor-not-allowed': disabled,
+        'tw-text-secondary-500': !white,
+        'tw-text-white': white,
+      },
+      computedClasses,
+    ]"
+    :disabled="disabled"
+    v-bind="attrs"
+    :type="type"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-font-sans tw-inline-flex tw-text-left tw-justify-left tw-cursor-pointer tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300 tw-no-underline"
+    :class="[
+      classes,
+      {
+        'tw-cursor-not-allowed': disabled,
+        'tw-text-secondary-500': !white,
+        'tw-text-white': white,
+      },
+      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,
+    },
+  },
+  computed: {
+    computedClasses() {
+      return {
+        'tw-text-xs': this.size === 'small' || this.size === 'small-wide',
+        'tw-text-sm': !this.size || this.size === 'medium',
+        'tw-text-base': this.size === 'large',
+        'tw-w-full': this.fullWidth,
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,62 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300"
+    :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-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300 tw-no-underline"
+    :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/ButtonOutlineNoHover.vue

@@ -0,0 +1,62 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      {
+        'tw-border-secondary-500 tw-text-secondary-500': !white,
+        'tw-border-white tw-text-white': white,
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !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-border-2 tw-border-solid tw-font-bold tw-uppercase tw-bg-transparent tw-transition-colors tw-duration-300 tw-no-underline"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      {
+        'tw-border-secondary-500 tw-text-secondary-500 ': !white,
+        'tw-border-white tw-text-white': white,
+        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !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/ButtonOutlineSuccess.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-success-500 tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-success-500 tw-bg-white hover:tw-bg-success-100 tw-text-success-500': !isBusy && !disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      computedClasses,
+      {
+        'tw-cursor-wait': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-success-500 tw-bg-white hover:tw-bg-success-100 tw-text-success-500 hover:tw-text-success-600':
+          !isBusy,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :download="download"
+    v-bind="attrs"
+    :target="target"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+};
+</script>