@softwareone/spi-sv5-library 1.0.0 → 1.2.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/Accordion/Accordion.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface AccordionProps {
+		title: string;
+		disableBorder?: boolean;
+		content: Snippet;
+	}
+
+	let { title, disableBorder = false, content }: AccordionProps = $props();
+
+	let isOpen = $state(false);
+
+	const toggleAccordion = () => {
+		isOpen = !isOpen;
+	};
+</script>
+
+<aside class="accordion-container" class:border={!disableBorder}>
+	<div class="accordion-content">
+		<section class="header" class:is-open={isOpen}>
+			<button class="button" onclick={toggleAccordion}>
+				<span class="material-icons-outlined icon-span">
+					{isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}
+				</span>
+			</button>
+
+			<h2 class="header-title">{title}</h2>
+		</section>
+
+		{#if isOpen}
+			{@render content()}
+		{/if}
+	</div>
+</aside>
+
+<style>
+	.accordion-container {
+		width: 100%;
+		height: 100%;
+		padding: 32px;
+		display: flex;
+
+		--border-color: #e0e5e8;
+		--color: #472aff;
+	}
+
+	.accordion-content {
+		flex-direction: column;
+		flex: 1 1 0;
+		gap: 4px;
+		display: flex;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.is-open {
+		padding-bottom: 10px;
+	}
+
+	.header {
+		gap: 16px;
+		display: inline-flex;
+	}
+
+	.header-title {
+		font-weight: 600;
+	}
+
+	.border {
+		border: 1px solid var(--border-color);
+		border-radius: 8px;
+	}
+
+	.button {
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-span {
+		color: var(--color);
+		font-size: 20px;
+	}
+</style>

package/dist/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface AccordionProps {
+    title: string;
+    disableBorder?: boolean;
+    content: Snippet;
+}
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/Button/Button.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	type Variant = 'primary' | 'secondary' | 'outline';
+	type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 	type VariantColor = 'primary' | 'danger';
 
 	interface ButtonProps extends HTMLButtonAttributes {
@@ -78,6 +78,17 @@
 		background: #eaecff;
 	}
 
+	.btn-outline-none-primary {
+		border: none;
+		background: #fff;
+		color: #472aff;
+	}
+
+	.btn-outline-none-primary:hover:not(:disabled),
+	.btn-outline-none-primary:focus:not(:disabled) {
+		background: #e0e5e8;
+	}
+
 	.btn-primary-danger {
 		background: #dc182c;
 		color: #fff;

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'outline';
+type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 type VariantColor = 'primary' | 'danger';
 interface ButtonProps extends HTMLButtonAttributes {
     variant?: Variant;

package/dist/Card/Card.svelte

@@ -2,24 +2,20 @@
 	import type { Snippet } from 'svelte';
 
 	interface CardProps {
-		alignItems?: 'left' | 'center' | 'right';
 		type?: 'layout' | 'highlight';
 		children?: Snippet;
 	}
 
-	let { alignItems = 'left', type = 'layout', children }: CardProps = $props();
+	let { type = 'layout', children }: CardProps = $props();
 </script>
 
-<div class="card card-{type}" data-align={alignItems}>
+<div class="card card-{type}">
 	{@render children?.()}
 </div>
 
 <style>
 	.card {
-		display: inline-flex;
-		flex-direction: column;
 		width: 100%;
-		min-width: 222px;
 		min-height: var(--card-min-height, auto);
 		background: #fff;
 		margin-bottom: 24px;
@@ -33,14 +29,4 @@
 	.card-layout {
 		--card-min-height: 100vh;
 	}
-
-	.card[data-align='left'] {
-		align-items: flex-start;
-	}
-	.card[data-align='center'] {
-		align-items: center;
-	}
-	.card[data-align='right'] {
-		align-items: flex-end;
-	}
 </style>

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

@@ -1,6 +1,5 @@
 import type { Snippet } from 'svelte';
 interface CardProps {
-    alignItems?: 'left' | 'center' | 'right';
     type?: 'layout' | 'highlight';
     children?: Snippet;
 }

package/dist/Chips/Chips.svelte

@@ -1,74 +1,71 @@
 <script lang="ts">
-	import { ChipType } from '../index.js';
+	import { ChipType } from './chipsState.svelte.js';
 
 	interface ChipsProps {
 		type?: ChipType;
 		text?: string;
 	}
 
-	let { type, text }: ChipsProps = $props();
-
-	type = type || ChipType.Info;
-	text = text || type.charAt(0).toUpperCase() + type.slice(1); // Default to capitalized type
-
-	let className = `chip chip-${type}`;
+	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: ChipsProps =
+		$props();
 </script>
 
-<div class={className}>
+<div class="chip {type}">
 	{text}
 </div>
 
 <style>
 	.chip {
-		display: inline-flex;
-		padding: 2px 8px;
-		align-items: center;
-		gap: 8px;
-		border-radius: 4px;
+		display: inline-block;
 		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
+		font-weight: 500;
 		line-height: 20px;
 		background: var(--chip-bg);
 		color: var(--chip-text);
+		padding: 2px 8px;
+		border-radius: 4px;
+		cursor: default;
 	}
 
 	.chip:hover {
-		background: var(--chip-hover);
+		background: var(--chip-bg-hover);
 	}
 
 	.chip:focus {
-		background: var(--chip-hover);
-		box-shadow: 0px 0px 0px 3px var(--chip-hover);
+		box-shadow: 0px 0px 0px 3px #959bff;
 	}
-
-	.chip-info {
-		--chip-bg: #eaecff;
+	.chip.info {
 		--chip-text: #3520bf;
-		--chip-hover: #959bff;
+		--chip-bg: #eaecff;
+		--chip-text-hover: #2b1999;
+		--chip-bg-hover: #959bff;
 	}
 
-	.chip-success {
-		--chip-bg: #e6f9f2;
+	.chip.success {
 		--chip-text: #00784d;
-		--chip-hover: #80e1ae;
+		--chip-bg: #e6f9f2;
+		--chip-text-hover: #005838;
+		--chip-bg-hover: #80e1ae;
 	}
 
-	.chip-warning {
-		--chip-bg: #fdf2e9;
+	.chip.warning {
 		--chip-text: #a15d26;
-		--chip-hover: #f1b178;
+		--chip-bg: #fdf2e9;
+		--chip-text-hover: #733f11;
+		--chip-bg-hover: #f1b178;
 	}
 
-	.chip-error {
-		--chip-bg: #fce8ea;
+	.chip.error {
 		--chip-text: #bb1425;
-		--chip-hover: #ee8c96;
+		--chip-bg: #fce8ea;
+		--chip-text-hover: #8f101d;
+		--chip-bg-hover: #ee8c96;
 	}
 
-	.chip-neutral {
-		--chip-bg: #f4f6f8;
+	.chip.neutral {
 		--chip-text: #434952;
-		--chip-hover: #e0e5e8;
+		--chip-bg: #f4f6f8;
+		--chip-text-hover: #25282d;
+		--chip-bg-hover: #e0e5e8;
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import { ChipType } from '../index.js';
+import { ChipType } from './chipsState.svelte.js';
 interface ChipsProps {
     type?: ChipType;
     text?: string;

package/dist/ErrorPage/ErrorPage.svelte

@@ -2,22 +2,20 @@
 	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;
+		status: number;
 		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'
+		[404]: 'Page not found',
+		[403]: 'Access denied',
+		[500]: 'An unexpected error occurred'
 	};
 </script>
 
@@ -26,7 +24,7 @@
 
 	<div class="feedback-detail">
 		<h1>{title || errorTitle[status]}</h1>
-		{#if status === StatusCodes.NOT_FOUND}
+		{#if status === 404}
 			<div>
 				<p>We couldn’t find the page:</p>
 				<p class="link">{page.url}</p>
@@ -79,6 +77,7 @@
 
 	.feedback-detail > h1 {
 		font-size: 24px;
+		font-weight: bold;
 	}
 
 	.feedback-detail .link {

package/dist/ErrorPage/ErrorPage.svelte.d.ts

@@ -1,6 +1,5 @@
-import { StatusCodes } from 'http-status-codes';
 interface ErrorPageProps {
-    status: StatusCodes;
+    status: number;
     title?: string;
 }
 declare const ErrorPage: import("svelte").Component<ErrorPageProps, {}, "">;

package/dist/Form/Input/Input.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import InputIcon from './InputIcon.svelte';
+	import Label from '../Label.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 
 	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
 		label?: string;
 		type?: InputType;
-		value?: string | number;
+		value?: string | number | null;
 		optional?: boolean;
-		error?: string;
+		error?: string | string[];
 		description?: string;
 		currency?: string;
+		disableValidationColor?: boolean;
 	}
 
 	let {
@@ -19,14 +21,15 @@
 		type = 'text',
 		value = $bindable(''),
 		optional = false,
+		required = false,
 		error,
 		description,
 		currency,
 		id,
 		disabled,
 		readonly,
-		required,
 		oninput,
+		disableValidationColor = false,
 		...props
 	}: InputProps = $props();
 
@@ -45,39 +48,22 @@
 		money: 'number',
 		password: isPasswordVisible ? 'text' : 'password'
 	});
-
-	const handleInput = (event: Event): void => {
-		const target = event.target as HTMLInputElement;
-		value = type === 'number' || type === 'money' ? target.valueAsNumber : target.value;
-		oninput?.(event as Event & { currentTarget: EventTarget & HTMLInputElement });
-	};
 </script>
 
 <div class="form-container">
-	{#if label}
-		<div class="form-label-container">
-			<label for={inputId}>{label}</label>
-			{#if required}
-				<span class="form-label-required">Required</span>
-			{:else if optional}
-				<span class="form-label-optional">Optional</span>
-			{/if}
-		</div>
-	{/if}
-
+	<Label {label} {id} {optional} {required} />
 	<div
 		class={[
 			'form-input-wrapper',
-			isInvalid && 'error',
-			isValid && 'success',
+			!disableValidationColor && [isInvalid && 'error', isValid && 'success'],
 			type === 'money' && currency && 'money-with-icon'
 		]}
 	>
 		<input
+			bind:value
 			{...props}
 			id={inputId}
 			type={transformationType[type] ?? type}
-			{value}
 			{disabled}
 			{readonly}
 			class={[
@@ -88,7 +74,6 @@
 				showDatePicker && 'form-input-date'
 			]}
 			aria-invalid={isInvalid}
-			oninput={handleInput}
 		/>
 
 		{#if type === 'money' && currency}
@@ -102,7 +87,7 @@
 					type === 'password' && hasStatus && 'form-input-icon-container-password'
 				]}
 			>
-				{#if hasStatus}
+				{#if !disableValidationColor && hasStatus}
 					<InputIcon type={isInvalid ? 'error' : 'success'} isDateInput={showDatePicker} />
 				{/if}
 
@@ -120,7 +105,7 @@
 	{/if}
 	{#if isInvalid}
 		<p class="form-message form-message-error">
-			{error}
+			{Array.isArray(error) ? error[0] : error}
 		</p>
 	{/if}
 </div>
@@ -134,20 +119,6 @@
 		line-height: 20px;
 	}
 
-	.form-label-container {
-		display: flex;
-		gap: 8px;
-		font-weight: 500;
-	}
-
-	.form-label-optional {
-		color: #6b7180;
-	}
-
-	.form-label-required {
-		color: #dc2626;
-	}
-
 	.form-message {
 		font-size: 12px;
 	}
@@ -259,7 +230,7 @@
 		right: 43px;
 		top: 0;
 		bottom: 0;
-		width: 1px;
+		width: 0.5px;
 		background-color: #6b7180;
 		z-index: 1;
 	}
@@ -327,7 +298,7 @@
 		left: 0;
 		top: -8px;
 		bottom: -8px;
-		width: 1px;
+		width: 0.5px;
 		background-color: #6b7180;
 		z-index: 1;
 	}
@@ -351,7 +322,9 @@
 		border-color: #008556;
 	}
 
-	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
+	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(
+			:has(.form-input:read-only)
+		),
 	.form-input-wrapper.success:focus-within {
 		border-color: #10b981;
 	}

package/dist/Form/Input/Input.svelte.d.ts

@@ -3,11 +3,12 @@ type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     label?: string;
     type?: InputType;
-    value?: string | number;
+    value?: string | number | null;
     optional?: boolean;
-    error?: string;
+    error?: string | string[];
     description?: string;
     currency?: string;
+    disableValidationColor?: boolean;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Form/Label.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface LabelProps {
+		label?: string;
+		id?: string | null;
+		required?: boolean | null;
+		optional?: boolean;
+	}
+
+	let { label, id, required, optional }: LabelProps = $props();
+</script>
+
+{#if label}
+	<div class="form-label-container">
+		<label for={id}>{label}</label>
+		{#if required}
+			<span class="form-label-required">Required</span>
+		{:else if optional}
+			<span class="form-label-optional">Optional</span>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.form-label-container {
+		display: flex;
+		gap: 8px;
+		font-weight: 500;
+	}
+
+	.form-label-optional {
+		color: #6b7180;
+	}
+
+	.form-label-required {
+		color: #dc2626;
+	}
+</style>

package/dist/Form/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+interface LabelProps {
+    label?: string;
+    id?: string | null;
+    required?: boolean | null;
+    optional?: boolean;
+}
+declare const Label: import("svelte").Component<LabelProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;