@softwareone/spi-sv5-library 1.1.0 → 1.2.0

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/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/ErrorPage/ErrorPage.svelte

@@ -77,6 +77,7 @@
 
 	.feedback-detail > h1 {
 		font-size: 24px;
+		font-weight: bold;
 	}
 
 	.feedback-detail .link {

package/dist/Form/Input/Input.svelte

@@ -1,6 +1,7 @@
 <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';
 
@@ -12,6 +13,7 @@
 		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();
 
@@ -48,22 +51,11 @@
 </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'
 		]}
 	>
@@ -95,7 +87,7 @@
 					type === 'password' && hasStatus && 'form-input-icon-container-password'
 				]}
 			>
-				{#if hasStatus}
+				{#if !disableValidationColor && hasStatus}
 					<InputIcon type={isInvalid ? 'error' : 'success'} isDateInput={showDatePicker} />
 				{/if}
 
@@ -127,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;
 	}
@@ -252,7 +230,7 @@
 		right: 43px;
 		top: 0;
 		bottom: 0;
-		width: 1px;
+		width: 0.5px;
 		background-color: #6b7180;
 		z-index: 1;
 	}
@@ -320,7 +298,7 @@
 		left: 0;
 		top: -8px;
 		bottom: -8px;
-		width: 1px;
+		width: 0.5px;
 		background-color: #6b7180;
 		z-index: 1;
 	}

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

@@ -8,6 +8,7 @@ interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     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;