@finsweet/webflow-apps-utils 1.0.3 → 1.0.5

package/dist/ui/components/layout/Layout.svelte

@@ -9,42 +9,66 @@
 		WarningCircleOutlineIcon
 	} from '../../icons';
 
+	import Section from '../section/Section.svelte';
 	import { Tooltip } from '../tooltip';
 	import { EditModeMessage } from './common';
-	import type { LayoutFooter, LayoutTab } from './types';
+	import type { LayoutTab } from './types';
 
 	interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+		/** The currently active tab path */
 		activeTab: string;
+		/** Array of available tabs to display in the navbar */
 		tabs: LayoutTab[];
+		/** Function to handle tab switching */
 		switchTab: (tab: string) => void;
-		footer?: LayoutFooter;
+		/** Unique key for the form context */
 		formKey: string;
-		editMode?: boolean;
+		/** Whether to show the edit mode message banner */
+		showEditModeMessage?: boolean;
+		/** Whether to display the footer section */
 		showFooter?: boolean;
+		/** Whether to display the sidebar */
 		showSidebar?: boolean;
+		/** Whether to display the tab navigation bar */
 		showTabs?: boolean;
+		/** The height at which the main content area becomes scrollable */
+		mainContentScrollableAt?: number;
+		/** Whether to display the preview bar */
 		showPreviewBar?: boolean;
+		/** Width of the sidebar (CSS value) */
 		sidebarWidth?: string;
+		/** Whether to use container mode (100% dimensions) instead of viewport mode */
 		containerMode?: boolean;
+		/** Size variant for the footer */
 		footerSize?: 'normal' | 'large';
+		/** Array of notification objects for tab status indicators */
 		notifications?: Array<{
+			/** Tab path this notification applies to */
 			path: string;
+			/** Whether the notification indicates success */
 			success: boolean;
+			/** Notification message content */
 			message: string;
+			/** Whether to show the notification badge */
 			showNotification: boolean;
 		}>;
+		/** Sidebar content snippet */
 		sidebar?: Snippet;
+		/** Main content area snippet */
 		main?: Snippet;
+		/** Preview bar content snippet */
 		previewBar?: Snippet;
+		/** Footer content snippet */
+		footer?: Snippet;
 	}
 
 	let {
 		activeTab,
 		tabs,
 		switchTab,
-		footer = { buttons: [] },
 		formKey,
-		editMode = false,
+		mainContentScrollableAt,
+		showEditModeMessage = false,
 		showFooter = true,
 		showSidebar = true,
 		showTabs = true,
@@ -56,12 +80,12 @@
 		sidebar,
 		main,
 		previewBar,
+		footer,
 		class: className = '',
 		...restProps
 	}: LayoutProps = $props();
 
 	// Derived states
-	let hasFooterButtons = $derived(footer?.buttons && footer.buttons.length > 0);
 	let containerStyles = $derived(
 		containerMode ? 'height: 100%; width: 100%;' : 'height: 100vh; width: 100vw;'
 	);
@@ -93,7 +117,7 @@
 		}
 
 		// Handle footer row
