@gsk_poc/untitled-ui-base 0.1.1

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.
Files changed (89) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +44 -0
  3. package/components/application/app-navigation/base-components/featured-cards.demo.tsx +86 -0
  4. package/components/application/app-navigation/base-components/featured-cards.story.tsx +49 -0
  5. package/components/application/app-navigation/header-navigation.demo.tsx +59 -0
  6. package/components/application/app-navigation/header-navigation.story.tsx +23 -0
  7. package/components/application/app-navigation/sidebar-navigation.demo.tsx +409 -0
  8. package/components/application/app-navigation/sidebar-navigation.story.tsx +47 -0
  9. package/components/application/carousel/carousel.demo.tsx +107 -0
  10. package/components/application/carousel/carousel.story.tsx +21 -0
  11. package/components/application/charts/activity-gauges.demo.tsx +251 -0
  12. package/components/application/charts/activity-gauges.story.tsx +27 -0
  13. package/components/application/charts/bar-charts.demo.tsx +506 -0
  14. package/components/application/charts/bar-charts.story.tsx +36 -0
  15. package/components/application/charts/line-charts.demo.tsx +604 -0
  16. package/components/application/charts/line-charts.story.tsx +43 -0
  17. package/components/application/charts/pie-charts.demo.tsx +193 -0
  18. package/components/application/charts/pie-charts.story.tsx +30 -0
  19. package/components/application/charts/progress-circles.demo.tsx +110 -0
  20. package/components/application/charts/progress-circles.story.tsx +33 -0
  21. package/components/application/charts/radar-charts.demo.tsx +203 -0
  22. package/components/application/charts/radar-charts.story.tsx +18 -0
  23. package/components/application/date-picker/date-picker.demo.tsx +217 -0
  24. package/components/application/date-picker/date-picker.story.tsx +44 -0
  25. package/components/application/file-upload/file-upload.demo.tsx +292 -0
  26. package/components/application/file-upload/file-upload.story.tsx +70 -0
  27. package/components/application/loading-indicator/loading-indicator.demo.tsx +73 -0
  28. package/components/application/loading-indicator/loading-indicator.story.tsx +22 -0
  29. package/components/application/pagination/pagination.demo.tsx +104 -0
  30. package/components/application/pagination/pagination.story.tsx +54 -0
  31. package/components/application/table/table.demo.tsx +1038 -0
  32. package/components/application/table/table.story.tsx +119 -0
  33. package/components/application/tabs/tabs.demo.tsx +322 -0
  34. package/components/application/tabs/tabs.story.tsx +43 -0
  35. package/components/base/avatar/avatar.demo.tsx +865 -0
  36. package/components/base/avatar/avatar.story.tsx +27 -0
  37. package/components/base/badges/badge-groups.demo.tsx +357 -0
  38. package/components/base/badges/badge-groups.story.tsx +25 -0
  39. package/components/base/badges/badges.demo.tsx +497 -0
  40. package/components/base/badges/badges.story.tsx +83 -0
  41. package/components/base/button-group/button-group.demo.tsx +131 -0
  42. package/components/base/button-group/button-group.story.tsx +16 -0
  43. package/components/base/buttons/app-store-buttons.demo.tsx +129 -0
  44. package/components/base/buttons/app-store-buttons.story.tsx +13 -0
  45. package/components/base/buttons/buttons.demo.tsx +1022 -0
  46. package/components/base/buttons/buttons.story.tsx +42 -0
  47. package/components/base/buttons/social-buttons.demo.tsx +432 -0
  48. package/components/base/buttons/social-buttons.story.tsx +20 -0
  49. package/components/base/checkbox/checkbox.demo.tsx +62 -0
  50. package/components/base/checkbox/checkbox.story.tsx +18 -0
  51. package/components/base/dropdown/dropdown.demo.tsx +137 -0
  52. package/components/base/dropdown/dropdown.story.tsx +22 -0
  53. package/components/base/input/inputs.demo.tsx +758 -0
  54. package/components/base/input/inputs.story.tsx +52 -0
  55. package/components/base/pin-input/pin-input.demo.tsx +126 -0
  56. package/components/base/pin-input/pin-input.story.tsx +22 -0
  57. package/components/base/progress-indicators/progress-indicators.demo.tsx +54 -0
  58. package/components/base/progress-indicators/progress-indicators.story.tsx +57 -0
  59. package/components/base/radio-buttons/radio-buttons.demo.tsx +77 -0
  60. package/components/base/radio-buttons/radio-buttons.story.tsx +19 -0
  61. package/components/base/select/select.demo.tsx +936 -0
  62. package/components/base/select/select.story.tsx +43 -0
  63. package/components/base/slider/slider.demo.tsx +19 -0
  64. package/components/base/slider/slider.story.tsx +26 -0
  65. package/components/base/tags/tags.demo.tsx +341 -0
  66. package/components/base/tags/tags.story.tsx +28 -0
  67. package/components/base/textarea/textarea.demo.tsx +25 -0
  68. package/components/base/textarea/textarea.story.tsx +15 -0
  69. package/components/base/toggle/toggle.demo.tsx +76 -0
  70. package/components/base/toggle/toggle.story.tsx +23 -0
  71. package/components/base/tooltip/tooltip.demo.tsx +125 -0
  72. package/components/base/tooltip/tooltip.story.tsx +21 -0
  73. package/components/foundations/featured-icon/featured-icon.demo.tsx +160 -0
  74. package/components/foundations/featured-icon/featured-icon.story.tsx +25 -0
  75. package/components/shared-assets/credit-card/credit-card.demo.tsx +106 -0
  76. package/components/shared-assets/credit-card/credit-card.story.tsx +41 -0
  77. package/dist/index.d.mts +1417 -0
  78. package/dist/index.d.ts +1417 -0
  79. package/dist/index.js +10435 -0
  80. package/dist/index.js.map +1 -0
  81. package/dist/index.mjs +10345 -0
  82. package/dist/index.mjs.map +1 -0
  83. package/package.json +126 -0
  84. package/styles/globals.css +65 -0
  85. package/styles/theme.css +430 -0
  86. package/styles/tokens-mapped.css +233 -0
  87. package/styles/tokens.css +807 -0
  88. package/styles/typography.css +430 -0
  89. package/tokens/design-tokens.dtcg.json +3515 -0
