@flightlesslabs/dodo-ui 0.1.1 → 0.1.3

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 (36) hide show
  1. package/dist/index.d.ts +3 -1
  2. package/dist/index.js +1 -0
  3. package/dist/stories/components/Form/Button/Button.stories.svelte +17 -5
  4. package/dist/stories/components/Form/Button/Button.stories.svelte.d.ts +2 -26
  5. package/dist/stories/components/Form/Button/Button.svelte +335 -4
  6. package/dist/stories/components/Form/Button/Button.svelte.d.ts +13 -5
  7. package/dist/stories/components/Form/Button/Color/Color.stories.svelte +42 -4
  8. package/dist/stories/components/Form/Button/IconButton/IconButton.stories.svelte +11 -5
  9. package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte +46 -0
  10. package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte.d.ts +26 -0
  11. package/dist/stories/components/Form/Button/Size/Size.stories.svelte +1 -4
  12. package/dist/stories/components/Form/Button/Variant/Variant.stories.svelte +1 -4
  13. package/dist/stories/components/Form/Button/utils/scss/mixins.scss +70 -0
  14. package/dist/storybook-types.d.ts +129 -0
  15. package/dist/storybook-types.js +1 -0
  16. package/dist/styles/_colors.css +171 -0
  17. package/dist/styles/_components.css +10 -0
  18. package/dist/styles/global.css +1 -0
  19. package/dist/types.d.ts +4 -1
  20. package/package.json +15 -13
  21. package/src/lib/index.ts +8 -1
  22. package/src/lib/stories/components/Form/Button/Button.stories.svelte +19 -6
  23. package/src/lib/stories/components/Form/Button/Button.svelte +197 -8
  24. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +42 -4
  25. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +11 -5
  26. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +46 -0
  27. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +1 -4
  28. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +1 -4
  29. package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss +70 -0
  30. package/src/lib/storybook-types.ts +182 -0
  31. package/src/lib/styles/_colors.css +171 -0
  32. package/src/lib/styles/_components.css +10 -0
  33. package/src/lib/styles/global.css +1 -0
  34. package/src/lib/types.ts +5 -1
  35. package/src/lib/stories/Getting Started.mdx +0 -13
  36. package/src/lib/stories/Home.mdx +0 -10
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import './styles/global.css';
2
- export type { ComponentSize } from './types.js';
2
+ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
3
+ /** Form: Button */
3
4
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
5
+ export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import './styles/global.css';
2
+ /** Form: Button */
2
3
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
package/dist/stories/components/Form/Button/Button.stories.svelte CHANGED
@@ -1,7 +1,6 @@
1
1
  <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
2
  import { fn } from '@storybook/test';
3
3
  import Button from './Button.svelte';
