@softwareone/spi-sv5-library 0.1.2 → 1.0.0

package/dist/Menu/Sidebar.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { MenuItem } from './SidebarState.svelte';
+	import MenuItemSidebar from './MenuItem.svelte';
+
+	interface sidebarProps {
+		categoryTitle: string;
+		menuItems: MenuItem[];
+	}
+
+	let { sidebarItems }: { sidebarItems: sidebarProps[] } = $props();
+	let isCollapsed: boolean = $state(false);
+	let selectedItem: MenuItem | null = $state(null);
+
+	const toggleSidebar = () => {
+		isCollapsed = !isCollapsed;
+	};
+</script>
+
+<aside
+	class={['side-menu', isCollapsed ? 'collapsed' : 'expanded']}
+	transition:fade|global={{ delay: 50, duration: 200 }}
+>
+	<section class="menu-content">
+		<header class="header">
+			<section class="menu-header">
+				<div class="menu-title" class:hidden={isCollapsed}>
+					<div class="menu">
+						<h2 class="menu-span">Menu</h2>
+					</div>
+				</div>
+				<div class="category-items">
+					<button class="button" onclick={toggleSidebar}>
+						<span class="material-icons-outlined icon-span">
+							{isCollapsed ? 'menu' : 'menu_open'}
+						</span>
+					</button>
+				</div>
+			</section>
+		</header>
+
+		<section class="content">
+			{#if sidebarItems.length > 0}
+				{#each sidebarItems as element}
+					<section class="category-content">
+						<h2 class="category-span" class:hidden={isCollapsed}>{element.categoryTitle}</h2>
+						<menu class="category-items-details">
+							{#if element.menuItems}
+								{#each element.menuItems as menuItem}
+									<MenuItemSidebar
+										item={menuItem}
+										{isCollapsed}
+										activeItem={selectedItem?.text === menuItem.text}
+										onClick={() => (selectedItem = menuItem)}
+									/>
+								{/each}
+							{/if}
+						</menu>
+					</section>
+				{/each}
+			{/if}
+		</section>
+	</section>
+</aside>
+
+<style>
+	.side-menu {
+		display: inline-flex;
+		transition: width 0.3s ease;
+	}
+
+	.menu-content {
+		width: 100%;
+		height: 100%;
+		padding: 16px;
+		background: white;
+		border-right: 1px #e0e5e8 solid;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 32px;
+		display: flex;
+	}
+
+	.header {
+		align-self: stretch;
+		flex-direction: column;
+		gap: 16px;
+		display: flex;
+	}
+
+	.menu-header {
+		padding-bottom: 8px;
+		border-bottom: 1px #e0e5e8 solid;
+		gap: 10px;
+		display: inline-flex;
+	}
+
+	.menu-title {
+		flex: 1 1 0;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		display: flex;
+	}
+
+	.menu {
+		justify-content: center;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.menu-span {
+		color: black;
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.category-items {
+		padding: 8px;
+		gap: 8px;
+		display: flex;
+	}
+
+	.content {
+		flex-direction: column;
+		gap: 24px;
+		display: flex;
+	}
+
+	.category-content {
+		flex-direction: column;
+		gap: 8px;
+		display: flex;
+	}
+
+	.category-span {
+		color: #6b7180;
+		font-size: 12px;
+		font-weight: 400;
+		word-wrap: break-word;
+	}
+
+	.category-items-details {
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+
+	button:focus-visible {
+		box-shadow: 0 0 0 2px #472aff;
+		background-color: #eaecff;
+		outline: none;
+	}
+
+	.icon-span {
+		color: #25282d;
+		font-size: 20px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.expanded {
+		width: 220px;
+	}
+
+	.collapsed {
+		width: 68px;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.collapsed .header {
+		align-items: center;
+	}
+
+	.collapsed .menu-content {
+		padding: 8px;
+	}
+	.collapsed .content {
+		padding: 8px;
+	}
+	.collapsed .menu-header {
+		align-items: center;
+	}
+
+	.collapsed .menu-header {
+		justify-content: flex-start;
+		align-items: center;
+		padding: 8px;
+	}
+
+	.button {
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		border-radius: 50%;
+		width: 36px;
+		height: 36px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease;
+	}
+
+	.button:hover {
+		background-color: #f4f6f8;
+	}
+
+	@media (max-width: 768px) {
+		.side-menu {
+			width: 68px;
+		}
+
+		.header {
+			align-items: center;
+		}
+
+		.menu-title,
+		.category-span {
+			display: none;
+		}
+	}
+</style>

package/dist/Menu/Sidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MenuItem } from './SidebarState.svelte';
+interface sidebarProps {
+    categoryTitle: string;
+    menuItems: MenuItem[];
+}
+type $$ComponentProps = {
+    sidebarItems: sidebarProps[];
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/Menu/SidebarState.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface MenuItem {
+    icon?: string;
+    text: string;
+    url: string;
+    children?: MenuItem[];
+}

package/dist/Menu/SidebarState.svelte.js

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

package/dist/Modal/Modal.svelte

@@ -35,9 +35,8 @@
 		min-height: 250px;
 		flex-direction: column;
 		align-items: flex-start;
-		border-radius: var(--Card-radius, 16px);
-		background: var(--brand-white, #fff);
-		/* shadow/card-hover */
+		border-radius: 16px;
+		background: #fff;
 		box-shadow:
 			0px 1px 10px 0px rgba(51, 56, 64, 0.12),
 			0px 2px 4px -1px rgba(51, 56, 64, 0.2),

package/dist/Modal/ModalContent.svelte

@@ -46,33 +46,29 @@
 <style>
 	.modal-content {
 		display: flex;
-		padding: var(--Card-padding, 24px);
+		padding: 24px;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: var(--spacing-3, 24px);
+		gap: 24px;
 		align-self: stretch;
-		background: var(--brand-white, #fff);
-		border-top: 1px solid var(--gray-3, #aeb1b9);
+		background: #fff;
+		border-top: 1px solid #aeb1b9;
 	}
 	.modal-content-title {
 		align-self: stretch;
-		color: var(--brand-type, #000);
-		/* bold/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #000;
 		font-size: 14px;
 		font-style: normal;
-		font-weight: 600; /* changed from 700 to 600 since we use Haas Grotesk Display Pro */
-		line-height: 20px; /* 142.857% */
+		font-weight: 600;
+		line-height: 20px;
 	}
 	.modal-content-message {
 		align-self: stretch;
-		color: var(--brand-type, #000);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #000;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.modal-content-code-content {
 		display: flex;
@@ -80,14 +76,11 @@
 		align-items: flex-start;
 		gap: 20px;
 		border-radius: 4px;
-		background: var(--gray-1, #f4f6f8);
+		background: #f4f6f8;
 	}
 	.modal-content-code-content-message {
 		width: 368px;
-		color: var(--gray-4, #6b7180);
-
-		/* regular/1 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #6b7180;
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 400;

package/dist/Modal/ModalFooter.svelte

@@ -27,13 +27,13 @@
 <style>
 	.modal-footer {
 		display: flex;
-		padding: var(--Card-padding, 24px);
+		padding: 24px;
 		justify-content: space-between;
 		align-items: flex-start;
 		align-self: stretch;
-		border-radius: 0px 0px var(--Card-radius, 16px) var(--Card-radius, 16px);
-		border-top: 1px solid var(--gray-3, #aeb1b9);
-		background: var(--brand-white, #fff);
+		border-radius: 0px 0px 16px 16px;
+		border-top: 1px solid #aeb1b9;
+		background: #fff;
 	}
 	.modal-footer-text-button {
 		display: inline-flex;
@@ -42,14 +42,12 @@
 		gap: 8px;
 		border-radius: 8px;
 		border: none;
-		background: var(--brand-white, #fff);
-		color: var(--brand-primary, #472aff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		background: #fff;
+		color: #472aff;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.modal-footer-text-button:hover {
 		cursor: pointer;
@@ -61,14 +59,12 @@
 		gap: 8px;
 		border-radius: 8px;
 		border: none;
-		background: var(--brand-primary, #472aff);
-		color: var(--brand-primary, #fff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		background: #472aff;
+		color: #fff;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.modal-footer-primary-button:hover {
 		cursor: pointer;

package/dist/Modal/ModalHeader.svelte

@@ -21,16 +21,15 @@
 <style>
 	.modal-header {
 		display: flex;
-		padding: var(--Card-padding, 24px);
+		padding: 24px;
 		align-items: center;
-		gap: var(--spacing-2, 16px);
+		gap: 16px;
 		align-self: stretch;
-		border-radius: var(--Card-radius, 16px) var(--Card-radius, 16px) 0px 0px;
-		background: var(--brand-white, #fff);
+		border-radius: 16px 16px 0px 0px;
+		background: #fff;
 	}
 	.modal-header-icon {
-		color: var(--brand-danger, #dc182c);
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #dc182c;
 		font-size: 32px;
 		font-style: normal;
 		font-weight: 400;
@@ -38,12 +37,11 @@
 	}
 	.modal-header-title {
 		flex: 1 0 0;
-		color: var(--brand-type, #000);
+		color: #000;
 		/* medium/4 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 18px;
 		font-style: normal;
 		font-weight: 500;
-		line-height: 26px; /* 144.444% */
+		line-height: 26px;
 	}
 </style>