@designcrowd/fe-shared-lib 1.4.1 → 1.4.2
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/dist/css/tailwind-brandCrowd.css +0 -3
- package/dist/css/tailwind-brandPage.css +0 -3
- package/dist/css/tailwind-crazyDomains.css +0 -3
- package/dist/css/tailwind-designCom.css +0 -3
- package/dist/css/tailwind-designCrowd.css +0 -3
- package/package.json +1 -1
- package/src/atoms/components/Checkbox/Checkbox.stories.js +134 -1
- package/src/atoms/components/Checkbox/Checkbox.vue +2 -8
- package/src/atoms/components/Icon/Icon.stories.js +2 -0
- package/src/atoms/components/Icon/Icon.vue +100 -95
- package/src/atoms/components/Icon/icons/file.vue +7 -0
- package/src/atoms/components/Icon/icons/pen-tool.vue +7 -0
- package/public/css/tailwind-brandCrowd.css +0 -2414
- package/public/css/tailwind-brandPage.css +0 -2098
- package/public/css/tailwind-crazyDomains.css +0 -2414
- package/public/css/tailwind-designCom.css +0 -2414
- package/public/css/tailwind-designCrowd.css +0 -2414
package/package.json
CHANGED
|
@@ -3,6 +3,139 @@ import Checkbox from './Checkbox.vue';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Components/Checkbox',
|
|
5
5
|
component: Checkbox,
|
|
6
|
+
argTypes: {
|
|
7
|
+
modelValue: {
|
|
8
|
+
control: 'boolean',
|
|
9
|
+
description: 'The checked state of the checkbox',
|
|
10
|
+
table: {
|
|
11
|
+
type: { summary: 'boolean' },
|
|
12
|
+
defaultValue: { summary: false },
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
id: {
|
|
16
|
+
control: 'text',
|
|
17
|
+
description: 'Unique identifier for the checkbox',
|
|
18
|
+
table: {
|
|
19
|
+
type: { summary: 'string' },
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
label: {
|
|
23
|
+
control: 'text',
|
|
24
|
+
description: 'Label text for the checkbox',
|
|
25
|
+
table: {
|
|
26
|
+
type: { summary: 'string' },
|
|
27
|
+
defaultValue: { summary: 'undefined' },
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
showLabelScreenReaderOnly: {
|
|
31
|
+
control: 'boolean',
|
|
32
|
+
description: 'Whether to show the label only to screen readers',
|
|
33
|
+
table: {
|
|
34
|
+
type: { summary: 'boolean' },
|
|
35
|
+
defaultValue: { summary: false },
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
inline: {
|
|
39
|
+
control: 'boolean',
|
|
40
|
+
description: 'Display checkbox and label inline',
|
|
41
|
+
table: {
|
|
42
|
+
type: { summary: 'boolean' },
|
|
43
|
+
defaultValue: { summary: false },
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
required: {
|
|
47
|
+
control: 'boolean',
|
|
48
|
+
description: 'Show required asterisk on label',
|
|
49
|
+
table: {
|
|
50
|
+
type: { summary: 'boolean' },
|
|
51
|
+
defaultValue: { summary: false },
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
disabled: {
|
|
55
|
+
control: 'boolean',
|
|
56
|
+
description: 'Disable the checkbox',
|
|
57
|
+
table: {
|
|
58
|
+
type: { summary: 'boolean' },
|
|
59
|
+
defaultValue: { summary: false },
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
color: {
|
|
63
|
+
control: 'select',
|
|
64
|
+
options: ['primary', 'success', 'error', 'info', 'warning'],
|
|
65
|
+
description: 'Color scheme for the checkbox',
|
|
66
|
+
table: {
|
|
67
|
+
type: { summary: 'string' },
|
|
68
|
+
defaultValue: { summary: 'success' },
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
size: {
|
|
72
|
+
control: 'select',
|
|
73
|
+
options: ['sm', 'md'],
|
|
74
|
+
description: 'Size of the checkbox',
|
|
75
|
+
table: {
|
|
76
|
+
type: { summary: 'string' },
|
|
77
|
+
defaultValue: { summary: 'md' },
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
showBorder: {
|
|
81
|
+
control: 'boolean',
|
|
82
|
+
description: 'Show border around the checkbox',
|
|
83
|
+
table: {
|
|
84
|
+
type: { summary: 'boolean' },
|
|
85
|
+
defaultValue: { summary: false },
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
classes: {
|
|
89
|
+
control: 'text',
|
|
90
|
+
description: 'Additional CSS classes',
|
|
91
|
+
table: {
|
|
92
|
+
type: { summary: 'string | object' },
|
|
93
|
+
defaultValue: { summary: '""' },
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
// Interactive story with all controls
|
|
100
|
+
export const Interactive = (args) => ({
|
|
101
|
+
components: { Checkbox },
|
|
102
|
+
setup() {
|
|
103
|
+
return { args };
|
|
104
|
+
},
|
|
105
|
+
data() {
|
|
106
|
+
return {
|
|
107
|
+
checked: args.modelValue,
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
template: `
|
|
111
|
+
<Checkbox
|
|
112
|
+
v-model="checked"
|
|
113
|
+
:id="args.id"
|
|
114
|
+
:label="args.label"
|
|
115
|
+
:showLabelScreenReaderOnly="args.showLabelScreenReaderOnly"
|
|
116
|
+
:inline="args.inline"
|
|
117
|
+
:required="args.required"
|
|
118
|
+
:disabled="args.disabled"
|
|
119
|
+
:color="args.color"
|
|
120
|
+
:size="args.size"
|
|
121
|
+
:showBorder="args.showBorder"
|
|
122
|
+
:classes="args.classes"
|
|
123
|
+
/>
|
|
124
|
+
`,
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
Interactive.args = {
|
|
128
|
+
modelValue: true,
|
|
129
|
+
id: 'interactive-checkbox',
|
|
130
|
+
label: 'Do you love checkboxes?',
|
|
131
|
+
showLabelScreenReaderOnly: false,
|
|
132
|
+
inline: false,
|
|
133
|
+
required: false,
|
|
134
|
+
disabled: false,
|
|
135
|
+
color: 'success',
|
|
136
|
+
size: 'md',
|
|
137
|
+
showBorder: true,
|
|
138
|
+
classes: '',
|
|
6
139
|
};
|
|
7
140
|
|
|
8
141
|
export const Sample = () => {
|
|
@@ -204,4 +337,4 @@ export const NoBorder = () => {
|
|
|
204
337
|
</div>
|
|
205
338
|
`,
|
|
206
339
|
};
|
|
207
|
-
};
|
|
340
|
+
};
|
|
@@ -48,13 +48,7 @@
|
|
|
48
48
|
}"
|
|
49
49
|
:classes="classes"
|
|
50
50
|
>
|
|
51
|
-
<Icon
|
|
52
|
-
v-show="modelValue"
|
|
53
|
-
:class="{ 'tw-mt-1': size === 'md', 'tw-mt-0.5': size === 'sm' }"
|
|
54
|
-
name="check"
|
|
55
|
-
color="white"
|
|
56
|
-
:size="iconSize"
|
|
57
|
-
/>
|
|
51
|
+
<Icon v-show="modelValue" name="check" color="white" :size="iconSize" />
|
|
58
52
|
</div>
|
|
59
53
|
</div>
|
|
60
54
|
</label>
|
|
@@ -87,4 +81,4 @@ export default {
|
|
|
87
81
|
},
|
|
88
82
|
},
|
|
89
83
|
};
|
|
90
|
-
</script>
|
|
84
|
+
</script>
|
|
@@ -84,6 +84,7 @@ export const IconSample = () => {
|
|
|
84
84
|
{ name: 'eye-crossed' },
|
|
85
85
|
{ name: 'eye-open' },
|
|
86
86
|
{ name: 'fees' },
|
|
87
|
+
{ name: 'file' },
|
|
87
88
|
{ name: 'filter' },
|
|
88
89
|
{ name: 'filter-crazy-domains' },
|
|
89
90
|
{ name: 'flag' },
|
|
@@ -189,6 +190,7 @@ export const IconSample = () => {
|
|
|
189
190
|
{ name: 'payments-featured' },
|
|
190
191
|
{ name: 'payments-textonly' },
|
|
191
192
|
{ name: 'payments-thumbnail' },
|
|
193
|
+
{ name: 'pen-tool' },
|
|
192
194
|
{ name: 'phone' },
|
|
193
195
|
{ name: 'plus' },
|
|
194
196
|
{ name: 'plus-circle' },
|