@hyvor/design 2.0.16 → 2.0.18

package/dist/cloud/CloudContext/cloudContextState.svelte.d.ts

@@ -74,6 +74,12 @@ export interface ResolvedLicense {
         cancel_at: null | number;
     };
     trial_ends_at: null | number;
+    complimentary_licenses: ResolvedComplimentaryLicense[];
+}
+export interface ResolvedComplimentaryLicense {
+    provider: string;
+    type: 'trial' | 'subscription';
+    license: Record<string, number | boolean>;
 }
 export interface OrganizationMember {
     id: number;

package/dist/cloud/HyvorBar/BarNotice/BarLicense.svelte

@@ -4,6 +4,7 @@
 	import Tooltip from '../../../components/Tooltip/Tooltip.svelte';
 	import IconBuilding from '@hyvor/icons/IconBuilding';
 	import type { Component } from 'svelte';
+	import { PRODUCTS } from '../BarProducts/products.js';
 
 	let { name } = $props();
 
@@ -36,11 +37,11 @@
 	interface Config {
 		name: string;
 		tooltip: string;
-		tagColor: 'green' | 'blue' | 'red' | 'orange';
+		tagColor: 'green' | 'blue' | 'red' | 'orange' | 'default';
 		tagIcon?: Component;
 	}
 
-	let config: Config | null = $derived.by(() => {
+	let mainConfig: Config | null = $derived.by(() => {
 		if (!license) {
 			return null;
 		}
@@ -79,6 +80,11 @@
 		}
 
 		if (license.type === 'expired') {
+			if (license.complimentary_licenses.length > 0) {
+				// if the org has a complimentary license, we do not show the "Expired" tag to prevent confusing the user
+				return null;
+			}
+
 			return {
 				name: `License Expired`,
 				tooltip: `Your organization's license for ${name} has expired. Please renew or upgrade to continue using the service.`,
@@ -88,30 +94,83 @@
 
 		return null;
 	});
+
+	let complimentaryConfig: Config | null = $derived.by(() => {
+		if (!license) {
+			return null;
+		}
+
+		if (!license.complimentary_licenses.length) {
+			return null;
+		}
+
+		// for now, we only care about the 1st one
+		// we may later add other licenses
+		const complimentaryLicense = license.complimentary_licenses[0];
+		const providerName = PRODUCTS[complimentaryLicense.provider].name;
+
+		return {
+			name: 'Complimentary',
+			tooltip: `Your organization has a complimentary license for ${name} thanks to your ${providerName} ${complimentaryLicense.type}.`,
+			tagColor: 'default'
+		};
+	});
 </script>
 
-{#if config}
-	<a class="wrap" href="/console/billing">
-		<Tooltip position="bottom">
-			{#snippet tooltip()}
-				{config.tooltip}
-			{/snippet}
-			<Tag color={config.tagColor}>
-				{#snippet start()}
-					{#if config.tagIcon}
-						<config.tagIcon size={10} />
-					{/if}
+<div class="outer">
+	{#if mainConfig}
+		<a class="wrap" href="/console/billing">
+			<Tooltip position="bottom">
+				{#snippet tooltip()}
+					{mainConfig.tooltip}
+				{/snippet}
+				<Tag color={mainConfig.tagColor}>
+					{#snippet start()}
+						{#if mainConfig.tagIcon}
+							<mainConfig.tagIcon size={10} />
+						{/if}
+					{/snippet}
+					{mainConfig.name}
+				</Tag>
+			</Tooltip>
+		</a>
+	{/if}
+
+	{#if mainConfig && complimentaryConfig}
+		<span class="pls">+</span>
+	{/if}
+
+	{#if complimentaryConfig}
+		<a class="wrap complimentary" href="/console/billing">
+			<Tooltip position="bottom">
+				{#snippet tooltip()}
+					{complimentaryConfig.tooltip}
 				{/snippet}
-				{config.name}
-			</Tag>
-		</Tooltip>
-	</a>
-{/if}
+				<Tag color={complimentaryConfig.tagColor}>
+					{complimentaryConfig.name}
+				</Tag>
+			</Tooltip>
+		</a>
+	{/if}
+</div>
 
 <style>
+	.outer {
+		display: flex;
+		align-items: center;
+		padding: 0 20px;
+	}
+
 	.wrap {
 		display: inline-flex;
 		align-items: center;
-		margin-left: 20px;
+	}
+
+	.pls {
+		display: inline-flex;
+		margin: 0 6px;
+		color: var(--text-light);
+		font-size: 12px;
+		font-weight: normal;
 	}
 </style>

package/dist/cloud/ResourceCreator/ResourceCreator.svelte

@@ -6,7 +6,7 @@
 		type CloudContextOrganization
 	} from '../CloudContext/cloudContextState.svelte.js';
 	import OrganizationSwitcher from '../OrganizationSwitcher/OrganizationSwitcher.svelte';
-	import Accordian from './Accordian.svelte';
+	import Accordion from '../../components/Accordion/Accordion.svelte';
 	import TextInput from '../../components/TextInput/TextInput.svelte';
 	import SplitControl from '../../components/SplitControl/SplitControl.svelte';
 	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
@@ -129,7 +129,7 @@
 
 		<div class="content">
 			{#if deployment === 'cloud'}
-				<Accordian
+				<Accordion
 					title="Organization"
 					belowTitle={organization?.name}
 					show={organizationAccordianOpen}
@@ -184,10 +184,10 @@
 							</div>
 						</div>
 					{/if}
-				</Accordian>
+				</Accordion>
 			{/if}
 
-			<Accordian
+			<Accordion
 				title={resourceTitle}
 				show={contentAccordianOpen}
 				buttonText={cta}
@@ -208,7 +208,7 @@
 						create: handleResourceCreation
 					})}
 				</div>
-			</Accordian>
+			</Accordion>
 		</div>
 	</div>
 </div>

package/dist/cloud/index.d.ts

@@ -1,5 +1,5 @@
 export { default as CloudContext } from './CloudContext/CloudContext.svelte';
-export { getCloudContext, setCloudContext, type CloudContext as CloudContextType, type CloudContextUser, type CloudContextOrganization, type OrganizationRole, type OrganizationMember, type ResolvedLicense } from './CloudContext/cloudContextState.svelte.js';
+export { getCloudContext, setCloudContext, type CloudContext as CloudContextType, type CloudContextUser, type CloudContextOrganization, type OrganizationRole, type OrganizationMember, type ResolvedLicense, type ResolvedComplimentaryLicense } from './CloudContext/cloudContextState.svelte.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';

package/dist/components/Accordion/Accordion.svelte

@@ -1,143 +1,147 @@
 <script lang="ts">
-	import type { Component, Snippet } from 'svelte';
-	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+	import { Button, Loader } from '../index.js';
+	import { type Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
 
-	interface Props {
+	type Props = {
+		show: boolean;
 		title: string;
-		children?: Snippet;
-		open?: boolean;
-		icon?: Component;
-		headerColor?: string;
-		textColor?: string;
-		openedColor?: string;
-		borderColor?: string;
-		topBorderColor?: string;
-	}
+		belowTitle?: Snippet | string;
+		buttonText: string;
+		buttonDisabled?: boolean;
+		children: Snippet;
+		onButtonClick: () => void;
+		onToggle: () => void;
+		toggleLocked?: boolean;
+		complete?: boolean;
+		footer?: boolean;
+		loading?: boolean;
+	};
 
 	let {
+		show = false,
 		title,
 		children,
-		open = $bindable(false),
-		icon,
-		headerColor,
-		textColor,
-		openedColor,
-		borderColor,
-		topBorderColor
+		buttonText,
+		buttonDisabled,
+		onButtonClick,
+		onToggle,
+		toggleLocked = false,
+		complete,
+		belowTitle,
+		footer = true,
+		loading = $bindable(false)
 	}: Props = $props();
 
-	const Icon = icon;
+	let contentEl: HTMLElement;
+
+	let heightAutoTimeout: ReturnType<typeof setTimeout>;
 
-	function handleClick() {
-		open = !open;
+	function setHeight(show: boolean) {
+		if (!contentEl) return;
+		if (show) {
+			contentEl.style.height = contentEl.scrollHeight + 'px';
+		} else {
+			contentEl.style.height = contentEl.scrollHeight + 'px';
+			setTimeout(() => {
+				contentEl.style.height = '0px';
+			}, 0);
+		}
+
+		clearTimeout(heightAutoTimeout);
+		heightAutoTimeout = setTimeout(() => {
+			if (show) {
+				contentEl.style.height = 'auto';
+			}
+		}, 300);
 	}
-</script>
 
-<div
-	class="accordion-item"
-	style:--custom-border={borderColor}
-	style:--custom-text={textColor}
-	style:--custom-opened={openedColor}
-	style:--custom-header={headerColor}
->
-	<button class="accordion-header" class:open onclick={handleClick}>
-		{#if icon}
-			<span class="icon">
-				<Icon size={20} />
-			</span>
-		{/if}
-		<span class="title">{title}</span>
-		<span class="chevron" class:rotated={open}>
-			<IconCaretDownFill />
-		</span>
-	</button>
+	function toggle() {
+		if (toggleLocked) return;
+		const showBefore = show;
+		onToggle();
+		if (showBefore === show) return;
+		setHeight(show);
+	}
+
+	$effect(() => {
+		setHeight(show);
+	});
+</script>
 
-	<div class="accordion-content" class:show={open}>
-		<div
-			class="content-text"
-			style:--custom-top-border={topBorderColor}
-			style:--custom-header={headerColor}
-		>
-			{@render children?.()}
+<div class="accordion" class:show class:complete>
+	<button class="title-wrap" onclick={toggle}>
+		<div class="left">
+			<div class="title">
+				{title}
+			</div>
+			{#if belowTitle}
+				{#if typeof belowTitle === 'string'}
+					{belowTitle}
+				{:else}
+					{@render belowTitle()}
+				{/if}
+			{/if}
 		</div>
+		<!-- <Dot {complete} /> -->
+	</button>
+	<div class="content" bind:this={contentEl} transition:slide={{ axis: 'y' }}>
+		{@render children()}
+
+		{#if footer}
+			<div class="footer">
+				<div class="button-wrap">
+					{#if loading}
+						<Loader size="small" />
+					{/if}
+					<Button size="large" onclick={onButtonClick} disabled={loading || buttonDisabled}
+						>{buttonText}</Button
+					>
+				</div>
+			</div>
+		{/if}
 	</div>
 </div>
 
 <style>
-	.accordion-item {
-		overflow: hidden;
+	.accordion {
+		border: 1px solid #eee;
 		border-radius: 20px;
-		border: 1px solid var(--custom-border, var(--border));
 	}
-
-	.accordion-header {
-		width: 100%;
-		padding: 14px 20px;
-		background: var(--custom-header, none);
-		border: none;
+	.title-wrap {
 		display: flex;
-		justify-content: space-between;
+		text-align: left;
 		align-items: center;
+		padding: 15px 20px;
+		border-radius: 20px 20px 0 0;
 		cursor: pointer;
-		font-size: 16px;
-		border-radius: 20px;
-		color: var(--custom-text, var(--text));
+		width: 100%;
 	}
-
-	.accordion-header.open {
-		border-radius: 20px 20px 0 0;
-		background-color: var(--custom-opened, var(--hover));
+	.title-wrap .left {
+		flex: 1;
 	}
-
 	.title {
-		font-weight: 500;
-		text-align: left;
-	}
-
-	.chevron {
-		display: flex;
-		align-items: center;
-		transition: transform 0.3s ease;
-		color: var(--custom-text, var(--text));
+		font-weight: 600;
 	}
-
-	.chevron.rotated {
-		transform: rotate(180deg);
+	.show .title-wrap {
+		background-color: var(--hover);
+		border-bottom: 1px solid #eee;
 	}
 
-	.accordion-content {
-		height: 0;
+	.content {
 		overflow: hidden;
+		height: 0;
+		transition: height 0.3s;
 	}
-
-	.accordion-content.show {
-		height: auto;
-		overflow: visible;
-		animation: slideDown 0.3s ease-out;
-	}
-
-	.content-text {
-		padding: 20px;
-		color: var(--custom-text, var(--text));
-		line-height: 1.6;
-		border-top: 1px solid var(--custom-top-border, var(--border));
-		background: var(--custom-header, none);
-	}
-
-	.icon {
-		display: inline-block;
-		margin-right: 10px;
-		vertical-align: middle;
+	.footer {
+		padding: 10px 20px;
+		border-top: 1px solid #eee;
 	}
 
-	@keyframes slideDown {
-		from {
-			opacity: 0;
-			transform: translateY(-10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
+	.button-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 10px;
 	}
 </style>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -1,15 +1,18 @@
-import type { Component, Snippet } from 'svelte';
-interface Props {
+import { type Snippet } from 'svelte';
+type Props = {
+    show: boolean;
     title: string;
-    children?: Snippet;
-    open?: boolean;
-    icon?: Component;
-    headerColor?: string;
-    textColor?: string;
-    openedColor?: string;
-    borderColor?: string;
-    topBorderColor?: string;
-}
-declare const Accordion: Component<Props, {}, "open">;
+    belowTitle?: Snippet | string;
+    buttonText: string;
+    buttonDisabled?: boolean;
+    children: Snippet;
+    onButtonClick: () => void;
+    onToggle: () => void;
+    toggleLocked?: boolean;
+    complete?: boolean;
+    footer?: boolean;
+    loading?: boolean;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "loading">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/Callout/Callout.svelte

@@ -63,7 +63,7 @@
 	.callout {
 		padding: 15px 25px;
 		border-radius: var(--box-radius);
-		/* line-height: var(--line-height-content); */
+		line-height: var(--line-height-content);
 	}
 
 	.callout.soft {

package/dist/marketing/DetailsAccordion/DetailsAccordion.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+
+	interface Props {
+		title: string;
+		children?: Snippet;
+		open?: boolean;
+		icon?: Component;
+		headerColor?: string;
+		textColor?: string;
+		openedColor?: string;
+		borderColor?: string;
+		topBorderColor?: string;
+	}
+
+	let {
+		title,
+		children,
+		open = $bindable(false),
+		icon,
+		headerColor,
+		textColor,
+		openedColor,
+		borderColor,
+		topBorderColor
+	}: Props = $props();
+
+	const Icon = icon;
+
+	function handleClick() {
+		open = !open;
+	}
+</script>
+
+<div
+	class="accordion-item"
+	style:--custom-border={borderColor}
+	style:--custom-text={textColor}
+	style:--custom-opened={openedColor}
+	style:--custom-header={headerColor}
+>
+	<button class="accordion-header" class:open onclick={handleClick}>
+		{#if icon}
+			<span class="icon">
+				<Icon size={20} />
+			</span>
+		{/if}
+		<span class="title">{title}</span>
+		<span class="chevron" class:rotated={open}>
+			<IconCaretDownFill />
+		</span>
+	</button>
+
+	<div class="accordion-content" class:show={open}>
+		<div
+			class="content-text"
+			style:--custom-top-border={topBorderColor}
+			style:--custom-header={headerColor}
+		>
+			{@render children?.()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.accordion-item {
+		overflow: hidden;
+		border-radius: 20px;
+		border: 1px solid var(--custom-border, var(--border));
+	}
+
+	.accordion-header {
+		width: 100%;
+		padding: 14px 20px;
+		background: var(--custom-header, none);
+		border: none;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+		font-size: 16px;
+		border-radius: 20px;
+		color: var(--custom-text, var(--text));
+	}
+
+	.accordion-header.open {
+		border-radius: 20px 20px 0 0;
+		background-color: var(--custom-opened, var(--hover));
+	}
+
+	.title {
+		font-weight: 500;
+		text-align: left;
+	}
+
+	.chevron {
+		display: flex;
+		align-items: center;
+		transition: transform 0.3s ease;
+		color: var(--custom-text, var(--text));
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	.accordion-content {
+		height: 0;
+		overflow: hidden;
+	}
+
+	.accordion-content.show {
+		height: auto;
+		overflow: visible;
+		animation: slideDown 0.3s ease-out;
+	}
+
+	.content-text {
+		padding: 20px;
+		color: var(--custom-text, var(--text));
+		line-height: 1.6;
+		border-top: 1px solid var(--custom-top-border, var(--border));
+		background: var(--custom-header, none);
+	}
+
+	.icon {
+		display: inline-block;
+		margin-right: 10px;
+		vertical-align: middle;
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    title: string;
+    children?: Snippet;
+    open?: boolean;
+    icon?: Component;
+    headerColor?: string;
+    textColor?: string;
+    openedColor?: string;
+    borderColor?: string;
+    topBorderColor?: string;
+}
+declare const DetailsAccordion: Component<Props, {}, "open">;
+type DetailsAccordion = ReturnType<typeof DetailsAccordion>;
+export default DetailsAccordion;

package/dist/marketing/Docs/Content/Content.svelte

@@ -94,6 +94,10 @@ content :global(li) {
   margin-bottom: 8px;
 }
 
+content :global(ul) {
+  margin-top: 8px;
+}
+
 content :global(.table) {
   margin: 20px 0;
 }

package/dist/marketing/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte';
 export { default as Header } from './Header/Header.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';

package/dist/marketing/index.js

@@ -1,3 +1,4 @@
+export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte';
 export { default as Header } from './Header/Header.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';

package/package.json

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

package/dist/cloud/ResourceCreator/Accordian.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-	import { Button, Loader } from '../../components/index.js';
-	import { type Snippet } from 'svelte';
-	import { slide } from 'svelte/transition';
-
-	type Props = {
-		show: boolean;
-		title: string;
-		belowTitle?: Snippet | string;
-		buttonText: string;
-		buttonDisabled?: boolean;
-		children: Snippet;
-		onButtonClick: () => void;
-		onToggle: () => void;
-		toggleLocked?: boolean;
-		complete?: boolean;
-		footer?: boolean;
-		loading?: boolean;
-	};
-
-	let {
-		show = false,
-		title,
-		children,
-		buttonText,
-		buttonDisabled,
-		onButtonClick,
-		onToggle,
-		toggleLocked = false,
-		complete,
-		belowTitle,
-		footer = true,
-		loading = $bindable(false)
-	}: Props = $props();
-
-	let contentEl: HTMLElement;
-
-	let heightAutoTimeout: ReturnType<typeof setTimeout>;
-
-	function setHeight(show: boolean) {
-		if (!contentEl) return;
-		if (show) {
-			contentEl.style.height = contentEl.scrollHeight + 'px';
-		} else {
-			contentEl.style.height = contentEl.scrollHeight + 'px';
-			setTimeout(() => {
-				contentEl.style.height = '0px';
-			}, 0);
-		}
-
-		clearTimeout(heightAutoTimeout);
-		heightAutoTimeout = setTimeout(() => {
-			if (show) {
-				contentEl.style.height = 'auto';
-			}
-		}, 300);
-	}
-
-	function toggle() {
-		if (toggleLocked) return;
-		const showBefore = show;
-		onToggle();
-		if (showBefore === show) return;
-		setHeight(show);
-	}
-
-	$effect(() => {
-		setHeight(show);
-	});
-</script>
-
-<div class="accordian" class:show class:complete>
-	<button class="title-wrap" onclick={toggle}>
-		<div class="left">
-			<div class="title">
-				{title}
-			</div>
-			{#if belowTitle}
-				{#if typeof belowTitle === 'string'}
-					{belowTitle}
-				{:else}
-					{@render belowTitle()}
-				{/if}
-			{/if}
-		</div>
-		<!-- <Dot {complete} /> -->
-	</button>
-	<div class="content" bind:this={contentEl} transition:slide={{ axis: 'y' }}>
-		{@render children()}
-
-		{#if footer}
-			<div class="footer">
-				<div class="button-wrap">
-					{#if loading}
-						<Loader size="small" />
-					{/if}
-					<Button size="large" onclick={onButtonClick} disabled={loading || buttonDisabled}
-						>{buttonText}</Button
-					>
-				</div>
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.accordian {
-		border: 1px solid #eee;
-		border-radius: 20px;
-	}
-	.title-wrap {
-		display: flex;
-		text-align: left;
-		align-items: center;
-		padding: 15px 20px;
-		border-radius: 20px 20px 0 0;
-		cursor: pointer;
-		width: 100%;
-	}
-	.title-wrap .left {
-		flex: 1;
-	}
-	.title {
-		font-weight: 600;
-	}
-	.show .title-wrap {
-		background-color: var(--hover);
-		border-bottom: 1px solid #eee;
-	}
-
-	.content {
-		overflow: hidden;
-		height: 0;
-		transition: height 0.3s;
-	}
-	.footer {
-		padding: 10px 20px;
-		border-top: 1px solid #eee;
-	}
-
-	.button-wrap {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		gap: 10px;
-	}
-</style>

package/dist/cloud/ResourceCreator/Accordian.svelte.d.ts

@@ -1,18 +0,0 @@
-import { type Snippet } from 'svelte';
-type Props = {
-    show: boolean;
-    title: string;
-    belowTitle?: Snippet | string;
-    buttonText: string;
-    buttonDisabled?: boolean;
-    children: Snippet;
-    onButtonClick: () => void;
-    onToggle: () => void;
-    toggleLocked?: boolean;
-    complete?: boolean;
-    footer?: boolean;
-    loading?: boolean;
-};
-declare const Accordian: import("svelte").Component<Props, {}, "loading">;
-type Accordian = ReturnType<typeof Accordian>;
-export default Accordian;