-		if (showFooter && hasFooterButtons) {
+		if (showFooter && footer) {
 			if (showSidebar) {
 				areas.push('"sidebar footer"');
 			} else {
@@ -118,7 +142,7 @@
 
 		rows.push('1fr'); // main content area takes remaining space
 
-		if (showFooter && hasFooterButtons) {
+		if (showFooter && footer) {
 			rows.push(footerHeight);
 		}
 
@@ -217,8 +241,16 @@
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container">
-				<EditModeMessage />
-				{@render main()}
+				{#if showEditModeMessage}
+					<EditModeMessage />
+				{/if}
+				{#if mainContentScrollableAt}
+					<Section height={`${mainContentScrollableAt}px`} scrollable padding="0">
+						{@render main()}
+					</Section>
+				{:else}
+					{@render main()}
+				{/if}
 			</div>
 		{:else}
 			<div class="main-placeholder">
@@ -232,7 +264,7 @@
 						<li>Show Tabs: {showTabs}</li>
 						<li>Show Preview Bar: {showPreviewBar}</li>
 						<li>Show Footer: {showFooter}</li>
-						<li>Edit Mode: {editMode}</li>
+						<li>Edit Mode: {showEditModeMessage}</li>
 					</ul>
 				</div>
 			</div>
@@ -240,21 +272,9 @@
 	</div>
 
 	<!-- Footer -->
-	{#if showFooter && hasFooterButtons}
+	{#if showFooter && footer}
 		<div class="footer" data-area="footer">
-			{#each footer.buttons as button (button.text)}
-				<button
-					class="footer-button footer-button--{button.variant}"
-					disabled={editMode}
-					onclick={button.onClick}
-				>
-					{#if button.icon}
-						{@const Icon = button.icon}
-						<Icon />
-					{/if}
-					{button.text}
-				</button>
-			{/each}
+			{@render footer()}
 		</div>
 	{/if}
 </div>
@@ -507,43 +527,4 @@
 		height: 100%;
 		overflow: hidden;
 	}
-
-	.footer-button {
-		display: flex;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 2px;
-		border-radius: 4px;
-		border: 1px solid var(--border-border-1, #363636);
-		background: var(--background2);
-		color: var(--text1);
-		text-align: center;
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		cursor: pointer;
-		transition: all 0.2s ease-in-out;
-	}
-
-	.footer-button--primary {
-		background: var(--action-action-primary-background-hover, #1280ee);
-		color: var(--actionPrimaryText);
-	}
-
-	.footer-button--secondary {
-		background: var(--background2);
-		color: var(--text1);
-	}
-
-	.footer-button:hover:not(:disabled) {
-		opacity: 0.8;
-	}
-
-	.footer-button:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
 </style>

package/dist/ui/components/layout/Layout.svelte.d.ts

@@ -1,29 +1,52 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { LayoutFooter, LayoutTab } from './types';
+import type { LayoutTab } from './types';
 interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** The currently active tab path */
     activeTab: string;
+    /** Array of available tabs to display in the navbar */
     tabs: LayoutTab[];
+    /** Function to handle tab switching */
     switchTab: (tab: string) => void;
-    footer?: LayoutFooter;
+    /** Unique key for the form context */
     formKey: string;
-    editMode?: boolean;
+    /** Whether to show the edit mode message banner */
+    showEditModeMessage?: boolean;
+    /** Whether to display the footer section */
     showFooter?: boolean;
+    /** Whether to display the sidebar */
     showSidebar?: boolean;
+    /** Whether to display the tab navigation bar */
     showTabs?: boolean;
+    /** The height at which the main content area becomes scrollable */
+    mainContentScrollableAt?: number;
+    /** Whether to display the preview bar */
     showPreviewBar?: boolean;
+    /** Width of the sidebar (CSS value) */
     sidebarWidth?: string;
+    /** Whether to use container mode (100% dimensions) instead of viewport mode */
     containerMode?: boolean;
+    /** Size variant for the footer */
     footerSize?: 'normal' | 'large';
+    /** Array of notification objects for tab status indicators */
     notifications?: Array<{
+        /** Tab path this notification applies to */
         path: string;
+        /** Whether the notification indicates success */
         success: boolean;
+        /** Notification message content */
         message: string;
+        /** Whether to show the notification badge */
         showNotification: boolean;
     }>;
+    /** Sidebar content snippet */
     sidebar?: Snippet;
+    /** Main content area snippet */
     main?: Snippet;
+    /** Preview bar content snippet */
     previewBar?: Snippet;
+    /** Footer content snippet */
+    footer?: Snippet;
 }
 declare const Layout: import("svelte").Component<LayoutProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -18,20 +18,20 @@
 	let showTabs = $state(true);
 	let showPreviewBar = $state(true);
 	let showFooter = $state(true);
-	let editMode = $state(false);
+	let showEditModeMessage = $state(false);
 	let sidebarWidth = $state('239px');
 	let footerSize = $state<'normal' | 'large'>('normal');
 	let showNotifications = $state(false);
 	let notificationSuccess = $state(true);
 	let inputValue = $state('');
 
-	// Get app context and keep editMode in sync
+	// Get app context and keep showEditModeMessage in sync
 	const appContext = useAppContext();
 
-	// Subscribe to context changes to keep local editMode in sync
+	// Subscribe to context changes to keep local showEditModeMessage in sync
 	appContext.subscribe((data) => {
-		if (data?.editMode !== undefined && data.editMode !== editMode) {
-			editMode = data.editMode;
+		if (data?.editMode !== undefined && data.editMode !== showEditModeMessage) {
+			showEditModeMessage = data.editMode;
 		}
 	});
 
@@ -41,22 +41,14 @@
 		{ path: 'code', name: 'Code', icon: CodeIcon, isActive: false }
 	];
 
-	// Dummy footer buttons
-	const dummyFooterButtons = [
-		{
-			id: 'save' as const,
-			text: 'Save Changes',
-			variant: 'secondary' as const,
-			icon: CheckCircleIcon,
-			onClick: () => console.log('Save clicked')
-		},
-		{
-			id: 'main' as const,
-			text: 'Apply Settings',
-			variant: 'primary' as const,
-			onClick: () => console.log('Apply clicked')
-		}
-	];
+	// Footer button handlers
+	function handleSaveClick() {
+		console.log('Save clicked');
+	}
+
+	function handleApplyClick() {
+		console.log('Apply clicked');
+	}
 
 	// Create tabs with active state
 	let tabs = $derived(
@@ -100,8 +92,8 @@
 				watchOptions: { watchAll: true, debounceMs: 50 }
 			}
 		});
-		// Initialize local editMode state
-		editMode = true;
+		// Initialize local showEditModeMessage state
+		showEditModeMessage = true;
 	});
 </script>
 
@@ -190,12 +182,12 @@
 						<div class="toggle-control">
 							<input
 								type="checkbox"
-								bind:checked={editMode}
+								bind:checked={showEditModeMessage}
 								id="edit-mode"
 								class="checkbox-input"
 								onchange={() => {
 									const current = appContext.get();
-									appContext.set({ ...current, editMode });
+									appContext.set({ ...current, editMode: showEditModeMessage });
 								}}
 							/>
 							<label for="edit-mode" class="checkbox-label">Edit Mode</label>
@@ -234,9 +226,8 @@
 			{activeTab}
 			{tabs}
 			{switchTab}
-			footer={{ buttons: dummyFooterButtons }}
 			formKey="dummy-layout"
-			{editMode}
+			{showEditModeMessage}
 			{showFooter}
 			{showSidebar}
 			{showTabs}
@@ -332,6 +323,20 @@
 			{#snippet previewBar()}
 				<Text fontSize="md" fontWeight="normal">Preview bar content</Text>
 			{/snippet}
+
+			{#snippet footer()}
+				<Button
+					variant="secondary"
+					icon={CheckCircleIcon}
+					onclick={handleSaveClick}
+					disabled={showEditModeMessage}
+				>
+					Save Changes
+				</Button>
+				<Button variant="primary" onclick={handleApplyClick} disabled={showEditModeMessage}>
+					Apply Settings
+				</Button>
+			{/snippet}
 		</Layout>
 	</div>
 </div>

package/dist/ui/components/layout/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Layout } from './Layout.svelte';
 export * from './examples';
 export * from './common';
-export type { LayoutProps, LayoutTab, LayoutFooter } from './types';
+export type { LayoutProps, LayoutTab } from './types';

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { CodeIcon, SettingsIcon } from '../../../icons';
+	import { Button } from '../../button';
+	import Layout from '../Layout.svelte';
+	import type { LayoutProps } from '../types';
+
+	interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+		footerText?: string;
+	}
+
+	let { footerText = 'Test Button', ...layoutProps }: TestLayoutWithFooterProps = $props();
+</script>
+
+<Layout {...layoutProps}>
+	{#snippet footer()}
+		<Button variant="primary" onclick={() => {}}>
+			{footerText}
+		</Button>
+	{/snippet}
+</Layout>

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutProps } from '../types';
+interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+    footerText?: string;
+}
+declare const TestLayoutWithFooter: import("svelte").Component<TestLayoutWithFooterProps, {}, "">;
+type TestLayoutWithFooter = ReturnType<typeof TestLayoutWithFooter>;
+export default TestLayoutWithFooter;

package/dist/ui/components/layout/types.d.ts

@@ -7,15 +7,6 @@ export interface LayoutTab {
     isActive: boolean;
     hidden?: boolean;
 }
-export interface LayoutFooter {
-    buttons: Array<{
-        id: string;
-        text: string;
-        variant: 'primary' | 'secondary';
-        icon?: Component;
-        onClick?: () => void;
-    }>;
-}
 export interface LayoutNotification {
     path: string;
     success: boolean;
@@ -29,7 +20,7 @@ export interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     main?: Snippet;
     sidebar?: Snippet;
     previewBar?: Snippet;
-    footer?: LayoutFooter;
+    footer?: Snippet;
     formKey: string;
     editMode?: boolean;
     showFooter?: boolean;

package/dist/ui/components/notification/Notification.stories.svelte

@@ -6,6 +6,7 @@
 		ArrowIcon,
 		CheckCircleIcon,
 		CloseCircleIcon,
+		InfoIcon,
 		WarningCircleOutlineIcon,
 		WarningTriangleIcon
 	} from '../../icons';
@@ -21,7 +22,7 @@
 		argTypes: {
 			variant: {
 				control: { type: 'select' },
-				options: ['warning', 'error', 'success'],
+				options: ['warning', 'error', 'success', 'info'],
 				description: 'The type of notification or custom color string'
 			},
 			message: {
@@ -98,6 +99,16 @@
 	}}
 />
 
+<Story
+	name="Info"
+	args={{
+		variant: 'info',
+		title: 'Information Notification',
+		message: 'Here is some important information you should know.',
+		icon: InfoIcon
+	}}
+/>
+
 <!-- Content Variations -->
 <Story
 	name="Message Only"

package/dist/ui/components/notification/Notification.svelte

@@ -4,7 +4,7 @@
 	import { TimesIcon, WarningCircleOutlineIcon } from '../../icons';
 	import { Text } from '../';
 
-	type NotificationType = 'warning' | 'error' | 'success';
+	type NotificationType = 'warning' | 'error' | 'success' | 'info';
 
 	interface NotificationProps {
 		/**
@@ -93,18 +93,23 @@
 		switch (variant) {
 			case 'warning':
 				return {
-					icon: '#FFD301',
+					icon: 'var(--yellowIcon)',
 					border: 'var(--yellowBorder)'
 				};
 			case 'error':
 				return {
-					icon: '#FF8A8A',
+					icon: 'var(--redIcon)',
 					border: 'var(--redBorder)'
 				};
 			case 'success':
 				return {
-					icon: '#63D489',
-					border: 'var(--greenIcon)'
+					icon: 'var(--greenIcon)',
+					border: 'var(--greenBorder)'
+				};
+			case 'info':
+				return {
+					icon: 'var(--blueIcon)',
+					border: 'var(--blueBorder)'
 				};
 			default:
 				// Custom color string

package/dist/ui/components/notification/Notification.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-type NotificationType = 'warning' | 'error' | 'success';
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
 interface NotificationProps {
     /**
      * Additional CSS classes to apply

package/dist/ui/components/notification/types.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-export type NotificationType = 'warning' | 'error' | 'success';
+export type NotificationType = 'warning' | 'error' | 'success' | 'info';
 export interface NotificationProps {
     /**
      * Additional CSS classes to apply

package/dist/ui/components/section/Section.svelte

@@ -20,6 +20,8 @@
 		width,
 		height,
 		backgroundColor,
+		padding = 'var(--Spacing-12, 12px)',
+		gap = 'var(--Spacing-8, 8px)',
 		class: className = '',
 		tooltip,
 		disabledMessage,
@@ -107,6 +109,8 @@
 		if (width) styles.width = width;
 		if (height) styles.height = height;
 		if (backgroundColor) styles['background-color'] = backgroundColor;
+		if (padding) styles.padding = padding;
+		if (gap) styles.gap = gap;
 
 		return styles;
 	});
@@ -136,7 +140,7 @@
 		scrollbars: {
 			theme: 'os-theme-dark',
 			visibility: 'auto',
-			autoHide: 'never',
+			autoHide: 'leave',
 			autoHideDelay: 800
 		}
 	};
@@ -182,6 +186,7 @@
 			tooltipIconColor="var(--yellowText)"
 			message={defaultDisabledMessage}
 			width={disabledTooltipWidth}
+			class="not-allowed"
 		>
 			{#snippet target()}
 				{@render sectionContent()}
@@ -201,10 +206,8 @@
 <style>
 	.section-wrap {
 		display: flex;
-		padding: var(--Spacing-12, 12px);
 		flex-direction: column;
 		align-items: flex-start;
-		gap: var(--Spacing-8, 8px);
 		align-self: stretch;
 		position: relative;
 		border: 1px solid transparent;
@@ -269,6 +272,7 @@
 	/* Disabled in edit mode styles */
 	.section-wrap.disabled-in-edit-mode {
 		pointer-events: none;
+		cursor: not-allowed;
 	}
 
 	.section-wrap.disabled-in-edit-mode :global(.label-popup .labels span) {
@@ -299,7 +303,7 @@
 
 	/* OverlayScrollbars dark theme customization using design system */
 	.section-wrap :global(.os-scrollbar) {
-		--os-size: var(--sb-size, 6px);
+		--os-size: var(--sb-size);
 		--os-padding-perpendicular: 2px;
 		--os-padding-axis: 2px;
 	}

package/dist/ui/components/section/types.d.ts

@@ -39,6 +39,14 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
      * Background color of the section (CSS color value)
      */
     backgroundColor?: string;
+    /**
+     * Padding of the section (CSS value) - defaults to var(--Spacing-12, 12px)
+     */
+    padding?: string;
+    /**
+     * Gap between child elements (CSS value) - defaults to var(--Spacing-8, 8px)
+     */
+    gap?: string;
     /**
      * Additional CSS classes to apply
      */

package/dist/ui/components/text/Text.stories.svelte

@@ -63,6 +63,11 @@
 				control: { type: 'object' },
 				description: 'Tooltip configuration'
 			},
+			tooltipTarget: {
+				control: { type: 'select' },
+				options: ['text', 'icon'],
+				description: 'Specifies whether to show tooltip on text or icon'
+			},
 			popup: {
 				control: { type: 'object' },
 				description: 'Popup action configuration'
@@ -144,7 +149,7 @@
 	</div>
 </Story>
 
-<!-- Tooltip Example -->
+<!-- Tooltip Examples -->
 <Story
 	name="With Tooltip"
 	args={{
@@ -156,6 +161,67 @@
 	}}
 />
 
+<Story
+	name="Tooltip on Icon"
+	args={{
+		label: 'Text with tooltip on icon',
+		icon: ToolTipInfoCircleIcon,
+		tooltip: {
+			message: 'This tooltip appears on the icon',
+			placement: 'top'
+		},
+		tooltipTarget: 'icon'
+	}}
+/>
+
+<Story name="Tooltip Target Examples">
+	<div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Tooltip on Text (default):</h4>
+			<Text
+				label="Hover over this text"
+				icon={AccountIcon}
+				tooltip={{ message: 'Tooltip on the text', placement: 'top' }}
+				tooltipTarget="text"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Tooltip on Icon:</h4>
+			<Text
+				label="Hover over the icon"
+				icon={ToolTipInfoCircleIcon}
+				tooltip={{ message: 'Tooltip on the icon', placement: 'top' }}
+				tooltipTarget="icon"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+				With Ellipsis + Icon Tooltip:
+			</h4>
+			<Text
+				label="Long text that will be truncated with ellipsis"
+				icon={ToolTipInfoCircleIcon}
+				tooltip={{ message: 'Icon tooltip with ellipsis', placement: 'top' }}
+				tooltipTarget="icon"
+				ellipsisOnWidth="200px"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+				Invalid Configuration (no icon for icon target):
+			</h4>
+			<Text
+				label="No icon but tooltipTarget is icon"
+				tooltip={{ message: 'This tooltip should not show', placement: 'top' }}
+				tooltipTarget="icon"
+			/>
+		</div>
+	</div>
+</Story>
+
 <!-- Popup Example -->
 <Story
 	name="With Popup Action"