@hyvor/design 2.1.14 → 2.1.16

package/dist/marketing/Testimonials/Testimonials.svelte

@@ -3,6 +3,10 @@
 		type: 'text';
 		name: string;
 		role: string;
+		company?: string;
+		companyUrl?: string;
+		imageUrl?: string;
+		summary?: string;
 		quote: string;
 	}
 
@@ -10,6 +14,9 @@
 		type: 'video';
 		name: string;
 		role: string;
+		company: string;
+		companyUrl?: string;
+		imageUrl?: string;
 		videoUrl?: string;
 		posterUrl?: string;
 		summary?: string;
@@ -31,37 +38,13 @@
 		handwrittenNames = true
 	}: Props = $props();
 
-	function identicon(seed: string) {
-		let hash = 0;
-		for (let i = 0; i < seed.length; i++) {
-			hash = (hash * 31 + seed.charCodeAt(i)) | 0;
-		}
-		const hue = Math.abs(hash) % 360;
-		const cells: { x: number; y: number }[] = [];
-		for (let col = 0; col < 3; col++) {
-			for (let row = 0; row < 5; row++) {
-				const bit = (hash >> (col * 5 + row)) & 1;
-				if (!bit) continue;
-				cells.push({ x: col, y: row });
-				if (col < 2) cells.push({ x: 4 - col, y: row });
-			}
-		}
-		return {
-			bg: `hsl(${hue} 45% 92%)`,
-			fg: `hsl(${hue} 50% 40%)`,
-			cells
-		};
-	}
-
-	let scrollEl: HTMLDivElement | undefined = $state();
-	let dragging = $state(false);
-	let dragStartX = 0;
-	let dragStartScroll = 0;
-
 	let started: boolean[] = $state(reviews.map(() => false));
 	let playing: boolean[] = $state(reviews.map(() => false));
 	let videoEls: (HTMLVideoElement | undefined)[] = $state([]);
 
+	let rowEl: HTMLDivElement | undefined = $state();
+	let activeIndex = $state(0);
+
 	function play(i: number) {
 		started[i] = true;
 		videoEls[i]?.play().catch(() => {});
@@ -76,23 +59,48 @@
 		playing[i] = false;
 	}
 