package/components/base/buttons/buttons.story.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import type { FC } from "react";
2
+ import * as Buttons from "@/components/base/buttons/buttons.demo";
3
+
4
+ export default {
5
+ title: "Base components/Buttons",
6
+ decorators: [
7
+ (Story: FC) => (
8
+ <div className="flex min-h-screen w-full bg-primary p-4">
9
+ <Story />
10
+ </div>
11
+ ),
12
+ ],
13
+ };
14
+
15
+ export const Primary = () => <Buttons.Primary />;
16
+
17
+ export const Secondary = () => <Buttons.Secondary />;
18
+
19
+ export const Tertiary = () => <Buttons.Tertiary />;
20
+
21
+ export const LinkGray = () => <Buttons.LinkGray />;
22
+ LinkGray.storyName = "Link gray";
23
+
24
+ export const LinkColor = () => <Buttons.LinkColor />;
25
+ LinkColor.storyName = "Link color";
26
+
27
+ export const DestructivePrimary = () => <Buttons.PrimaryDestructive />;
28
+ DestructivePrimary.storyName = "Destructive primary";
29
+
30
+ export const DestructiveSecondary = () => <Buttons.SecondaryDestructive />;
31
+ DestructiveSecondary.storyName = "Destructive secondary";
32
+
33
+ export const DestructiveTertiary = () => <Buttons.TertiaryDestructive />;
34
+ DestructiveTertiary.storyName = "Destructive tertiary";
35
+
36
+ export const DestructiveLink = () => <Buttons.LinkDestructive />;
37
+ DestructiveLink.storyName = "Destructive link";
38
+
39
+ export const CloseX = () => <Buttons.CloseX />;
40
+
41
+ export const UtilityButton = () => <Buttons.UtilityButton />;
42
+ UtilityButton.storyName = "Utility button";
package/components/base/buttons/social-buttons.demo.tsx ADDED
@@ -0,0 +1,432 @@
1
+ "use client";
2
+
3
+ import { SocialButton } from "@/components/base/buttons/social-button";
4
+
5
+ export const SocialButtonGoogleDemo = () => {
6
+ return (
7
+ <div className="flex flex-col gap-4">
8
+ <div className="flex gap-8">
9
+ <SocialButton social="google" theme="brand">
10
+ Sign in with Google
11
+ </SocialButton>
12
+ <SocialButton social="google" theme="brand" />
13
+ </div>
14
+ <div className="flex gap-8">
15
+ <SocialButton social="google" theme="color">
16
+ Sign in with Google
17
+ </SocialButton>
18
+ <SocialButton social="google" theme="color" />
19
+ </div>
20
+ <div className="flex gap-8">
21
+ <SocialButton social="google" theme="gray">
22
+ Sign in with Google
23
+ </SocialButton>
24
+ <SocialButton social="google" theme="gray" />
25
+ </div>
26
+ </div>
27
+ );
28
+ };
29
+
30
+ export const SocialButtonFacebookDemo = () => {
31
+ return (
32
+ <div className="flex flex-col gap-4">
33
+ <div className="flex gap-8">
34
+ <SocialButton social="facebook" theme="brand">
35
+ Sign in with Facebook
36
+ </SocialButton>
37
+ <SocialButton social="facebook" theme="brand" />
38
+ </div>
39
+ <div className="flex gap-8">
40
+ <SocialButton social="facebook" theme="color">
41
+ Sign in with Facebook
42
+ </SocialButton>
43
+ <SocialButton social="facebook" theme="color" />
44
+ </div>
45
+ <div className="flex gap-8">
46
+ <SocialButton social="facebook" theme="gray">
47
+ Sign in with Facebook
48
+ </SocialButton>
49
+ <SocialButton social="facebook" theme="gray" />
50
+ </div>
51
+ </div>
52
+ );
53
+ };
54
+
55
+ export const SocialButtonAppleDemo = () => {
56
+ return (
57
+ <div className="flex flex-col gap-4">
58
+ <div className="flex gap-8">
59
+ <SocialButton social="apple" theme="brand">
60
+ Sign in with Apple
61
+ </SocialButton>
62
+ <SocialButton social="apple" theme="brand" />
63
+ </div>
64
+ <div className="flex gap-8">
65
+ <SocialButton social="apple" theme="color">
66
+ Sign in with Apple
67
+ </SocialButton>
68
+ <SocialButton social="apple" theme="color" />
69
+ </div>
70
+ <div className="flex gap-8">
71
+ <SocialButton social="apple" theme="gray">
72
+ Sign in with Apple
73
+ </SocialButton>
74
+ <SocialButton social="apple" theme="gray" />
75
+ </div>
76
+ </div>
77
+ );
78
+ };
79
+
80
+ export const SocialButtonTwitterDemo = () => {
81
+ return (
82
+ <div className="flex flex-col gap-4">
83
+ <div className="flex gap-8">
84
+ <SocialButton social="twitter" theme="brand">
85
+ Sign in with X
86
+ </SocialButton>
87
+ <SocialButton social="twitter" theme="brand" />
88
+ </div>
89
+ <div className="flex gap-8">
90
+ <SocialButton social="twitter" theme="color">
91
+ Sign in with X
92
+ </SocialButton>
93
+ <SocialButton social="twitter" theme="color" />
94
+ </div>
95
+ <div className="flex gap-8">
96
+ <SocialButton social="twitter" theme="gray">
97
+ Sign in with X
98
+ </SocialButton>
99
+ <SocialButton social="twitter" theme="gray" />
100
+ </div>
101
+ </div>
102
+ );
103
+ };
104
+
105
+ export const SocialButtonFigmaDemo = () => {
106
+ return (
107
+ <div className="flex flex-col gap-4">
108
+ <div className="flex gap-8">
109
+ <SocialButton social="figma" theme="brand">
110
+ Sign in with Figma
111
+ </SocialButton>
112
+ <SocialButton social="figma" theme="brand" />
113
+ </div>
114
+ <div className="flex gap-8">
115
+ <SocialButton social="figma" theme="color">
116
+ Sign in with Figma
117
+ </SocialButton>
118
+ <SocialButton social="figma" theme="color" />
119
+ </div>
120
+ <div className="flex gap-8">
121
+ <SocialButton social="figma" theme="gray">
122
+ Sign in with Figma
123
+ </SocialButton>
124
+ <SocialButton social="figma" theme="gray" />
125
+ </div>
126
+ </div>
127
+ );
128
+ };
129
+
130
+ export const SocialButtonDribbleDemo = () => {
131
+ return (
132
+ <div className="flex flex-col gap-4">
133
+ <div className="flex gap-8">
134
+ <SocialButton social="dribble" theme="brand">
135
+ Sign in with Dribble
136
+ </SocialButton>
137
+ <SocialButton social="dribble" theme="brand" />
138
+ </div>
139
+ <div className="flex gap-8">
140
+ <SocialButton social="dribble" theme="color">
141
+ Sign in with Dribble
142
+ </SocialButton>
143
+ <SocialButton social="dribble" theme="color" />
144
+ </div>
145
+ <div className="flex gap-8">
146
+ <SocialButton social="dribble" theme="gray">
147
+ Sign in with Dribble
148
+ </SocialButton>
149
+ <SocialButton social="dribble" theme="gray" />
150
+ </div>
151
+ </div>
152
+ );
153
+ };
154
+
155
+ export const SocialButtonGroupBrandDemo = () => {
156
+ return (
157
+ <div className="flex w-90 flex-col gap-3">
158
+ <SocialButton social="google" theme="brand">
159
+ Sign in with Google
160
+ </SocialButton>
161
+ <SocialButton social="facebook" theme="brand">
162
+ Sign in with Facebook
163
+ </SocialButton>
164
+ <SocialButton social="apple" theme="brand">
165
+ Sign in with Apple
166
+ </SocialButton>
167
+ </div>
168
+ );
169
+ };
170
+
171
+ export const SocialButtonGroupIconsBrandDemo = () => {
172
+ return (
173
+ <div className="grid w-90 grid-cols-3 gap-3">
174
+ <SocialButton social="google" theme="brand" />
175
+ <SocialButton social="facebook" theme="brand" />
176
+ <SocialButton social="apple" theme="brand" />
177
+ </div>
178
+ );
179
+ };
180
+
181
+ export const SocialButtonGroupColorDemo = () => {
182
+ return (
183
+ <div className="flex w-90 flex-col gap-3">
184
+ <SocialButton social="google" theme="color">
185
+ Sign in with Google
186
+ </SocialButton>
187
+ <SocialButton social="facebook" theme="color">
188
+ Sign in with Facebook
189
+ </SocialButton>
190
+ <SocialButton social="apple" theme="color">
191
+ Sign in with Apple
192
+ </SocialButton>
193
+ </div>
194
+ );
195
+ };
196
+
197
+ export const SocialButtonGroupIconsColorDemo = () => {
198
+ return (
199
+ <div className="grid w-90 grid-cols-3 gap-3">
200
+ <SocialButton social="google" theme="color" />
201
+ <SocialButton social="facebook" theme="color" />
202
+ <SocialButton social="apple" theme="color" />
203
+ </div>
204
+ );
205
+ };
206
+
207
+ export const SocialButtonGroupGrayDemo = () => {
208
+ return (
209
+ <div className="flex w-90 flex-col gap-3">
210
+ <SocialButton social="google" theme="gray">
211
+ Sign in with Google
212
+ </SocialButton>
213
+ <SocialButton social="facebook" theme="gray">
214
+ Sign in with Facebook
215
+ </SocialButton>
216
+ <SocialButton social="apple" theme="gray">
217
+ Sign in with Apple
218
+ </SocialButton>
219
+ </div>
220
+ );
221
+ };
222
+
223
+ export const SocialButtonGroupIconsGrayDemo = () => {
224
+ return (
225
+ <div className="grid w-90 grid-cols-3 gap-3">
226
+ <SocialButton social="google" theme="gray" />
227
+ <SocialButton social="facebook" theme="gray" />
228
+ <SocialButton social="apple" theme="gray" />
229
+ </div>
230
+ );
231
+ };
232
+
233
+ export const SocialButtons = () => {
234
+ return (
235
+ <div>
236
+ {/* Google */}
237
+ <div className="mb-4 flex justify-items-start gap-16">
238
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
239
+ <SocialButton social="google" theme="brand">
240
+ Sign in with Google
241
+ </SocialButton>
242
+ <SocialButton social="google" theme="brand" />
243
+ </div>
244
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
245
+ <SocialButton social="google" theme="color">
246
+ Sign in with Google
247
+ </SocialButton>
248
+ <SocialButton social="google" theme="color" />
249
+ </div>
250
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
251
+ <SocialButton social="google" theme="gray">
252
+ Sign in with Google
253
+ </SocialButton>
254
+ <SocialButton social="google" theme="gray" />
255
+ </div>
256
+ </div>
257
+
258
+ {/* Facebook */}
259
+ <div className="mb-4 flex justify-items-start gap-16">
260
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
261
+ <SocialButton social="facebook" theme="brand">
262
+ Sign in with Facebook
263
+ </SocialButton>
264
+ <SocialButton social="facebook" theme="brand" />
265
+ </div>
266
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
267
+ <SocialButton social="facebook" theme="color">
268
+ Sign in with Facebook
269
+ </SocialButton>
270
+ <SocialButton social="facebook" theme="color" />
271
+ </div>
272
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
273
+ <SocialButton social="facebook" theme="gray">
274
+ Sign in with Facebook
275
+ </SocialButton>
276
+ <SocialButton social="facebook" theme="gray" />
277
+ </div>
278
+ </div>
279
+
280
+ {/* Apple */}
281
+ <div className="mb-4 flex justify-items-start gap-16">
282
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
283
+ <SocialButton social="apple" theme="brand">
284
+ Sign in with Apple
285
+ </SocialButton>
286
+ <SocialButton social="apple" theme="brand" />
287
+ </div>
288
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
289
+ <SocialButton social="apple" theme="color">
290
+ Sign in with Apple
291
+ </SocialButton>
292
+ <SocialButton social="apple" theme="color" />
293
+ </div>
294
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
295
+ <SocialButton social="apple" theme="gray">
296
+ Sign in with Apple
297
+ </SocialButton>
298
+ <SocialButton social="apple" theme="gray" />
299
+ </div>
300
+ </div>
301
+
302
+ {/* Twitter */}
303
+ <div className="mb-4 flex justify-items-start gap-16">
304
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
305
+ <SocialButton social="twitter" theme="brand">
306
+ Sign in with X
307
+ </SocialButton>
308
+ <SocialButton social="twitter" theme="brand" />
309
+ </div>
310
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
311
+ <SocialButton social="twitter" theme="color">
312
+ Sign in with X
313
+ </SocialButton>
314
+ <SocialButton social="twitter" theme="color" />
315
+ </div>
316
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
317
+ <SocialButton social="twitter" theme="gray">
318
+ Sign in with X
319
+ </SocialButton>
320
+ <SocialButton social="twitter" theme="gray" />
321
+ </div>
322
+ </div>
323
+
324
+ {/* Figma */}
325
+ <div className="mb-4 flex justify-items-start gap-16">
326
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
327
+ <SocialButton social="figma" theme="brand">
328
+ Sign in with Figma
329
+ </SocialButton>
330
+ <SocialButton social="figma" theme="brand" />
331
+ </div>
332
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
333
+ <SocialButton social="figma" theme="color">
334
+ Sign in with figma
335
+ </SocialButton>
336
+ <SocialButton social="figma" theme="color" />
337
+ </div>
338
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
339
+ <SocialButton social="figma" theme="gray">
340
+ Sign in with Figma
341
+ </SocialButton>
342
+ <SocialButton social="figma" theme="gray" />
343
+ </div>
344
+ </div>
345
+
346
+ {/* Dribbble */}
347
+ <div className="mb-4 flex justify-items-start gap-16">
348
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
349
+ <SocialButton social="dribble" theme="brand">
350
+ Sign in with Dribble
351
+ </SocialButton>
352
+ <SocialButton social="dribble" theme="brand" />
353
+ </div>
354
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
355
+ <SocialButton social="dribble" theme="color">
356
+ Sign in with Dribble
357
+ </SocialButton>
358
+ <SocialButton social="dribble" theme="color" />
359
+ </div>
360
+ <div className="grid grid-cols-[238px_44px] justify-items-start gap-8">
361
+ <SocialButton social="dribble" theme="gray">
362
+ Sign in with Dribble
363
+ </SocialButton>
364
+ <SocialButton social="dribble" theme="gray" />
365
+ </div>
366
+ </div>
367
+ </div>
368
+ );
369
+ };
370
+
371
+ export const SocialButtonGroups = () => {
372
+ return (
373
+ <div>
374
+ <div className="mb-4 flex items-start gap-8">
375
+ <div className="flex w-90 flex-col gap-3">
376
+ <SocialButton social="google" theme="brand">
377
+ Sign in with Google
378
+ </SocialButton>
379
+ <SocialButton social="facebook" theme="brand">
380
+ Sign in with Facebook
381
+ </SocialButton>
382
+ <SocialButton social="apple" theme="brand">
383
+ Sign in with Apple
384
+ </SocialButton>
385
+ </div>
386
+ <div className="grid w-90 grid-cols-3 justify-items-start gap-3">
387
+ <SocialButton social="google" theme="brand" />
388
+ <SocialButton social="facebook" theme="brand" />
389
+ <SocialButton social="apple" theme="brand" />
390
+ </div>
391
+ </div>
392
+
393
+ <div className="mb-4 flex items-start gap-8">
394
+ <div className="flex w-90 flex-col gap-3">
395
+ <SocialButton social="google" theme="color">
396
+ Sign in with Google
397
+ </SocialButton>
398
+ <SocialButton social="facebook" theme="color">
399
+ Sign in with Facebook
400
+ </SocialButton>
401
+ <SocialButton social="apple" theme="color">
402
+ Sign in with Apple
403
+ </SocialButton>
404
+ </div>
405
+ <div className="grid w-90 grid-cols-3 justify-items-start gap-3">
406
+ <SocialButton social="google" theme="color" />
407
+ <SocialButton social="facebook" theme="color" />
408
+ <SocialButton social="apple" theme="color" />
409
+ </div>
410
+ </div>
411
+
412
+ <div className="mb-4 flex items-start gap-8">
413
+ <div className="flex w-90 flex-col gap-3">
414
+ <SocialButton social="google" theme="gray">
415
+ Sign in with Google
416
+ </SocialButton>
417
+ <SocialButton social="facebook" theme="gray">
418
+ Sign in with Facebook
419
+ </SocialButton>
420
+ <SocialButton social="apple" theme="gray">
421
+ Sign in with Apple
422
+ </SocialButton>
423
+ </div>
424
+ <div className="grid w-90 grid-cols-3 justify-items-start gap-3">
425
+ <SocialButton social="google" theme="gray" />
426
+ <SocialButton social="facebook" theme="gray" />
427
+ <SocialButton social="apple" theme="gray" />
428
+ </div>
429
+ </div>
430
+ </div>
431
+ );
432
+ };
package/components/base/buttons/social-buttons.story.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import type { FC } from "react";
2
+ import * as Buttons from "./social-buttons.demo";
3
+
4
+ export default {
5
+ title: "Base components/Buttons",
6
+ excludeStories: ["GoogleLogo", "GoogleButton", "FacebookButton", "AppleButton"],
7
+ decorators: [
8
+ (Story: FC) => (
9
+ <div className="flex min-h-screen w-full bg-primary p-4">
10
+ <Story />
11
+ </div>
12
+ ),
13
+ ],
14
+ };
15
+
16
+ export const SocialButtons = () => <Buttons.SocialButtons />;
17
+ SocialButtons.storyName = "Social buttons";
18
+
19
+ export const SocialButtonGroups = () => <Buttons.SocialButtonGroups />;
20
+ SocialButtonGroups.storyName = "Social button groups";
package/components/base/checkbox/checkbox.demo.tsx ADDED
@@ -0,0 +1,62 @@
1
+ "use client";
2
+
3
+ import { Checkbox } from "@/components/base/checkbox/checkbox";
4
+
5
+ export const DefaultDemo = () => <Checkbox label="Remember me" hint="Save my login details for next time." size="sm" />;
6
+
7
+ export const BaseDemo = () => <Checkbox size="sm" />;
8
+
9
+ export const WithLabelDemo = () => <Checkbox label="Remember me" size="sm" />;
10
+
11
+ export const WithLabelAndHintDemo = () => <Checkbox label="Remember me" hint="Save my login details for next time." size="sm" />;
12
+
13
+ export const DisabledDemo = () => <Checkbox isDisabled label="Remember me" hint="Save my login details for next time." size="sm" />;
14
+
15
+ export const SizesDemo = () => (
16
+ <div className="flex flex-col gap-8">
17
+ <Checkbox label="Remember me" hint="Save my login details for next time." size="sm" />
18
+ <Checkbox label="Remember me" hint="Save my login details for next time." size="md" />
19
+ </div>
20
+ );
21
+
22
+ export const Checkboxes = () => {
23
+ return (
24
+ <div className="grid grid-cols-2 gap-8">
25
+ <div className="flex flex-col gap-4">
26
+ <Checkbox label="Remember me" hint="Save my login details for next time." />
27
+ <Checkbox isSelected label="Remember me" hint="Save my login details for next time." />
28
+ <Checkbox isSelected isDisabled label="Remember me" hint="Save my login details for next time." />
29
+ <Checkbox isIndeterminate label="Remember me" hint="Save my login details for next time." />
30
+ <Checkbox isIndeterminate isDisabled label="Remember me" hint="Save my login details for next time." />
31
+ </div>
32
+ <div className="flex flex-col gap-4">
33
+ <Checkbox size="md" label="Remember me" hint="Save my login details for next time." />
34
+ <Checkbox isSelected size="md" label="Remember me" hint="Save my login details for next time." />
35
+ <Checkbox isSelected isDisabled size="md" label="Remember me" hint="Save my login details for next time." />
36
+ <Checkbox isIndeterminate size="md" label="Remember me" hint="Save my login details for next time." />
37
+ <Checkbox isIndeterminate isDisabled size="md" label="Remember me" hint="Save my login details for next time." />
38
+ </div>
39
+ </div>
40
+ );
41
+ };
42
+
43
+ export const CheckboxBase = () => {
44
+ return (
45
+ <div className="grid grid-cols-2 gap-8">
46
+ <div className="flex flex-col gap-2">
47
+ <Checkbox />
48
+ <Checkbox isSelected />
49
+ <Checkbox isSelected isDisabled />
50
+ <Checkbox isIndeterminate />
51
+ <Checkbox isIndeterminate isDisabled />
52
+ </div>
53
+ <div className="flex flex-col gap-2">
54
+ <Checkbox size="md" />
55
+ <Checkbox isSelected size="md" />
56
+ <Checkbox isSelected isDisabled size="md" />
57
+ <Checkbox isIndeterminate size="md" />
58
+ <Checkbox isIndeterminate isDisabled size="md" />
59
+ </div>
60
+ </div>
61
+ );
62
+ };
package/components/base/checkbox/checkbox.story.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import type { FC } from "react";
2
+ import * as Checkbox from "@/components/base/checkbox/checkbox.demo";
3
+
4
+ export default {
5
+ title: "Base components/Checkboxes",
6
+ decorators: [
7
+ (Story: FC) => (
8
+ <div className="flex min-h-screen w-full bg-primary p-4">
9
+ <Story />
10
+ </div>
11
+ ),
12
+ ],
13
+ };
14
+
15
+ export const Checkboxes = () => <Checkbox.Checkboxes />;
16
+
17
+ export const CheckboxBase = () => <Checkbox.CheckboxBase />;
18
+ CheckboxBase.storyName = "Checkbox base";