@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/README.md

@@ -15,32 +15,88 @@ npm install @softwareone/swo-spi-svelte5-library
 Import the components you need into your Svelte application:
 
 ```javascript
-import { Button, 
-		 Modal, 
-		 Spinner, 
-		 Toaster, 
-		 addToast, 
-		 type Toast, 
-		 Toggle, 
-		 Header, 
-		 Chips,
-		 Breadcrumbs,
-		 addBreadcrumbsNameMap,
-		 type BreadcrumbsNameMap,
-		 Footer,
-		 Card
-		 } from '@softwareone/swo-spi-svelte5-library';
+import {
+	Avatar,
+	Breadcrumbs,
+	Button,
+	Card,
+	Chips,
+	ErrorPage,
+	Footer,
+	Header,
+	HeaderAccount,
+	HeaderLoader,
+	HeaderLogo,
+	HighlightPanel,
+	Input,
+	Menu,
+	Modal,
+	ProgressWizard,
+	Sidebar,
+	Tabs,
+	TextArea,
+	Toaster,
+	Toggle,
+	Tooltip
+} from '@softwareone/swo-spi-svelte5-library';
+```
+
+Import the types you need into your Svelte application:
+
+```javascript
+import {
+	type BreadcrumbsNameMap,
+	type HighlightPanelColumn,
+	type MenuItem,
+	type ModalProps,
+	type ProgressWizardStep,
+	type Tab,
+	type Toast
+} from '@softwareone/swo-spi-svelte5-library';
 ```
 
 # List of components
 
+- Avatar
+- Breadcrumbs
 - Button
+- Card
+- Chips
+- ErrorPage
+- Footer
+- Form
+  - Input
+  - TextArea
+  - Toggle
+- Header (including a loader)
+  - HeaderAccount
+  - HeaderLoader
+  - HeaderLogo
+- HighlightPanel
+- Menu
+  - Sidebar
 - Modal
+- ProgressWizard
 - Spinner
+- Tabs
 - Toaster
-- Toggle
-- Header (including a loader)
+- Tooltip
+
+# List of types per component
+
 - Breadcrumbs
+  - BreadcrumbsNameMap
 - Chips
-- Footer
-- Card
+  - ChipType
+- HighlightPanel
+  - ColumnType
+  - HighlightPanelColumn
+  - ImageType
+- Menu
+  - MenuItem
+- Modal
+  - ModalProps
+- ProgressWizard
+  - ProgressWizardStep
+- Tab
+- Toast

package/dist/Avatar/Avatar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	type BackgroundColor = '#472AFF' | '#25282D';
+	type TextColor = '#333840' | '#FFFFFF';
+
+	interface AvatarProps {
+		text: string;
+		backgroundColor?: BackgroundColor;
+		textColor?: TextColor;
+	}
+
+	let { text, backgroundColor = '#25282D', textColor = '#FFFFFF' }: AvatarProps = $props();
+
+	const avatarSrc = (name: string): string => {
+		const defaultValue = 'SO';
+		if (!name) return defaultValue;
+		const [lastName, firstName] = name.split(' ');
+		return `${firstName[0]}${lastName[0]}`.toUpperCase();
+	};
+</script>
+
+<svg class="avatar" width="40" height="40" viewBox="0 0 40 40">
+	<circle cx="20" cy="20" r="20" fill={backgroundColor} />
+	<text x="20" y="25" text-anchor="middle" font-size="14" font-weight="normal" fill={textColor}>
+		{avatarSrc(text)}
+	</text>
+</svg>
+
+<style>
+	.avatar {
+		min-width: 40px;
+		min-height: 40px;
+	}
+</style>

