do-ui-design-system 0.0.12 → 0.1.0
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/atoms/Button/Button.svelte +37 -0
- package/dist/{components/atoms → atoms}/Button/Button.svelte.d.ts +7 -5
- package/dist/{components/atoms → atoms}/Button/iProps.d.ts +3 -2
- package/dist/{components/atoms → atoms}/Icons/Icon.svelte +4 -3
- package/dist/{components/atoms → atoms}/Icons/Icon.svelte.d.ts +1 -1
- package/dist/do-theme/button.css +66 -26
- package/dist/do-theme/font.css +2 -1
- package/dist/do-theme/icomoon/backup-icons.json +1 -1
- package/dist/do-theme/icomoon/fonts/icomoon.eot +0 -0
- package/dist/do-theme/icomoon/fonts/icomoon.svg +33 -0
- package/dist/do-theme/icomoon/fonts/icomoon.ttf +0 -0
- package/dist/do-theme/icomoon/fonts/icomoon.woff +0 -0
- package/dist/do-theme/icomoon/iconList.d.ts +1 -1
- package/dist/do-theme/icomoon/iconList.js +12 -2
- package/dist/do-theme/icomoon/icons.css +37 -7
- package/dist/do-theme/index.css +5 -16
- package/dist/do-theme/post-compiled.css +1661 -482
- package/dist/do-theme/var-dark.css +1 -4
- package/dist/do-theme/var-light.css +15 -23
- package/dist/index.d.ts +3 -3
- package/dist/index.js +5 -3
- package/dist/molecules/IconButton/IconButton.svelte +45 -0
- package/dist/{components/molecules → molecules}/IconButton/IconButton.svelte.d.ts +11 -9
- package/dist/molecules/IconButton/iProps.d.ts +14 -0
- package/dist/molecules/IconButton/iProps.js +1 -0
- package/package.json +15 -47
- package/src/lib/do-theme/index.css +5 -16
- package/dist/components/atoms/Button/Button.stories.svelte +0 -92
- package/dist/components/atoms/Button/Button.stories.svelte.d.ts +0 -19
- package/dist/components/atoms/Button/Button.svelte +0 -34
- package/dist/components/atoms/Icons/Icons.stories.svelte +0 -50
- package/dist/components/atoms/Icons/Icons.stories.svelte.d.ts +0 -18
- package/dist/components/index.d.ts +0 -2
- package/dist/components/index.js +0 -3
- package/dist/components/molecules/IconButton/IconButton.stories.svelte +0 -77
- package/dist/components/molecules/IconButton/IconButton.stories.svelte.d.ts +0 -19
- package/dist/components/molecules/IconButton/IconButton.svelte +0 -48
- package/dist/components/molecules/IconButton/iProps.d.ts +0 -13
- package/dist/do-theme/icomoon/icomoon.eot +0 -0
- package/dist/do-theme/icomoon/icomoon.svg +0 -23
- package/dist/do-theme/icomoon/icomoon.ttf +0 -0
- package/dist/do-theme/icomoon/icomoon.woff +0 -0
- package/src/lib/do-theme/post-compiled.css +0 -482
- /package/dist/{components/atoms → atoms}/Button/iProps.js +0 -0
- /package/dist/{components/atoms → atoms}/Icons/iProps.d.ts +0 -0
- /package/dist/{components/atoms → atoms}/Icons/iProps.js +0 -0
- /package/dist/{components/atoms → atoms}/index.d.ts +0 -0
- /package/dist/{components/atoms → atoms}/index.js +0 -0
- /package/dist/{components/molecules/IconButton/iProps.js → do-theme/icomoon/generate-icon-list.d.cts} +0 -0
- /package/dist/{components/molecules → molecules}/index.d.ts +0 -0
- /package/dist/{components/molecules → molecules}/index.js +0 -0
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
color-
|
|
5
|
-
--color-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
10
|
-
--color-neutral-content: none;
|
|
11
|
-
--color-accent: #1D4ED8;
|
|
12
|
-
--color-accent-content: #EFF6FF;
|
|
13
|
-
--color-info: oklch(70% 0.2 220);
|
|
14
|
-
--color-info-content: oklch(98% 0.01 220);
|
|
15
|
-
--color-success: oklch(65% 0.25 140);
|
|
16
|
-
--color-success-content: oklch(98% 0.01 140);
|
|
17
|
-
--color-warning: oklch(80% 0.25 80);
|
|
18
|
-
--color-warning-content: oklch(20% 0.05 80);
|
|
19
|
-
--color-error: oklch(65% 0.3 30);
|
|
20
|
-
--color-error-content: oklch(98% 0.01 30);
|
|
1
|
+
:root {
|
|
2
|
+
--do-color-primary: #27272A;
|
|
3
|
+
--do-color-primary-content: #FAFAFA;
|
|
4
|
+
--do-color-secondary: #FAFAFA;
|
|
5
|
+
--do-color-secondary-content: #27272A;
|
|
6
|
+
--do-color-neutral: #FAFAFA;
|
|
7
|
+
--do-color-neutral-content: none;
|
|
8
|
+
--do-color-accent: #1D4ED8;
|
|
9
|
+
--do-color-accent-content: #EFF6FF;
|
|
21
10
|
|
|
22
11
|
|
|
23
12
|
/* base sizes */
|
|
@@ -29,18 +18,21 @@
|
|
|
29
18
|
--radius-field: 0.25rem;
|
|
30
19
|
--radius-box: 0.25rem;
|
|
31
20
|
|
|
32
|
-
/*variables DO*/
|
|
33
21
|
/*hover color*/
|
|
34
22
|
--do-color-primary-hover: #f5f5f5;
|
|
35
23
|
--do-color-secondary-hover: #3e3e45;
|
|
36
24
|
/*disabled color*/
|
|
37
25
|
--do-color-primary-disabled: #a4a4a6;
|
|
38
26
|
--do-color-accent-disabled: #a4b6ed;
|
|
39
|
-
/*
|
|
40
|
-
--do-color-border-primary: #
|
|
27
|
+
/*border color*/
|
|
28
|
+
--do-color-border-primary: #52525B;
|
|
29
|
+
--do-color-border-primary-hover: #E4E4E7;
|
|
41
30
|
--do-color-border-secondary: #F4F4F5;
|
|
31
|
+
--do-color-border-secondary-hover: #71717A;
|
|
42
32
|
--do-color-border-accent: #2563EB;
|
|
43
33
|
--do-color-border-accent-hover: #3B82F6;
|
|
44
34
|
/*styles*/
|
|
45
35
|
--do-transparent: transparent;
|
|
36
|
+
--do-text-base: #27272A;
|
|
37
|
+
--do-text-contrast: #fff;
|
|
46
38
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import './
|
|
2
|
-
|
|
3
|
-
export
|
|
1
|
+
import { Button, Icon } from './atoms/index.ts';
|
|
2
|
+
import { IconButton } from './molecules/index.ts';
|
|
3
|
+
export { Button, Icon, IconButton };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
//css export
|
|
2
|
+
// import './do-theme/index.css';
|
|
3
|
+
import { Button, Icon } from './atoms/index.ts';
|
|
4
|
+
import { IconButton } from './molecules/index.ts';
|
|
5
|
+
export { Button, Icon, IconButton };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Button, Icon } from '../../atoms';
|
|
3
|
+
import type { iProps } from './iProps.ts';
|
|
4
|
+
|
|
5
|
+
export let variant: iProps['variant'] = 'do-btn-primary';
|
|
6
|
+
export let size: iProps['size'] = 'do-btn-md';
|
|
7
|
+
export let label: iProps['label'] = '';
|
|
8
|
+
export let disabled: iProps['disabled'] = false;
|
|
9
|
+
export let loading: iProps['loading'] = false;
|
|
10
|
+
export let iconName: iProps['iconName'] = 'icon-arrow';
|
|
11
|
+
export let iconSize: iProps['iconSize'] = 'inherit';
|
|
12
|
+
export let iconColor: iProps['iconColor'] = 'inherit';
|
|
13
|
+
export let iconPosition: iProps['iconPosition'] = 'end';
|
|
14
|
+
export let rounded: iProps['rounded'] = false;
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<!-- @component
|
|
18
|
+
```Svelte
|
|
19
|
+
<IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
|
|
20
|
+
```
|
|
21
|
+
- `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
|
|
22
|
+
- `size?`: rem units
|
|
23
|
+
- `label?`: string
|
|
24
|
+
- `disabled?`: boolean
|
|
25
|
+
- `rounded?`: boolean
|
|
26
|
+
- `loading?`: boolean
|
|
27
|
+
- `iconName?`: any icon name from the Icon component
|
|
28
|
+
- `iconSize?`: rem units
|
|
29
|
+
- `iconColor?`: hex units #000
|
|
30
|
+
- `iconPosition?`: 'start' | 'end'
|
|
31
|
+
```
|
|
32
|
+
-->
|
|
33
|
+
|
|
34
|
+
<Button {...$$restProps} {variant} {size} {disabled} {rounded} on:click>
|
|
35
|
+
{#if loading}
|
|
36
|
+
<i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}></i>
|
|
37
|
+
{:else}
|
|
38
|
+
<div style="display: inline-flex; transform:scale(130%); {`${iconPosition === 'start' ? 'order:1;' : 'order:2;'}`}">
|
|
39
|
+
<Icon name={iconName} size={iconSize} color={iconColor}/>
|
|
40
|
+
</div>
|
|
41
|
+
{/if}
|
|
42
|
+
{#if label}
|
|
43
|
+
<span style={iconPosition === 'start' ? 'order:2;' : 'order:1;'}>{label}</span>
|
|
44
|
+
{/if}
|
|
45
|
+
</Button>
|
|
@@ -14,22 +14,23 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* ```Svelte
|
|
17
|
-
* <IconButton label?={'text'}
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
17
|
+
* <IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
|
|
18
|
+
* ```
|
|
19
|
+
* - `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
|
|
20
|
+
* - `size?`: rem units
|
|
21
|
+
* - `label?`: string
|
|
22
|
+
* - `disabled?`: boolean
|
|
23
|
+
* - `rounded?`: boolean
|
|
23
24
|
* - `loading?`: boolean
|
|
24
25
|
* - `iconName?`: any icon name from the Icon component
|
|
25
|
-
* - `iconSize?`:
|
|
26
|
-
* - `iconColor?`:
|
|
26
|
+
* - `iconSize?`: rem units
|
|
27
|
+
* - `iconColor?`: hex units #000
|
|
27
28
|
* - `iconPosition?`: 'start' | 'end'
|
|
28
29
|
* ```
|
|
29
30
|
*/
|
|
30
31
|
declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
|
|
31
32
|
[x: string]: any;
|
|
32
|
-
|
|
33
|
+
variant?: string | undefined;
|
|
33
34
|
size?: string | undefined;
|
|
34
35
|
label?: string | undefined;
|
|
35
36
|
disabled?: boolean | undefined;
|
|
@@ -38,6 +39,7 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
|
|
|
38
39
|
iconSize?: string | undefined;
|
|
39
40
|
iconColor?: string | undefined;
|
|
40
41
|
iconPosition?: "start" | "end" | undefined;
|
|
42
|
+
rounded?: boolean | undefined;
|
|
41
43
|
}, {
|
|
42
44
|
click: MouseEvent;
|
|
43
45
|
} & {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
|
|
2
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
|
+
export interface iProps extends HTMLButtonAttributes {
|
|
4
|
+
variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | string;
|
|
5
|
+
size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg' | string;
|
|
6
|
+
label?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
iconName: IconNames;
|
|
10
|
+
iconSize?: string;
|
|
11
|
+
iconColor?: string;
|
|
12
|
+
iconPosition?: 'start' | 'end';
|
|
13
|
+
rounded?: boolean;
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "do-ui-design-system",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "Design system en Svelte +
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Design system en Svelte + CSS + Storybook",
|
|
5
5
|
"author": "Data Observatory",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"main": "./dist/index.js",
|
|
8
7
|
"scripts": {
|
|
9
8
|
"dev": "vite dev",
|
|
10
|
-
"build": "
|
|
11
|
-
"build:css": "postcss src/app.css -o src/lib/do-theme/post-compiled.css",
|
|
12
|
-
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
9
|
+
"build": "vite build && npm run prepack",
|
|
13
10
|
"preview": "vite preview",
|
|
14
11
|
"prepare": "svelte-kit sync || echo ''",
|
|
12
|
+
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
15
13
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
16
14
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
17
15
|
"test:unit": "vitest",
|
|
18
16
|
"test": "npm run test:unit -- --run",
|
|
19
17
|
"lint": "eslint . && prettier --check .",
|
|
20
18
|
"format": "prettier --write .",
|
|
21
|
-
"
|
|
19
|
+
"sb": "storybook dev -p 6006",
|
|
22
20
|
"build-storybook": "storybook build",
|
|
23
21
|
"deploy:sb": "aws s3 sync ./storybook-static/ \"s3://doui-douis334ee98a3-exurk2nzipoy\" --delete --profile aplicaciones",
|
|
24
22
|
"invalidate:sb": "aws cloudfront create-invalidation --distribution-id EV3SCINCO86TM --paths \"/*\" --profile aplicaciones",
|
|
@@ -27,41 +25,14 @@
|
|
|
27
25
|
"files": [
|
|
28
26
|
"dist",
|
|
29
27
|
"src/lib/do-theme/index.css",
|
|
30
|
-
"
|
|
31
|
-
"!
|
|
32
|
-
"!
|
|
33
|
-
"!
|
|
34
|
-
"!
|
|
28
|
+
"!dist/**/*.test.*",
|
|
29
|
+
"!dist/**/*.spec.*",
|
|
30
|
+
"!dist/**/*.stories.*",
|
|
31
|
+
"!dist/**/*.mdx*",
|
|
32
|
+
"!dist/**/*.iProps*"
|
|
35
33
|
],
|
|
36
34
|
"svelte": "./dist/index.js",
|
|
37
|
-
"types": "./dist/index.d.ts",
|
|
38
35
|
"type": "module",
|
|
39
|
-
"exports": {
|
|
40
|
-
".": {
|
|
41
|
-
"types": "./dist/index.d.ts",
|
|
42
|
-
"svelte": "./dist/index.js",
|
|
43
|
-
"import": "./dist/index.js",
|
|
44
|
-
"default": "./dist/index.js"
|
|
45
|
-
},
|
|
46
|
-
"./styles.css": {
|
|
47
|
-
"default": "./src/lib/do-theme/index.css"
|
|
48
|
-
},
|
|
49
|
-
"./theme.css": {
|
|
50
|
-
"default": "./src/lib/do-theme/post-compiled.css"
|
|
51
|
-
},
|
|
52
|
-
"./atoms": {
|
|
53
|
-
"types": "./dist/components/atoms/index.d.ts",
|
|
54
|
-
"svelte": "./dist/components/atoms/index.js",
|
|
55
|
-
"import": "./dist/components/atoms/index.js",
|
|
56
|
-
"default": "./dist/components/atoms/index.js"
|
|
57
|
-
},
|
|
58
|
-
"./molecules": {
|
|
59
|
-
"types": "./dist/components/molecules/index.d.ts",
|
|
60
|
-
"svelte": "./dist/components/molecules/index.js",
|
|
61
|
-
"import": "./dist/components/molecules/index.js",
|
|
62
|
-
"default": "./dist/components/molecules/index.js"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
36
|
"peerDependencies": {
|
|
66
37
|
"svelte": "^5.0.0"
|
|
67
38
|
},
|
|
@@ -81,10 +52,10 @@
|
|
|
81
52
|
"@sveltejs/kit": "^2.16.0",
|
|
82
53
|
"@sveltejs/package": "^2.0.0",
|
|
83
54
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
84
|
-
"@tailwindcss/vite": "^4.
|
|
55
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
56
|
+
"@tailwindcss/postcss": "^4.1.4",
|
|
85
57
|
"@testing-library/jest-dom": "^6.6.3",
|
|
86
58
|
"@testing-library/svelte": "^5.2.4",
|
|
87
|
-
"@types/node": "^22.15.17",
|
|
88
59
|
"@vitest/browser": "^3.1.1",
|
|
89
60
|
"@vitest/coverage-v8": "^3.1.1",
|
|
90
61
|
"autoprefixer": "^10.4.21",
|
|
@@ -102,8 +73,9 @@
|
|
|
102
73
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
103
74
|
"publint": "^0.3.2",
|
|
104
75
|
"storybook": "^8.6.11",
|
|
105
|
-
"svelte": "^5.
|
|
76
|
+
"svelte": "^5.25.10",
|
|
106
77
|
"svelte-check": "^4.0.0",
|
|
78
|
+
"tailwindcss": "^4.1.4",
|
|
107
79
|
"typescript": "^5.8.3",
|
|
108
80
|
"typescript-eslint": "^8.20.0",
|
|
109
81
|
"vite": "^6.0.0",
|
|
@@ -111,9 +83,5 @@
|
|
|
111
83
|
},
|
|
112
84
|
"keywords": [
|
|
113
85
|
"svelte"
|
|
114
|
-
]
|
|
115
|
-
"dependencies": {
|
|
116
|
-
"@tailwindcss/postcss": "^4.1.6",
|
|
117
|
-
"tailwindcss": "^4.1.6"
|
|
118
|
-
}
|
|
86
|
+
]
|
|
119
87
|
}
|
|
@@ -1,27 +1,16 @@
|
|
|
1
1
|
@import "./var-light.css";
|
|
2
2
|
@import "./var-dark.css";
|
|
3
|
+
@import "./font.css";
|
|
4
|
+
@import "./icomoon/icons.css";
|
|
3
5
|
@import "./button.css";
|
|
4
6
|
@import "./border.css";
|
|
5
7
|
@import "./color.css";
|
|
6
|
-
@import "./icomoon/icons.css";
|
|
7
|
-
@import "./font.css";
|
|
8
8
|
|
|
9
9
|
/*
|
|
10
|
-
|
|
10
|
+
To modify themes (light and dark):
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
@plugin "daisyui/theme" {
|
|
14
|
-
name: "light" | "dark";
|
|
15
|
-
default: true;
|
|
16
|
-
--daisy-variable: some value;
|
|
17
|
-
}
|
|
12
|
+
There are 2 files, var-dark.css and var-light.css, where you can find colors and base definitions.
|
|
18
13
|
|
|
19
|
-
|
|
20
|
-
[data-theme="dark"] {
|
|
21
|
-
.daisy-class {
|
|
22
|
-
background-color: red;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
14
|
+
Then are css component files with style definitions that use those variables.
|
|
25
15
|
|
|
26
|
-
For more info and variables: https://daisyui.com/docs/themes/
|
|
27
16
|
*/
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import Button from './Button.svelte';
|
|
4
|
-
import { fn } from '@storybook/test';
|
|
5
|
-
import type { ArgTypes, Args } from '@storybook/core/types';
|
|
6
|
-
|
|
7
|
-
const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
|
|
8
|
-
const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
|
|
9
|
-
// const typeOptions = ['rounded'];
|
|
10
|
-
|
|
11
|
-
const { Story } = defineMeta({
|
|
12
|
-
title: 'DO - Sistema de diseño/Átomos/Botón',
|
|
13
|
-
component: Button,
|
|
14
|
-
tags: ['autodocs'],
|
|
15
|
-
parameters: {
|
|
16
|
-
docs: {
|
|
17
|
-
toc: {
|
|
18
|
-
disable: true // 👈 Disables the table of contents
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
const argTypes: ArgTypes = {
|
|
24
|
-
label: {
|
|
25
|
-
control: { type: 'text' },
|
|
26
|
-
description: 'Texto del botón'
|
|
27
|
-
},
|
|
28
|
-
color: {
|
|
29
|
-
control: { type: 'radio' },
|
|
30
|
-
options: colorOptions,
|
|
31
|
-
description: 'Color del botón'
|
|
32
|
-
},
|
|
33
|
-
size: {
|
|
34
|
-
control: { type: 'radio' },
|
|
35
|
-
options: sizeOptions,
|
|
36
|
-
description: 'Tamaño del botón'
|
|
37
|
-
},
|
|
38
|
-
disabled: {
|
|
39
|
-
control: { type: 'boolean' },
|
|
40
|
-
description: 'Deshabilitar el botón'
|
|
41
|
-
},
|
|
42
|
-
loading: {
|
|
43
|
-
control: { type: 'boolean' },
|
|
44
|
-
description: 'Mostrar el estado de carga'
|
|
45
|
-
},
|
|
46
|
-
type: {
|
|
47
|
-
control: { type: 'radio' },
|
|
48
|
-
options: ['button', 'submit', 'reset'],
|
|
49
|
-
description: 'Tipo de botón'
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const args: Args = {
|
|
53
|
-
size: 'btn-md',
|
|
54
|
-
label: 'Botón',
|
|
55
|
-
color: 'btn-primary',
|
|
56
|
-
type: 'button',
|
|
57
|
-
disabled: false,
|
|
58
|
-
loading: false
|
|
59
|
-
};
|
|
60
|
-
const colors = [
|
|
61
|
-
{ color: 'btn-primary', label: 'Primary', size: 'btn-md' },
|
|
62
|
-
{ color: 'btn-secondary', label: 'Secondary', size: 'btn-md' },
|
|
63
|
-
{ color: 'btn-neutral', label: 'Neutral', size: 'btn-md' },
|
|
64
|
-
{ color: 'btn-accent', label: 'Accent', size: 'btn-md' }
|
|
65
|
-
] as const;
|
|
66
|
-
</script>
|
|
67
|
-
|
|
68
|
-
<Story name="Botón" {argTypes} {args} />
|
|
69
|
-
|
|
70
|
-
<Story name="Colores" parameters={{ controls: { disable: true } }}>
|
|
71
|
-
<div class="margin mb-4 flex flex-row gap-[2rem]">
|
|
72
|
-
{#each colors as { color, label, size }}
|
|
73
|
-
<Button {color} {size} {label} on:click={()=> args.onClick()} />
|
|
74
|
-
{/each}
|
|
75
|
-
</div>
|
|
76
|
-
</Story>
|
|
77
|
-
|
|
78
|
-
<Story name="Modo: disabled" parameters={{ controls: { disable: true } }}>
|
|
79
|
-
<div class="margin mb-4 flex flex-row gap-[2rem]">
|
|
80
|
-
{#each colors as { color, label, size }}
|
|
81
|
-
<Button {color} {size} {label} onClick={fn()} disabled={true} />
|
|
82
|
-
{/each}
|
|
83
|
-
</div>
|
|
84
|
-
</Story>
|
|
85
|
-
|
|
86
|
-
<Story name="Modo: loading" parameters={{ controls: { disable: true } }}>
|
|
87
|
-
<div class="margin mb-4 flex flex-row gap-[2rem]">
|
|
88
|
-
{#each colors as { color, label, size }}
|
|
89
|
-
<Button {color} {size} loading {label} onClick={fn()} />
|
|
90
|
-
{/each}
|
|
91
|
-
</div>
|
|
92
|
-
</Story>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import Button from './Button.svelte';
|
|
2
|
-
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> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type Button = InstanceType<typeof Button>;
|
|
19
|
-
export default Button;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { iProps } from './iProps.ts';
|
|
3
|
-
|
|
4
|
-
export let color: iProps['color'] = 'btn-primary';
|
|
5
|
-
export let size: iProps['size'] = 'btn-md';
|
|
6
|
-
export let label: iProps['label'] = '';
|
|
7
|
-
export let disabled: iProps['disabled'] = false;
|
|
8
|
-
export let loading: iProps['loading'] = false;
|
|
9
|
-
export let type: iProps['type'] = 'button';
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<!-- @component
|
|
13
|
-
```Svelte
|
|
14
|
-
<Button color?={color} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
|
|
15
|
-
```
|
|
16
|
-
- `color?`: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
|
|
17
|
-
- `size?`: any tailwind size class.
|
|
18
|
-
- `label?`: string
|
|
19
|
-
- `disabled?`: boolean
|
|
20
|
-
- `loading?`: boolean
|
|
21
|
-
- `type?`: 'button' | 'submit' | 'reset'
|
|
22
|
-
-->
|
|
23
|
-
|
|
24
|
-
<button
|
|
25
|
-
{...$$restProps}
|
|
26
|
-
{type}
|
|
27
|
-
class={['btn', `${color}`, `${size}`].join(' ')}
|
|
28
|
-
{disabled}
|
|
29
|
-
on:click
|
|
30
|
-
>
|
|
31
|
-
<slot />
|
|
32
|
-
{label}
|
|
33
|
-
<span class="loading loading-spinner hidden" class:!inline={loading}></span>
|
|
34
|
-
</button>
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import type { ArgTypes, Args } from '@storybook/core/types';
|
|
4
|
-
import Icon from './Icon.svelte';
|
|
5
|
-
import iconList from "../../../do-theme/icomoon/iconList.ts";
|
|
6
|
-
|
|
7
|
-
const colorOptions = ['text-red-600', 'text-zinc-600', 'text-green-600', 'text-blue-600'];
|
|
8
|
-
const sizeOptions = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'];
|
|
9
|
-
|
|
10
|
-
const { Story } = defineMeta({
|
|
11
|
-
title: 'DO - Sistema de diseño/Átomos/Íconos',
|
|
12
|
-
component: Icon,
|
|
13
|
-
tags: ['autodocs'],
|
|
14
|
-
parameters:{
|
|
15
|
-
docs: {
|
|
16
|
-
source: {
|
|
17
|
-
code: `
|
|
18
|
-
<i class="icon-name some-tw-text-size some-tw-text-color"></i>
|
|
19
|
-
`
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
const argTypes: ArgTypes = {
|
|
26
|
-
name: {
|
|
27
|
-
control: { type: 'select' }
|
|
28
|
-
},
|
|
29
|
-
color: {
|
|
30
|
-
control: { type: 'select' },
|
|
31
|
-
defaultValue: 'text-red-600',
|
|
32
|
-
options: colorOptions
|
|
33
|
-
},
|
|
34
|
-
size: {
|
|
35
|
-
control: { type: 'select' },
|
|
36
|
-
options: sizeOptions
|
|
37
|
-
},
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
<Story name="Ícono" {argTypes} />
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<Story name="Listado" {argTypes} parameters={{ controls: { disable: true } }}>
|
|
45
|
-
<section class="flex flex-wrap gap-4">
|
|
46
|
-
{#each iconList as icon}
|
|
47
|
-
<Icon name={icon}/>
|
|
48
|
-
{/each}
|
|
49
|
-
</section>
|
|
50
|
-
</Story>
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
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> {
|
|
2
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
-
$$bindings?: Bindings;
|
|
4
|
-
} & Exports;
|
|
5
|
-
(internal: unknown, props: {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
13
|
-
}
|
|
14
|
-
declare const Icons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
}, {}, {}, string>;
|
|
17
|
-
type Icons = InstanceType<typeof Icons>;
|
|
18
|
-
export default Icons;
|
package/dist/components/index.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import IconButton from './IconButton.svelte';
|
|
4
|
-
import { fn } from '@storybook/test';
|
|
5
|
-
import type { Args, ArgTypes } from '@storybook/core/types';
|
|
6
|
-
|
|
7
|
-
const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
|
|
8
|
-
const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
|
|
9
|
-
|
|
10
|
-
// const typeOptions = ['rounded'];
|
|
11
|
-
|
|
12
|
-
const { Story } = defineMeta({
|
|
13
|
-
title: 'DO - Sistema de diseño/Moléculas',
|
|
14
|
-
component: IconButton,
|
|
15
|
-
argTypes: {
|
|
16
|
-
label: {
|
|
17
|
-
control: { type: 'text' },
|
|
18
|
-
description: 'Texto del botón',
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
const argTypes: ArgTypes = {
|
|
23
|
-
disabled: {
|
|
24
|
-
control: { type: 'boolean' },
|
|
25
|
-
options: [true, false],
|
|
26
|
-
description: 'Deshabilitar el botón'
|
|
27
|
-
},
|
|
28
|
-
size: {
|
|
29
|
-
control: { type: 'radio' },
|
|
30
|
-
options: sizeOptions,
|
|
31
|
-
description: 'Tamaño del botón'
|
|
32
|
-
},
|
|
33
|
-
label: {
|
|
34
|
-
control: { type: 'text' },
|
|
35
|
-
description: 'Texto del botón'
|
|
36
|
-
},
|
|
37
|
-
color: {
|
|
38
|
-
control: { type: 'radio' },
|
|
39
|
-
options: colorOptions,
|
|
40
|
-
description: 'Color del botón'
|
|
41
|
-
},
|
|
42
|
-
onClick: {
|
|
43
|
-
action: 'clicked',
|
|
44
|
-
description: 'Función que se ejecuta al hacer clic en el botón',
|
|
45
|
-
},
|
|
46
|
-
iconPosition: {
|
|
47
|
-
control: { type: 'radio' },
|
|
48
|
-
options: ['start', 'end'],
|
|
49
|
-
description: 'Posición del ícono'
|
|
50
|
-
},
|
|
51
|
-
iconSize: {
|
|
52
|
-
control: { type: 'select' },
|
|
53
|
-
options: ['inherit', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl'],
|
|
54
|
-
description: 'Tamaño del ícono'
|
|
55
|
-
},
|
|
56
|
-
iconName: {
|
|
57
|
-
control: { type: 'select' },
|
|
58
|
-
description: 'Nombre del ícono'
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const args: Args = {
|
|
63
|
-
color: 'btn-primary',
|
|
64
|
-
size: 'btn-md',
|
|
65
|
-
label: 'Botón ícono',
|
|
66
|
-
disabled: false,
|
|
67
|
-
onClick: fn(),
|
|
68
|
-
iconName: 'icon-arrow',
|
|
69
|
-
iconColor: 'inherit',
|
|
70
|
-
iconPosition: 'end',
|
|
71
|
-
type: 'button',
|
|
72
|
-
loading: false,
|
|
73
|
-
iconSize: 'inherit'
|
|
74
|
-
};
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<Story name="Boton ícono" {argTypes} {args}/>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import IconButton from './IconButton.svelte';
|
|
2
|
-
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> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const IconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type IconButton = InstanceType<typeof IconButton>;
|
|
19
|
-
export default IconButton;
|