@awenovations/aura 0.0.6 → 0.0.7
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/button/button.stories.svelte +6 -0
- package/dist/button/button.svelte +5 -0
- package/dist/button/button.svelte.d.ts +1 -0
- package/dist/divider/divider.stories.svelte +40 -0
- package/dist/divider/divider.stories.svelte.d.ts +28 -0
- package/dist/divider/divider.svelte +49 -0
- package/dist/divider/divider.svelte.d.ts +21 -0
- package/dist/divider/props.d.ts +2 -0
- package/dist/divider/props.js +1 -0
- package/dist/icons/meta.json +1 -1
- package/dist/text-field/text-field.svelte.d.ts +1 -1
- package/dist/tokens/_variables.css +12 -2
- package/package.json +2 -1
|
@@ -94,6 +94,12 @@ export const meta = {
|
|
|
94
94
|
</div>
|
|
95
95
|
</Story>
|
|
96
96
|
|
|
97
|
+
<Story name="Left Align">
|
|
98
|
+
<div style="display: flex; flex-direction: column; gap: 10px; width: 300px;">
|
|
99
|
+
<Button fullWidth left />
|
|
100
|
+
</div>
|
|
101
|
+
</Story>
|
|
102
|
+
|
|
97
103
|
<Story
|
|
98
104
|
name="Pimary Filled"
|
|
99
105
|
args={{
|
|
@@ -5,6 +5,7 @@ export let variant = "primary";
|
|
|
5
5
|
export let size = "default";
|
|
6
6
|
export let fullWidth = false;
|
|
7
7
|
export let loading = false;
|
|
8
|
+
export let left = false;
|
|
8
9
|
const dispatch = createEventDispatcher();
|
|
9
10
|
function onClick(event) {
|
|
10
11
|
dispatch("click", event);
|
|
@@ -22,6 +23,7 @@ function onClick(event) {
|
|
|
22
23
|
class:isDefaultSize={size === 'default'}
|
|
23
24
|
class:isSmall={size === 'small'}
|
|
24
25
|
class:fullWidth
|
|
26
|
+
class:left
|
|
25
27
|
on:click={onClick}
|
|
26
28
|
class={`aura-button ${$$restProps.class}`}
|
|
27
29
|
>
|
|
@@ -125,6 +127,9 @@ function onClick(event) {
|
|
|
125
127
|
.aura-button.fullWidth .content {
|
|
126
128
|
justify-content: center;
|
|
127
129
|
}
|
|
130
|
+
.aura-button.fullWidth.left .content {
|
|
131
|
+
justify-content: left;
|
|
132
|
+
}
|
|
128
133
|
.aura-button .content {
|
|
129
134
|
display: flex;
|
|
130
135
|
gap: var(--gap);
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script context="module">import "../../app.scss";
|
|
2
|
+
import Divider from "./divider.svelte";
|
|
3
|
+
import { dividerDirection } from "./props.ts";
|
|
4
|
+
export const meta = {
|
|
5
|
+
title: "AURA/Divider",
|
|
6
|
+
component: Divider,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
argTypes: {
|
|
9
|
+
direction: { control: "select", options: dividerDirection }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<script>import { Story, Template } from "@storybook/addon-svelte-csf";
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<Template let:args>
|
|
18
|
+
<div style='height: 7rem; display: flex;'>
|
|
19
|
+
<Divider {...args} />
|
|
20
|
+
</div>
|
|
21
|
+
</Template>
|
|
22
|
+
|
|
23
|
+
<Story name="Default Divider / Horizontal Divider" />
|
|
24
|
+
|
|
25
|
+
<Story
|
|
26
|
+
name="Vertical Divider"
|
|
27
|
+
args={{
|
|
28
|
+
direction: 'vertical'
|
|
29
|
+
}}
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<Story name="Horizontal Text Divider">
|
|
33
|
+
<Divider>Divider With Text</Divider>
|
|
34
|
+
</Story>
|
|
35
|
+
|
|
36
|
+
<Story name="Vertical Text Divider">
|
|
37
|
+
<div style='height: 7rem; display: flex;'>
|
|
38
|
+
<Divider direction="vertical">Divider With Text</Divider>
|
|
39
|
+
</div>
|
|
40
|
+
</Story>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import '../../app.scss';
|
|
3
|
+
export declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Divider;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
direction: {
|
|
9
|
+
control: string;
|
|
10
|
+
options: readonly ["vertical", "horizontal"];
|
|
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 DividerProps = typeof __propDef.props;
|
|
24
|
+
export type DividerEvents = typeof __propDef.events;
|
|
25
|
+
export type DividerSlots = typeof __propDef.slots;
|
|
26
|
+
export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>export let direction = "horizontal";
|
|
2
|
+
const vertical = direction === "vertical";
|
|
3
|
+
const horizontal = direction === "horizontal";
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class:vertical class:horizontal class="aura-divider">
|
|
7
|
+
{#if $$slots.default}
|
|
8
|
+
<div class="text">
|
|
9
|
+
<slot />
|
|
10
|
+
</div>
|
|
11
|
+
{/if}
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<style>.aura-divider {
|
|
15
|
+
--fill: var(--aura-divider-fill);
|
|
16
|
+
--border: 1px solid var(--fill);
|
|
17
|
+
display: flex;
|
|
18
|
+
height: 100%;
|
|
19
|
+
flex: 1;
|
|
20
|
+
}
|
|
21
|
+
.aura-divider .text {
|
|
22
|
+
color: var(--fill);
|
|
23
|
+
}
|
|
24
|
+
.aura-divider:before, .aura-divider:after {
|
|
25
|
+
content: "";
|
|
26
|
+
flex: 1 1;
|
|
27
|
+
margin: auto;
|
|
28
|
+
}
|
|
29
|
+
.aura-divider.horizontal {
|
|
30
|
+
flex-direction: row;
|
|
31
|
+
}
|
|
32
|
+
.aura-divider.horizontal .text {
|
|
33
|
+
margin: 0 0.625rem;
|
|
34
|
+
}
|
|
35
|
+
.aura-divider.horizontal:before, .aura-divider.horizontal:after {
|
|
36
|
+
border-bottom: var(--border);
|
|
37
|
+
transform: translateY(-0.5px);
|
|
38
|
+
}
|
|
39
|
+
.aura-divider.vertical {
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
}
|
|
42
|
+
.aura-divider.vertical .text {
|
|
43
|
+
margin: 0.625rem 0;
|
|
44
|
+
text-align: center;
|
|
45
|
+
}
|
|
46
|
+
.aura-divider.vertical:before, .aura-divider.vertical:after {
|
|
47
|
+
border-right: var(--border);
|
|
48
|
+
transform: translateX(-0.5px);
|
|
49
|
+
}</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type * as Props from './props';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
direction?: Props.DividerDirection;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {
|
|
11
|
+
default: {};
|
|
12
|
+
};
|
|
13
|
+
exports?: {} | undefined;
|
|
14
|
+
bindings?: string | undefined;
|
|
15
|
+
};
|
|
16
|
+
export type DividerProps = typeof __propDef.props;
|
|
17
|
+
export type DividerEvents = typeof __propDef.events;
|
|
18
|
+
export type DividerSlots = typeof __propDef.slots;
|
|
19
|
+
export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const dividerDirection = ['vertical', 'horizontal'];
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1721512302780,"icons":[{"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"}]}
|
|
@@ -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" | "
|
|
5
|
+
type?: "number" | "text" | "search" | "time" | "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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat Jul 20 2024 21:55:38 GMT+0000 (Coordinated Universal Time)
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -66,7 +66,17 @@
|
|
|
66
66
|
--aura-link-color: #005da8ff;
|
|
67
67
|
--aura-link-color: #00a5f0ff;
|
|
68
68
|
--aura-link-focused-decoration: underline;
|
|
69
|
-
--aura-link-hovered-decoration: underline;
|
|
69
|
+
--aura-link-hovered-decoration: underline;
|
|
70
|
+
--aura-tooltip-background: #ffffffff;
|
|
71
|
+
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
|
|
72
|
+
--aura-tooltip-border: #c1c2c4ff;
|
|
73
|
+
--aura-font-color: #1f1f1fff;
|
|
74
|
+
--aura-tooltip-background: #a3a4a7ff;
|
|
75
|
+
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
76
|
+
--aura-tooltip-border: #c1c2c4ff;
|
|
77
|
+
--aura-font-color: #292c33ff;
|
|
78
|
+
--aura-divider-fill: #c1c2c4ff;
|
|
79
|
+
--aura-divider-fill: #a3a4a7ff; --aura-light-primary-10: #f5e1e1ff;
|
|
70
80
|
--aura-light-primary-20: #eecacaff;
|
|
71
81
|
--aura-light-primary-30: #e6b3b3ff;
|
|
72
82
|
--aura-light-primary-40: #cd6868ff;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"./skeleton.svelte": "./dist/skeleton/skeleton.svelte",
|
|
42
42
|
"./alert.svelte": "./dist/alert/alert.svelte",
|
|
43
43
|
"./link.svelte": "./dist/link/link.svelte",
|
|
44
|
+
"./divider.svelte": "./dist/divider/divider.svelte",
|
|
44
45
|
"./dist/tokens/_variables.css": {
|
|
45
46
|
"import": "./dist/tokens/_variables.css",
|
|
46
47
|
"require": "./dist/tokens/_variables.css"
|