@hyvor/design 2.1.8-beta.2 → 2.1.8-beta.3

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordion.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import IconCaretDown from '@hyvor/icons/IconCaretDown';
+	import type { Component } from 'svelte';
+	import Feature from './AllFeaturesAccordionFeature.svelte';
+
+	interface FeatureItem {
+		icon: Component;
+		title: string;
+		description: string;
+	}
+
+	interface Category {
+		label: string;
+		icon: Component;
+		color?: string;
+		features: FeatureItem[];
+	}
+
+	interface Props {
+		title?: string;
+		description?: string;
+		categories: Category[];
+		defaultOpenIndex?: number;
+		accentColor?: string;
+		accentColorDark?: string;
+	}
+
+	let {
+		title = "And There's More...",
+		description = '',
+		categories,
+		defaultOpenIndex = 0,
+		accentColor,
+		accentColorDark
+	}: Props = $props();
+
+	let openIndex = $state(defaultOpenIndex);
+
+	function toggle(i: number) {
+		openIndex = openIndex === i ? -1 : i;
+	}
+</script>
+
+<section
+	class="hds-all-features-accordion hds-container"
+	style:--afa-accent={accentColor}
+	style:--afa-accent-dark={accentColorDark}
+>
+	<div class="section-header">
+		<h2>{title}</h2>
+		{#if description}
+			<p>{description}</p>
+		{/if}
+	</div>
+
+	<div class="accordion">
+		{#each categories as cat, i}
+			{@const CatIcon = cat.icon}
+			{@const catColor = cat.color || 'var(--accent)'}
+			<div class="accordion-item" class:open={openIndex === i}>
+				<h3 class="accordion-heading">
+					<button
+						class="accordion-trigger"
+						id="hds-accordion-trigger-{i}"
+						onclick={() => toggle(i)}
+						aria-expanded={openIndex === i}
+						aria-controls="hds-accordion-panel-{i}"
+						style="--cat-color: {catColor}"
+					>
+						<span class="cat-icon" aria-hidden="true">
+							<CatIcon size={18} />
+						</span>
+						<span class="cat-label">{cat.label}</span>
+						<span class="cat-count">{cat.features.length} features</span>
+						<span class="chevron" class:rotated={openIndex === i} aria-hidden="true">
+							<IconCaretDown size={16} />
+						</span>
+					</button>
+				</h3>
+
+				<div
+					class="accordion-body"
+					class:open={openIndex === i}
+					role="region"
+					id="hds-accordion-panel-{i}"
+					aria-labelledby="hds-accordion-trigger-{i}"
+				>
+					<div class="accordion-body-inner">
+						<div class="accordion-content">
+							<ul class="features-grid">
+								{#each cat.features as feat}
+									<Feature
+										icon={feat.icon}
+										title={feat.title}
+										description={feat.description}
+										color={catColor}
+									/>
+								{/each}
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.hds-all-features-accordion {
+		padding: 80px 0;
+	}
+
+	.section-header {
+		text-align: center;
+		margin-bottom: 48px;
+	}
+
+	.section-header h2 {
+		font-size: 32px;
+		font-weight: 700;
+		margin: 0 0 6px;
+		font-family: var(--font-serif);
+	}
+
+	.section-header p {
+		font-size: 1rem;
+		color: var(--text-light);
+		margin: 0;
+	}
+
+	.accordion {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.accordion-item {
+		border-radius: 16px;
+		transition: background 0.2s ease;
+	}
+
+	.accordion-item.open {
+		background: color-mix(in srgb, var(--afa-accent, var(--accent)) 6%, transparent);
+	}
+
+	:global(:root.dark) .accordion-item.open {
+		background: color-mix(
+			in srgb,
+			var(--afa-accent-dark, var(--afa-accent, var(--accent))) 6%,
+			transparent
+		);
+	}
+
+	.accordion-heading {
+		margin: 0;
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	.accordion-trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		padding: 18px 20px;
+		background: none;
+		border: none;
+		border-radius: inherit;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+		color: var(--text);
+	}
+
+	.accordion-item:not(.open) .accordion-trigger:hover {
+		background: var(--hover);
+	}
+
+	.cat-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border-radius: 10px;
+		color: var(--cat-color);
+		background: color-mix(in srgb, var(--cat-color) 16%, transparent);
+		flex-shrink: 0;
+	}
+
+	.cat-label {
+		font-size: 16px;
+		font-weight: 600;
+		flex: 1;
+	}
+
+	.cat-count {
+		font-size: 13px;
+		color: var(--text-light);
+	}
+
+	.chevron {
+		display: flex;
+		align-items: center;
+		color: var(--text-light);
+		transition: transform 0.2s;
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	/* CSS grid row trick: content stays in DOM for SEO, height animates via grid */
+	.accordion-body {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows 0.22s ease;
+	}
+
+	.accordion-body.open {
+		grid-template-rows: 1fr;
+	}
+
+	.accordion-body-inner {
+		overflow: hidden;
+	}
+
+	.accordion-content {
+		padding: 8px 20px 28px;
+	}
+
+	.features-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 28px 20px;
+		margin: 0;
+		padding: 0;
+	}
+
+	/* Override AllFeaturesAccordionFeature's width since we're using grid now */
+	/* TODO */
+	.features-grid :global(.feature) {
+		width: auto;
+	}
+
+	@media (max-width: 768px) {
+		.features-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+interface FeatureItem {
+    icon: Component;
+    title: string;
+    description: string;
+}
+interface Category {
+    label: string;
+    icon: Component;
+    color?: string;
+    features: FeatureItem[];
+}
+interface Props {
+    title?: string;
+    description?: string;
+    categories: Category[];
+    defaultOpenIndex?: number;
+    accentColor?: string;
+    accentColorDark?: string;
+}
+declare const AllFeaturesAccordion: Component<Props, {}, "">;
+type AllFeaturesAccordion = ReturnType<typeof AllFeaturesAccordion>;
+export default AllFeaturesAccordion;

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		icon: Component;
+		title: string;
+		description: string;
+		// any CSS color, e.g. 'var(--green)' or '#4b874b' — defaults to the
+		// theme accent so this works out of the box on any product
+		color?: string;
+	}
+
+	let { icon, title, description, color = 'var(--accent)' }: Props = $props();
+
+	const SvelteComponent = $derived(icon);
+</script>
+
+<li class="feature">
+	<div class="icon-bg" style:color aria-hidden="true">
+		<SvelteComponent size={52} />
+	</div>
+	<div class="content">
+		<h4 class="title">{title}</h4>
+		<p class="description">{description}</p>
+	</div>
+</li>
+
+<style>
+	.feature {
+		position: relative;
+		width: calc(33.33% - 15px);
+		list-style: none;
+		overflow: hidden;
+	}
+
+	.content {
+		position: relative;
+		z-index: 1;
+	}
+
+	/* a large, faint watermark of the feature's own icon, sitting behind the
+	   title/description rather than as a small marker above them */
+	.icon-bg {
+		position: absolute;
+		top: 50%;
+		right: -8px;
+		transform: translateY(-50%);
+		z-index: 0;
+		opacity: 0.14;
+		pointer-events: none;
+	}
+
+	.title {
+		font-weight: 600;
+		font-size: 20px;
+		margin: 0;
+	}
+
+	.description {
+		font-size: 16px;
+		margin: 10px 0 0;
+		color: var(--text-light);
+	}
+
+	@media (max-width: 992px) {
+		.feature {
+			width: 100%;
+			text-align: center;
+		}
+
+		.icon-bg {
+			display: none;
+		}
+	}
+</style>

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+interface Props {
+    icon: Component;
+    title: string;
+    description: string;
+    color?: string;
+}
+declare const AllFeaturesAccordionFeature: Component<Props, {}, "">;
+type AllFeaturesAccordionFeature = ReturnType<typeof AllFeaturesAccordionFeature>;
+export default AllFeaturesAccordionFeature;

package/dist/marketing/FAQ/FAQ.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+	interface FaqItem {
+		q: string;
+		/** answer content as HTML — also used verbatim as the rich schema's answer text */
+		a: string;
+	}
+
+	interface Props {
+		items: FaqItem[];
+		columns?: 1 | 2;
+		// emit the FAQPage JSON-LD rich schema into <svelte:head>
+		richSchema?: boolean;
+	}
+
+	let { items, columns = 2, richSchema = true }: Props = $props();
+
+	const uid = $props.id();
+
+	// which items go in which column (left-to-right, top-to-bottom within each column),
+	// carrying each item's original index along so column splitting doesn't affect it
+	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];
+	}
+
+	// FAQPage rich schema, generated straight from the same array that renders the accordion
+	// (Google's FAQPage guidelines allow a limited set of formatting HTML in the answer text)
+	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}>
+	{#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(--accent-light-mid);
+		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;
+	}
+
+	/* answers are raw HTML (@html) — style plain <a> tags to match the design
+	   system's Link component, which snippet-based answers would use */
+	.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;
+    /** answer content as HTML — also used verbatim as the rich schema's answer text */
+    a: string;
+}
+interface Props {
+    items: FaqItem[];
+    columns?: 1 | 2;
+    richSchema?: boolean;
+}
+declare const FAQ: import("svelte").Component<Props, {}, "">;
+type FAQ = ReturnType<typeof FAQ>;
+export default FAQ;