@awenovations/aura 0.0.22 → 0.0.23
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/icon/icon.stories.svelte +4 -1
- package/dist/icons/meta.json +1 -1
- package/dist/panel/panel.stories.svelte +92 -0
- package/dist/panel/panel.stories.svelte.d.ts +28 -0
- package/dist/panel/panel.svelte +77 -0
- package/dist/panel/panel.svelte.d.ts +24 -0
- package/dist/panel/props.d.ts +2 -0
- package/dist/panel/props.js +1 -0
- package/dist/text-field/text-field.stories.svelte +1 -1
- package/dist/tokens/_variables.css +40 -3
- package/package.json +2 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script context="module">import "../../app.scss";
|
|
2
2
|
import Icon from "./icon.svelte";
|
|
3
3
|
import { iconSizes } from "./props.ts";
|
|
4
|
+
import Tooltip from "../tooltip/tooltip.svelte";
|
|
4
5
|
export const meta = {
|
|
5
6
|
title: "AURA/Icon",
|
|
6
7
|
component: Icon,
|
|
@@ -56,7 +57,9 @@ fetchIconMeta();
|
|
|
56
57
|
</div>
|
|
57
58
|
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
|
58
59
|
{#each iconList as icon}
|
|
59
|
-
<
|
|
60
|
+
<Tooltip placement="top" content={`Icon Name: ${icon}`}>
|
|
61
|
+
<Icon name={icon} {size} />
|
|
62
|
+
</Tooltip>
|
|
60
63
|
{/each}
|
|
61
64
|
</div>
|
|
62
65
|
</div>
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1725753359911,"icons":[{"name":"apple","size":"large"},{"name":"apple","size":"medium"},{"name":"apple","size":"small"},{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"}]}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script context="module">import "../../app.scss";
|
|
2
|
+
import Panel from "./panel.svelte";
|
|
3
|
+
import { panelPlacement } from "./props.ts";
|
|
4
|
+
export const meta = {
|
|
5
|
+
title: "AURA/Panel",
|
|
6
|
+
component: Panel,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
argTypes: {
|
|
9
|
+
placement: { control: "select", options: panelPlacement }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<script>import { Story, Template } from "@storybook/addon-svelte-csf";
|
|
15
|
+
import Button from "../button/button.svelte";
|
|
16
|
+
$: open = true;
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<Template let:args>
|
|
20
|
+
<div style="height: 100%; min-height: 250px; width: 100%;">
|
|
21
|
+
<Button on:click={() => { open = !open}} class={`${args.placement}-button`}>Toggle Panel</Button>
|
|
22
|
+
<Panel {...args} {open}>
|
|
23
|
+
<div class="panel-content">
|
|
24
|
+
{args.placement.charAt(0).toUpperCase() + args.placement.slice(1)} Aura Panel
|
|
25
|
+
</div>
|
|
26
|
+
</Panel>
|
|
27
|
+
</div>
|
|
28
|
+
</Template>
|
|
29
|
+
|
|
30
|
+
<Story
|
|
31
|
+
name="Right Panel"
|
|
32
|
+
args={{
|
|
33
|
+
placement: 'right',
|
|
34
|
+
}}
|
|
35
|
+
/>
|
|
36
|
+
|
|
37
|
+
<Story
|
|
38
|
+
name="Left Panel"
|
|
39
|
+
args={{
|
|
40
|
+
placement: 'left',
|
|
41
|
+
}}
|
|
42
|
+
/>
|
|
43
|
+
|
|
44
|
+
<Story
|
|
45
|
+
name="Top Panel"
|
|
46
|
+
args={{
|
|
47
|
+
placement: 'top',
|
|
48
|
+
}}
|
|
49
|
+
/>
|
|
50
|
+
|
|
51
|
+
<Story
|
|
52
|
+
name="Bottom Panel"
|
|
53
|
+
args={{
|
|
54
|
+
placement: 'bottom',
|
|
55
|
+
}}
|
|
56
|
+
/>
|
|
57
|
+
|
|
58
|
+
<style>.panel-content {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:global(.bottom-button) {
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: 30%;
|
|
69
|
+
transform: translate(-50%, -50%);
|
|
70
|
+
left: 50%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:global(.top-button) {
|
|
74
|
+
position: absolute;
|
|
75
|
+
bottom: 30%;
|
|
76
|
+
transform: translate(-50%, 50%);
|
|
77
|
+
left: 50%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:global(.left-button) {
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 50%;
|
|
83
|
+
transform: translate(50%, -50%);
|
|
84
|
+
right: 30%;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:global(.right-button) {
|
|
88
|
+
position: absolute;
|
|
89
|
+
bottom: 50%;
|
|
90
|
+
transform: translate(-50%, 50%);
|
|
91
|
+
left: 30%;
|
|
92
|
+
}</style>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import '../../app.scss';
|
|
3
|
+
export declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Panel;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
placement: {
|
|
9
|
+
control: string;
|
|
10
|
+
options: readonly ["top", "bottom", "right", "left"];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: Record<string, never>;
|
|
16
|
+
events: {
|
|
17
|
+
[evt: string]: CustomEvent<any>;
|
|
18
|
+
};
|
|
19
|
+
slots: {};
|
|
20
|
+
exports?: {} | undefined;
|
|
21
|
+
bindings?: string | undefined;
|
|
22
|
+
};
|
|
23
|
+
export type PanelProps = typeof __propDef.props;
|
|
24
|
+
export type PanelEvents = typeof __propDef.events;
|
|
25
|
+
export type PanelSlots = typeof __propDef.slots;
|
|
26
|
+
export default class Panel extends SvelteComponent<PanelProps, PanelEvents, PanelSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<script>import classNames from "classnames";
|
|
2
|
+
export let placement = "right";
|
|
3
|
+
export let width = "41%";
|
|
4
|
+
export let height = "41%";
|
|
5
|
+
export let open = false;
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<div
|
|
9
|
+
style:--width={['right', 'left'].includes(placement) ? width : '100%'}
|
|
10
|
+
style:--height={['top', 'bottom'].includes(placement) ? height : '100%'}
|
|
11
|
+
class:open
|
|
12
|
+
class={classNames('panel', placement, $$restProps.class)}
|
|
13
|
+
>
|
|
14
|
+
<div class="internal-wrapper">
|
|
15
|
+
<slot />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<style>.panel {
|
|
20
|
+
width: 0;
|
|
21
|
+
height: 0;
|
|
22
|
+
border-color: var(--aura-panel-border-color);
|
|
23
|
+
background: var(--aura-panel-background);
|
|
24
|
+
position: absolute;
|
|
25
|
+
border-style: solid;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
transition: all 500ms;
|
|
28
|
+
}
|
|
29
|
+
.panel .internal-wrapper {
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
min-width: max-content;
|
|
32
|
+
min-height: max-content;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
}
|
|
36
|
+
.panel.right, .panel.left {
|
|
37
|
+
top: 0;
|
|
38
|
+
height: var(--height);
|
|
39
|
+
}
|
|
40
|
+
.panel.right.open, .panel.left.open {
|
|
41
|
+
width: var(--width);
|
|
42
|
+
}
|
|
43
|
+
.panel.top, .panel.bottom {
|
|
44
|
+
left: 0;
|
|
45
|
+
width: var(--width);
|
|
46
|
+
}
|
|
47
|
+
.panel.top.open, .panel.bottom.open {
|
|
48
|
+
height: var(--height);
|
|
49
|
+
}
|
|
50
|
+
.panel.open.right {
|
|
51
|
+
border-left-width: var(--aura-panel-border-width);
|
|
52
|
+
box-shadow: var(--aura-panel-box-shadow-right);
|
|
53
|
+
}
|
|
54
|
+
.panel.open.left {
|
|
55
|
+
border-right-width: var(--aura-panel-border-width);
|
|
56
|
+
box-shadow: var(--aura-panel-box-shadow-left);
|
|
57
|
+
}
|
|
58
|
+
.panel.open.top {
|
|
59
|
+
border-bottom-width: var(--aura-panel-border-width);
|
|
60
|
+
box-shadow: var(--aura-panel-box-shadow-top);
|
|
61
|
+
}
|
|
62
|
+
.panel.open.bottom {
|
|
63
|
+
border-top-width: var(--aura-panel-border-width);
|
|
64
|
+
box-shadow: var(--aura-panel-box-shadow-bottom);
|
|
65
|
+
}
|
|
66
|
+
.panel.right {
|
|
67
|
+
right: 0;
|
|
68
|
+
}
|
|
69
|
+
.panel.left {
|
|
70
|
+
left: 0;
|
|
71
|
+
}
|
|
72
|
+
.panel.top {
|
|
73
|
+
top: 0;
|
|
74
|
+
}
|
|
75
|
+
.panel.bottom {
|
|
76
|
+
bottom: 0;
|
|
77
|
+
}</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
placement?: any;
|
|
6
|
+
width?: string | undefined;
|
|
7
|
+
height?: string | undefined;
|
|
8
|
+
open?: boolean;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {
|
|
14
|
+
default: {};
|
|
15
|
+
};
|
|
16
|
+
exports?: undefined;
|
|
17
|
+
bindings?: undefined;
|
|
18
|
+
};
|
|
19
|
+
export type PanelProps = typeof __propDef.props;
|
|
20
|
+
export type PanelEvents = typeof __propDef.events;
|
|
21
|
+
export type PanelSlots = typeof __propDef.slots;
|
|
22
|
+
export default class Panel extends SvelteComponent<PanelProps, PanelEvents, PanelSlots> {
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const panelPlacement = ['top', 'bottom', 'right', 'left'];
|
|
@@ -52,7 +52,7 @@ export const meta = {
|
|
|
52
52
|
</Story>
|
|
53
53
|
|
|
54
54
|
<Story name="Multi Line">
|
|
55
|
-
<TextField height='100px' value="Test
|
|
55
|
+
<TextField height='100px' value="Test multiline input" type="multi" placeholder="Placeholder...">
|
|
56
56
|
<span slot="label">Label</span>
|
|
57
57
|
</TextField>
|
|
58
58
|
</Story>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sun Sep 08 2024 00:03:38 GMT+0000 (Coordinated Universal Time)
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -69,7 +69,8 @@
|
|
|
69
69
|
--aura-link-hovered-decoration: underline;
|
|
70
70
|
--aura-tooltip-border-radius: 10px;
|
|
71
71
|
--aura-divider-fill: #c1c2c4ff;
|
|
72
|
-
--aura-divider-fill: #a3a4a7ff;
|
|
72
|
+
--aura-divider-fill: #a3a4a7ff;
|
|
73
|
+
--aura-panel-border-width: 0.071rem; --aura-light-primary-10: #f5e1e1ff;
|
|
73
74
|
--aura-light-primary-20: #eecacaff;
|
|
74
75
|
--aura-light-primary-30: #e6b3b3ff;
|
|
75
76
|
--aura-light-primary-40: #cd6868ff;
|
|
@@ -129,7 +130,13 @@
|
|
|
129
130
|
--aura-light-tooltip-background: #ffffffff;
|
|
130
131
|
--aura-light-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
|
|
131
132
|
--aura-light-tooltip-border: #c1c2c4ff;
|
|
132
|
-
--aura-light-tooltip-font-color: #1f1f1fff;
|
|
133
|
+
--aura-light-tooltip-font-color: #1f1f1fff;
|
|
134
|
+
--aura-light-panel-background: #ffffffff;
|
|
135
|
+
--aura-light-panel-border-color: #c1c2c4ff;
|
|
136
|
+
--aura-light-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
137
|
+
--aura-light-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
138
|
+
--aura-light-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
139
|
+
--aura-light-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.10);; --aura-dark-primary-70: #f5e1e1ff;
|
|
133
140
|
--aura-dark-primary-60: #eecacaff;
|
|
134
141
|
--aura-dark-primary-50: #e6b3b3ff;
|
|
135
142
|
--aura-dark-primary-40: #cd6868ff;
|
|
@@ -190,6 +197,12 @@
|
|
|
190
197
|
--aura-dark-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
191
198
|
--aura-dark-tooltip-border: #c1c2c4ff;
|
|
192
199
|
--aura-dark-tooltip-font-color: #292c33ff;
|
|
200
|
+
--aura-dark-panel-background: #474a50ff;
|
|
201
|
+
--aura-dark-panel-border-color: #66686dff;
|
|
202
|
+
--aura-dark-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
203
|
+
--aura-dark-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
204
|
+
--aura-dark-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
205
|
+
--aura-dark-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
193
206
|
}
|
|
194
207
|
|
|
195
208
|
@media (prefers-color-scheme: light) {
|
|
@@ -255,6 +268,12 @@
|
|
|
255
268
|
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
|
|
256
269
|
--aura-tooltip-border: #c1c2c4ff;
|
|
257
270
|
--aura-tooltip-font-color: #1f1f1fff;
|
|
271
|
+
--aura-panel-background: #ffffffff;
|
|
272
|
+
--aura-panel-border-color: #c1c2c4ff;
|
|
273
|
+
--aura-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
274
|
+
--aura-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
275
|
+
--aura-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
276
|
+
--aura-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
258
277
|
}
|
|
259
278
|
}
|
|
260
279
|
|
|
@@ -321,6 +340,12 @@
|
|
|
321
340
|
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
322
341
|
--aura-tooltip-border: #c1c2c4ff;
|
|
323
342
|
--aura-tooltip-font-color: #292c33ff;
|
|
343
|
+
--aura-panel-background: #474a50ff;
|
|
344
|
+
--aura-panel-border-color: #66686dff;
|
|
345
|
+
--aura-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
346
|
+
--aura-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
347
|
+
--aura-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
348
|
+
--aura-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
324
349
|
}
|
|
325
350
|
}
|
|
326
351
|
|
|
@@ -386,6 +411,12 @@
|
|
|
386
411
|
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
|
|
387
412
|
--aura-tooltip-border: #c1c2c4ff;
|
|
388
413
|
--aura-tooltip-font-color: #1f1f1fff;
|
|
414
|
+
--aura-panel-background: #ffffffff;
|
|
415
|
+
--aura-panel-border-color: #c1c2c4ff;
|
|
416
|
+
--aura-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
417
|
+
--aura-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
418
|
+
--aura-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
419
|
+
--aura-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.10);;
|
|
389
420
|
}
|
|
390
421
|
|
|
391
422
|
[data-theme="dark"] {
|
|
@@ -450,6 +481,12 @@
|
|
|
450
481
|
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
451
482
|
--aura-tooltip-border: #c1c2c4ff;
|
|
452
483
|
--aura-tooltip-font-color: #292c33ff;
|
|
484
|
+
--aura-panel-background: #474a50ff;
|
|
485
|
+
--aura-panel-border-color: #66686dff;
|
|
486
|
+
--aura-panel-box-shadow-right: -0.143rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
487
|
+
--aura-panel-box-shadow-left: 0.214rem 0 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
488
|
+
--aura-panel-box-shadow-top: 0 0.143rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
489
|
+
--aura-panel-box-shadow-bottom: 0 -0.072rem 0.286rem 0 rgba(0, 0, 0, 0.20);;
|
|
453
490
|
}
|
|
454
491
|
|
|
455
492
|
/* http://meyerweb.com/eric/tools/css/reset/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.23",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"./icon.svelte": "./dist/icon/icon.svelte",
|
|
33
33
|
"./container.svelte": "./dist/container/container.svelte",
|
|
34
34
|
"./dropdown.svelte": "./dist/dropdown/dropdown.svelte",
|
|
35
|
+
"./panel.svelte": "./dist/panel/panel.svelte",
|
|
35
36
|
"./form-item.svelte": "./dist/form-item/form-item.svelte",
|
|
36
37
|
"./zero-state.svelte": "./dist/zero-state/zero-state.svelte",
|
|
37
38
|
"./error-state.svelte": "./dist/error-state/error-state.svelte",
|