@hyvor/design 2.0.0-beta.1 → 2.0.1

package/dist/marketing/Affiliate/Affiliate.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
 	import Link from '../../components/Link/Link.svelte';
 	import Modal from '../../components/Modal/Modal.svelte';
-    import { replaceState } from '$app/navigation';
-    import { onMount } from 'svelte';
+	import { replaceState } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-    let partner: string | null = $state(null);
-    let showModal = $state(false);
+	let partner: string | null = $state(null);
+	let showModal = $state(false);
 
-    onMount(() => {
-        const params = new URLSearchParams(window.location.search);
-        partner = params.get('partner');
+	onMount(() => {
+		const params = new URLSearchParams(window.location.search);
+		partner = params.get('partner');
 
-        if (partner) {
-            showModal = true;
-        }
-    });
+		if (partner) {
+			showModal = true;
+		}
+	});
 
-    function handleConsent() {
-        const coreUrl = `${location.protocol}//${location.hostname.split('.').slice(-2).join('.')}`;
+	function handleConsent() {
+		const coreUrl = `${location.protocol}//${location.hostname.split('.').slice(-2).join('.')}`;
 
 		fetch(coreUrl + '/api/public/affiliate/placement', {
 			method: 'POST',
@@ -29,47 +29,49 @@
 				url: window.location.href
 			}),
 			credentials: 'include'
-		}).then((response) => {
-			if (response.ok) {
-				console.info('Affiliate placement recorded for partner:', partner);
-			}
-		}).finally(() => {
-            const url = new URL(window.location.href);
-            url.searchParams.delete('partner');
-            replaceState(url, {});
-            showModal = false;
-        });
-    }
+		})
+			.then((response) => {
+				if (response.ok) {
+					console.info('Affiliate placement recorded for partner:', partner);
+				}
+			})
+			.finally(() => {
+				const url = new URL(window.location.href);
+				url.searchParams.delete('partner');
+				replaceState(url, {});
+				showModal = false;
+			});
+	}
 </script>
 
 <Modal
-    title="Referred by {partner}"
-    bind:show={showModal}
-    closeOnOutsideClick={false}
-    footer={
-        {
-            cancel: {
-                text: "Do not track"
-            },
-            confirm: {
-                text: "Ok, Visit Site",
-            }
-        }
-    }
-    on:confirm={handleConsent}
-    >
-    <div class="notice">
-        You visited our site through our affiliate partner <strong>{partner}</strong>. To track this referral, we will place a small
-        cookie in your browser. This cookie helps us identify which affiliate partner referred you 
-        if you sign up. It does not collect any personal data.
-    </div>
-    <p>
-        You can read more in our <Link href="https://hyvor.com/privacy" target="_blank">Privacy Policy</Link>.
-    </p>
+	title="Referred by {partner}"
+	bind:show={showModal}
+	closeOnOutsideClick={false}
+	footer={{
+		cancel: {
+			text: 'Do not track'
+		},
+		confirm: {
+			text: 'Ok, Visit Site'
+		}
+	}}
+	on:confirm={handleConsent}
+>
+	<div class="notice">
+		You visited our site through our affiliate partner <strong>{partner}</strong>. To track this
+		referral, we will place a small cookie in your browser. This cookie helps us identify which
+		affiliate partner referred you if you sign up. It does not collect any personal data.
+	</div>
+	<p>
+		You can read more in our <Link href="https://hyvor.com/privacy" target="_blank"
+			>Privacy Policy</Link
+		>.
+	</p>
 </Modal>
 
 <style>
-    .notice {
-        line-height: 24px;
-    }
-</style>
+	.notice {
+		line-height: 24px;
+	}
+</style>

package/dist/marketing/Container/Container.svelte

@@ -2,16 +2,15 @@
 	interface Props {
 		as?: string;
 		children?: import('svelte').Snippet;
-        max?: boolean;
+		max?: boolean;
 	}
 
-	let { as = 'div', children, max = false
-    }: Props = $props();
+	let { as = 'div', children, max = false }: Props = $props();
 
-    let width= max ? '1400px' : '1000px';
+	let width = max ? '1400px' : '1000px';
 </script>
 
-<svelte:element this={as} class="container" style:width={width}>
+<svelte:element this={as} class="container" style:width>
 	{@render children?.()}
 </svelte:element>
 

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -27,8 +27,7 @@
 		}
 
 		const category =
