@awenovations/aura 0.0.1

package/README.md

@@ -0,0 +1,13 @@
+# Aura Design System
+
+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
+
+### Storybook
+
+You can view the storybook on github pages here: https://awenovations.github.io/aura/
+
+You can view the components in the design system by opening storybook:
+
+```bash
+$ npm i && npm run storybook
+```

package/dist/alert/alert.stories.svelte

@@ -0,0 +1,27 @@
+<script context="module">import "../../app.scss";
+import Alert from "./alert.svelte";
+import { alertSeverity } from "./props.ts";
+export const meta = {
+  title: "AURA/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    severity: { control: "select", options: alertSeverity }
+  }
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<Alert {...args}
+		>{args.severity ? args.severity[0].toUpperCase() + args.severity.substring(1) : 'Default'} alert</Alert
+	>
+</Template>
+
+<Story name="Default" />
+<Story name="Success" args={{ severity: 'success' }} />
+<Story name="Informational" args={{ severity: 'informational' }} />
+<Story name="Error" args={{ severity: 'error' }} />
+<Story name="Warning" args={{ severity: 'warning' }} />

package/dist/alert/alert.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Alert;
+    tags: string[];
+    argTypes: {
+        severity: {
+            control: string;
+            options: readonly ["informational", "success", "error", "warning"];
+        };
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/alert/alert.svelte

@@ -0,0 +1,65 @@
+<script>export let severity = "informational";
+export let hide = false;
+let hideAlert = false;
+$: {
+  if (hide) {
+    setTimeout(() => {
+      hideAlert = true;
+    }, 300);
+  } else {
+    hideAlert = false;
+  }
+}
+</script>
+
+<div
+	{...$$restProps}
+	class:isSuccess={severity === 'success'}
+	class:isInformational={severity === 'informatioanl'}
+	class:isWarning={severity === 'warning'}
+	class:isError={severity === 'error'}
+	style:--opacity={hide ? 0 : 1}
+	class:hideAlert
+	class={`aura-alert ${$$restProps.class ?? ''}`}
+>
+	<slot />
+</div>
+
+<style>.aura-alert {
+  transition: opacity 0.3s ease-out;
+  opacity: var(--opacity);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--drop-shadow);
+  font: var(--aura-default-semibold);
+  color: var(--font-color);
+  background: var(--bg);
+  padding: var(--aura-alert-padding-vertical) var(--aura-alert-padding-horizontal);
+  border-radius: var(--aura-alert-border-radius);
+}
+.aura-alert, .aura-alert.isInformational {
+  --border-color: var(--aura-informational-30);
+  --drop-shadow: var(--aura-alert-drop-shadow);
+  --bg: var(--aura-informational-20);
+  --font-color: var(--aura-informational-50);
+}
+.aura-alert.isSuccess {
+  --border-color: var(--aura-success-30);
+  --drop-shadow: var(--aura-alert-drop-shadow);
+  --bg: var(--aura-success-20);
+  --font-color: var(--aura-success-50);
+}
+.aura-alert.isError {
+  --border-color: var(--aura-error-30);
+  --drop-shadow: var(--aura-alert-drop-shadow);
+  --bg: var(--aura-error-10);
+  --font-color: var(--aura-error-50);
+}
+.aura-alert.isWarning {
+  --border-color: var(--aura-warning-30);
+  --drop-shadow: var(--aura-alert-drop-shadow);
+  --bg: var(--aura-warning-10);
+  --font-color: var(--aura-warning-50);
+}
+.aura-alert.hideAlert {
+  display: none;
+}</style>

package/dist/alert/alert.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type * as Props from './props';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        severity?: Props.AlertSeverity;
+        hide?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/alert/props.d.ts

@@ -0,0 +1,2 @@
+export declare const alertSeverity: readonly ["informational", "success", "error", "warning"];
+export type AlertSeverity = (typeof alertSeverity)[number];

package/dist/alert/props.js

@@ -0,0 +1 @@
+export const alertSeverity = ['informational', 'success', 'error', 'warning'];

package/dist/button/button.stories.svelte

