@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

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

@@ -0,0 +1,239 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import {
+		ArrowIcon,
+		CheckCircleIcon,
+		CloseCircleIcon,
+		InfoIcon,
+		WarningCircleOutlineIcon,
+		WarningTriangleIcon
+	} from '../../icons';
+	import Notification from './Notification.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Notification',
+		component: Notification,
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'centered'
+		},
+		argTypes: {
+			variant: {
+				control: { type: 'select' },
+				options: ['warning', 'error', 'success', 'info'],
+				description: 'The type of notification or custom color string'
+			},
+			message: {
+				control: 'text',
+				description: 'The main message content to display'
+			},
+			title: {
+				control: 'text',
+				description: 'The title/heading of the notification'
+			},
+			href: {
+				control: 'text',
+				description: 'External link URL'
+			},
+			linkText: {
+				control: 'text',
+				description: 'Text for the link button'
+			},
+			showCloseButton: {
+				control: 'boolean',
+				description: 'Whether to show the close button'
+			},
+			showBorder: {
+				control: 'boolean',
+				description: 'Whether to show the colored left border'
+			},
+			richTextMessage: {
+				control: 'boolean',
+				description: 'Whether to render message as rich text/HTML'
+			},
+			richTextTitle: {
+				control: 'boolean',
+				description: 'Whether to render title as rich text/HTML'
+			},
+			titleFontWeight: {
+				control: { type: 'number', min: 100, max: 900, step: 100 },
+				description: 'Font weight for the title text'
+			},
+			onClose: { action: 'close' }
+		},
+		args: {
+			onClose: fn()
+		}
+	});
+</script>
+
+<!-- Basic Variants -->
+<Story
+	name="Warning"
+	args={{
+		variant: 'warning',
+		title: 'Warning Notification',
+		message: 'This is a warning message that requires your attention.'
+	}}
+/>
+
+<Story
+	name="Error"
+	args={{
+		variant: 'error',
+		title: 'Error Notification',
+		message: 'An error occurred while processing your request. Please try again.',
+		icon: CloseCircleIcon
+	}}
+/>
+
+<Story
+	name="Success"
+	args={{
+		variant: 'success',
+		title: 'Success Notification',
+		message: 'Your action was completed successfully!',
+		icon: CheckCircleIcon
+	}}
+/>
+
+<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"
+	args={{
+		variant: 'warning',
+		message: 'This notification only has a message without a title.'
+	}}
+/>
+
+<Story
+	name="Title Only"
+	args={{
+		variant: 'error',
+		title: 'This notification only has a title'
+	}}
+/>
+
+<!-- Interactive Features -->
+<Story
+	name="With Link"
+	args={{
+		variant: 'warning',
+		title: 'Update Available',
+		message: 'A new version of the application is available.',
+		href: 'https://example.com/download',
+		linkText: 'Download Now',
+		linkIcon: ArrowIcon
+	}}
+/>
+
+<Story
+	name="Interactive"
+	args={{
+		variant: 'warning',
+		title: 'Interactive Notification',
+		message: 'Click the close button to dismiss this notification.'
+	}}
+/>
+
+<!-- Customization -->
+<Story
+	name="Custom Color"
+	args={{
+		variant: '#9333EA',
+		title: 'Custom Color',
+		message: 'This notification uses a custom purple color.',
+		icon: WarningTriangleIcon
+	}}
+/>
+
+<Story
+	name="Without Close Button"
+	args={{
+		variant: 'warning',
+		title: 'Persistent Notification',
+		message: 'This notification cannot be dismissed by the user.',
+		showCloseButton: false
+	}}
+/>
+
+<Story
+	name="Without Border"
+	args={{
+		variant: 'success',
+		title: 'No Border',
+		message: 'This notification does not have a colored left border.',
+		showBorder: false
+	}}
+/>
+
+<!-- Rich Text Support -->
+<Story
+	name="Rich Text Content"
+	args={{
+		variant: 'warning',
+		title: '<strong>Rich Text Title</strong>',
+		message: 'This message supports <em>HTML</em> and <strong>rich text</strong> formatting.',
+		richTextTitle: true,
+		richTextMessage: true
+	}}
+/>
+
+<!-- Complex Content -->
+<Story
+	name="Long Content"
+	args={{
+		variant: 'error',
+		title: 'Very Long Notification Title That Might Wrap to Multiple Lines',
+		message:
+			'This is a very long message that demonstrates how the notification component handles extensive content. It should wrap gracefully and maintain proper spacing and alignment throughout the entire notification area.',
+		href: 'https://example.com/help',
+		linkText: 'Learn More'
+	}}
+/>
+
+<!-- Accessibility Test -->
+<Story
+	name="Accessibility Test"
+	args={{
+		variant: 'error',
+		title: 'Accessibility Test',
+		message: 'This notification tests accessibility features.',
+		href: 'https://example.com',
+		linkText: 'Accessible Link'
+	}}
+	parameters={{
+		a11y: {
+			config: {
+				rules: [
+					{ id: 'color-contrast', enabled: true },
+					{ id: 'link-name', enabled: true },
+					{ id: 'button-name', enabled: true }
+				]
+			}
+		}
+	}}
+/>
+
+<!-- Custom Actions Info -->
+<Story
+	name="Custom Actions Support"
+	args={{
+		variant: 'warning',
+		title: 'Custom Actions Available',
+		message:
+			'This component supports custom action buttons via the actions snippet prop. See component tests and documentation for implementation examples.'
+	}}
+/>