4
- import Icon from '@iconify/svelte';
5
4
  export const storyButtonArgTypes = {
6
5
  type: {
7
6
  control: { type: 'select' },
@@ -15,6 +14,10 @@ export const storyButtonArgTypes = {
15
14
  control: { type: 'select' },
16
15
  options: ['text', 'solid'],
17
16
  },
17
+ roundness: {
18
+ control: { type: 'select' },
19
+ options: [false, 1, 2, 3, 'full'],
20
+ },
18
21
  size: {
19
22
  control: { type: 'select' },
20
23
  options: ['small', 'medium', 'large'],
@@ -24,16 +27,25 @@ export const storyButtonArgTypes = {
24
27
  const { Story } = defineMeta({
25
28
  component: Button,
26
29
  tags: ['autodocs'],
27
- // @ts-ignore
28
- argTypes: {
29
- ...storyButtonArgTypes,
30
- },
30
+ argTypes: storyButtonArgTypes,
31
31
  args: {
32
32
  onclick: fn(),
33
33
  },
34
34
  });
35
35
  </script>
36
36
 
37
+ <!-- ⚠️ Test Button: Do not use! -->
38
+ <Story
39
+ name="Test Button"
40
+ args={{
41
+ outline: false,
42
+ disabled: false,
43
+ compact: false,
44
+ _unsafeChildrenStringForTesting: 'Click me!',
45
+ }}
46
+ />
47
+
48
+ <!-- Button with default style -->
37
49
  <Story name="Default" args={{ outline: false, disabled: false, compact: false }}>
38
50
  <Button>Click me!</Button>
39
51
  </Story>
package/dist/stories/components/Form/Button/Button.stories.svelte.d.ts CHANGED
@@ -1,30 +1,6 @@
1
1
  import Button from './Button.svelte';
2
- export declare const storyButtonArgTypes: {
3
- type: {
4
- control: {
5
- type: string;
6
- };
7
- options: string[];
8
- };
9
- color: {
10
- control: {
11
- type: string;
12
- };
13
- options: string[];
14
- };
15
- variant: {
16
- control: {
17
- type: string;
18
- };
19
- options: string[];
20
- };
21
- size: {
22
- control: {
23
- type: string;
24
- };
25
- options: string[];
26
- };
27
- };
2
+ import type { StoryBookArgTypes } from '../../../../storybook-types.js';
3
+ export declare const storyButtonArgTypes: StoryBookArgTypes;
28
4
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
29
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
30
6
  $$bindings?: Bindings;
package/dist/stories/components/Form/Button/Button.svelte CHANGED
@@ -1,4 +1,7 @@
1
- <script lang="ts">const { children, type = 'button', size = 'normal', color = 'primary', variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, } = $props();
1
+ <script lang="ts" module>export {};
2
+ </script>
3
+
4
+ <script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = 1, variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
2
5
  export {};
3
6
  </script>
4
7
 
@@ -11,6 +14,8 @@ export {};
11
14
 
12
15
  {#if children}
13
16
  {@render children()}
17
+ {:else if _unsafeChildrenStringForTesting}
18
+ {_unsafeChildrenStringForTesting}
14
19
  {/if}
15
20
 
16
21
  {#if after}
@@ -37,10 +42,11 @@ export {};
37
42
  class:compact
38
43
  class:disabled
39
44
  class={[
40
- 'dodo-button',
45
+ 'dodo-ui-button',
41
46
  `size--${size}`,
42
47
  `color--${color}`,
43
48
  `variant--${variant}`,
49
+ `roundness--${roundness}`,
44
50
  className,
45
51
  ].join(' ')}
46
52
  >
@@ -51,10 +57,11 @@ export {};
51
57
  class:outline
52
58
  class:compact
53
59
  class={[
54
- 'dodo-button',
60
+ 'dodo-ui-button',
55
61
  `size--${size}`,
56
62
  `color--${color}`,
57
63
  `variant--${variant}`,
64
+ `roundness--${roundness}`,
58
65
  className,
59
66
  ].join(' ')}
60
67
  {type}
@@ -68,4 +75,328 @@ export {};
68
75
  </button>
69
76
  {/if}
70
77
 
71
- <style></style>
78
+ <style>:global(:root) {
79
+ --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
80
+ --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
81
+ --dodo-ui-button-outline-default: var(--dodo-color-default-400);
82
+ --dodo-ui-button-text-default-bg: var(--dodo-color-default-100);
83
+ --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-200);
84
+ --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-300);
85
+ --dodo-ui-button-solid-default-bg: var(--dodo-color-default-500);
86
+ --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-600);
87
+ --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-700);
88
+ --dodo-ui-button-outline-primary: var(--dodo-color-primary-400);
89
+ --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-100);
90
+ --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-200);
91
+ --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-300);
92
+ --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-500);
93
+ --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-600);
94
+ --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-700);
95
+ --dodo-ui-button-outline-safe: var(--dodo-color-safe-400);
96
+ --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-100);
97
+ --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-200);
98
+ --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-300);
99
+ --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-500);
100
+ --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-600);
101
+ --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-700);
102
+ --dodo-ui-button-outline-warning: var(--dodo-color-warning-400);
103
+ --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-100);
104
+ --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-200);
105
+ --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-300);
106
+ --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-500);
107
+ --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-600);
108
+ --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-700);
109
+ --dodo-ui-button-outline-danger: var(--dodo-color-danger-400);
110
+ --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-100);
111
+ --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-200);
112
+ --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-300);
113
+ --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-500);
114
+ --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-600);
115
+ --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-700);
116
+ --dodo-ui-button-outline-info: var(--dodo-color-info-400);
117
+ --dodo-ui-button-text-info-bg: var(--dodo-color-info-100);
118
+ --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-200);
119
+ --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-300);
120
+ --dodo-ui-button-solid-info-bg: var(--dodo-color-info-500);
121
+ --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-600);
122
+ --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-700);
123
+ }
124
+
125
+ :global(.dodo-theme--dark) {
126
+ --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
127
+ --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
128
+ --dodo-ui-button-outline-default: var(--dodo-color-default-300);
129
+ --dodo-ui-button-text-default-bg: var(--dodo-color-default-50);
130
+ --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-100);
131
+ --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-200);
132
+ --dodo-ui-button-solid-default-bg: var(--dodo-color-default-300);
133
+ --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-200);
134
+ --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-100);
135
+ --dodo-ui-button-outline-primary: var(--dodo-color-primary-300);
136
+ --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-50);
137
+ --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-100);
138
+ --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-200);
139
+ --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-300);
140
+ --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-200);
141
+ --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-100);
142
+ --dodo-ui-button-outline-safe: var(--dodo-color-safe-300);
143
+ --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-50);
144
+ --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-100);
145
+ --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-200);
146
+ --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-300);
147
+ --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-200);
148
+ --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-100);
149
+ --dodo-ui-button-outline-warning: var(--dodo-color-warning-300);
150
+ --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-50);
151
+ --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-100);
152
+ --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-200);
153
+ --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-300);
154
+ --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-200);
155
+ --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-100);
156
+ --dodo-ui-button-outline-danger: var(--dodo-color-danger-300);
157
+ --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-50);
158
+ --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-100);
159
+ --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-200);
160
+ --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-300);
161
+ --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-200);
162
+ --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-100);
163
+ --dodo-ui-button-outline-info: var(--dodo-color-info-300);
164
+ --dodo-ui-button-text-info-bg: var(--dodo-color-info-50);
165
+ --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-100);
166
+ --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-200);
167
+ --dodo-ui-button-solid-info-bg: var(--dodo-color-info-300);
168
+ --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-200);
169
+ --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-100);
170
+ }
171
+
172
+ .dodo-ui-button {
173
+ cursor: pointer;
174
+ outline: none;
175
+ transition: all 150ms;
176
+ text-decoration: none;
177
+ margin: 0;
178
+ display: inline-flex;
179
+ justify-content: center;
180
+ align-items: center;
181
+ font-family: inherit;
182
+ font-weight: 500;
183
+ background-color: transparent;
184
+ border: 1px solid;
185
+ border-color: transparent;
186
+ outline: 0;
187
+ color: inherit;
188
+ letter-spacing: 0.3px;
189
+ }
190
+ .dodo-ui-button.size--normal {
191
+ height: var(--dodo-ui-element-height-normal);
192
+ font-size: 1rem;
193
+ padding: 0 12px;
194
+ min-width: 45px;
195
+ }
196
+ .dodo-ui-button.size--small {
197
+ height: var(--dodo-ui-element-height-small);
198
+ padding: 0 8px;
199
+ font-size: 0.9rem;
200
+ min-width: 35px;
201
+ }
202
+ .dodo-ui-button.size--large {
203
+ height: var(--dodo-ui-element-height-large);
204
+ font-size: 1.1rem;
205
+ padding: 0 16px;
206
+ min-width: 85px;
207
+ }
208
+ .dodo-ui-button.roundness--1 {
209
+ border-radius: var(--dodo-ui-element-roundness-1);
210
+ }
211
+ .dodo-ui-button.roundness--2 {
212
+ border-radius: var(--dodo-ui-element-roundness-2);
213
+ }
214
+ .dodo-ui-button.roundness--3 {
215
+ border-radius: var(--dodo-ui-element-roundness-3);
216
+ }
217
+ .dodo-ui-button.roundness--4 {
218
+ border-radius: var(--dodo-ui-element-roundness-4);
219
+ }
220
+ .dodo-ui-button.roundness--full {
221
+ border-radius: 50%;
222
+ }
223
+ .dodo-ui-button.color--default.variant--text {
224
+ color: var(--dodo-color-default-800);
225
+ background-color: var(--dodo-ui-button-text-default-bg);
226
+ }
227
+ .dodo-ui-button.color--default.variant--text:hover {
228
+ background-color: var(--dodo-ui-button-text-default-hover-bg);
229
+ }
230
+ .dodo-ui-button.color--default.variant--text:active {
231
+ background-color: var(--dodo-ui-button-text-default-active-bg);
232
+ }
233
+ .dodo-ui-button.color--default.variant--text.outline {
234
+ border-color: var(--dodo-ui-button-outline-default);
235
+ }
236
+ .dodo-ui-button.color--default.variant--solid {
237
+ color: var(--dodo-color-constant-white);
238
+ background-color: var(--dodo-ui-button-solid-default-bg);
239
+ }
240
+ .dodo-ui-button.color--default.variant--solid:hover {
241
+ background-color: var(--dodo-ui-button-solid-default-hover-bg);
242
+ }
243
+ .dodo-ui-button.color--default.variant--solid:active {
244
+ background-color: var(--dodo-ui-button-solid-default-active-bg);
245
+ }
246
+ .dodo-ui-button.color--primary.variant--text {
247
+ color: var(--dodo-color-primary-800);
248
+ background-color: var(--dodo-ui-button-text-primary-bg);
249
+ }
250
+ .dodo-ui-button.color--primary.variant--text:hover {
251
+ background-color: var(--dodo-ui-button-text-primary-hover-bg);
252
+ }
253
+ .dodo-ui-button.color--primary.variant--text:active {
254
+ background-color: var(--dodo-ui-button-text-primary-active-bg);
255
+ }
256
+ .dodo-ui-button.color--primary.variant--text.outline {
257
+ border-color: var(--dodo-ui-button-outline-primary);
258
+ }
259
+ .dodo-ui-button.color--primary.variant--solid {
260
+ color: var(--dodo-color-constant-white);
261
+ background-color: var(--dodo-ui-button-solid-primary-bg);
262
+ }
263
+ .dodo-ui-button.color--primary.variant--solid:hover {
264
+ background-color: var(--dodo-ui-button-solid-primary-hover-bg);
265
+ }
266
+ .dodo-ui-button.color--primary.variant--solid:active {
267
+ background-color: var(--dodo-ui-button-solid-primary-active-bg);
268
+ }
269
+ .dodo-ui-button.color--safe.variant--text {
270
+ color: var(--dodo-color-safe-800);
271
+ background-color: var(--dodo-ui-button-text-safe-bg);
272
+ }
273
+ .dodo-ui-button.color--safe.variant--text:hover {
274
+ background-color: var(--dodo-ui-button-text-safe-hover-bg);
275
+ }
276
+ .dodo-ui-button.color--safe.variant--text:active {
277
+ background-color: var(--dodo-ui-button-text-safe-active-bg);
278
+ }
279
+ .dodo-ui-button.color--safe.variant--text.outline {
280
+ border-color: var(--dodo-ui-button-outline-safe);
281
+ }
282
+ .dodo-ui-button.color--safe.variant--solid {
283
+ color: var(--dodo-color-constant-white);
284
+ background-color: var(--dodo-ui-button-solid-safe-bg);
285
+ }
286
+ .dodo-ui-button.color--safe.variant--solid:hover {
287
+ background-color: var(--dodo-ui-button-solid-safe-hover-bg);
288
+ }
289
+ .dodo-ui-button.color--safe.variant--solid:active {
290
+ background-color: var(--dodo-ui-button-solid-safe-active-bg);
291
+ }
292
+ .dodo-ui-button.color--warning.variant--text {
293
+ color: var(--dodo-color-warning-800);
294
+ background-color: var(--dodo-ui-button-text-warning-bg);
295
+ }
296
+ .dodo-ui-button.color--warning.variant--text:hover {
297
+ background-color: var(--dodo-ui-button-text-warning-hover-bg);
298
+ }
299
+ .dodo-ui-button.color--warning.variant--text:active {
300
+ background-color: var(--dodo-ui-button-text-warning-active-bg);
301
+ }
302
+ .dodo-ui-button.color--warning.variant--text.outline {
303
+ border-color: var(--dodo-ui-button-outline-warning);
304
+ }
305
+ .dodo-ui-button.color--warning.variant--solid {
306
+ color: var(--dodo-color-constant-white);
307
+ background-color: var(--dodo-ui-button-solid-warning-bg);
308
+ }
309
+ .dodo-ui-button.color--warning.variant--solid:hover {
310
+ background-color: var(--dodo-ui-button-solid-warning-hover-bg);
311
+ }
312
+ .dodo-ui-button.color--warning.variant--solid:active {
313
+ background-color: var(--dodo-ui-button-solid-warning-active-bg);
314
+ }
315
+ .dodo-ui-button.color--danger.variant--text {
316
+ color: var(--dodo-color-danger-800);
317
+ background-color: var(--dodo-ui-button-text-danger-bg);
318
+ }
319
+ .dodo-ui-button.color--danger.variant--text:hover {
320
+ background-color: var(--dodo-ui-button-text-danger-hover-bg);
321
+ }
322
+ .dodo-ui-button.color--danger.variant--text:active {
323
+ background-color: var(--dodo-ui-button-text-danger-active-bg);
324
+ }
325
+ .dodo-ui-button.color--danger.variant--text.outline {
326
+ border-color: var(--dodo-ui-button-outline-danger);
327
+ }
328
+ .dodo-ui-button.color--danger.variant--solid {
329
+ color: var(--dodo-color-constant-white);
330
+ background-color: var(--dodo-ui-button-solid-danger-bg);
331
+ }
332
+ .dodo-ui-button.color--danger.variant--solid:hover {
333
+ background-color: var(--dodo-ui-button-solid-danger-hover-bg);
334
+ }
335
+ .dodo-ui-button.color--danger.variant--solid:active {
336
+ background-color: var(--dodo-ui-button-solid-danger-active-bg);
337
+ }
338
+ .dodo-ui-button.color--info.variant--text {
339
+ color: var(--dodo-color-info-800);
340
+ background-color: var(--dodo-ui-button-text-info-bg);
341
+ }
342
+ .dodo-ui-button.color--info.variant--text:hover {
343
+ background-color: var(--dodo-ui-button-text-info-hover-bg);
344
+ }
345
+ .dodo-ui-button.color--info.variant--text:active {
346
+ background-color: var(--dodo-ui-button-text-info-active-bg);
347
+ }
348
+ .dodo-ui-button.color--info.variant--text.outline {
349
+ border-color: var(--dodo-ui-button-outline-info);
350
+ }
351
+ .dodo-ui-button.color--info.variant--solid {
352
+ color: var(--dodo-color-constant-white);
353
+ background-color: var(--dodo-ui-button-solid-info-bg);
354
+ }
355
+ .dodo-ui-button.color--info.variant--solid:hover {
356
+ background-color: var(--dodo-ui-button-solid-info-hover-bg);
357
+ }
358
+ .dodo-ui-button.color--info.variant--solid:active {
359
+ background-color: var(--dodo-ui-button-solid-info-active-bg);
360
+ }
361
+ .dodo-ui-button[disabled] {
362
+ cursor: initial;
363
+ }
364
+ .dodo-ui-button[disabled].variant--text, .dodo-ui-button[disabled].variant--solid {
365
+ background-color: var(--dodo-ui-button-disabled-bg);
366
+ color: var(--dodo-ui-button-disabled-color);
367
+ }
368
+ .dodo-ui-button[disabled].variant--text:hover, .dodo-ui-button[disabled].variant--solid:hover {
369
+ background-color: var(--dodo-ui-button-disabled-bg);
370
+ color: var(--dodo-ui-button-disabled-color);
371
+ }
372
+ .dodo-ui-button[disabled].variant--text:active, .dodo-ui-button[disabled].variant--solid:active {
373
+ background-color: var(--dodo-ui-button-disabled-bg);
374
+ color: var(--dodo-ui-button-disabled-color);
375
+ }
376
+ .dodo-ui-button[disabled].variant--text.outline, .dodo-ui-button[disabled].variant--solid.outline {
377
+ border-color: transparent;
378
+ }
379
+ .dodo-ui-button.compact.size--normal, .dodo-ui-button.compact.size--small, .dodo-ui-button.compact.size--large {
380
+ min-width: initial;
381
+ padding: 0;
382
+ }
383
+ .dodo-ui-button.compact.size--normal {
384
+ width: var(--dodo-ui-element-height-normal);
385
+ }
386
+ .dodo-ui-button.compact.size--small {
387
+ width: var(--dodo-ui-element-height-small);
388
+ }
389
+ .dodo-ui-button.compact.size--large {
390
+ width: var(--dodo-ui-element-height-large);
391
+ }
392
+ .dodo-ui-button .button-content--after, .dodo-ui-button .button-content--before {
393
+ display: inline-flex;
394
+ height: 100%;
395
+ align-items: center;
396
+ }
397
+ .dodo-ui-button .button-content--before {
398
+ margin-right: 6px;
399
+ }
400
+ .dodo-ui-button .button-content--after {
401
+ margin-left: 6px;
402
+ }</style>
package/dist/stories/components/Form/Button/Button.svelte.d.ts CHANGED
@@ -1,4 +1,8 @@
1
- import type { ComponentSize } from '../../../../types.js';
1
+ export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
2
+ export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
3
+ export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
4
+ export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
5
+ import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '../../../../types.js';
2
6
  import type { Snippet } from 'svelte';
