@softwareone/spi-sv5-library 1.0.0 → 1.2.0

package/dist/Modal/ModalHeader.svelte

@@ -1,47 +1,65 @@
 <script lang="ts">
-    import { OctagonAlert } from 'lucide-svelte';
+	import type { ModalHeaderProps } from './modalState.svelte.js';
 
-	interface ModalHeaderProps {
-		headerTitle?: string;
-	}
-
-    let { headerTitle }: ModalHeaderProps = $props();
-
-	headerTitle = headerTitle || 'Modal title';
-	
+	let {
+		title = '',
+		errorIcon = false,
+		onclose
+	}: ModalHeaderProps & { onclose: VoidFunction } = $props();
 </script>
 
-<div class="modal-header">
-    <div class="modal-header-icon">
-        <OctagonAlert size="32"/>
-    </div>
-	<div class="modal-header-title">{headerTitle}</div>
-</div>
+<header class="modal-header">
+	<div class="modal-header-title">
+		{#if errorIcon}
+			<span class="icon error material-icons-outlined">report</span>
+		{/if}
+		<h2>{title}</h2>
+	</div>
+	<button type="button" class="close-button material-icons-outlined" onclick={onclose}>close</button
+	>
+</header>
 
 <style>
-	.modal-header {
+	.modal-header,
+	.modal-header-title {
 		display: flex;
-		padding: 24px;
-		align-items: center;
+		justify-content: space-between;
 		gap: 16px;
+	}
+	.modal-header {
+		padding: 24px;
 		align-self: stretch;
-		border-radius: 16px 16px 0px 0px;
-		background: #fff;
 	}
-	.modal-header-icon {
-		color: #dc182c;
+
+	.modal-header-title > .icon {
+		color: var(--color-icon);
 		font-size: 32px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: normal;
 	}
+
 	.modal-header-title {
-		flex: 1 0 0;
-		color: #000;
-		/* medium/4 */
+		align-items: center;
+	}
+
+	.modal-header-title h2 {
 		font-size: 18px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 26px;
+		font-weight: 600;
+	}
+
+	.modal-header > .close-button {
+		background: none;
+		border: none;
+	}
+
+	.modal-header > .close-button:hover {
+		cursor: pointer;
+		color: #434952;
+	}
+
+	.modal-header > .close-button:focus {
+		outline: none;
+	}
+
+	.icon.error {
+		--color-icon: #dc182c;
 	}
 </style>

package/dist/Modal/ModalHeader.svelte.d.ts

@@ -1,6 +1,7 @@
-interface ModalHeaderProps {
-    headerTitle?: string;
-}
-declare const ModalHeader: import("svelte").Component<ModalHeaderProps, {}, "">;
+import type { ModalHeaderProps } from './modalState.svelte.js';
+type $$ComponentProps = ModalHeaderProps & {
+    onclose: VoidFunction;
+};
+declare const ModalHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type ModalHeader = ReturnType<typeof ModalHeader>;
 export default ModalHeader;

package/dist/Modal/modalState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface ModalProps extends ModalHeaderProps, ModalFooterProps {
+    showModal?: boolean;
+    width?: WidthModal;
+    children?: Snippet;
+    onclose?: VoidFunction;
+}
+export interface ModalHeaderProps {
+    title?: string;
+    errorIcon?: boolean;
+}
+export interface ModalFooterProps {
+    footer?: Snippet;
+}
+export type WidthModal = 'xs' | 'md' | 'lg' | 'xl';

package/dist/Modal/modalState.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/Notification/Notification.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { NotificationProps } from './notificationState.svelte';
+
+	let { title, disableBorder = false, content, type }: NotificationProps = $props();
+</script>
+
+<aside class="notification-container" class:border={!disableBorder}>
+	<span class="status-indicator {type}"></span>
+	<div class="notification-content">
+		{#if title}
+			<span class="title">{title}</span>
+		{/if}
+		{@render content()}
+	</div>
+</aside>
+
+<style>
+	.notification-container {
+		width: 100%;
+		height: 100%;
+		padding: 16px;
+		gap: 16px;
+		display: flex;
+	}
+
+	.border {
+		border: 1px solid #e0e5e8;
+		border-radius: 8px;
+	}
+
+	.status-indicator {
+		width: 8px;
+		border-radius: 4px;
+		background-color: var(--toast-bg);
+	}
+
+	.notification-content {
+		flex-direction: column;
+		flex: 1 1 0;
+		gap: 4px;
+		display: flex;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.title {
+		font-weight: 700;
+	}
+
+	.status-indicator.info {
+		--toast-bg: #472aff;
+	}
+
+	.status-indicator.warning {
+		--toast-bg: #e87d1e;
+	}
+
+	.status-indicator.danger {
+		--toast-bg: #dc182c;
+	}
+
+	.status-indicator.neutral {
+		--toast-bg: #6b7180;
+	}
+
+	.status-indicator.success {
+		--toast-bg: #008556;
+	}
+</style>

package/dist/Notification/Notification.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationProps } from './notificationState.svelte';
+declare const Notification: import("svelte").Component<NotificationProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

package/dist/Notification/notificationState.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface NotificationProps {
+    title?: string;
+    type: NotificationType;
+    disableBorder?: boolean;
+    content: Snippet;
+}
+export {};

package/dist/Notification/notificationState.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/ProgressPage/ProgressPage.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from '../index.js';
+
+	type ProgressPageProps = {
+		iconName: string;
+		title: string;
+		description?: string;
+		documentationUrl?: string;
+		onclick?: VoidFunction;
+		buttonText?: string;
+	};
+
+	let {
+		iconName,
+		title,
+		description = '',
+		documentationUrl = '',
+		onclick,
+		buttonText = 'Save'
+	}: ProgressPageProps = $props();
+</script>
+
+<article class="progress-page">
+	<span class="material-icons-outlined progress-icon">{iconName}</span>
+	<div class="progress-content">
+		<p class="progress-title">{title}</p>
+		{#if description}
+			<p class="progress-description">{description}</p>
+		{/if}
+		{#if documentationUrl}
+			<p class="progress-documentation">
+				To see more details check
+				<a rel="noreferrer" class="progress-link" href={documentationUrl} target="_blank">
+					our documentation.
+				</a>
+			</p>
+		{/if}
+	</div>
+
+	{#if onclick}
+		<Button {onclick}>{buttonText}</Button>
+	{/if}
+</article>
+
+<style>
+	.progress-page {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 24px;
+		max-width: 350px;
+		gap: 24px;
+	}
+
+	.progress-icon {
+		color: #472aff;
+		font-size: 32px;
+	}
+
+	.progress-content {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		gap: 8px;
+	}
+
+	.progress-title {
+		font-size: 18px;
+		font-weight: 700;
+		color: #000;
+		line-height: 1.4;
+	}
+
+	.progress-description,
+	.progress-documentation {
+		font-size: 14px;
+		color: #000;
+		line-height: 1.4;
+	}
+
+	.progress-link {
+		color: #472aff;
+		text-decoration: none;
+	}
+
+	.progress-link:hover {
+		text-decoration: underline;
+	}
+
+	.progress-link:focus {
+		outline: 2px solid #472aff;
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+</style>

package/dist/ProgressPage/ProgressPage.svelte.d.ts

@@ -0,0 +1,11 @@
+type ProgressPageProps = {
+    iconName: string;
+    title: string;
+    description?: string;
+    documentationUrl?: string;
+    onclick?: VoidFunction;
+    buttonText?: string;
+};
+declare const ProgressPage: import("svelte").Component<ProgressPageProps, {}, "">;
+type ProgressPage = ReturnType<typeof ProgressPage>;
+export default ProgressPage;