-			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText ||
-			null;
+			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText || null;
 
 		active = {
 			name: activeEl.innerText,

package/dist/marketing/Footer/Footer.svelte

@@ -24,7 +24,7 @@
 		center?: import('svelte').Snippet;
 		affiliate?: boolean;
 		recordVisit?: boolean;
-        max?: boolean;
+		max?: boolean;
 	}
 
 	let {
@@ -33,7 +33,7 @@
 		center,
 		affiliate = true,
 		recordVisit = true,
-        max = false,
+		max = false
 	}: Props = $props();
 
 	social = {

package/dist/marketing/Header/Header.svelte

@@ -4,35 +4,46 @@
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
 	import IconList from '@hyvor/icons/IconList';
+	import HeaderNotification from './HeaderNotification.svelte';
 
 	interface Props {
-		logo: string;
+		product: string;
+		instance?: string;
+		logo?: string;
 		name?: string;
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
 		center?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
-        max?: boolean;
+		max?: boolean;
 	}
 
 	let {
+		product,
 		logo,
+		instance = 'https://hyvor.com',
 		name = 'HYVOR',
 		href = '/',
 		subName = undefined,
 		darkToggle = true,
 		center,
 		end,
-        max = false,
+		max = false
 	}: Props = $props();
 </script>
 
 <header>
+	<HeaderNotification {instance} {product} />
 	<Container as="nav" {max}>
 		<div class="nav-start">
 			<a class="nav-brand" {href}>
-				<img src={logo} alt="Hyvor Logo" width="30" height="30" />
+				<img
+					src={logo || `${instance}/api/public/logo/${product}.svg`}
+					alt="{name + (subName ? ' ' + subName : '')} Logo"
+					width="30"
+					height="30"
+				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
 					{#if subName}
@@ -56,25 +67,6 @@
 					<DarkToggle />
 				</span>
 			{/if}
-
-			<!-- <span class="mobile-nav-wrap">
-				<Dropdown align="end" width={300}>
-					<IconButton 
-						color="invisible" 
-						slot="trigger"
-					>
-						<IconList size={18} />
-					</IconButton>
-					<div slot="content" class="mobile-content">
-						<div class="mobile-inner center">
-							<slot name="center" />
-						</div>
-						<div class="mobile-inner end">
-							<slot name="end" />
-						</div>
-					</div>
-				</Dropdown>
-			</span> -->
 		</div>
 
 		<span class="mobile-nav-wrap">
@@ -101,120 +93,119 @@
 
 <div class="header-space"></div>
 
-<style>.header-space {
-  height: var(--header-height);
-}
-
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  background-color: var(--background, var(--accent-lightest));
-  border-bottom: 1px solid var(--border);
-  height: var(--header-height);
-  display: flex;
-  align-items: center;
-}
-
-header :global(nav) {
-  display: flex;
-  align-items: center;
-}
-
-.nav-brand {
-  display: inline-block;
-  line-height: inherit;
-  white-space: nowrap;
-  color: inherit;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.nav-brand img {
-  vertical-align: middle;
-}
-
-.brand-product {
-  vertical-align: middle;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  line-height: 14px;
-}
-
-.brand-product .brand {
-  font-size: 14px;
-}
-
-.brand-product .product {
-  font-size: 12px;
-  font-weight: normal;
-  color: var(--text-light);
-}
-
-.nav-center {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  justify-content: center;
-}
-
-.nav-end {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.mobile-nav-wrap {
-  display: none;
-}
-
-.dark-mobile {
-  display: inline-flex;
-  align-items: center;
-}
-
-.dark-toggle-wrap {
-  margin-left: 8px;
-}
-
-@media screen and (max-width: 992px) {
-  .nav-center {
-    display: none;
-  }
-  .nav-end {
-    display: none;
-  }
-  .mobile-nav-wrap {
-    display: inline-block;
-  }
-  .dark-mobile {
-    flex: 1;
-    text-align: right;
-    display: inline-block;
-  }
-}
-.mobile-content,
-.mobile-inner {
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-content {
-  gap: 10px;
-}
-
-.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
-*/
-:global(html) {
-  scroll-padding-top: calc(var(--header-height) + 20px);
-}</style>
+<style>
+	.header-space {
+		height: var(--header-height);
+	}
+
+	header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 100;
+		background-color: var(--background, var(--accent-lightest));
+		border-bottom: 1px solid var(--border);
+		height: var(--header-height);
+		display: flex;
+		flex-direction: column;
+	}
+
+	header :global(> nav) {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	.nav-brand {
+		display: inline-block;
+		line-height: inherit;
+		white-space: nowrap;
+		color: inherit;
+		text-decoration: none;
+		font-weight: 600;
+	}
+	.nav-brand img {
+		vertical-align: middle;
+	}
+
+	.brand-product {
+		vertical-align: middle;
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		line-height: 14px;
+	}
+	.brand-product .brand {
+		font-size: 14px;
+	}
+	.brand-product .product {
+		font-size: 12px;
+		font-weight: normal;
+		color: var(--text-light);
+	}
+
+	.nav-center {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		justify-content: center;
+	}
+
+	.nav-end {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.mobile-nav-wrap {
+		display: none;
+	}
+
+	.dark-mobile {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.dark-toggle-wrap {
+		margin-left: 8px;
+	}
+
+	@media screen and (max-width: 992px) {
+		.nav-center {
+			display: none;
+		}
+		.nav-end {
+			display: none;
+		}
+		.mobile-nav-wrap {
+			display: inline-block;
+		}
+		.dark-mobile {
+			flex: 1;
+			text-align: right;
+			display: inline-block;
+		}
+	}
+
+	.mobile-content,
+	.mobile-inner {
+		display: flex;
+		flex-direction: column;
+	}
+	.mobile-content {
+		gap: 10px;
+	}
+
+	.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
+	*/
+	:global(html) {
+		scroll-padding-top: calc(var(--header-height) + 20px);
+	}
+</style>

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

@@ -1,5 +1,7 @@
 interface Props {
-    logo: string;
+    product: string;
+    instance?: string;
+    logo?: string;
     name?: string;
     href?: string;
     subName?: undefined | string;

package/dist/marketing/Header/HeaderNotification.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { isCloud } from '../cloud.js';
+	import IconMegaphone from '@hyvor/icons/IconMegaphone';
+	import type { BarUpdate } from '../../cloud/HyvorBar/bar.js';
+
+	let notificationUpdate: BarUpdate | null = $state(null);
+
+	interface Props {
+		instance: string;
+		product: string;
+	}
+
+	let { instance, product }: Props = $props();
+
+	function set(u: BarUpdate) {
+		notificationUpdate = u;
+		document.documentElement.style.setProperty('--header-height', '85px');
+	}
+
+	onMount(() => {
+		if (!isCloud(false)) return;
+
+		fetch(instance + '/api/public/updates/notification?type=' + product)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data.update) {
+					set(data.update);
+				}
+			});
+	});
+</script>
+
+{#if notificationUpdate}
+	<a
+		class="header-notification"
+		href={notificationUpdate.url}
+		target="_blank"
+		transition:slide={{ duration: 300 }}
+	>
+		<IconMegaphone size={12} />&nbsp;&nbsp;
+		{notificationUpdate.title}&nbsp;&nbsp;&rarr;
+	</a>
+{/if}
+
+<style>
+	.header-notification {
+		display: block;
+		background-color: var(--accent);
+		color: var(--accent-text);
+		height: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 14px;
+		cursor: pointer;
+		font-weight: 600;
+		transition: opacity 0.2s;
+	}
+	.header-notification:hover {
+		opacity: 0.8;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    instance: string;
+    product: string;
+}
+declare const HeaderNotification: import("svelte").Component<Props, {}, "">;
+type HeaderNotification = ReturnType<typeof HeaderNotification>;
+export default HeaderNotification;

package/dist/marketing/cloud.d.ts

@@ -0,0 +1 @@
+export declare function isCloud(forceProd?: boolean): boolean;

package/dist/marketing/cloud.js

@@ -0,0 +1,15 @@
+export function isCloud(forceProd = true) {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hostname = window.location.hostname;
+    function isDomain(domain) {
+        return hostname === domain || hostname.endsWith(`.${domain}`);
+    }
+    let domains = ['hyvor.com'];
+    if (forceProd === false) {
+        domains.push('hyvor.localhost');
+        domains.push('hyvorstaging.com');
+    }
+    return domains.some(isDomain);
+}

package/dist/marketing/track/track.d.ts

@@ -6,7 +6,6 @@ interface InitOptions {
 }
 declare class Track {
     private op;
-    private isProductionDomain;
     init({ forceTrack, openPanelApiUrl, openPanelClientId, context }?: InitOptions): void;
     ready(): boolean;
     private warnNoOp;

package/dist/marketing/track/track.js

@@ -1,12 +1,9 @@
 import { OpenPanel } from '@openpanel/web';
+import { isCloud } from '../cloud.js';
 class Track {
     op;
-    isProductionDomain() {
-        const hostname = window.location.hostname;
-        return hostname === 'hyvor.com' || hostname.endsWith('.hyvor.com');
-    }
     init({ forceTrack = false, openPanelApiUrl = 'https://op.hyvor.com/api', openPanelClientId = 'b11f6143-a6b0-4fa4-a86c-3969c01dbb1d', context = {} } = {}) {
-        if (!forceTrack && !this.isProductionDomain()) {
+        if (!forceTrack && !isCloud()) {
             console.log('Tracking is disabled in non-production domains.');
             return;
         }
@@ -15,7 +12,7 @@ class Track {
             clientId: openPanelClientId,
             trackScreenViews: true,
             trackOutgoingLinks: true,
-            trackAttributes: true,
+            trackAttributes: true
         });
         if (Object.keys(context).length > 0) {
             this.op.setGlobalProperties(context);

package/dist/variables.scss

@@ -8,7 +8,7 @@
 	--accent: #000;
 	--accent-light: #bdbdbd;
 	--accent-lightest: #fafafa;
-    --accent-light-mid: #818181;
+	--accent-light-mid: #818181;
 	--accent-text: #fff;
 
 	--border: #e1e1e1;