package/dist/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,10 @@
+type BackgroundColor = '#472AFF' | '#25282D';
+type TextColor = '#333840' | '#FFFFFF';
+interface AvatarProps {
+    text: string;
+    backgroundColor?: BackgroundColor;
+    textColor?: TextColor;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Breadcrumbs/Breadcrumbs.svelte

@@ -32,56 +32,46 @@
 
 <style>
 	.breadcrumb {
-		list-style: none;
 		display: inline-flex;
 		align-items: flex-end;
 		gap: 9px;
 		margin-left: 16px;
 		padding: 8px 16px;
-		color: var(--brand-primary, #472aff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #472aff;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 		text-decoration-line: none;
 	}
+
 	.breadcrumb li::after {
 		content: '/';
 		margin-left: 8px;
-		color: var(--brand-primary, #472aff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #472aff;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
+
 	.breadcrumb li:last-child::after {
 		content: '';
 	}
+
 	.breadcrumbActive {
-		color: var(--brand-type, #000);
-		/* bold/4 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #000;
 		font-size: 18px;
 		font-style: normal;
 		font-weight: 700;
-		line-height: 20px; /* 144.444% */
-	}
-	/* Prevent the visited (purple) color */
-	.breadcrumb a {
-		color: inherit; /* Keeps the same color as the parent */
-		text-decoration: none; /* Optional: removes underline */
+		line-height: 20px;
 	}
 
 	.breadcrumb a:visited {
-		color: inherit; /* Ensures visited links don't change color */
+		color: inherit;
 	}
 
 	.breadcrumb a:hover {
-		text-decoration: none; /* Optional: Add an underline on hover */
 		color: #2b1999;
 	}
 </style>

package/dist/Button/Button.svelte

@@ -1,172 +1,123 @@
 <script lang="ts">
-	interface ButtonProps {
-		type?: 'primary' | 'secondary' | 'outline';
-		variant?: 'primary' | 'danger';
-		disabled?: boolean;
-		onClick?: () => void;
-		name?: string;
-	}
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	let { type, variant, disabled, onClick, name }: ButtonProps = $props();
+	type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
+	type VariantColor = 'primary' | 'danger';
 
-	type = type || 'primary';
-	variant = variant || 'primary';
-	disabled = disabled || false;
-	name = name || 'Button';
+	interface ButtonProps extends HTMLButtonAttributes {
+		variant?: Variant;
+		variantColor?: VariantColor;
+		children: Snippet;
+	}
 
-	let className = `btn-${type}-${variant}`;
+	let { variant = 'primary', variantColor = 'primary', children, ...props }: ButtonProps = $props();
 </script>
 
-<button class={className} {disabled} onclick={onClick}>{name}</button>
+<button class="btn btn-{variant}-{variantColor}" {...props}>
+	{@render children()}
+</button>
 
 <style>
-	.btn-primary-primary,
-	.btn-secondary-primary,
-	.btn-outline-primary,
-	.btn-primary-danger,
-	.btn-secondary-danger,
-	.btn-outline-danger {
-		display: inline-flex;
+	.btn {
 		padding: 8px 16px;
-		align-items: flex-start;
-		gap: 8px;
 		border-radius: 8px;
 		border: none;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-	}
-
-	.btn-primary-primary {
-		background: var(--brand-primary, #472aff);
-		color: var(--brand-white, #fff);
+		line-height: 20px;
 	}
 
-	.btn-primary-primary:hover,
-	.btn-primary-primary:focus {
-		background: var(--brand-primary, #3520bf);
+	.btn:hover:not(:disabled),
+	.btn:focus:not(:disabled) {
 		cursor: pointer;
 	}
 
-	.btn-primary-primary:focus {
+	.btn:focus:not(:disabled),
+	.btn:focus-visible:not(:disabled) {
 		box-shadow: 0px 0px 0px 3px #959bff;
+		outline: none;
 	}
 
-	.btn-primary-primary:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
+	.btn:disabled {
+		background: #e0e5e8;
+		color: #6b7180;
 		cursor: not-allowed;
 	}
 
-	.btn-secondary-primary {
-		background: var(--brand-primary, #eaecff);
-		color: var(--brand-white, #472aff);
+	.btn-primary-primary {
+		background: #472aff;
+		color: #fff;
 	}
 
-	.btn-secondary-primary:hover,
-	.btn-secondary-primary:focus {
-		background: var(--brand-primary, #472aff);
-		color: var(--brand-white, #fff);
-		cursor: pointer;
+	.btn-primary-primary:hover:not(:disabled),
+	.btn-primary-primary:focus:not(:disabled) {
+		background: #3520bf;
 	}
 
-	.btn-secondary-primary:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
+	.btn-secondary-primary {
+		background: #eaecff;
+		color: #472aff;
 	}
 
-	.btn-secondary-primary:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
+	.btn-secondary-primary:hover:not(:disabled),
+	.btn-secondary-primary:focus:not(:disabled) {
+		background: #472aff;
+		color: #fff;
 	}
 
 	.btn-outline-primary {
-		border: 1px solid var(--brand-primary, #472aff);
-		background: var(--brand-primary, #fff);
-		color: var(--brand-primary, #472aff);
+		border: 1px solid #472aff;
+		background: #fff;
+		color: #472aff;
 	}
 
-	.btn-outline-primary:hover,
-	.btn-outline-primary:focus {
-		background: var(--brand-primary, #eaecff);
-		cursor: pointer;
+	.btn-outline-primary:hover:not(:disabled),
+	.btn-outline-primary:focus:not(:disabled) {
+		background: #eaecff;
 	}
 
-	.btn-outline-primary:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
+	.btn-outline-none-primary {
+		border: none;
+		background: #fff;
+		color: #472aff;
 	}
 
-	.btn-outline-primary:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
+	.btn-outline-none-primary:hover:not(:disabled),
+	.btn-outline-none-primary:focus:not(:disabled) {
+		background: #e0e5e8;
 	}
 
 	.btn-primary-danger {
-		background: var(--brand-primary, #dc182c);
-		color: var(--brand-white, #fff);
-	}
-
-	.btn-primary-danger:hover,
-	.btn-primary-danger:focus {
-		background: var(--brand-primary, #bb1425);
-		cursor: pointer;
+		background: #dc182c;
+		color: #fff;
 	}
 
-	.btn-primary-danger:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
-	}
-
-	.btn-primary-danger:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
+	.btn-primary-danger:hover:not(:disabled),
+	.btn-primary-danger:focus:not(:disabled) {
+		background: #bb1425;
 	}
 
 	.btn-secondary-danger {
-		background: var(--brand-primary, #fce8ea);
-		color: var(--brand-white, #dc182c);
-	}
-
-	.btn-secondary-danger:hover,
-	.btn-secondary-danger:focus {
-		background: var(--brand-primary, #dc182c);
-		color: var(--brand-white, #fff);
-		cursor: pointer;
+		background: #fce8ea;
+		color: #dc182c;
 	}
 
-	.btn-secondary-danger:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
-	}
-
-	.btn-secondary-danger:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
+	.btn-secondary-danger:hover:not(:disabled),
+	.btn-secondary-danger:focus:not(:disabled) {
+		background: #dc182c;
+		color: #fff;
 	}
 
 	.btn-outline-danger {
-		border: 1px solid var(--brand-primary, #dc182c);
-		background: var(--brand-primary, #fff);
-		color: var(--brand-primary, #dc182c);
+		border: 1px solid #dc182c;
+		background: #fff;
+		color: #dc182c;
 	}
 
-	.btn-outline-danger:hover,
-	.btn-outline-danger:focus {
-		background: var(--brand-primary, #fce8ea);
-		cursor: pointer;
-	}
-
-	.btn-outline-danger:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
-	}
-
-	.btn-outline-danger:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
-		border: none;
+	.btn-outline-danger:hover:not(:disabled),
+	.btn-outline-danger:focus:not(:disabled) {
+		background: #fce8ea;
 	}
 </style>

package/dist/Button/Button.svelte.d.ts

@@ -1,9 +1,11 @@
-interface ButtonProps {
-    type?: 'primary' | 'secondary' | 'outline';
-    variant?: 'primary' | 'danger';
-    disabled?: boolean;
-    onClick?: () => void;
-    name?: string;
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
+type VariantColor = 'primary' | 'danger';
+interface ButtonProps extends HTMLButtonAttributes {
+    variant?: Variant;
+    variantColor?: VariantColor;
+    children: Snippet;
 }
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/Card/Card.svelte

@@ -3,70 +3,44 @@
 
 	interface CardProps {
 		alignItems?: 'left' | 'center' | 'right';
-		type?: 'default' | 'layout';
+		type?: 'layout' | 'highlight';
 		children?: Snippet;
 	}
 
-	let { alignItems, type, children }: CardProps = $props();
-
-	alignItems = alignItems ?? 'left';
-	type = type ?? 'default';
-
-	const getCardType = (type: string): string => {
-		const types: Record<string, string> = {
-			layout: 'card-layout',
-			default: 'card'
-		};
-		return types[type] || 'card'; // Default to card if type is unknown
-	};
+	let { alignItems = 'left', type = 'layout', children }: CardProps = $props();
 </script>
 
-<div
-	class={getCardType(type)}
-	data-align={alignItems}
->
-	<div class="card-content">
-		{@render children?.()}
-	</div>
+<div class="card card-{type}" data-align={alignItems}>
+	{@render children?.()}
 </div>
 
 <style>
-	.card,
-	.card-layout {
+	.card {
 		display: inline-flex;
-		margin-left: 24px;
-		margin-right: 48px;
-		margin-bottom: 24px;
-		height: calc(100vh);
-		min-width: 222px;
-		min-height: 222px;
 		flex-direction: column;
-		background: var(--brand-white, #fff);
-		border-radius: var(--Card-radius, 24px);
+		width: 100%;
+		min-width: 222px;
+		min-height: var(--card-min-height, auto);
+		background: #fff;
+		margin-bottom: 24px;
+		padding: 24px;
+		border-radius: 16px;
 		box-shadow:
-			0px 1px 16px 0px rgba(107, 113, 128, 0.1),
-			0px 1px 3px 0px rgba(107, 113, 128, 0.2);
+			0px 1px 16px rgba(107, 113, 128, 0.1),
+			0px 1px 3px rgba(107, 113, 128, 0.2);
 	}
 
 	.card-layout {
-		height: calc(100vh);
-		width: calc(100% - 48px);
+		--card-min-height: 100vh;
 	}
 
-	.card[data-align='left'],
-	.card-layout[data-align='left'] {
+	.card[data-align='left'] {
 		align-items: flex-start;
 	}
-	.card[data-align='center'],
-	.card-layout[data-align='center'] {
+	.card[data-align='center'] {
 		align-items: center;
 	}
-	.card[data-align='right'],
-	.card-layout[data-align='right'] {
+	.card[data-align='right'] {
 		align-items: flex-end;
 	}
-
-	.card-content {
-		padding: 24px;
-	}
 </style>

package/dist/Card/Card.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface CardProps {
     alignItems?: 'left' | 'center' | 'right';
-    type?: 'default' | 'layout';
+    type?: 'layout' | 'highlight';
     children?: Snippet;
 }
 declare const Card: import("svelte").Component<CardProps, {}, "">;