3
7
  interface ButtonProps {
4
8
  /** Button contents goes here*/
@@ -8,7 +12,9 @@ interface ButtonProps {
8
12
  /** How large should the button be? */
9
13
  size?: ComponentSize;
10
14
  /** What color to use? */
11
- color?: 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
15
+ color?: ButtonColor;
16
+ /** How round should the border radius be? */
17
+ roundness?: ButtonRoundness;
12
18
  /** How should the button appear? */
13
19
  variant?: 'text' | 'solid';
14
20
  /** Add a border around the button */
@@ -32,7 +38,7 @@ interface ButtonProps {
32
38
  /** The onclick event handler */
33
39
  onclick?: (e: MouseEvent) => void;
34
40
  /** Turn Button into link */
35
- href?: string | undefined | null;
41
+ href?: string;
36
42
  /** Link button: download */
37
43
  download?: any;
38
44
  /** Link button: hreflang */
@@ -44,11 +50,13 @@ interface ButtonProps {
44
50
  /** Link button: rel */
45
51
  rel?: string | undefined | null;
46
52
  /** Link button: target */
47
- target?: '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
53
+ target?: ButtonLinkTarget;
48
54
  /** Link button: Type */
49
55
  anchorMediaType?: string | undefined | null;
50
56
  /** Link button: referrerpolicy */
51
- referrerpolicy?: ReferrerPolicy | undefined | null;
57
+ referrerpolicy?: ButtonLinkReferrerpolicy;
58
+ /** Test: ⚠️ Unsafe Children String. Do Not use*/
59
+ _unsafeChildrenStringForTesting?: string;
52
60
  }
53
61
  declare const Button: import("svelte").Component<ButtonProps, {}, "">;
54
62
  type Button = ReturnType<typeof Button>;
package/dist/stories/components/Form/Button/Color/Color.stories.svelte CHANGED
@@ -8,10 +8,7 @@
8
8
  const { Story } = defineMeta({
9
9
  component: Button,
10
10
  tags: ['autodocs'],
11
- // @ts-ignore
12
- argTypes: {
13
- ...storyButtonArgTypes,
14
- },
11
+ argTypes: storyButtonArgTypes,
15
12
  args: {
16
13
  onclick: fn(),
17
14
  },
@@ -26,3 +23,44 @@
26
23
  <Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
27
24
  <Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
28
25
  <Story name="Info" args={{ color: 'info' }}><Button color="info">Click me!</Button></Story>
26
+
27
+ <Story
28
+ name="Default Solid"
29
+ args={{ outline: false, disabled: false, compact: false, variant: 'solid' }}
30
+ >
31
+ <Button variant="solid">Click me!</Button>
32
+ </Story>
33
+ <Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
34
+ <Button color="primary" variant="solid">Click me!</Button>
35
+ </Story>
36
+ <Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
37
+ <Button color="safe" variant="solid">Click me!</Button>
38
+ </Story>
39
+ <Story name="Warning Solid" args={{ color: 'warning', variant: 'solid' }}>
40
+ <Button color="warning" variant="solid">Click me!</Button>
41
+ </Story>
42
+ <Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
43
+ <Button color="danger" variant="solid">Click me!</Button>
44
+ </Story>
45
+ <Story name="Info Solid" args={{ color: 'info', variant: 'solid' }}>
46
+ <Button color="info" variant="solid">Click me!</Button>
47
+ </Story>
48
+
49
+ <Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
50
+ <Button outline>Click me!</Button>
51
+ </Story>
52
+ <Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
53
+ <Button color="primary" outline>Click me!</Button>
54
+ </Story>
55
+ <Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
56
+ <Button color="safe" outline>Click me!</Button>
57
+ </Story>
58
+ <Story name="Warning Outline" args={{ outline: true, color: 'warning' }}>
59
+ <Button color="warning" outline>Click me!</Button>
60
+ </Story>
61
+ <Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
62
+ <Button color="danger" outline>Click me!</Button>
63
+ </Story>
64
+ <Story name="Info Outline" args={{ outline: true, color: 'info' }}>
65
+ <Button color="info" outline>Click me!</Button>
66
+ </Story>
package/dist/stories/components/Form/Button/IconButton/IconButton.stories.svelte CHANGED
@@ -9,10 +9,7 @@
9
9
  const { Story } = defineMeta({
10
10
  component: Button,
11
11
  tags: ['autodocs'],
12
- // @ts-ignore
13
- argTypes: {
14
- ...storyButtonArgTypes,
15
- },
12
+ argTypes: storyButtonArgTypes,
16
13
  args: {
17
14
  onclick: fn(),
18
15
  },
@@ -21,7 +18,16 @@
21
18
 
22
19
  <!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
23
20
  <Story name="Icon Button" args={{ compact: true }}>
24
- <Button compact><Icon icon="material-symbols:app-badging" width="24" height="24" /></Button>
21
+ <Button compact>
22
+ <Icon icon="material-symbols:app-badging" width="18" height="18" />
23
+ </Button>
24
+ </Story>
25
+
26
+ <!-- Circualr Icon button. -->
27
+ <Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
28
+ <Button roundness="full" compact>
29
+ <Icon icon="material-symbols:app-badging" width="18" height="18" />
30
+ </Button>
25
31
  </Story>
26
32
 
27
33
  <!-- Button with an icon in front. -->
package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte ADDED
@@ -0,0 +1,46 @@
1
+ <script module>
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import { fn } from '@storybook/test';
4
+ import Button from '../Button.svelte';
5
+ import { storyButtonArgTypes } from '../Button.stories.svelte';
6
+
7
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
+ const { Story } = defineMeta({
9
+ component: Button,
10
+ tags: ['autodocs'],
11
+ argTypes: storyButtonArgTypes,
12
+ args: {
13
+ onclick: fn(),
14
+ },
15
+ });
16
+ </script>
17
+
18
+ <Story
19
+ name="Roundness1"
20
+ args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
21
+ >
22
+ <Button roundness="full">Click me!</Button>
23
+ </Story>
24
+
25
+ <Story name="Roundness2" args={{ outline: false, disabled: false, compact: false, roundness: 2 }}>
26
+ <Button roundness={2}>Click me!</Button>
27
+ </Story>
28
+
29
+ <Story name="Roundness3" args={{ outline: false, disabled: false, compact: false, roundness: 3 }}>
30
+ <Button roundness={3}>Click me!</Button>
31
+ </Story>
32
+
33
+ <Story
34
+ name="RoundnessFalse"
35
+ args={{ outline: false, disabled: false, compact: false, roundness: false }}
36
+ >
37
+ <Button roundness={false}>Click me!</Button>
38
+ </Story>
39
+
40
+ <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
41
+ <Story
42
+ name="RoundnessFull"
43
+ args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
44
+ >
45
+ <Button roundness="full">C</Button>
46
+ </Story>
package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ export default Roundness;
2
+ type Roundness = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }