@designcrowd/fe-shared-lib 1.1.8 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{public → dist}/css/tailwind-brandCrowd.css +604 -502
- package/{public → dist}/css/tailwind-brandPage.css +528 -426
- package/{public → dist}/css/tailwind-crazyDomains.css +604 -502
- package/{public → dist}/css/tailwind-designCom.css +604 -502
- package/{public → dist}/css/tailwind-designCrowd.css +604 -502
- package/package.json +1 -1
- package/src/atoms/components/Button/Button.vue +2 -0
- package/src/atoms/components/Button/Buttons.stories.js +26 -0
- package/src/atoms/components/Button/variants/ButtonAi.vue +63 -0
package/package.json
CHANGED
|
@@ -92,6 +92,7 @@ import ButtonPrimaryWithIcon from './variants/ButtonPrimaryWithIcon.vue';
|
|
|
92
92
|
import ButtonSuccess from './variants/ButtonSuccess.vue';
|
|
93
93
|
import ButtonOutlineSuccess from './variants/ButtonOutlineSuccess.vue';
|
|
94
94
|
import ButtonNoHover from './variants/ButtonOutlineNoHover.vue';
|
|
95
|
+
import ButtonAi from './variants/ButtonAi.vue';
|
|
95
96
|
|
|
96
97
|
import ButtonInfo from './variants/ButtonInfo.vue';
|
|
97
98
|
import ButtonCrazyDomainsPrimary from './variants/crazy-domains/ButtonCrazyDomainsPrimary.vue';
|
|
@@ -131,6 +132,7 @@ export default {
|
|
|
131
132
|
'button-brandCrowd-flat': ButtonFlat,
|
|
132
133
|
'button-brandCrowd-pill': ButtonPill,
|
|
133
134
|
'button-brandCrowd-dark-mode-pill': ButtonDarkModePill,
|
|
135
|
+
'button-brandCrowd-ai': ButtonAi,
|
|
134
136
|
|
|
135
137
|
Icon,
|
|
136
138
|
},
|
|
@@ -721,6 +721,32 @@ export const OutlineWhite = (args, { argTypes }) => {
|
|
|
721
721
|
OutlineWhite.args = controlArgs;
|
|
722
722
|
OutlineWhite.argTypes = controlArgTypes;
|
|
723
723
|
|
|
724
|
+
export const AiSamples = (args, { argTypes }) => {
|
|
725
|
+
return {
|
|
726
|
+
components: {
|
|
727
|
+
StorybookButtonComponent,
|
|
728
|
+
},
|
|
729
|
+
props: Object.keys(argTypes),
|
|
730
|
+
data() {
|
|
731
|
+
return {
|
|
732
|
+
variants: generateSampleButtonWhiteVariants('ai'),
|
|
733
|
+
};
|
|
734
|
+
},
|
|
735
|
+
template: `
|
|
736
|
+
<div>
|
|
737
|
+
<StorybookButtonComponent
|
|
738
|
+
:disabled="disabled"
|
|
739
|
+
:full-width="fullWidth"
|
|
740
|
+
:grey-out-left="greyOutLeft"
|
|
741
|
+
:justify="justify"
|
|
742
|
+
:variants="variants"/>
|
|
743
|
+
</div>
|
|
744
|
+
`,
|
|
745
|
+
};
|
|
746
|
+
};
|
|
747
|
+
AiSamples.args = controlArgs;
|
|
748
|
+
AiSamples.argTypes = controlArgTypes;
|
|
749
|
+
|
|
724
750
|
PrimarySamples.story = {
|
|
725
751
|
name: 'Primary',
|
|
726
752
|
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
v-if="!url"
|
|
4
|
+
style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
|
|
5
|
+
class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-rounded-xl tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
|
|
6
|
+
:class="[
|
|
7
|
+
classes,
|
|
8
|
+
{
|
|
9
|
+
'tw-cursor-pointer': !disabled,
|
|
10
|
+
'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white && !disabled,
|
|
11
|
+
'tw-border-white tw-text-white hover:tw-bg-info-400': white && !disabled,
|
|
12
|
+
'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
|
|
13
|
+
'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
|
|
14
|
+
isBusy,
|
|
15
|
+
},
|
|
16
|
+
computedClasses,
|
|
17
|
+
]"
|
|
18
|
+
:disabled="disabled"
|
|
19
|
+
:type="type"
|
|
20
|
+
v-bind="attrs"
|
|
21
|
+
@click="onClick"
|
|
22
|
+
>
|
|
23
|
+
<slot />
|
|
24
|
+
</button>
|
|
25
|
+
<a
|
|
26
|
+
v-else
|
|
27
|
+
:href="computedUrl"
|
|
28
|
+
class="tw-font-sans tw-inline-flex tw-justify-center tw-rounded-xl tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
|
|
29
|
+
:class="[
|
|
30
|
+
commonUrlButtonClasses,
|
|
31
|
+
classes,
|
|
32
|
+
{
|
|
33
|
+
'tw-cursor-pointer': !disabled,
|
|
34
|
+
'tw-border-secondary-500 tw-text-secondary-500 hover:tw-bg-secondary-100': !white,
|
|
35
|
+
'tw-border-white tw-text-white hover:tw-bg-info-400': white,
|
|
36
|
+
'tw-cursor-not-allowed': disabled,
|
|
37
|
+
'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
|
|
38
|
+
isBusy,
|
|
39
|
+
},
|
|
40
|
+
computedClasses,
|
|
41
|
+
]"
|
|
42
|
+
:download="download"
|
|
43
|
+
v-bind="attrs"
|
|
44
|
+
:target="target"
|
|
45
|
+
@click="onClick"
|
|
46
|
+
>
|
|
47
|
+
<slot />
|
|
48
|
+
</a>
|
|
49
|
+
</template>
|
|
50
|
+
<script>
|
|
51
|
+
import ButtonVariant from '../ButtonVariant.mixin.vue';
|
|
52
|
+
|
|
53
|
+
export default {
|
|
54
|
+
mixins: [ButtonVariant],
|
|
55
|
+
props: {
|
|
56
|
+
white: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
required: false,
|
|
59
|
+
default: false,
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
</script>
|