-	function onPointerDown(e: PointerEvent) {
-		if (!scrollEl) return;
-		// let clicks and native <video> controls work
-		if ((e.target as HTMLElement).closest('button, video, a')) return;
-		dragging = true;
-		dragStartX = e.clientX;
-		dragStartScroll = scrollEl.scrollLeft;
-		scrollEl.setPointerCapture(e.pointerId);
+	function onCardClick(e: MouseEvent, i: number) {
+		if ((e.target as HTMLElement).closest('a')) return;
+		if (!started[i]) {
+			play(i);
+			return;
+		}
+		const video = videoEls[i];
+		if (!video) return;
+		if (playing[i]) {
+			video.pause();
+		} else {
+			video.play().catch(() => {});
+		}
+	}
+
+	function onCardKeydown(e: KeyboardEvent, i: number) {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		onCardClick(e as unknown as MouseEvent, i);
 	}
 
-	function onPointerMove(e: PointerEvent) {
-		if (!dragging || !scrollEl) return;
-		scrollEl.scrollLeft = dragStartScroll - (e.clientX - dragStartX);
+	function goTo(i: number) {
+		if (!rowEl) return;
+		const card = rowEl.children[i] as HTMLElement | undefined;
+		card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+		activeIndex = i;
 	}
 
-	function onPointerUp() {
-		dragging = false;
+	function onRowScroll() {
+		if (!rowEl) return;
+		const rowCenter = rowEl.getBoundingClientRect().left + rowEl.clientWidth / 2;
+		let closest = 0;
+		let closestDist = Infinity;
+		Array.from(rowEl.children).forEach((child, i) => {
+			const rect = (child as HTMLElement).getBoundingClientRect();
+			const dist = Math.abs(rect.left + rect.width / 2 - rowCenter);
+			if (dist < closestDist) {
+				closestDist = dist;
+				closest = i;
+			}
+		});
+		activeIndex = closest;
 	}
 </script>
 
@@ -102,92 +110,142 @@
 	{/if}
 </svelte:head>
 
+{#snippet meta(review: Review)}
+	<div class="role">
+		{review.role}, <br />
+		{#if review.companyUrl}
+			<a
+				class="company"
+				href={review.companyUrl}
+				target="_blank"
+				rel="nofollow noopener noreferrer"
+			>
+				{review.company}
+			</a>
+		{:else}
+			{review.company}
+		{/if}
+	</div>
+{/snippet}
+
 <section class="hds-testimonials" class:handwritten={handwrittenNames}>
 	<div class="hds-container head">
 		<p class="label">{label}</p>
 		<h2>{@html title}</h2>
 	</div>
 
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="scroll-row"
-		class:dragging
-		bind:this={scrollEl}
-		onpointerdown={onPointerDown}
-		onpointermove={onPointerMove}
-		onpointerup={onPointerUp}
-		onpointerleave={onPointerUp}
-		role="region"
-		aria-label={label}
-	>
-		{#each reviews as review, i}
-			{#if review.type === 'text'}
-				{@const av = identicon(review.name)}
-				<figure class="card text-card hds-box">
-					<svg class="avatar" viewBox="0 0 5 5" style="background: {av.bg}" aria-hidden="true">
-						{#each av.cells as cell}
-							<rect x={cell.x} y={cell.y} width="1" height="1" fill={av.fg} />
-						{/each}
-					</svg>
-					<blockquote>&ldquo;{review.quote}&rdquo;</blockquote>
-					<figcaption>
-						<span class="name">{review.name}</span>
-						<span class="role">{review.role}</span>
-					</figcaption>
-				</figure>
-			{:else}
-				<figure class="card video-card hds-box" class:playing={playing[i]}>
-					{#if started[i]}
-						<!-- svelte-ignore a11y_media_has_caption -->
-						<video
-							class="video"
-							src={review.videoUrl}
-							poster={review.posterUrl}
-							controls={playing[i]}
-							playsinline
-							bind:this={videoEls[i]}
-							use:autoplayVideo
-							onplay={() => (playing[i] = true)}
-							onpause={(e) => onVideoPause(e, i)}
-							onended={() => (playing[i] = false)}
-						></video>
-					{:else}
-						<div class="poster">
-							<img src={review.posterUrl} alt="" />
-						</div>
-					{/if}
-
-					{#if !playing[i]}
-						<div class="poster-scrim"></div>
-
-						{#if !started[i] && review.summary}
-							<p class="video-summary">"{review.summary}"</p>
+	<div class="hds-container-max cards-wrap">
+		<div
+			class="cards-row"
+			bind:this={rowEl}
+			onscroll={onRowScroll}
+			role="region"
+			aria-label={label}
+		>
+			{#each reviews as review, i}
+				{#if review.type === 'text'}
+					<figure class="card text-card hds-box">
+						{#if review.imageUrl}
+							<img class="avatar photo card-avatar" src={review.imageUrl} alt={review.name} />
 						{/if}
-
-						<button
-							class="play-btn"
-							aria-label={started[i] ? 'Resume video testimonial' : 'Play video testimonial'}
-							onclick={() => play(i)}
-						>
-							<svg
-								width="20"
-								height="20"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								aria-hidden="true"
-							>
-								<path d="M5 3.5v9l8-4.5-8-4.5z" />
-							</svg>
-						</button>
-
+						<svg class="quote-mark" viewBox="0 0 24 24" aria-hidden="true">
+							<path
+								d="M10 7c-3.3 0-6 2.7-6 6v4h6v-6H7c0-1.7 1.3-3 3-3V7zm10 0c-3.3 0-6 2.7-6 6v4h6v-6h-3c0-1.7 1.3-3 3-3V7z"
+							/>
+						</svg>
+						{#if review.summary}
+							<p class="text-summary">{review.summary}</p>
+						{/if}
+						<blockquote>&ldquo;{review.quote}&rdquo;</blockquote>
 						<figcaption>
-							<span class="name">{review.name}</span>
-							<span class="role">{review.role}</span>
+							<span class="caption-text">
+								<span class="name">{review.name}</span>
+								{@render meta(review)}
+							</span>
 						</figcaption>
-					{/if}
-				</figure>
-			{/if}
-		{/each}
+					</figure>
+				{:else}
+					<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+					<figure
+						class="card video-card hds-box"
+						class:playing={playing[i]}
+						role="button"
+						tabindex="0"
+						aria-label={playing[i]
+							? 'Pause video testimonial'
+							: started[i]
+								? 'Resume video testimonial'
+								: 'Play video testimonial'}
+						onclick={(e) => onCardClick(e, i)}
+						onkeydown={(e) => onCardKeydown(e, i)}
+					>
+						{#if started[i]}
+							<!-- svelte-ignore a11y_media_has_caption -->
+							<video
+								class="video"
+								src={review.videoUrl}
+								poster={review.posterUrl}
+								playsinline
+								bind:this={videoEls[i]}
+								use:autoplayVideo
+								onplay={() => (playing[i] = true)}
+								onpause={(e) => onVideoPause(e, i)}
+								onended={() => (playing[i] = false)}
+							></video>
+						{:else}
+							<div class="poster">
+								<img src={review.posterUrl} alt="" />
+							</div>
+						{/if}
+
+						{#if !playing[i]}
+							<div class="poster-scrim"></div>
+
+							{#if review.summary}
+								<p class="video-summary">“{review.summary}”</p>
+							{/if}
+
+							<div class="play-btn" aria-hidden="true">
+								<svg
+									width="20"
+									height="20"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									aria-hidden="true"
+								>
+									<path d="M5 3.5v9l8-4.5-8-4.5z" />
+								</svg>
+							</div>
+
+							<figcaption>
+								{#if review.imageUrl}
+									<img class="avatar photo" src={review.imageUrl} alt={review.name} />
+								{/if}
+								<span class="caption-text">
+									<span class="name">{review.name}</span>
+									{@render meta(review)}
+								</span>
+							</figcaption>
+						{/if}
+					</figure>
+				{/if}
+			{/each}
+		</div>
+
+		{#if reviews.length > 1}
+			<div class="dots" role="tablist" aria-label="Testimonials navigation">
+				{#each reviews as _, i}
+					<button
+						class="dot"
+						class:active={i === activeIndex}
+						role="tab"
+						aria-selected={i === activeIndex}
+						aria-label={`Go to testimonial ${i + 1}`}
+						onclick={() => goTo(i)}
+					></button>
+				{/each}
+			</div>
+		{/if}
 	</div>
 </section>
 
@@ -196,6 +254,7 @@
 		background: var(--accent-lightest);
 		padding: 100px 0 96px;
 		overflow: hidden;
+		scroll-margin-top: calc(var(--header-height, 55px) + 20px);
 	}
 
 	.head {
@@ -221,31 +280,17 @@
 		font-family: var(--font-serif);
 	}
 
-	.scroll-row {
-		--side-padding: max(15px, calc((100vw - 1000px) / 2));
+	.cards-wrap {
+		padding: 32px 15px 4px;
+		box-sizing: border-box;
+	}
 
+	.cards-row {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: stretch;
+		justify-content: center;
 		gap: 20px;
-		overflow-x: auto;
-		overflow-y: visible;
-		scroll-behavior: smooth;
-		cursor: grab;
-		padding: 32px var(--side-padding) 36px;
-		scrollbar-width: none;
-		-webkit-overflow-scrolling: touch;
-		touch-action: pan-y;
-		user-select: none;
-		-webkit-user-select: none;
-	}
-
-	.scroll-row.dragging {
-		cursor: grabbing;
-		scroll-behavior: auto;
-	}
-
-	.scroll-row::-webkit-scrollbar {
-		display: none;
 	}
 
 	.card {
@@ -261,11 +306,29 @@
 	}
 
 	.text-card {
+		height: auto;
+		min-height: 440px;
 		padding: 28px;
 		display: flex;
 		flex-direction: column;
 	}
 
+	.quote-mark {
+		width: 40px;
+		height: 40px;
+		margin-bottom: 20px;
+		fill: var(--accent);
+		opacity: 0.14;
+		flex-shrink: 0;
+	}
+
+	.card-avatar {
+		position: absolute;
+		top: 28px;
+		right: 28px;
+		z-index: 1;
+	}
+
 	.avatar {
 		width: 46px;
 		height: 46px;
@@ -275,48 +338,91 @@
 		shape-rendering: crispEdges;
 	}
 
+	.avatar.photo {
+		object-fit: cover;
+	}
+
+	.text-summary {
+		margin: 0 0 14px;
+		font-family: var(--font-serif);
+		font-size: 18px;
+		font-weight: 800;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		color: var(--text);
+	}
+
 	blockquote {
 		font-size: 16px;
 		line-height: 1.7;
 		color: var(--text);
-		margin: 20px 0 0;
+		margin: 0 0 20px;
 		flex: 1;
+		font-family: var(--font-serif);
 	}
 
 	.text-card figcaption {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.caption-text {
 		display: flex;
 		flex-direction: column;
-		gap: 0;
+		justify-content: center;
+		gap: 2px;
+		min-width: 0;
 	}
 
 	.name {
 		font-size: 16px;
 		font-weight: 600;
 		color: var(--text);
-		line-height: 1.2;
+		line-height: 1.3;
 	}
 
 	.handwritten .name {
 		font-family: 'Caveat', cursive;
 		font-size: 28px;
 		font-weight: 600;
+		line-height: 1.15;
 	}
 
 	.role {
-		font-size: 13px;
+		font-size: 14px;
+		line-height: 1.35;
 		color: var(--text-light);
+		margin-top: 4px;
+		font-family: var(--font-serif);
+	}
+
+	.company {
+		align-self: flex-start;
+		font-size: 13px;
+		line-height: 1.35;
+		font-weight: 500;
+		color: var(--text);
+		text-decoration: none;
+	}
+
+	a.company:hover {
+		text-decoration: underline;
+	}
+
+	.handwritten .company {
+		font-weight: 600;
 	}
 
 	.video-card {
-		width: 280px;
 		overflow: hidden;
 		padding: 0;
+		cursor: pointer;
 	}
 
-	.video-card.playing {
-		width: 340px;
-		height: 520px;
-		z-index: 1;
+	.video-card:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
 	}
 
 	.poster {
@@ -344,13 +450,12 @@
 		right: 20px;
 		margin: 0;
 		font-family: var(--font-serif);
-		font-size: 18px;
+		font-size: 16px;
 		font-weight: 800;
 		line-height: 1.25;
 		letter-spacing: -0.01em;
 		color: #fff;
 		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-		font-style: italic;
 	}
 
 	.play-btn {
@@ -400,7 +505,12 @@
 		padding: 40px 20px 20px;
 		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
 		display: flex;
-		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.video-card .avatar.photo {
+		border: 2px solid rgba(255, 255, 255, 0.7);
 	}
 
 	.video-card .name {
@@ -411,11 +521,30 @@
 		color: rgba(255, 255, 255, 0.75);
 	}
 
-	@media (max-width: 600px) {
-		.scroll-row {
-			--side-padding: max(20px, calc((100vw - 1000px) / 2));
-			padding: 32px var(--side-padding) 36px;
-		}
+	.video-card .company {
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	.dots {
+		display: none;
+	}
+
+	.dot {
+		width: 8px;
+		height: 8px;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+		background: var(--border);
+		cursor: pointer;
+		transition:
+			background 0.2s,
+			transform 0.2s;
+	}
+
+	.dot.active {
+		background: var(--accent);
+		transform: scale(1.3);
 	}
 
 	@media (max-width: 768px) {
@@ -429,13 +558,44 @@
 			height: 400px;
 		}
 
-		.video-card {
-			width: 240px;
+		.text-card {
+			height: auto;
+			min-height: 400px;
 		}
+	}
 
-		.video-card.playing {
-			width: 280px;
-			height: 460px;
+	@media (max-width: 640px) {
+		.cards-wrap {
+			padding: 24px 0 4px;
+		}
+
+		.cards-row {
+			flex-wrap: nowrap;
+			justify-content: flex-start;
+			overflow-x: auto;
+			scroll-snap-type: x mandatory;
+			-webkit-overflow-scrolling: touch;
+			scrollbar-width: none;
+			padding: 0 24px;
+		}
+
+		.cards-row::-webkit-scrollbar {
+			display: none;
+		}
+
+		.card {
+			flex: 0 0 calc(100% - 32px);
+			width: calc(100% - 32px);
+			max-width: 360px;
+			scroll-snap-align: center;
+		}
+
+		.dots {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+			margin-top: 20px;
 		}
 	}
 </style>

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

@@ -2,12 +2,19 @@ interface TextReview {
     type: 'text';
     name: string;
     role: string;
+    company?: string;
+    companyUrl?: string;
+    imageUrl?: string;
+    summary?: string;
     quote: string;
 }
 interface VideoReview {
     type: 'video';
     name: string;
     role: string;
+    company: string;
+    companyUrl?: string;
+    imageUrl?: string;
     videoUrl?: string;
     posterUrl?: string;
     summary?: string;

package/dist/marketing/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte';
 export { default as Header } from './Header/Header.svelte';
 export { default as HeaderNavLink } from './Header/HeaderNavLink.svelte';
+export { default as HeaderNavMenu } from './Header/HeaderNavMenu.svelte';
 export { default as HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
 export { buildLocalizedUrl } from './Header/language.js';
 export type { LanguageOption } from './Header/language.js';

package/dist/marketing/index.js

@@ -3,6 +3,7 @@ export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte
 // ## Header
 export { default as Header } from './Header/Header.svelte';
 export { default as HeaderNavLink } from './Header/HeaderNavLink.svelte';
+export { default as HeaderNavMenu } from './Header/HeaderNavMenu.svelte';
 export { default as HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
 export { buildLocalizedUrl } from './Header/language.js';
 // ## Footer

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.14",
+	"version": "2.1.16",
 	"license": "MIT",
 	"private": false,
 	"repository": {