@designcrowd/fe-shared-lib 1.1.10 → 1.1.11

package/dist/css/tailwind-brandCrowd.css

@@ -2041,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));

package/dist/css/tailwind-crazyDomains.css

@@ -2041,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));

package/dist/css/tailwind-designCom.css

@@ -2041,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));

package/dist/css/tailwind-designCrowd.css

@@ -2041,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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

@@ -84,6 +84,7 @@
 <script>
 import ButtonOutline from './variants/ButtonOutline.vue';
 import ButtonPrimary from './variants/ButtonPrimary.vue';
+import ButtonOutlinePrimary from './variants/ButtonOutlinePrimary.vue';
 import ButtonWarning from './variants/ButtonWarning.vue';
 import ButtonSecondary from './variants/ButtonSecondary.vue';
 import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
@@ -107,6 +108,7 @@ export default {
   name: 'Button',
   components: {
     'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
+    'button-crazyDomains-outline-primary': ButtonOutlinePrimary,
     'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
     'button-crazyDomains-secondary': ButtonSecondary,
     'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
@@ -118,6 +120,7 @@ export default {
     'button-crazyDomains-pill': ButtonPill,
 
     'button-brandCrowd-primary': ButtonPrimary,
+    'button-brandCrowd-outline-primary': ButtonOutlinePrimary,
     'button-brandCrowd-warning': ButtonWarning,
     'button-brandCrowd-info-filled': ButtonInfoFilled,
     'button-brandCrowd-outline': ButtonOutline,

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

@@ -278,6 +278,30 @@ export const PrimarySamples = (args, { argTypes }) => {
 PrimarySamples.args = controlArgs;
 PrimarySamples.argTypes = controlArgTypes;
 
+export const OutlinePrimarySamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-primary'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlinePrimarySamples.args = controlArgs;
+OutlinePrimarySamples.argTypes = controlArgTypes;
+
 export const SecondarySamples = (args, { argTypes }) => {
   return {
     components: {

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

@@ -0,0 +1,53 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-primary-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-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-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-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !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>