@@ -0,0 +1,456 @@
+<script context="module">import "../../app.scss";
+import Button from "./button.svelte";
+import Icon from "../icon/icon.svelte";
+import { buttonKinds, buttonVariants, buttonSizes } from "./props.ts";
+export const meta = {
+  title: "AURA/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    kind: { control: "select", options: buttonKinds },
+    variant: { control: "select", options: buttonVariants },
+    size: { control: "select", options: buttonSizes },
+    loading: { control: "boolean" }
+  }
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<Button {...args} />
+</Template>
+
+<Story name="All">
+	<div style="display: flex; flex-direction: column; gap: 20px">
+		<div style="display: flex; gap: 10px;">
+			<Button variant="primary"></Button>
+			<Button variant="primary"><Icon name="arrow-circle-left" slot="icon-before" /></Button>
+			<Button variant="primary" kind="outlined"></Button>
+			<Button variant="primary" kind="outlined"
+				><Icon name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+		<div style="display: flex; gap: 10px;">
+			<Button size="small" variant="primary"></Button>
+			<Button size="small" variant="primary"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+			<Button size="small" variant="primary" kind="outlined"></Button>
+			<Button size="small" variant="primary" kind="outlined"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+
+		<div style="display: flex; gap: 10px;">
+			<Button variant="secondary"></Button>
+			<Button variant="secondary"><Icon name="arrow-circle-left" slot="icon-before" /></Button>
+			<Button variant="secondary" kind="outlined"></Button>
+			<Button variant="secondary" kind="outlined"
+				><Icon name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+		<div style="display: flex; gap: 10px;">
+			<Button size="small" variant="secondary"></Button>
+			<Button size="small" variant="secondary"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+			<Button size="small" variant="secondary" kind="outlined"></Button>
+			<Button size="small" variant="secondary" kind="outlined"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+
+		<div style="display: flex; gap: 10px;">
+			<Button variant="tertiary"></Button>
+			<Button variant="tertiary"><Icon name="arrow-circle-left" slot="icon-before" /></Button>
+			<Button variant="tertiary" kind="outlined"></Button>
+			<Button variant="tertiary" kind="outlined"
+				><Icon name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+		<div style="display: flex; gap: 10px;">
+			<Button size="small" variant="tertiary"></Button>
+			<Button size="small" variant="tertiary"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+			<Button size="small" variant="tertiary" kind="outlined"></Button>
+			<Button size="small" variant="tertiary" kind="outlined"
+				><Icon size="small" name="arrow-circle-left" slot="icon-before" /></Button
+			>
+		</div>
+	</div>
+</Story>
+
+<Story name="Full Width">
+	<div style="display: flex; flex-direction: column; gap: 10px; width: 300px;">
+		<Button fullWidth />
+		<Button fullWidth variant="secondary" />
+		<Button fullWidth variant="tertiary" />
+		<Button fullWidth kind="outlined" />
+		<Button fullWidth kind="outlined" variant="secondary" />
+		<Button fullWidth kind="outlined" variant="tertiary" />
+	</div>
+</Story>
+
+<Story
+	name="Pimary Filled"
+	args={{
+		kind: 'filled',
+		variant: 'primary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Primary Filled Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'primary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Primary Filled Loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'primary',
+			size: 'default',
+			loading: 'true'
+		}}
+	/>
+</Story>
+
+<Story
+	name="Primary Filled Small"
+	args={{
+		kind: 'filled',
+		variant: 'primary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Primary Filled Small Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'primary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Primary Filled Small Loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'primary',
+			size: 'small',
+			loading: 'true'
+		}}
+	/>
+</Story>
+
+<Story
+	name="Primary Outlined"
+	args={{
+		kind: 'outlined',
+		variant: 'primary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Primary Outlined Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'primary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Primary Outlined Loading Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'primary',
+			size: 'default',
+			loading: 'true'
+		}}
+	/>
+</Story>
+
+<Story
+	name="Primary Outlined Small"
+	args={{
+		kind: 'outlined',
+		variant: 'primary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Primary Outlined Small Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'primary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Primary Outlined Small Loading">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'primary',
+			size: 'small',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Secondary Filled"
+	args={{
+		kind: 'filled',
+		variant: 'secondary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Secondary Filled Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'secondary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Secondary Filled Loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'secondary',
+			size: 'default',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Secondary Filled Small"
+	args={{
+		kind: 'filled',
+		variant: 'secondary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Secondary Filled Small Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'secondary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Secondary Filled Small Loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'secondary',
+			size: 'small',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Secondary Outlined"
+	args={{
+		kind: 'outlined',
+		variant: 'secondary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Secondary Outlined Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'secondary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story
+	name="Secondary Outlined Small"
+	args={{
+		kind: 'outlined',
+		variant: 'secondary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Secondary Outlined Small Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'secondary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Secondary Outlined Small Loading">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'secondary',
+			size: 'small',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Tertiary Filled"
+	args={{
+		kind: 'filled',
+		variant: 'tertiary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Tertiary Filled Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'tertiary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Tertiary Filled Loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'tertiary',
+			size: 'default',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Tertiary Filled Small"
+	args={{
+		kind: 'filled',
+		variant: 'tertiary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Tertiary Filled Small Icon">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'tertiary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Tertiary Filled Small loading">
+	<Button
+		{...{
+			kind: 'filled',
+			variant: 'tertiary',
+			size: 'small',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Tertiary Outlined"
+	args={{
+		kind: 'outlined',
+		variant: 'tertiary',
+		size: 'default'
+	}}
+/>
+
+<Story name="Tertiary Outlined Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'tertiary',
+			size: 'default'
+		}}
+		><Icon name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Tertiary Outlined Loading">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'tertiary',
+			size: 'default',
+			loading: true
+		}}
+	/>
+</Story>
+
+<Story
+	name="Tertiary Outlined Small"
+	args={{
+		kind: 'outlined',
+		variant: 'tertiary',
+		size: 'small'
+	}}
+/>
+
+<Story name="Tertiary Outlined Small Icon">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'tertiary',
+			size: 'small'
+		}}
+		><Icon size="small" name="arrow-circle-left" slot="icon-before" />
+	</Button>
+</Story>
+
+<Story name="Tertiary Outlined Small Loading">
+	<Button
+		{...{
+			kind: 'outlined',
+			variant: 'tertiary',
+			size: 'small',
+			loading: true
+		}}
+	/>
+</Story>

package/dist/button/button.stories.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Button;
+    tags: string[];
+    argTypes: {
+        kind: {
+            control: string;
+            options: readonly ["filled", "outlined"];
+        };
+        variant: {
+            control: string;
+            options: readonly ["primary", "secondary", "tertiary"];
+        };
+        size: {
+            control: string;
+            options: readonly ["default", "small"];
+        };
+        loading: {
+            control: string;
+        };
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};