@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/button/Button.stories.svelte

@@ -0,0 +1,275 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import {
+		ArrowIcon,
+		CheckIcon,
+		DeleteIcon,
+		InfoIcon,
+		PlayIcon,
+		PlusIcon,
+		RefreshIcon,
+		SaveIcon,
+		SearchIcon
+	} from '../../icons';
+	import Button from './Button.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'UI/Button',
+		component: Button,
+		tags: ['autodocs'],
+		argTypes: {
+			variant: {
+				control: { type: 'select' },
+				options: ['primary', 'secondary', 'danger', 'cms']
+			},
+
+			type: {
+				control: { type: 'select' },
+				options: ['button', 'submit', 'reset']
+			},
+			disabled: {
+				control: { type: 'boolean' }
+			},
+			loading: {
+				control: { type: 'boolean' }
+			},
+			fullWidth: {
+				control: { type: 'boolean' }
+			},
+			invalid: {
+				control: { type: 'boolean' }
+			},
+			text: {
+				control: { type: 'text' }
+			},
+			tooltip: {
+				control: { type: 'object' }
+			},
+			onclick: { action: 'clicked' }
+		},
+		args: {
+			onclick: fn()
+		}
+	});
+</script>
+
+<!-- Basic Variants -->
+<Story
+	name="Primary"
+	args={{
+		variant: 'primary',
+		text: 'Primary Button'
+	}}
+/>
+
+<Story
+	name="Secondary"
+	args={{
+		variant: 'secondary',
+		text: 'Secondary Button'
+	}}
+/>
+
+<Story
+	name="Danger"
+	args={{
+		variant: 'danger',
+		text: 'Delete Item'
+	}}
+/>
+
+<Story
+	name="CMS"
+	args={{
+		variant: 'cms',
+		text: 'CMS Action'
+	}}
+/>
+
+<!-- States -->
+<Story
+	name="Loading"
+	args={{
+		loading: true,
+		text: 'Save Changes',
+		loadingText: 'Saving...'
+	}}
+/>
+
+<Story
+	name="Disabled"
+	args={{
+		disabled: true,
+		text: 'Disabled Button'
+	}}
+/>
+
+<!-- Full Width -->
+<Story
+	name="Full Width"
+	args={{
+		fullWidth: true,
+		text: 'Full Width Button'
+	}}
+/>
+
+<!-- With Icons using Component Props -->
+<Story
+	name="With Icon Left"
+	args={{
+		text: 'Save Changes',
+		icon: SaveIcon
+	}}
+/>
+
+<Story
+	name="With Icon Right"
+	args={{
+		text: 'Next Step',
+		rightIcon: ArrowIcon
+	}}
+/>
+
+<Story
+	name="Icon Only"
+	args={{
+		icon: PlusIcon,
+		ariaLabel: 'Add item'
+	}}
+/>
+
+<!-- Common Use Cases -->
+<Story
+	name="Play Button"
+	args={{
+		variant: 'primary',
+		text: 'Play Video',
+		icon: PlayIcon
+	}}
+/>
+
+<Story
+	name="Search Button"
+	args={{
+		variant: 'secondary',
+		text: 'Search',
+		icon: SearchIcon
+	}}
+/>
+
+<Story
+	name="Delete Button"
+	args={{
+		variant: 'danger',
+		text: 'Delete',
+		icon: DeleteIcon
+	}}
+/>
+
+<Story
+	name="Success Button"
+	args={{
+		variant: 'primary',
+		text: 'Completed',
+		disabled: true,
+		icon: CheckIcon
+	}}
+/>
+
+<Story
+	name="Refresh Button"
+	args={{
+		variant: 'secondary',
+		ariaLabel: 'Refresh data',
+		icon: RefreshIcon
+	}}
+/>
+
+<!-- Loading States with Icons -->
+<Story
+	name="Loading with Icon"
+	args={{
+		variant: 'primary',
+		text: 'Processing',
+		loading: true,
+		loadingText: 'Processing...',
+		icon: SaveIcon
+	}}
+/>
+
+<!-- Invalid State (Disabled with Tooltip) -->
+<Story
+	name="Invalid State"
+	args={{
+		variant: 'primary',
+		text: 'Submit Form',
+		invalid: true,
+		tooltip: {
+			message: 'Please fix the validation errors before submitting',
+			placement: 'top',
+			listener: 'hover',
+			listenerout: 'hover'
+		}
+	}}
+/>
+
+<!-- Tooltip Examples -->
+<Story
+	name="Basic Tooltip"
+	args={{
+		variant: 'primary',
+		text: 'Hover me',
+		tooltip: {
+			message: 'I am a basic tooltip',
+			placement: 'top'
+		}
+	}}
+/>
+
+<Story
+	name="Click Tooltip"
+	args={{
+		variant: 'secondary',
+		text: 'Click me',
+		tooltip: {
+			message: 'This tooltip appears on click!',
+			placement: 'bottom',
+			listener: 'click',
+			listenerout: 'click'
+		}
+	}}
+/>
+
+<Story
+	name="Tooltip with Icon"
+	args={{
+		variant: 'primary',
+		text: 'Info Button',
+		icon: InfoIcon,
+		tooltip: {
+			message: 'This is an informational tooltip with custom styling',
+			placement: 'right',
+			showArrow: true,
+			width: '200px',
+			fontColor: '#ffffff'
+		}
+	}}
+/>
+
+<Story
+	name="Custom Tooltip Style"
+	args={{
+		variant: 'danger',
+		text: 'Warning',
+		tooltip: {
+			message: 'This is a warning message with custom width and padding',
+			placement: 'left',
+			width: '250px',
+			padding: '12px',
+			fontColor: '#ffcc00'
+		}
+	}}
+/>