package/dist/ui/components/{ToggleList.svelte.d.ts → notification/Notification.stories.svelte.d.ts}

@@ -1,34 +1,22 @@
-export default ToggleList;
-type ToggleList = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
+export default Notification;
+type Notification = SvelteComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
+}, {}> & {
     $$bindings?: string | undefined;
 };
-declare const ToggleList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
+declare const Notification: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, string>;
+import Notification from './Notification.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {

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

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	import { TimesIcon, WarningCircleOutlineIcon } from '../../icons';
+	import { Text } from '../';
+
+	type NotificationType = 'warning' | 'error' | 'success' | 'info';
+
+	interface NotificationProps {
+		/**
+		 * Additional CSS classes to apply
+		 */
+		class?: string;
+		/**
+		 * The main message content to display
+		 */
+		message?: string;
+		/**
+		 * External link URL
+		 */
+		href?: string;
+		/**
+		 * The title/heading of the notification
+		 */
+		title?: string;
+		/**
+		 * Font weight for the title text
+		 */
+		titleFontWeight?: number;
+		/**
+		 * Text for the link button
+		 */
+		linkText?: string;
+		/**
+		 * Whether to show the close button
+		 */
+		showCloseButton?: boolean;
+		/**
+		 * Custom icon component to display
+		 */
+		icon?: Component;
+		/**
+		 * Icon component for the link
+		 */
+		linkIcon?: Component | null;
+		/**
+		 * Notification type or custom color string
+		 */
+		variant?: NotificationType | string;
+		/**
+		 * Whether to render message as rich text/HTML
+		 */
+		richTextMessage?: boolean;
+		/**
+		 * Whether to render title as rich text/HTML
+		 */
+		richTextTitle?: boolean;
+		/**
+		 * Whether to show the colored left border
+		 */
+		showBorder?: boolean;
+		/**
+		 * Custom action content
+		 */
+		actions?: Snippet;
+		/**
+		 * Event handler for close button click
+		 */
+		onClose?: () => void;
+	}
+
+	let {
+		class: className = '',
+		message = '',
+		href = '',
+		title = '',
+		titleFontWeight = 600,
+		linkText = '',
+		showCloseButton = true,
+		icon = WarningCircleOutlineIcon,
+		linkIcon = null,
+		variant = 'warning',
+		richTextMessage = false,
+		richTextTitle = false,
+		showBorder = true,
+		actions,
+		onClose,
+		...restProps
+	}: NotificationProps = $props();
+
+	// Computed colors based on variant
+	let colors = $derived.by(() => {
+		switch (variant) {
+			case 'warning':
+				return {
+					icon: 'var(--yellowIcon)',
+					border: 'var(--yellowBorder)'
+				};
+			case 'error':
+				return {
+					icon: 'var(--redIcon)',
+					border: 'var(--redBorder)'
+				};
+			case 'success':
+				return {
+					icon: 'var(--greenIcon)',
+					border: 'var(--greenBorder)'
+				};
+			case 'info':
+				return {
+					icon: 'var(--blueIcon)',
+					border: 'var(--blueBorder)'
+				};
+			default:
+				// Custom color string
+				return {
+					icon: variant,
+					border: variant
+				};
+		}
+	});
+
+	// Computed wrapper classes
+	let wrapperClasses = $derived(`wrapper ${className}`.trim());
+
+	// Computed border style
+	let borderStyle = $derived(showBorder ? `border-left: 2px solid ${colors.border};` : '');
+
+	// Computed default icon component
+	let DefaultIcon = $derived(icon);
+
+	/**
+	 * Handle close button click
+	 */
+	function handleCloseClick() {
+		onClose?.();
+	}
+
+	/**
+	 * Handle close button keydown
+	 */
+	function handleCloseKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleCloseClick();
+		}
+	}
+</script>
+
+<div
+	class={wrapperClasses}
+	style={borderStyle}
+	class:centered={!message && !href && !linkText && !actions}
+	data-testid="notification"
+	{...restProps}
+>
+	<span class="icon" style="color: {colors.icon};">
+		<DefaultIcon />
+	</span>
+
+	<div class="content">
+		{#if title}
+			<Text
+				label={title}
+				fontSize="normal"
+				fontWeight={titleFontWeight.toString()}
+				raw={richTextTitle}
+			/>
+		{/if}
+
+		{#if message || href || linkText}
+			<div class="message">
+				{#if message}
+					<Text label={message} fontColor="var(--text2)" raw={richTextMessage} />
+				{/if}
+
+				{#if href && linkText}
+					<a {href} class="link" target="_blank" rel="noopener noreferrer">
+						<span>{linkText}</span>
+						{#if linkIcon}
+							{@const Icon = linkIcon}
+							<Icon />
+						{/if}
+					</a>
+				{/if}
+			</div>
+		{/if}
+
+		{#if actions}
+			{@render actions()}
+		{/if}
+	</div>
+
+	{#if showCloseButton}
+		<button
+			class="close-button"
+			onclick={handleCloseClick}
+			onkeydown={handleCloseKeyDown}
+			aria-label="Close notification"
+			type="button"
+		>
+			<TimesIcon />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+		padding: 8px;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
+		border-radius: 4px;
+		background: var(--background3);
+	}
+
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.content {
+		display: flex;
+		padding-right: var(--spacing-24, 24px);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		flex: 1 0 0;
+	}
+
+	.centered {
+		align-items: center;
+	}
+
+	.message {
+		color: var(--text-text-2, #bdbdbd);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		gap: 4px;
+		align-self: stretch;
+	}
+
+	.link {
+		color: var(--blue-blue-text, #8ac2ff);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		cursor: pointer;
+		text-decoration: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: max-content;
+		gap: 4px;
+	}
+
+	.link :global(svg) {
+		color: var(--blue-blue-text, #8ac2ff);
+	}
+
+	.close-button {
+		cursor: pointer;
+		border: none;
+		background: transparent;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text2);
+		flex-shrink: 0;
+	}
+
+	.close-button:hover {
+		opacity: 0.8;
+	}
+
+	.close-button:focus-visible {
+		outline: 2px solid var(--color-focus, #8ac2ff);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+</style>

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

@@ -0,0 +1,67 @@
+import type { Component, Snippet } from 'svelte';
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
+interface NotificationProps {
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+    /**
+     * The main message content to display
+     */
+    message?: string;
+    /**
+     * External link URL
+     */
+    href?: string;
+    /**
+     * The title/heading of the notification
+     */
+    title?: string;
+    /**
+     * Font weight for the title text
+     */
+    titleFontWeight?: number;
+    /**
+     * Text for the link button
+     */
+    linkText?: string;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton?: boolean;
+    /**
+     * Custom icon component to display
+     */
+    icon?: Component;
+    /**
+     * Icon component for the link
+     */
+    linkIcon?: Component | null;
+    /**
+     * Notification type or custom color string
+     */
+    variant?: NotificationType | string;
+    /**
+     * Whether to render message as rich text/HTML
+     */
+    richTextMessage?: boolean;
+    /**
+     * Whether to render title as rich text/HTML
+     */
+    richTextTitle?: boolean;
+    /**
+     * Whether to show the colored left border
+     */
+    showBorder?: boolean;
+    /**
+     * Custom action content
+     */
+    actions?: Snippet;
+    /**
+     * Event handler for close button click
+     */
+    onClose?: () => void;
+}
+declare const Notification: Component<NotificationProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

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

@@ -0,0 +1,2 @@
+export { default as Notification } from './Notification.svelte';
+export type * from './types.js';

package/dist/ui/components/notification/index.js

@@ -0,0 +1 @@
+export { default as Notification } from './Notification.svelte';

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

@@ -0,0 +1,68 @@
+import type { Component, Snippet } from 'svelte';
+export type NotificationType = 'warning' | 'error' | 'success' | 'info';
+export interface NotificationProps {
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+    /**
+     * The main message content to display
+     */
+    message?: string;
+    /**
+     * External link URL
+     */
+    href?: string;
+    /**
+     * The title/heading of the notification
+     */
+    title?: string;
+    /**
+     * Font weight for the title text
+     */
+    titleFontWeight?: number;
+    /**
+     * Text for the link button
+     */
+    linkText?: string;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton?: boolean;
+    /**
+     * Custom icon component to display
+     */
+    icon?: Component;
+    /**
+     * Icon component for the link
+     */
+    linkIcon?: Component | null;
+    /**
+     * Notification type or custom color string
+     */
+    variant?: NotificationType | string;
+    /**
+     * Whether to render message as rich text/HTML
+     */
+    richTextMessage?: boolean;
+    /**
+     * Whether to render title as rich text/HTML
+     */
+    richTextTitle?: boolean;
+    /**
+     * Whether to show the colored left border
+     */
+    showBorder?: boolean;
+    /**
+     * Custom action content
+     */
+    actions?: Snippet;
+    /**
+     * Event handler for close button click
+     */
+    onClose?: () => void;
+}
+export interface NotificationColors {
+    icon: string;
+    border: string;
+}

package/dist/ui/components/notification/types.js

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