@softwareone/spi-sv5-library 0.1.3 → 1.0.0

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,112 @@
 <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';
+	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);
-	}
-
-	.btn-outline-primary:hover,
-	.btn-outline-primary:focus {
-		background: var(--brand-primary, #eaecff);
-		cursor: pointer;
-	}
-
-	.btn-outline-primary:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
+		border: 1px solid #472aff;
+		background: #fff;
+		color: #472aff;
 	}
 
-	.btn-outline-primary:disabled {
-		background: var(--brand-primary, #e0e5e8);
-		color: var(--brand-white, #6b7180);
-		cursor: not-allowed;
+	.btn-outline-primary:hover:not(:disabled),
+	.btn-outline-primary:focus:not(:disabled) {
+		background: #eaecff;
 	}
 
 	.btn-primary-danger {
-		background: var(--brand-primary, #dc182c);
-		color: var(--brand-white, #fff);
+		background: #dc182c;
+		color: #fff;
 	}
 
-	.btn-primary-danger:hover,
-	.btn-primary-danger:focus {
-		background: var(--brand-primary, #bb1425);
-		cursor: pointer;
-	}
-
-	.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;
-	}
-
-	.btn-secondary-danger:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
+		background: #fce8ea;
+		color: #dc182c;
 	}
 
-	.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);
-	}
-
-	.btn-outline-danger:hover,
-	.btn-outline-danger:focus {
-		background: var(--brand-primary, #fce8ea);
-		cursor: pointer;
+		border: 1px solid #dc182c;
+		background: #fff;
+		color: #dc182c;
 	}
 
-	.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';
+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, {}, "">;

package/dist/Chips/Chips.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import { ChipType } from '../index.js';
+
 	interface ChipsProps {
-		type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+		type?: ChipType;
 		text?: string;
 	}
 
 	let { type, text }: ChipsProps = $props();
 
-	type = type || 'info';
+	type = type || ChipType.Info;
 	text = text || type.charAt(0).toUpperCase() + type.slice(1); // Default to capitalized type
 
 	let className = `chip chip-${type}`;
@@ -17,61 +19,56 @@
 </div>
 
 <style>
-	/* Base chip styles */
 	.chip {
 		display: inline-flex;
 		padding: 2px 8px;
 		align-items: center;
 		gap: 8px;
 		border-radius: 4px;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-
-		/* Default colors (can be overridden by specific types) */
-		background: var(--chip-bg, #eaecff);
-		color: var(--chip-text, #3520bf);
+		line-height: 20px;
+		background: var(--chip-bg);
+		color: var(--chip-text);
 	}
 
 	.chip:hover {
-		background: var(--chip-hover, #959bff);
+		background: var(--chip-hover);
 	}
 
 	.chip:focus {
-		background: var(--chip-hover, #959bff);
-		box-shadow: 0px 0px 0px 3px var(--chip-hover, #959bff);
+		background: var(--chip-hover);
+		box-shadow: 0px 0px 0px 3px var(--chip-hover);
 	}
 
-	/* Type-specific styles using CSS variables */
 	.chip-info {
-		--chip-bg: var(--alerts-info-1, #eaecff);
-		--chip-text: var(--alerts-info-3, #3520bf);
-		--chip-hover: var(--alerts-info-2, #959bff);
+		--chip-bg: #eaecff;
+		--chip-text: #3520bf;
+		--chip-hover: #959bff;
 	}
 
 	.chip-success {
-		--chip-bg: var(--alerts-success-1, #e6f9f2);
-		--chip-text: var(--alerts-success-3, #00784d);
-		--chip-hover: var(--alerts-success-2, #80e1ae);
+		--chip-bg: #e6f9f2;
+		--chip-text: #00784d;
+		--chip-hover: #80e1ae;
 	}
 
 	.chip-warning {
-		--chip-bg: var(--alerts-warning-1, #fdf2e9);
-		--chip-text: var(--alerts-warning-3, #a15d26);
-		--chip-hover: var(--alerts-warning-2, #f1b178);
+		--chip-bg: #fdf2e9;
+		--chip-text: #a15d26;
+		--chip-hover: #f1b178;
 	}
 
 	.chip-error {
-		--chip-bg: var(--alerts-error-1, #fce8ea);
-		--chip-text: var(--alerts-error-3, #bb1425);
-		--chip-hover: var(--alerts-error-2, #ee8c96);
+		--chip-bg: #fce8ea;
+		--chip-text: #bb1425;
+		--chip-hover: #ee8c96;
 	}
 
 	.chip-neutral {
-		--chip-bg: var(--alerts-neutral-1, #f4f6f8);
-		--chip-text: var(--alerts-neutral-3, #434952);
-		--chip-hover: var(--alerts-neutral-2, #e0e5e8);
+		--chip-bg: #f4f6f8;
+		--chip-text: #434952;
+		--chip-hover: #e0e5e8;
 	}
 </style>

package/dist/Chips/Chips.svelte.d.ts

@@ -1,5 +1,6 @@
+import { ChipType } from '../index.js';
 interface ChipsProps {
-    type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    type?: ChipType;
     text?: string;
 }
 declare const Chips: import("svelte").Component<ChipsProps, {}, "">;

package/dist/Chips/chipsState.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare enum ChipType {
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Neutral = "neutral"
+}

package/dist/Chips/chipsState.svelte.js

@@ -0,0 +1,8 @@
+export var ChipType;
+(function (ChipType) {
+    ChipType["Info"] = "info";
+    ChipType["Success"] = "success";
+    ChipType["Warning"] = "warning";
+    ChipType["Error"] = "error";
+    ChipType["Neutral"] = "neutral";
+})(ChipType || (ChipType = {}));

package/dist/ErrorPage/ErrorPage.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	import { StatusCodes } from 'http-status-codes';
+
+	import FeedbackIcon from '../assets/icons/feedback.svg';
+	import { Button } from '../index.js';
+
+	interface ErrorPageProps {
+		status: StatusCodes;
+		title?: string;
+	}
+
+	let { status, title }: ErrorPageProps = $props();
+
+	const errorTitle: Record<number, string> = {
+		[StatusCodes.NOT_FOUND]: 'Page not found',
+		[StatusCodes.FORBIDDEN]: 'Access denied',
+		[StatusCodes.INTERNAL_SERVER_ERROR]: 'An unexpected error occurred'
+	};
+</script>
+
+<section class="feedback-container">
+	<img src={FeedbackIcon} class="feedback-icon" alt="Feedback icon" />
+
+	<div class="feedback-detail">
+		<h1>{title || errorTitle[status]}</h1>
+		{#if status === StatusCodes.NOT_FOUND}
+			<div>
+				<p>We couldn’t find the page:</p>
+				<p class="link">{page.url}</p>
+			</div>
+		{/if}
+	</div>
+
+	<p class="feedback-information">
+		You can get to safety by either going to our homepage, by going to the previous page or by
+		<br />
+		<span class="link">contacting our support</span>.
+	</p>
+
+	<div class="feedback-footer">
+		<Button variant="outline" onclick={() => window.history.back()}>Back</Button>
+		<Button variant="primary" onclick={() => goto(page.url.origin)}>Go home</Button>
+	</div>
+</section>
+
+<style>
+	.feedback-container {
+		display: flex;
+		flex-direction: column;
+		margin-left: auto;
+		margin-right: auto;
+		width: 350px;
+		padding: 24px;
+		gap: 32px;
+		border-radius: 16px;
+		background-color: #fff;
+		box-shadow:
+			0px 1px 16px rgba(107, 113, 128, 0.1),
+			0px 1px 3px rgba(107, 113, 128, 0.2);
+		align-items: center;
+		text-align: center;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.feedback-icon {
+		width: 100px;
+		height: 100px;
+	}
+
+	.feedback-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.feedback-detail > h1 {
+		font-size: 24px;
+	}
+
+	.feedback-detail .link {
+		word-break: break-all;
+	}
+
+	.feedback-footer {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-self: stretch;
+	}
+
+	.link {
+		color: #472aff;
+	}
+</style>