@hyvor/design 2.1.9 → 2.1.10

package/dist/marketing/FAQ/FAQ.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	interface FaqItem {
+		q: string;
+		a: string; // as HTML - also used in rich schema
+	}
+
+	interface Props {
+		items: FaqItem[];
+		columns?: 1 | 2;
+		// emit the FAQPage JSON-LD rich schema into <svelte:head>
+		richSchema?: boolean;
+		toggleIconBg?: string;
+	}
+
+	let { items, columns = 2, richSchema = true, toggleIconBg }: Props = $props();
+
+	const uid = $props.id();
+
+	const cols = $derived.by(() => {
+		const indexed = items.map((item, index) => ({ item, index }));
+		if (columns === 1) return [indexed];
+		const mid = Math.ceil(indexed.length / 2);
+		return [indexed.slice(0, mid), indexed.slice(mid)];
+	});
+
+	// independent open/close state per item, first one open by default
+	let openStates = $state(items.map((_, i) => i === 0));
+
+	function toggle(i: number) {
+		openStates[i] = !openStates[i];
+	}
+
+	const richSchemaObj = $derived({
+		'@context': 'https://schema.org',
+		'@type': 'FAQPage',
+		mainEntity: items.map((item) => ({
+			'@type': 'Question',
+			name: item.q,
+			acceptedAnswer: {
+				'@type': 'Answer',
+				text: item.a
+			}
+		}))
+	});
+
+	const richSchemaScript = $derived(
+		'<' + 'script type="application/ld+json">' + JSON.stringify(richSchemaObj) + '<' + '/script>'
+	);
+</script>
+
+<svelte:head>
+	{#if richSchema}
+		{@html richSchemaScript}
+	{/if}
+</svelte:head>
+
+<div class="hds-faq" class:single={columns === 1} style:--faq-toggle-icon-bg={toggleIconBg}>
+	{#each cols as col, colIndex (colIndex)}
+		<div class="faq-col">
+			{#each col as { item, index } (item.q)}
+				<div class="faq" class:open={openStates[index]}>
+					<h3 class="heading">
+						<button
+							class="trigger"
+							id="hds-faq-trigger-{uid}-{index}"
+							onclick={() => toggle(index)}
+							aria-expanded={openStates[index]}
+							aria-controls="hds-faq-panel-{uid}-{index}"
+						>
+							<span class="q">{item.q}</span>
+							<span class="toggle-icon" aria-hidden="true">
+								<span class="line horizontal"></span>
+								<span class="line vertical"></span>
+							</span>
+						</button>
+					</h3>
+
+					<div
+						class="body"
+						class:open={openStates[index]}
+						role="region"
+						id="hds-faq-panel-{uid}-{index}"
+						aria-labelledby="hds-faq-trigger-{uid}-{index}"
+					>
+						<div class="body-inner">
+							<div class="a">{@html item.a}</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.hds-faq {
+		display: flex;
+		gap: 0 60px;
+	}
+
+	.hds-faq.single {
+		display: block;
+	}
+
+	.faq-col {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.faq {
+		border-bottom: 1px solid var(--border);
+	}
+
+	.heading {
+		margin: 0;
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	.trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+		width: 100%;
+		padding: 20px 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		color: inherit;
+		font: inherit;
+	}
+
+	.q {
+		font-size: 16px;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	.toggle-icon {
+		position: relative;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background: var(--faq-toggle-icon-bg, var(--accent-light));
+		color: var(--accent);
+		transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+	}
+
+	.faq.open .toggle-icon {
+		transform: rotate(180deg);
+	}
+
+	.line {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		background: currentColor;
+		border-radius: 2px;
+		transform: translate(-50%, -50%);
+		transition:
+			transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
+			opacity 0.2s ease;
+	}
+
+	.line.horizontal {
+		width: 12px;
+		height: 2px;
+	}
+
+	.line.vertical {
+		width: 2px;
+		height: 12px;
+	}
+
+	.faq.open .line.vertical {
+		transform: translate(-50%, -50%) rotate(90deg);
+		opacity: 0;
+	}
+
+	/* CSS grid row trick: content stays in DOM for SEO, height animates via grid */
+	.body {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+	}
+
+	.body.open {
+		grid-template-rows: 1fr;
+	}
+
+	.body-inner {
+		overflow: hidden;
+	}
+
+	.a {
+		padding: 0 30px 22px 0;
+		font-size: 15px;
+		line-height: 1.6;
+		color: var(--text-light);
+		opacity: 0;
+		transform: translateY(-6px);
+		transition:
+			opacity 0.25s ease,
+			transform 0.25s ease;
+	}
+
+	.body.open .a {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0.08s;
+	}
+
+	.a :global(a) {
+		color: var(--link);
+		text-decoration: underline;
+	}
+
+	@media (max-width: 768px) {
+		.hds-faq {
+			flex-direction: column;
+			gap: 0;
+		}
+	}
+</style>

package/dist/marketing/FAQ/FAQ.svelte.d.ts

@@ -0,0 +1,13 @@
+interface FaqItem {
+    q: string;
+    a: string;
+}
+interface Props {
+    items: FaqItem[];
+    columns?: 1 | 2;
+    richSchema?: boolean;
+    toggleIconBg?: string;
+}
+declare const FAQ: import("svelte").Component<Props, {}, "">;
+type FAQ = ReturnType<typeof FAQ>;
+export default FAQ;

package/dist/marketing/FeatureSplit/FeatureSplit.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import type { Snippet } from 'svelte';
+
+	type ButtonConfig = { href: string; label: string; external?: boolean };
+
+	interface Props {
+		eyebrow: string;
+		title: string | Snippet;
+		description: string;
+		bullets?: string[] | Snippet;
+		button?: ButtonConfig | ButtonConfig[] | null;
+		flip?: boolean;
+		altBg?: boolean;
+		overlap?: boolean;
+		interactiveBullets?: boolean;
+		visual: Snippet<[activeBullet: number]>;
+		after?: Snippet;
+		left?: Snippet;
+		max?: boolean;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		bullets = [],
+		button = null,
+		flip = false,
+		altBg = false,
+		overlap = false,
+		interactiveBullets = false,
+		visual,
+		after,
+		left,
+		max = false
+	}: Props = $props();
+
+	let inView = $state(false);
+	let activeBullet = $state(0);
+
+	// how long the active bullet's progress bar takes to fill before auto-advancing
+	const AUTO_ADVANCE_MS = 5000;
+
+	$effect(() => {
+		if (!interactiveBullets || !inView) return;
+		if (!Array.isArray(bullets) || bullets.length <= 1) return;
+		activeBullet;
+		const count = bullets.length;
+		const timer = setTimeout(() => {
+			activeBullet = (activeBullet + 1) % count;
+		}, AUTO_ADVANCE_MS);
+		return () => clearTimeout(timer);
+	});
+
+	function onView(node: HTMLElement, callback: () => void) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) {
+					callback();
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.25 }
+		);
+		observer.observe(node);
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
+	}
+</script>
+
+<section class="hds-feature-split" class:alt-bg={altBg}>
+	<div class={max ? 'hds-container-max split' : 'hds-container split'} class:flip class:overlap>
+		<div class="text-col" class:in-view={inView} use:onView={() => (inView = true)}>
+			{#if left}
+				{@render left()}
+			{:else}
+				<span class="eyebrow">{eyebrow}</span>
+				<h2>
+					{#if typeof title === 'string'}
+						{@html title}
+					{:else}
+						{@render title()}
+					{/if}
+				</h2>
+				<p>{description}</p>
+
+				{#if Array.isArray(bullets)}
+					{#if bullets.length}
+						<ul class="bullets" class:interactive={interactiveBullets}>
+							{#each bullets as b, i}
+								<li>
+									{#if interactiveBullets}
+										<button
+											type="button"
+											class="bullet-btn"
+											class:active={activeBullet === i}
+											style="animation-duration: {AUTO_ADVANCE_MS}ms"
+											onclick={() => (activeBullet = i)}
+										>
+											<IconCheckCircleFill size={14} />{b}
+										</button>
+									{:else}
+										<IconCheckCircleFill size={14} />{b}
+									{/if}
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				{:else if bullets}
+					{@render bullets()}
+				{/if}
+
+				{#if button}
+					{@const buttons = Array.isArray(button) ? button : [button]}
+					<div class="buttons">
+						{#each buttons as b}
+							<Button
+								as="a"
+								href={b.href}
+								target={b.external ? '_blank' : undefined}
+								rel={b.external ? 'noopener' : undefined}
+								variant="outline"
+								size="small"
+							>
+								{b.label}
+								{#snippet end()}<IconBoxArrowUpRight size={11} />{/snippet}
+							</Button>
+						{/each}
+					</div>
+				{/if}
+			{/if}
+		</div>
+
+		<div class="visual-col">
+			{@render visual(activeBullet)}
+		</div>
+	</div>
+
+	{#if after}
+		<div class="hds-container-max">
+			{@render after()}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.hds-feature-split {
+		padding: 100px 0;
+		overflow-x: hidden;
+	}
+
+	.alt-bg {
+		background: color-mix(in srgb, var(--accent) 10%, var(--background));
+	}
+
+	.split {
+		display: flex;
+		align-items: center;
+		gap: 72px;
+	}
+
+	.split.flip {
+		flex-direction: row-reverse;
+	}
+
+	.text-col,
+	.visual-col {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.text-col {
+		opacity: 0;
+		transform: translateY(18px);
+		transition:
+			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+			transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.text-col.in-view {
+		opacity: 1;
+		transform: none;
+	}
+	.split.overlap .text-col {
+		z-index: 2;
+	}
+
+	.eyebrow {
+		display: inline-block;
+		font-size: 12px;
+		font-weight: 700;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--accent);
+		margin-bottom: 16px;
+	}
+
+	h2 {
+		font-size: clamp(26px, 3.5vw, 38px);
+		font-weight: 800;
+		letter-spacing: -0.02em;
+		line-height: 1.15;
+		margin: 0 0 16px;
+	}
+
+	p {
+		font-size: 16px;
+		line-height: 1.7;
+		color: var(--text-light);
+		margin: 0 0 28px;
+		max-width: 440px;
+	}
+
+	.bullets {
+		list-style: none;
+		margin: 0 0 32px;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.bullets li {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		font-size: 1rem;
+		text-align: left;
+	}
+
+	.bullets li :global(svg) {
+		color: var(--accent);
+		flex-shrink: 0;
+		margin-top: 0.3em;
+	}
+
+	.bullet-btn {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+		padding: 8px 10px;
+		border: none;
+		border-radius: 20px;
+		background-color: transparent;
+		background-image: linear-gradient(
+			color-mix(in srgb, var(--accent) 14%, transparent),
+			color-mix(in srgb, var(--accent) 14%, transparent)
+		);
+		background-repeat: no-repeat;
+		background-position: left center;
+		background-size: 0% 100%;
+		color: var(--text-light);
+		font: inherit;
+		font-size: 1rem;
+		text-align: left;
+		cursor: pointer;
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+	}
+
+	.bullet-btn:hover {
+		background-color: color-mix(in srgb, var(--text) 4%, transparent);
+	}
+
+	.bullet-btn.active {
+		color: var(--text);
+		animation-name: bullet-fill;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes bullet-fill {
+		from {
+			background-size: 0% 100%;
+		}
+		to {
+			background-size: 100% 100%;
+		}
+	}
+
+	.bullets.interactive li :global(svg) {
+		color: var(--text-light);
+	}
+
+	.bullets.interactive li:has(.bullet-btn.active) :global(svg) {
+		color: var(--accent);
+	}
+
+	.buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+
+	@media (max-width: 900px) {
+		.split,
+		.split.flip {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 48px;
+		}
+
+		.text-col {
+			width: 100%;
+			text-align: left;
+		}
+
+		.visual-col {
+			width: 100%;
+		}
+
+		p {
+			max-width: 100%;
+		}
+	}
+</style>

package/dist/marketing/FeatureSplit/FeatureSplit.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type ButtonConfig = {
+    href: string;
+    label: string;
+    external?: boolean;
+};
+interface Props {
+    eyebrow: string;
+    title: string | Snippet;
+    description: string;
+    bullets?: string[] | Snippet;
+    button?: ButtonConfig | ButtonConfig[] | null;
+    flip?: boolean;
+    altBg?: boolean;
+    overlap?: boolean;
+    interactiveBullets?: boolean;
+    visual: Snippet<[activeBullet: number]>;
+    after?: Snippet;
+    left?: Snippet;
+    max?: boolean;
+}
+declare const FeatureSplit: import("svelte").Component<Props, {}, "">;
+type FeatureSplit = ReturnType<typeof FeatureSplit>;
+export default FeatureSplit;