@hyvor/design 2.1.9 → 2.1.11

package/dist/marketing/FullTrialSignup/FullTrialSignup.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+
+	type ButtonConfig = { href: string; label: string; external?: boolean };
+
+	interface Props {
+		badge?: string | null;
+		title?: string;
+		description?: string;
+		button?: ButtonConfig | ButtonConfig[] | null;
+		checks?: string[];
+		accentColor?: string;
+		accentColorDark?: string;
+		[key: string]: any;
+	}
+
+	let {
+		badge = null,
+		title = 'Start your trial today',
+		description = '',
+		button = null,
+		checks = ['14-day free trial', 'No credit card required', 'Cancel anytime'],
+		accentColor,
+		accentColorDark,
+		...rest
+	}: Props = $props();
+
+	const buttons = $derived(button ? (Array.isArray(button) ? button : [button]) : []);
+</script>
+
+<section
+	class="hds-full-trial-signup"
+	style:--fts-accent={accentColor}
+	style:--fts-accent-dark={accentColorDark}
+	{...rest}
+>
+	<div class="hds-container inner">
+		{#if badge}
+			<div class="badge">{badge}</div>
+		{/if}
+
+		<h2>{title}</h2>
+
+		{#if description}
+			<p>{description}</p>
+		{/if}
+
+		{#if buttons.length}
+			<div class="cta-actions">
+				{#each buttons as b}
+					<Button
+						as="a"
+						size="large"
+						href={b.href}
+						target={b.external ? '_blank' : undefined}
+						rel={b.external ? 'noopener' : undefined}
+					>
+						{b.label}
+					</Button>
+				{/each}
+			</div>
+		{/if}
+
+		{#if checks.length}
+			<div class="checks">
+				{#each checks as check}
+					<div class="check">
+						<IconCheckCircleFill size={15} />
+						{check}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.hds-full-trial-signup {
+		--fts-accent-resolved: var(--fts-accent, var(--accent));
+		padding: 96px 0 138px;
+		background: linear-gradient(
+			to bottom,
+			var(--background, var(--box-background)),
+			color-mix(in srgb, var(--fts-accent-resolved) 40%, var(--background, var(--box-background)))
+		);
+		text-align: center;
+	}
+
+	:global(:root.dark) .hds-full-trial-signup {
+		--fts-accent-resolved: var(--fts-accent-dark, var(--fts-accent, var(--accent)));
+	}
+
+	.inner {
+		width: 600px;
+		max-width: 100%;
+	}
+
+	.badge {
+		display: inline-flex;
+		padding: 4px 14px;
+		border-radius: 100px;
+		font-size: 13px;
+		font-weight: 600;
+		background: color-mix(in srgb, var(--fts-accent-resolved) 12%, transparent);
+		color: var(--fts-accent-resolved);
+		border: 1px solid color-mix(in srgb, var(--fts-accent-resolved) 25%, transparent);
+		margin-bottom: 24px;
+	}
+
+	h2 {
+		font-size: clamp(28px, 4vw, 40px);
+		font-weight: 800;
+		margin: 0 0 12px;
+		letter-spacing: -0.02em;
+		font-family: var(--font-serif);
+	}
+
+	p {
+		font-size: 1rem;
+		color: var(--text-light);
+		margin: 0 0 32px;
+	}
+
+	.cta-actions {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin: 0 0 24px;
+	}
+
+	.checks {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 20px;
+		flex-wrap: wrap;
+		margin-top: 24px;
+	}
+
+	.check {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 14px;
+		color: var(--text-light);
+	}
+
+	.check :global(svg) {
+		color: var(--fts-accent-resolved);
+	}
+
+	@media (max-width: 600px) {
+		.checks {
+			flex-direction: column;
+			align-items: flex-start;
+			width: fit-content;
+			max-width: 100%;
+			margin: 24px auto 0;
+			gap: 10px;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type ButtonConfig = {
+    href: string;
+    label: string;
+    external?: boolean;
+};
+interface Props {
+    badge?: string | null;
+    title?: string;
+    description?: string;
+    button?: ButtonConfig | ButtonConfig[] | null;
+    checks?: string[];
+    accentColor?: string;
+    accentColorDark?: string;
+    [key: string]: any;
+}
+declare const FullTrialSignup: import("svelte").Component<Props, {}, "">;
+type FullTrialSignup = ReturnType<typeof FullTrialSignup>;
+export default FullTrialSignup;

package/dist/marketing/Header/Header.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import Container from './../Container/Container.svelte';
 	import DarkToggle from '../../components/Dark/DarkToggle.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
 	import IconList from '@hyvor/icons/IconList';
+	import IconX from '@hyvor/icons/IconX';
 	import HeaderNotification from './HeaderNotification.svelte';
 
 	interface Props {
@@ -14,9 +17,11 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: import('svelte').Snippet;
-		end?: import('svelte').Snippet;
+		center?: Snippet;
+		end?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		menuLabel?: string;
 	}
 
 	let {
@@ -29,20 +34,40 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		menuLabel = 'Menu'
 	}: Props = $props();
+
+	let scrolled = $state(false);
+	let mobileOpen = $state(false);
+
+	onMount(() => {
+		const onScroll = () => (scrolled = window.scrollY > 8);
+		onScroll();
+		window.addEventListener('scroll', onScroll, { passive: true });
+		return () => window.removeEventListener('scroll', onScroll);
+	});
+
+	// close the mobile menu once a link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			mobileOpen = false;
+		}
+	}
 </script>
 
-<header>
+<header class:scrolled>
 	<HeaderNotification {instance} {product} />
 	<Container as="nav" {max}>
 		<div class="nav-start">
 			<a class="nav-brand" {href}>
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
-					alt="{name + (subName ? ' ' + subName : '')} Logo"
-					width="30"
-					height="30"
+					alt="{name + (subName ? ' ' + subName : '')} {logoAltText}"
+					width="26"
+					height="26"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -70,20 +95,30 @@
 		</div>
 
 		<span class="mobile-nav-wrap">
-			<Dropdown align="end" width={300}>
+			<Dropdown bind:show={mobileOpen} align="end" width={300} contentPadding={8}>
 				{#snippet trigger()}
-					<IconButton variant="invisible">
-						<IconList size={18} />
+					<IconButton variant="invisible" aria-label={menuLabel} aria-expanded={mobileOpen}>
+						{#if mobileOpen}
+							<IconX size={18} />
+						{:else}
+							<IconList size={18} />
+						{/if}
 					</IconButton>
 				{/snippet}
 				{#snippet content()}
-					<div class="mobile-content">
-						<div class="mobile-inner center">
-							{@render center?.()}
-						</div>
-						<div class="mobile-inner end">
-							{@render end?.()}
-						</div>
+					<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+					<div class="mobile-content" onclick={closeOnLinkClick}>
+						{#if center}
+							<div class="mobile-inner">
+								{@render center()}
+							</div>
+						{/if}
+						{#if end}
+							<div class="mobile-divider"></div>
+							<div class="mobile-inner end">
+								{@render end()}
+							</div>
+						{/if}
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -105,10 +140,15 @@
 		width: 100%;
 		z-index: 100;
 		background-color: var(--background, var(--accent-lightest));
-		border-bottom: 1px solid var(--border);
+		border-bottom: 1px solid transparent;
 		height: var(--header-height);
 		display: flex;
 		flex-direction: column;
+		transition: border-color 0.2s ease;
+	}
+
+	header.scrolled {
+		border-bottom-color: var(--border);
 	}
 
 	header :global(> nav) {
@@ -117,7 +157,9 @@
 		flex: 1;
 	}
 	.nav-brand {
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
 		line-height: inherit;
 		white-space: nowrap;
 		color: inherit;
@@ -125,11 +167,10 @@
 		font-weight: 600;
 	}
 	.nav-brand img {
-		vertical-align: middle;
+		display: block;
 	}
 
 	.brand-product {
-		vertical-align: middle;
 		display: inline-flex;
 		flex-direction: column;
 		justify-content: center;
@@ -148,7 +189,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 6px;
+		gap: 2px;
 		justify-content: center;
 	}
 
@@ -192,18 +233,21 @@
 	.mobile-inner {
 		display: flex;
 		flex-direction: column;
-	}
-	.mobile-content {
-		gap: 10px;
+		gap: 2px;
 	}
 
 	.mobile-content :global(.button) {
 		display: flex;
 	}
 
-	/* 
-		Scroll padding top is used to prevent the content from being hidden behind the header
-		https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+	.mobile-divider {
+		height: 1px;
+		background: var(--border);
+		margin: 6px 4px;
+	}
+
+	/*
+		used to prevent the content from being hidden behind the header
 	*/
 	:global(html) {
 		scroll-padding-top: calc(var(--header-height) + 20px);

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface Props {
     product: string;
     instance?: string;
@@ -6,9 +7,11 @@ interface Props {
     href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: import('svelte').Snippet;
-    end?: import('svelte').Snippet;
+    center?: Snippet;
+    end?: Snippet;
     max?: boolean;
+    logoAltText?: string;
+    menuLabel?: string;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/marketing/Header/HeaderLanguageToggle.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
+	import HeaderNavLink from './HeaderNavLink.svelte';
+	import type {
+		DropdownAlign,
+		DropdownPosition
+	} from '../../components/Dropdown/dropdown.types.js';
+	import type { LanguageOption } from './language.js';
+
+	interface Props {
+		languages: LanguageOption[];
+		current: string;
+		href: (code: string) => string;
+		showName?: boolean;
+		align?: DropdownAlign;
+		position?: DropdownPosition;
+		label?: string;
+	}
+
+	let {
+		languages,
+		current,
+		href,
+		showName = false,
+		align = 'center',
+		position = 'bottom',
+		label = 'Change language'
+	}: Props = $props();
+
+	const currentLanguage = $derived(languages.find((l) => l.code === current) ?? languages[0]);
+
+	let show = $state(false);
+
+	// close the dropdown once a language link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			show = false;
+		}
+	}
+</script>
+
+{#if currentLanguage}
+	<div class="header-language-toggle">
+		<Dropdown bind:show {align} {position} contentPadding={8}>
+			{#snippet trigger()}
+				<HeaderNavLink aria-label={label} aria-expanded={show}>
+					<span class="flag">{currentLanguage.flag}</span>
+					{#if showName}{currentLanguage.name}{/if}
+				</HeaderNavLink>
+			{/snippet}
+			{#snippet content()}
+				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+				<div class="menu" onclick={closeOnLinkClick}>
+					{#each languages as language (language.code)}
+						<HeaderNavLink
+							href={href(language.code)}
+							active={language.code === current}
+							data-lang={language.code}
+							menu
+						>
+							<span class="lang-row">
+								<span class="flag">{language.flag}</span>
+								<span class="name">{language.name}</span>
+								<span class="code">{language.code.toUpperCase()}</span>
+							</span>
+						</HeaderNavLink>
+					{/each}
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+{/if}
+
+<style>
+	.header-language-toggle {
+		position: relative;
+		display: inline-flex;
+		margin-left: 12px;
+		padding-left: 12px;
+	}
+
+	.header-language-toggle::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 1px;
+		height: 16px;
+		background: var(--border);
+	}
+
+	.flag {
+		font-size: 15px;
+		line-height: 1;
+	}
+
+	.menu {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.lang-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.code {
+		margin-left: auto;
+		padding-left: 8px;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--text-light);
+	}
+</style>

package/dist/marketing/Header/HeaderLanguageToggle.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DropdownAlign, DropdownPosition } from '../../components/Dropdown/dropdown.types.js';
+import type { LanguageOption } from './language.js';
+interface Props {
+    languages: LanguageOption[];
+    current: string;
+    href: (code: string) => string;
+    showName?: boolean;
+    align?: DropdownAlign;
+    position?: DropdownPosition;
+    label?: string;
+}
+declare const HeaderLanguageToggle: import("svelte").Component<Props, {}, "">;
+type HeaderLanguageToggle = ReturnType<typeof HeaderLanguageToggle>;
+export default HeaderLanguageToggle;

package/dist/marketing/Header/HeaderNavLink.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface ComponentProps {
+		href?: string;
+		active?: boolean;
+		menu?: boolean;
+		target?: string;
+		rel?: string;
+		start?: Snippet;
+		children?: Snippet;
+		end?: Snippet;
+		description?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	type Props = ComponentProps & Omit<HTMLAttributes<HTMLElement>, keyof ComponentProps>;
+
+	let {
+		href,
+		active = false,
+		menu = false,
+		target,
+		rel,
+		start,
+		children,
+		end,
+		description,
+		onclick,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	{href}
+	{target}
+	{rel}
+	{onclick}
+	role={href ? undefined : 'button'}
+	tabindex={href ? undefined : 0}
+	class="header-nav-link"
+	class:active
+	class:menu={menu || !!description}
+	class:rich={!!description}
+	{...rest}
+>
+	{#if description}
+		{#if start}
+			<span class="icon-box">{@render start()}</span>
+		{/if}
+		<span class="text-stack">
+			<span class="title">{@render children?.()}</span>
+			<span class="desc">{@render description()}</span>
+		</span>
+	{:else}
+		{#if start}
+			<span class="start">{@render start()}</span>
+		{/if}
+		{@render children?.()}
+		{#if end}
+			<span class="end">{@render end()}</span>
+		{/if}
+	{/if}
+</svelte:element>
+
+<style>
+	.header-nav-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 16px;
+		border-radius: 20px;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text-light);
+		text-decoration: none;
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			0.15s background-color,
+			0.15s color;
+	}
+
+	.header-nav-link:hover {
+		background: var(--hover, var(--accent-lightest));
+		color: var(--text);
+	}
+
+	.header-nav-link.active {
+		background: var(--accent-light);
+		color: var(--text);
+	}
+
+	.header-nav-link.menu {
+		width: 100%;
+		padding: 8px 10px;
+		border-radius: 12px;
+	}
+
+	.start,
+	.end {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.header-nav-link.rich {
+		align-items: flex-start;
+		gap: 10px;
+		white-space: normal;
+	}
+
+	.icon-box {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 8px;
+		background: var(--accent-light);
+		color: var(--accent);
+	}
+
+	.header-nav-link.rich.active .icon-box {
+		background: var(--background);
+	}
+
+	.text-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		padding-top: 1px;
+	}
+
+	.title {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--text);
+	}
+
+	.desc {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--text-light);
+	}
+</style>

package/dist/marketing/Header/HeaderNavLink.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface ComponentProps {
+    href?: string;
+    active?: boolean;
+    menu?: boolean;
+    target?: string;
+    rel?: string;
+    start?: Snippet;
+    children?: Snippet;
+    end?: Snippet;
+    description?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+}
+type Props = ComponentProps & Omit<HTMLAttributes<HTMLElement>, keyof ComponentProps>;
+declare const HeaderNavLink: import("svelte").Component<Props, {}, "">;
+type HeaderNavLink = ReturnType<typeof HeaderNavLink>;
+export default HeaderNavLink;

package/dist/marketing/Header/language.d.ts

@@ -0,0 +1,16 @@
+export interface LanguageOption {
+    code: string;
+    flag: string;
+    name: string;
+}
+/**
+ * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
+ * for the common convention where the default language is served without a
+ * prefix and every other language is served under `/{code}`.
+ *
+ * @example
+ * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
+ * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
+ * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
+ */
+export declare function buildLocalizedUrl(path: string, currentLang: string, targetLang: string, defaultLang: string): string;