@awenovations/aura 0.0.1 → 0.0.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.
- package/README.md +2 -0
- package/dist/icon/icon.stories.svelte +111 -0
- package/dist/icon/icon.stories.svelte.d.ts +31 -0
- package/dist/icons/caret-down-large.svg +0 -0
- package/dist/icons/meta.json +23 -0
- package/dist/icons/plan-large.svg +3 -0
- package/dist/icons/plan-medium.svg +3 -0
- package/dist/icons/plan-small.svg +3 -0
- package/dist/{input/input.stories.svelte → text-field/text-field.stories.svelte} +7 -7
- package/dist/{input/input.stories.svelte.d.ts → text-field/text-field.stories.svelte.d.ts} +5 -5
- package/dist/{input/input.svelte.d.ts → text-field/text-field.svelte.d.ts} +5 -5
- package/dist/tokens/_variables.css +21 -1
- package/package.json +5 -3
- package/dist/icon/icon.stories.d.ts +0 -25
- package/dist/icon/icon.stories.js +0 -49
- /package/dist/{input/input.svelte → text-field/text-field.svelte} +0 -0
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This is the aura design system, it based on tokens exported from this figma file: https://www.figma.com/design/rm5Wj9BOHd6qPaZfgspeBy/Aura-Design-System?node-id=0-1&t=pLCSXoRBcVVurliQ-0
|
|
4
4
|
|
|
5
|
+
Can be installed with npm: [@awenovations/aura](https://www.npmjs.com/package/@awenovations/aura)
|
|
6
|
+
|
|
5
7
|
### Storybook
|
|
6
8
|
|
|
7
9
|
You can view the storybook on github pages here: https://awenovations.github.io/aura/
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<script context="module">import "../../app.scss";
|
|
2
|
+
import Icon from "./icon.svelte";
|
|
3
|
+
import { iconSizes } from "./props.ts";
|
|
4
|
+
export const meta = {
|
|
5
|
+
title: "AURA/Icon",
|
|
6
|
+
component: Icon,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
argTypes: {
|
|
9
|
+
name: { control: "text" },
|
|
10
|
+
size: { control: "select", options: iconSizes }
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<script>import { Story, Template } from "@storybook/addon-svelte-csf";
|
|
16
|
+
import TextField from "../text-field/text-field.svelte";
|
|
17
|
+
import Dropdown from "../dropdown/dropdown.svelte";
|
|
18
|
+
$: size = "large";
|
|
19
|
+
$: iconSearch = "";
|
|
20
|
+
$: console.log(iconSearch);
|
|
21
|
+
let allIcons = [];
|
|
22
|
+
const fetchIconMeta = async () => {
|
|
23
|
+
const response = await fetch("/icons/meta.json");
|
|
24
|
+
const body = await response.json();
|
|
25
|
+
allIcons = Array.from(new Set(body.icons.map((icon) => icon.name)));
|
|
26
|
+
};
|
|
27
|
+
$: iconList = allIcons.filter((iconName) => iconName.includes(iconSearch));
|
|
28
|
+
fetchIconMeta();
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<Template let:args>
|
|
32
|
+
<Icon {...args} />
|
|
33
|
+
</Template>
|
|
34
|
+
|
|
35
|
+
<Story name="All">
|
|
36
|
+
<div style="min-height: 300px;">
|
|
37
|
+
<div style="display: flex; gap: 10px;">
|
|
38
|
+
<TextField
|
|
39
|
+
bind:value={iconSearch}
|
|
40
|
+
on:keyup={(evt) => {
|
|
41
|
+
iconSearch = evt.detail.value;
|
|
42
|
+
}}
|
|
43
|
+
placeholder="Type icon name..."
|
|
44
|
+
/>
|
|
45
|
+
<Dropdown
|
|
46
|
+
style="flex: 1; max-width: 100px;"
|
|
47
|
+
on:change={(evt) => {
|
|
48
|
+
size = evt.detail.value;
|
|
49
|
+
}}
|
|
50
|
+
currentValue={size}
|
|
51
|
+
>
|
|
52
|
+
<aura-option value="small">small</aura-option>
|
|
53
|
+
<aura-option value="medium">medium</aura-option>
|
|
54
|
+
<aura-option value="large">large</aura-option>
|
|
55
|
+
</Dropdown>
|
|
56
|
+
</div>
|
|
57
|
+
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
|
58
|
+
{#each iconList as icon}
|
|
59
|
+
<Icon name={icon} {size} />
|
|
60
|
+
{/each}
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</Story>
|
|
64
|
+
|
|
65
|
+
<Story
|
|
66
|
+
name="Small Icon"
|
|
67
|
+
args={{
|
|
68
|
+
name: 'arrow-circle-left',
|
|
69
|
+
size: 'small'
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
72
|
+
|
|
73
|
+
<Story
|
|
74
|
+
name="Medium Icon"
|
|
75
|
+
args={{
|
|
76
|
+
name: 'arrow-circle-left',
|
|
77
|
+
size: 'medium'
|
|
78
|
+
}}
|
|
79
|
+
/>
|
|
80
|
+
|
|
81
|
+
<Story
|
|
82
|
+
name="Large Icon"
|
|
83
|
+
args={{
|
|
84
|
+
name: 'arrow-circle-left',
|
|
85
|
+
size: 'large'
|
|
86
|
+
}}
|
|
87
|
+
/>
|
|
88
|
+
|
|
89
|
+
<Story
|
|
90
|
+
name="Small Icon Color"
|
|
91
|
+
args={{
|
|
92
|
+
name: 'microsoft-color',
|
|
93
|
+
size: 'small'
|
|
94
|
+
}}
|
|
95
|
+
/>
|
|
96
|
+
|
|
97
|
+
<Story
|
|
98
|
+
name="Medium Icon Color"
|
|
99
|
+
args={{
|
|
100
|
+
name: 'microsoft-color',
|
|
101
|
+
size: 'medium'
|
|
102
|
+
}}
|
|
103
|
+
/>
|
|
104
|
+
|
|
105
|
+
<Story
|
|
106
|
+
name="Large Icon Color"
|
|
107
|
+
args={{
|
|
108
|
+
name: 'microsoft-color',
|
|
109
|
+
size: 'large'
|
|
110
|
+
}}
|
|
111
|
+
/>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import '../../app.scss';
|
|
3
|
+
export declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Icon;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
name: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
size: {
|
|
12
|
+
control: string;
|
|
13
|
+
options: readonly ["large", "medium", "small"];
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
declare const __propDef: {
|
|
18
|
+
props: Record<string, never>;
|
|
19
|
+
events: {
|
|
20
|
+
[evt: string]: CustomEvent<any>;
|
|
21
|
+
};
|
|
22
|
+
slots: {};
|
|
23
|
+
exports?: {} | undefined;
|
|
24
|
+
bindings?: string | undefined;
|
|
25
|
+
};
|
|
26
|
+
export type IconProps = typeof __propDef.props;
|
|
27
|
+
export type IconEvents = typeof __propDef.events;
|
|
28
|
+
export type IconSlots = typeof __propDef.slots;
|
|
29
|
+
export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
|
|
30
|
+
}
|
|
31
|
+
export {};
|
|
Binary file
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"lastGenerated": 1720059251531,
|
|
3
|
+
"icons": [
|
|
4
|
+
{ "name": "arrow-circle-left", "size": "large" },
|
|
5
|
+
{ "name": "arrow-circle-left", "size": "medium" },
|
|
6
|
+
{ "name": "arrow-circle-left", "size": "small" },
|
|
7
|
+
{ "name": "bug", "size": "large" },
|
|
8
|
+
{ "name": "bug", "size": "medium" },
|
|
9
|
+
{ "name": "bug", "size": "small" },
|
|
10
|
+
{ "name": "caret-down", "size": "large" },
|
|
11
|
+
{ "name": "caret-down", "size": "medium" },
|
|
12
|
+
{ "name": "caret-down", "size": "small" },
|
|
13
|
+
{ "name": "microsoft-color", "size": "large" },
|
|
14
|
+
{ "name": "microsoft-color", "size": "medium" },
|
|
15
|
+
{ "name": "microsoft-color", "size": "small" },
|
|
16
|
+
{ "name": "plan", "size": "large" },
|
|
17
|
+
{ "name": "plan", "size": "medium" },
|
|
18
|
+
{ "name": "plan", "size": "small" },
|
|
19
|
+
{ "name": "user-story", "size": "large" },
|
|
20
|
+
{ "name": "user-story", "size": "medium" },
|
|
21
|
+
{ "name": "user-story", "size": "small" }
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12.4 0.999905H5C4.46957 0.999905 3.96086 1.21062 3.58579 1.58569C3.21071 1.96076 3 2.46947 3 2.9999V18.9999C3 19.5303 3.21071 20.039 3.58579 20.4141C3.96086 20.7892 4.46957 20.9999 5 20.9999H17C17.5304 20.9999 18.0391 20.7892 18.4142 20.4141C18.7893 20.039 19 19.5303 19 18.9999V11.5999M1 4.9999H5M1 8.9999H5M1 12.9999H5M1 16.9999H5M20.378 4.6259C20.7764 4.22755 21.0001 3.68726 21.0001 3.1239C21.0001 2.56055 20.7764 2.02026 20.378 1.6219C19.9796 1.22355 19.4394 0.999756 18.876 0.999756C18.3126 0.999756 17.7724 1.22355 17.374 1.6219L12.364 6.6339C12.1262 6.87153 11.9522 7.16524 11.858 7.4879L11.021 10.3579C10.9959 10.444 10.9944 10.5352 11.0166 10.622C11.0389 10.7088 11.0841 10.7881 11.1474 10.8515C11.2108 10.9148 11.2901 10.96 11.3769 10.9823C11.4637 11.0045 11.555 11.003 11.641 10.9779L14.511 10.1409C14.8337 10.0467 15.1274 9.87266 15.365 9.6349L20.378 4.6259Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M10.05 1.50011H4.5C4.10218 1.50011 3.72064 1.65815 3.43934 1.93945C3.15804 2.22076 3 2.60229 3 3.00011V15.0001C3 15.3979 3.15804 15.7795 3.43934 16.0608C3.72064 16.3421 4.10218 16.5001 4.5 16.5001H13.5C13.8978 16.5001 14.2794 16.3421 14.5607 16.0608C14.842 15.7795 15 15.3979 15 15.0001V9.45011M1.5 4.50011H4.5M1.5 7.50011H4.5M1.5 10.5001H4.5M1.5 13.5001H4.5M16.0335 4.21961C16.3323 3.92085 16.5001 3.51563 16.5001 3.09311C16.5001 2.67059 16.3323 2.26538 16.0335 1.96661C15.7347 1.66785 15.3295 1.5 14.907 1.5C14.4845 1.5 14.0793 1.66785 13.7805 1.96661L10.023 5.72561C9.84469 5.90383 9.71417 6.12411 9.6435 6.36611L9.01575 8.51861C8.99693 8.58315 8.9958 8.65156 9.01248 8.71668C9.02917 8.7818 9.06305 8.84124 9.11059 8.88878C9.15812 8.93631 9.21756 8.9702 9.28268 8.98688C9.3478 9.00356 9.41621 9.00243 9.48075 8.98361L11.6333 8.35586C11.8752 8.2852 12.0955 8.15468 12.2738 7.97636L16.0335 4.21961Z" stroke="white" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.81675 1.16659H3.50008C3.19066 1.16659 2.89392 1.28951 2.67512 1.5083C2.45633 1.72709 2.33341 2.02384 2.33341 2.33326V11.6666C2.33341 11.976 2.45633 12.2728 2.67512 12.4915C2.89392 12.7103 3.19066 12.8333 3.50008 12.8333H10.5001C10.8095 12.8333 11.1062 12.7103 11.325 12.4915C11.5438 12.2728 11.6667 11.976 11.6667 11.6666V7.34992M1.16675 3.49992H3.50008M1.16675 5.83326H3.50008M1.16675 8.16659H3.50008M1.16675 10.4999H3.50008M12.4706 3.28176C12.703 3.04938 12.8335 2.73422 12.8335 2.40559C12.8335 2.07696 12.703 1.7618 12.4706 1.52942C12.2382 1.29705 11.923 1.1665 11.5944 1.1665C11.2658 1.1665 10.9506 1.29705 10.7182 1.52942L7.79575 4.45309C7.65706 4.5917 7.55554 4.76304 7.50058 4.95126L7.01233 6.62542C6.99769 6.67562 6.99681 6.72883 7.00979 6.77948C7.02277 6.83013 7.04912 6.87636 7.08609 6.91333C7.12306 6.9503 7.16929 6.97666 7.21994 6.98963C7.2706 7.00261 7.3238 7.00173 7.374 6.98709L9.04816 6.49884C9.23639 6.44388 9.40772 6.34236 9.54633 6.20367L12.4706 3.28176Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script context="module">import "../../app.scss";
|
|
2
|
-
import
|
|
2
|
+
import TextField from "./text-field.svelte";
|
|
3
3
|
export const meta = {
|
|
4
|
-
title: "AURA/
|
|
5
|
-
component:
|
|
4
|
+
title: "AURA/Text Field",
|
|
5
|
+
component: TextField,
|
|
6
6
|
tags: ["autodocs"],
|
|
7
7
|
argTypes: {}
|
|
8
8
|
};
|
|
@@ -12,17 +12,17 @@ export const meta = {
|
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<Template let:args>
|
|
15
|
-
<
|
|
15
|
+
<TextField {...args} placeholder="Placeholder..." />
|
|
16
16
|
</Template>
|
|
17
17
|
|
|
18
18
|
<Story name="Default input" />
|
|
19
19
|
|
|
20
20
|
<Story name="Disabled input">
|
|
21
|
-
<
|
|
21
|
+
<TextField disabled={true} placeholder="Placeholder..." />
|
|
22
22
|
</Story>
|
|
23
23
|
|
|
24
24
|
<Story name="Error'd input">
|
|
25
|
-
<
|
|
26
|
-
><span slot="errors">Something went wrong here!</span></
|
|
25
|
+
<TextField placeholder="Placeholder..." showErrors
|
|
26
|
+
><span slot="errors">Something went wrong here!</span></TextField
|
|
27
27
|
>
|
|
28
28
|
</Story>
|
|
@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import '../../app.scss';
|
|
3
3
|
export declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: typeof
|
|
5
|
+
component: typeof TextField;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
};
|
|
@@ -15,9 +15,9 @@ declare const __propDef: {
|
|
|
15
15
|
exports?: {} | undefined;
|
|
16
16
|
bindings?: string | undefined;
|
|
17
17
|
};
|
|
18
|
-
export type
|
|
19
|
-
export type
|
|
20
|
-
export type
|
|
21
|
-
export default class
|
|
18
|
+
export type TextFieldProps = typeof __propDef.props;
|
|
19
|
+
export type TextFieldEvents = typeof __propDef.events;
|
|
20
|
+
export type TextFieldSlots = typeof __propDef.slots;
|
|
21
|
+
export default class TextField extends SvelteComponent<TextFieldProps, TextFieldEvents, TextFieldSlots> {
|
|
22
22
|
}
|
|
23
23
|
export {};
|
|
@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { type Mode } from '../form-item/form-item.svelte';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: Omit<import("svelte/elements").HTMLInputAttributes, "size" | "class" | "value" | `on:${string}` | "type"> & {
|
|
5
|
-
type?: "number" | "search" | "time" | "text" | "
|
|
5
|
+
type?: "number" | "search" | "time" | "text" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "range" | "tel" | "url" | "week";
|
|
6
6
|
value?: string | number | boolean;
|
|
7
7
|
size?: any;
|
|
8
8
|
showErrors?: boolean;
|
|
@@ -100,9 +100,9 @@ declare const __propDef: {
|
|
|
100
100
|
exports?: {} | undefined;
|
|
101
101
|
bindings?: string | undefined;
|
|
102
102
|
};
|
|
103
|
-
export type
|
|
104
|
-
export type
|
|
105
|
-
export type
|
|
106
|
-
export default class
|
|
103
|
+
export type TextFieldProps = typeof __propDef.props;
|
|
104
|
+
export type TextFieldEvents = typeof __propDef.events;
|
|
105
|
+
export type TextFieldSlots = typeof __propDef.slots;
|
|
106
|
+
export default class TextField extends SvelteComponent<TextFieldProps, TextFieldEvents, TextFieldSlots> {
|
|
107
107
|
}
|
|
108
108
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri Jul 05 2024 14:21:11 GMT+0000 (Coordinated Universal Time)
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -420,3 +420,23 @@
|
|
|
420
420
|
--aura-container-border-color: #c1c2c4ff;
|
|
421
421
|
--aura-label-text-color: #b0b1b4ff;
|
|
422
422
|
}
|
|
423
|
+
|
|
424
|
+
* {
|
|
425
|
+
font-family: Roboto;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
h1 {
|
|
429
|
+
font: var(--aura-h1);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
h2 {
|
|
433
|
+
font: var(--aura-h2);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
h3 {
|
|
437
|
+
font: var(--aura-h3);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
h4 {
|
|
441
|
+
font: var(--aura-h4);
|
|
442
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
"build-storybook": "npm run transform-tokens && storybook build",
|
|
19
19
|
"replace-icons": "replace-in-file //icons//g ../icons/ docs/**/*.* --isRegex",
|
|
20
20
|
"replace-svgs": "replace-in-file //svgs//g ../svgs/ docs/**/*.* --isRegex",
|
|
21
|
-
"
|
|
21
|
+
"replace-meta-json-for-gh-pages": "replace-in-file ../icons/meta.json /aura/icons/meta.json docs/**/*.*",
|
|
22
|
+
"generate-icon-meta-data": "node src/tokens/generate-icon-meta.js",
|
|
23
|
+
"build-storybook-for-pages": "rimraf docs && npm run transform-tokens && storybook build --output-dir docs && npm run replace-icons && npm run replace-svgs && npm run replace-meta-json-for-gh-pages && touch docs/.nojekyll"
|
|
22
24
|
},
|
|
23
25
|
"exports": {
|
|
24
26
|
".": {
|
|
@@ -34,7 +36,7 @@
|
|
|
34
36
|
"./zero-state.svelte": "./dist/zero-state/zero-state.svelte",
|
|
35
37
|
"./error-state.svelte": "./dist/error-state/error-state.svelte",
|
|
36
38
|
"./float.svelte": "./dist/float/float.svelte",
|
|
37
|
-
"./
|
|
39
|
+
"./text-field.svelte": "./dist/text-field/text-field.svelte",
|
|
38
40
|
"./progress-ring.svelte": "./dist/progress/progress-ring.svelte",
|
|
39
41
|
"./skeleton.svelte": "./dist/skeleton/skeleton.svelte",
|
|
40
42
|
"./alert.svelte": "./dist/alert/alert.svelte",
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/svelte';
|
|
2
|
-
import '../../app.scss';
|
|
3
|
-
import Icon from './icon.svelte';
|
|
4
|
-
declare const meta: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: typeof Icon;
|
|
7
|
-
tags: string[];
|
|
8
|
-
argTypes: {
|
|
9
|
-
name: {
|
|
10
|
-
control: "text";
|
|
11
|
-
};
|
|
12
|
-
size: {
|
|
13
|
-
control: "select";
|
|
14
|
-
options: readonly ["large", "medium", "small"];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
type Story = StoryObj<typeof meta>;
|
|
20
|
-
export declare const SmallIcon: Story;
|
|
21
|
-
export declare const MediumIcon: Story;
|
|
22
|
-
export declare const LargeIcon: Story;
|
|
23
|
-
export declare const SmallIconColor: Story;
|
|
24
|
-
export declare const MediumIconColor: Story;
|
|
25
|
-
export declare const LargeIconColor: Story;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import '../../app.scss';
|
|
2
|
-
import Icon from './icon.svelte';
|
|
3
|
-
import { iconSizes } from './props.ts';
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'AURA/Icon',
|
|
6
|
-
component: Icon,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
argTypes: {
|
|
9
|
-
name: { control: 'text' },
|
|
10
|
-
size: { control: 'select', options: iconSizes }
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
export default meta;
|
|
14
|
-
export const SmallIcon = {
|
|
15
|
-
args: {
|
|
16
|
-
name: 'arrow-circle-left',
|
|
17
|
-
size: 'small'
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
export const MediumIcon = {
|
|
21
|
-
args: {
|
|
22
|
-
name: 'arrow-circle-left',
|
|
23
|
-
size: 'medium'
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
export const LargeIcon = {
|
|
27
|
-
args: {
|
|
28
|
-
name: 'arrow-circle-left',
|
|
29
|
-
size: 'large'
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
export const SmallIconColor = {
|
|
33
|
-
args: {
|
|
34
|
-
name: 'microsoft-color',
|
|
35
|
-
size: 'small'
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
export const MediumIconColor = {
|
|
39
|
-
args: {
|
|
40
|
-
name: 'microsoft-color',
|
|
41
|
-
size: 'medium'
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
export const LargeIconColor = {
|
|
45
|
-
args: {
|
|
46
|
-
name: 'microsoft-color',
|
|
47
|
-
size: 'large'
|
|
48
|
-
}
|
|
49
|
-
};
|
|
File without changes
|