package/dist/ui/components/button/Button.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Button;
+type Button = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Button from './Button.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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/button/Button.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+	import { type Component, type Snippet } from 'svelte';
+
+	import Loader from '../Loader.svelte';
+	import { Tooltip } from '../tooltip';
+	import type { TooltipProps } from '../tooltip/types.js';
+	import type { ButtonType, ButtonVariant } from './types.js';
+
+	interface Props {
+		/**
+		 * Button type for form submission
+		 */
+		type?: ButtonType;
+		/**
+		 * Visual variant of the button
+		 */
+		variant?: ButtonVariant;
+
+		/**
+		 * Whether the button is disabled
+		 */
+		disabled?: boolean;
+		/**
+		 * Whether to show loading state
+		 */
+		loading?: boolean;
+		/**
+		 * Button text content
+		 */
+		text?: string;
+		/**
+		 * Left icon component
+		 */
+		icon?: Component;
+		/**
+		 * Right icon component
+		 */
+		rightIcon?: Component;
+		/**
+		 * Icon color (defaults to currentColor)
+		 */
+		iconColor?: string;
+		/**
+		 * Icon size
+		 */
+		iconSize?: string;
+		/**
+		 * Custom padding override
+		 */
+		padding?: string;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Loading text override
+		 */
+		loadingText?: string;
+		/**
+		 * Whether button should take full width
+		 */
+		fullWidth?: boolean;
+		/**
+		 * Tooltip configuration object with all tooltip props
+		 */
+		tooltip?: Partial<TooltipProps>;
+		/**
+		 * Whether button is in invalid state
+		 */
+		invalid?: boolean;
+		/**
+		 * Custom styles
+		 */
+		style?: string;
+		/**
+		 * ARIA label for accessibility
+		 */
+		ariaLabel?: string;
+		/**
+		 * Custom content snippet
+		 */
+		children?: Snippet;
+		/**
+		 * Click event handler
+		 */
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		type = 'button',
+		variant = 'primary',
+		disabled = false,
+		loading = false,
+		text = '',
+		icon,
+		rightIcon,
+		iconColor = 'currentColor',
+		iconSize = '16px',
+		padding,
+		class: className = '',
+		loadingText = 'Please wait...',
+		fullWidth = false,
+		tooltip,
+		invalid = false,
+		style = '',
+		ariaLabel,
+		children,
+		onclick,
+		...restProps
+	}: Props = $props();
+
+	// Assign to capitalized variables for component usage
+	let LeftIcon = $state(icon);
+	let RightIcon = $state(rightIcon);
+
+	// State for button element
+	let buttonElement = $state<HTMLButtonElement>();
+
+	// Computed properties using $derived
+	let isDisabled = $derived(disabled || loading || invalid);
+	let hasLeftIcon = $derived(!!icon);
+	let hasRightIcon = $derived(!!rightIcon);
+	let hasText = $derived(!!text);
+	let currentText = $derived(loading ? loadingText : text);
+	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltipContent);
+
+	// Default styling (no size variations)
+	let computedPadding = $derived(padding || '4px');
+	let computedIconSize = $derived(iconSize);
+
+	// Computed classes
+	let buttonClasses = $derived.by(() => {
+		const classes = ['button', `button--${variant}`];
+
+		if (fullWidth) classes.push('button--full-width');
+		if (loading) classes.push('button--loading');
+		if (className) classes.push(className);
+
+		return classes.join(' ');
+	});
+
+	// Computed styles
+	let buttonStyles = $derived.by(() => {
+		const styles = [`padding: ${computedPadding}`];
+		if (style) styles.push(style);
+		return styles.join('; ');
+	});
+</script>
+
+{#if shouldShowTooltip}
+	<Tooltip {...tooltip}>
+		{#snippet target()}
+			<button
+				bind:this={buttonElement}
+				{type}
+				disabled={isDisabled}
+				class={buttonClasses}
+				style={buttonStyles}
+				aria-label={ariaLabel}
+				aria-busy={loading}
+				{onclick}
+				{...restProps}
+			>
+				{#if children}
+					{@render children()}
+				{:else}
+					<!-- Loading state -->
+					{#if loading}
+						<div class="button__content">
+							<Loader size={parseInt(computedIconSize)} color="currentColor" />
+							{#if currentText}
+								<span class="button__text">{currentText}</span>
+							{/if}
+						</div>
+					{:else}
+						<!-- Normal state -->
+						<div class="button__content">
+							{#if hasLeftIcon}
+								<div
+									class="button__icon button__icon--left"
+									style:color={iconColor}
+									style:width={computedIconSize}
+									style:height={computedIconSize}
+								>
+									<LeftIcon />
+								</div>
+							{/if}
+
+							{#if hasText}
+								<span class="button__text">{currentText}</span>
+							{/if}
+
+							{#if hasRightIcon}
+								<div
+									class="button__icon button__icon--right"
+									style:color={iconColor}
+									style:width={computedIconSize}
+									style:height={computedIconSize}
+								>
+									<RightIcon />
+								</div>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			</button>
+		{/snippet}
+	</Tooltip>
+{:else}
+	<button
+		bind:this={buttonElement}
+		{type}
+		disabled={isDisabled}
+		class={buttonClasses}
+		style={buttonStyles}
+		aria-label={ariaLabel}
+		aria-busy={loading}
+		{onclick}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<!-- Loading state -->
+			{#if loading}
+				<div class="button__content">
+					<Loader size={parseInt(computedIconSize)} color="currentColor" />
+					{#if currentText}
+						<span class="button__text">{currentText}</span>
+					{/if}
+				</div>
+			{:else}
+				<!-- Normal state -->
+				<div class="button__content">
+					{#if hasLeftIcon}
+						<div
+							class="button__icon button__icon--left"
+							style:color={iconColor}
+							style:width={computedIconSize}
+							style:height={computedIconSize}
+						>
+							<LeftIcon />
+						</div>
+					{/if}
+
+					{#if hasText}
+						<span class="button__text">{currentText}</span>
+					{/if}
+
+					{#if hasRightIcon}
+						<div
+							class="button__icon button__icon--right"
+							style:color={iconColor}
+							style:width={computedIconSize}
+							style:height={computedIconSize}
+						>
+							<RightIcon />
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.button {
+		/* Reset */
+		all: unset;
+		box-sizing: border-box;
+
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+
+		/* Styling */
+		border-radius: var(--border-radius, 4px);
+		font-family: var(--font-stack, Inter, sans-serif);
+		font-weight: var(--font-weight-normal, 400);
+		font-size: 11.5px;
+		min-height: 24px;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		text-align: center;
+		cursor: pointer;
+		user-select: none;
+		transition: all 0.2s ease;
+
+		/* Shadow */
+		box-shadow:
+			0px 29px 23px -16px rgba(255, 255, 255, 0.04) inset,
+			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.2) inset,
+			0px 0.5px 1px 0px #000;
+	}
+
+	/* Variants */
+	.button--primary {
+		background-color: var(--actionPrimaryBackground, #006acc);
+		color: var(--actionPrimaryText, #ffffff);
+	}
+
+	.button--primary:hover:not(:disabled) {
+		background-color: var(--actionPrimaryBackgroundHover, #187cd9);
+	}
+
+	.button--secondary {
+		background: var(
+			--actionSecondaryBackground,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+			rgba(255, 255, 255, 0.08)
+		);
+		color: var(--actionSecondaryText, #e0e0e0);
+	}
+
+	.button--secondary:hover:not(:disabled) {
+		background: var(
+			--actionSecondaryBackgroundHover,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%)
+		);
+	}
+
+	.button--danger {
+		background-color: var(--redBackground, #cf313b);
+		color: var(--actionPrimaryText, #ffffff);
+	}
+
+	.button--danger:hover:not(:disabled) {
+		background-color: var(--redBackgroundHover, #cb3535);
+	}
+
+	.button--cms {
+		background-color: var(--purpleBackground, #734ce0);
+		color: var(--actionPrimaryText, #ffffff);
+	}
+
+	.button--cms:hover:not(:disabled) {
+		background-color: var(--purpleBackgroundHover, #815beb);
+	}
+
+	/* States */
+	.button:disabled {
+		cursor: not-allowed;
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	.button--full-width {
+		width: 100%;
+	}
+
+	.button--loading {
+		cursor: wait;
+	}
+
+	/* Content layout */
+	.button__content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 2px;
+		width: 100%;
+	}
+
+	.button__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.button__text {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Loading state adjustments */
+	.button--loading .button__content {
+		gap: 2px;
+	}
+
+	/* Focus styles for accessibility */
+	.button:focus-visible {
+		outline: 2px solid var(--blueBorder, #007df0);
+		outline-offset: 2px;
+	}
+</style>