@hyvor/design 0.0.66 → 0.0.68

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,46 +1,42 @@
-<script>import { clickOutside } from "../directives/clickOutside.js";
-import Box from "./../Box/Box.svelte";
+<script>import DropdownContent from "./DropdownContent.svelte";
 export let show = false;
 export let width = 225;
 export let relative = false;
 export let closeOnOutsideClick = true;
 export let align = "start";
 export let position = "bottom";
+let trigger;
 </script>
 
-<span 
-class="dropdown"
-class:relative
->
-
-    <span 
-        class="trigger"
-        on:click={() => show = !show}
-        role="listbox"
-        tabindex="0"
-        on:keyup={e => {
-            if (e.key === 'Escape') {
-                show = false;
-            }
-        }}
-    >
-        <slot name="trigger" />
-    </span>
-
-    {#if show}
-        <div
-            class="content-wrap {align} {position}"
-            use:clickOutside={{
-                enabled: closeOnOutsideClick,
-                callback: () => show = false
-            }}
-        >
-            <Box class="content" style="width:{width}px">
-                <slot name="content" />
-            </Box>
-        </div>
-    {/if}
-
+<span class="dropdown" class:relative>
+	<span
+		class="trigger"
+		on:click={() => (show = !show)}
+		role="listbox"
+		tabindex="0"
+		on:keyup={(e) => {
+			if (e.key === 'Escape') {
+				show = false;
+			}
+		}}
+		bind:this={trigger}
+	>
+		<slot name="trigger" />
+	</span>
+
+	{#if show}
+		<DropdownContent
+			bind:show
+			{width}
+			{closeOnOutsideClick}
+			{align}
+			{position}
+			{relative}
+			{trigger}
+		>
+			<slot name="content" />
+		</DropdownContent>
+	{/if}
 </span>
 
 <style>.dropdown {
@@ -48,77 +44,6 @@ class:relative
   display: inline-block;
 }
 
-.dropdown .content-wrap {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-}
-
-.content-wrap.bottom {
-  top: 100%;
-  margin-top: 5px;
-}
-.content-wrap.bottom.end {
-  left: auto;
-  right: 0;
-}
-.content-wrap.bottom.center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.content-wrap.top {
-  bottom: 100%;
-  margin-bottom: 5px;
-}
-.content-wrap.top.end {
-  left: auto;
-  right: 0;
-}
-.content-wrap.top.center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.content-wrap.left {
-  right: 100%;
-  left: auto;
-  margin-right: 5px;
-  top: 0;
-  bottom: auto;
-}
-.content-wrap.left.end {
-  top: auto;
-  bottom: 0;
-}
-.content-wrap.left.center {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.content-wrap.right {
-  left: 100%;
-  margin-left: 5px;
-  top: 0;
-  bottom: auto;
-}
-.content-wrap.right.end {
-  bottom: 0;
-  top: auto;
-}
-.content-wrap.right.center {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.content-wrap > :global(.content) {
-  padding: 10px;
-}
-
-.dropdown.relative > .content-wrap {
-  position: relative;
+.dropdown.relative > :global(.content-wrap) {
+  position: relative !important;
 }</style>
-
-
-
-

package/dist/components/Dropdown/DropdownContent.svelte

@@ -0,0 +1,120 @@
+<script>import { onMount } from "svelte";
+import { clickOutside } from "../directives/clickOutside.js";
+import debounce from "../directives/debounce.js";
+import { slide } from "svelte/transition";
+import { cubicIn } from "svelte/easing";
+export let show;
+export let width;
+export let relative;
+export let closeOnOutsideClick = true;
+export let align;
+export let position;
+export let trigger;
+let contentWrap;
+function positionWrap() {
+  if (!trigger)
+    return;
+  if (!contentWrap)
+    return;
+  if (relative)
+    return;
+  const triggerRect = trigger.getBoundingClientRect();
+  const contentRect = contentWrap.getBoundingClientRect();
+  const documentWidth = document.documentElement.clientWidth;
+  const GAP = 5;
+  const SPACE_AROUND = 15;
+  if (position === "bottom") {
+    contentWrap.style.top = triggerRect.bottom + GAP + "px";
+    if (contentRect.height + triggerRect.bottom > window.innerHeight) {
+      contentWrap.style.bottom = SPACE_AROUND + "px";
+    } else {
+      contentWrap.style.bottom = "auto";
+    }
+  } else if (position === "top") {
+    contentWrap.style.top = triggerRect.top - contentRect.height - GAP + "px";
+  } else if (position === "left") {
+    contentWrap.style.left = triggerRect.left - width - GAP + "px";
+  } else if (position === "right") {
+    contentWrap.style.left = triggerRect.right + GAP + "px";
+  }
+  if (position === "bottom" || position === "top") {
+    if (align === "start") {
+      if (triggerRect.left + width < documentWidth) {
+        contentWrap.style.left = triggerRect.left + "px";
+      } else {
+        contentWrap.style.right = SPACE_AROUND + "px";
+      }
+    } else if (align === "center") {
+      contentWrap.style.left = Math.max(triggerRect.left + triggerRect.width / 2 - width / 2, SPACE_AROUND) + "px";
+    } else if (align === "end") {
+      contentWrap.style.left = Math.max(triggerRect.right - width, SPACE_AROUND) + "px";
+    }
+  } else {
+    if (align === "start") {
+      contentWrap.style.top = triggerRect.top + "px";
+    } else if (align === "center") {
+      contentWrap.style.top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2 + "px";
+    } else if (align === "end") {
+      contentWrap.style.top = triggerRect.bottom - contentRect.height + "px";
+    }
+  }
+  if (width >= documentWidth - SPACE_AROUND * 2) {
+    contentWrap.style.width = documentWidth - SPACE_AROUND * 2 + "px";
+  } else {
+    contentWrap.style.width = width + "px";
+  }
+}
+$:
+  if (position, align) {
+    positionWrap();
+  }
+function debouncedPosition() {
+  debounce(positionWrap, 10)();
+}
+onMount(() => {
+  positionWrap();
+  const mutationObserver = new MutationObserver(positionWrap);
+  mutationObserver.observe(contentWrap, {
+    subtree: true,
+    childList: true
+  });
+});
+function slideIn(node) {
+  return {
+    duration: 100,
+    easing: cubicIn,
+    css: (t) => {
+      return `
+                    opacity: ${0.2 + t * 0.8};
+                    transform: translateY(-${(1 - t) * 5}px) scale(${0.95 + t * 0.05});
+                `;
+    }
+  };
+}
+</script>
+
+<svelte:window on:resize={debouncedPosition} on:scroll={debouncedPosition} />
+
+<div
+	class="content-wrap {align} {position}"
+	use:clickOutside={{
+		enabled: closeOnOutsideClick,
+		callback: () => (show = false)
+	}}
+	bind:this={contentWrap}
+	style="width: {width}px"
+	transition:slideIn
+>
+	<div class="hds-box content">
+		<slot />
+	</div>
+</div>
+
+<style>.content-wrap {
+  position: fixed;
+  z-index: 1000000;
+}
+
+.content-wrap > .content {
+  padding: 10px;
+}</style>

package/dist/components/Dropdown/DropdownContent.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        show: boolean;
+        width: number;
+        relative: boolean;
+        closeOnOutsideClick?: boolean | undefined;
+        align: 'start' | 'center' | 'end';
+        position: 'left' | 'right' | 'bottom' | 'top';
+        trigger: HTMLElement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropdownContentProps = typeof __propDef.props;
+export type DropdownContentEvents = typeof __propDef.events;
+export type DropdownContentSlots = typeof __propDef.slots;
+export default class DropdownContent extends SvelteComponent<DropdownContentProps, DropdownContentEvents, DropdownContentSlots> {
+}
+export {};

package/dist/components/FormControl/Caption.svelte

@@ -2,15 +2,15 @@
 </script>
 
 <div class="caption" class:bold {...$$restProps}>
-    <slot /> 
+	<slot />
 </div>
 
 <style>
-    .caption {
-        font-size: 14px;
-        color: var(--text-light);
-    }
-    .caption.bold {
-        font-weight: 600;
-    }
-</style>
+	.caption {
+		font-size: 14px;
+		color: var(--text-light);
+	}
+	.caption.bold {
+		font-weight: 600;
+	}
+</style>

package/dist/components/FormControl/FormControl.svelte

@@ -1,27 +1,27 @@
 <div class="form-control" {...$$restProps}>
-    <slot />
+	<slot />
 </div>
 
 <style>
-    .form-control {
-        display: flex;
-        flex-direction: column;
-    }
+	.form-control {
+		display: flex;
+		flex-direction: column;
+	}
 
-    .form-control :global(.caption) {
-        margin-bottom: 8px;
-    }
+	.form-control :global(.caption) {
+		margin-bottom: 8px;
+	}
 
-    .form-control > :global(label) {
-        margin-bottom: 8px;
-        font-weight: 600;
-    }
+	.form-control > :global(label) {
+		margin-bottom: 8px;
+		font-weight: 600;
+	}
 
-    .form-control :global(label + .caption) {
-        margin-top: -8px;
-    }
+	.form-control :global(label + .caption) {
+		margin-top: -8px;
+	}
 
-    .form-control :global(.validation) {
-        margin-top: 8px;
-    }
+	.form-control :global(.validation) {
+		margin-top: 8px;
+	}
 </style>

package/dist/components/FormControl/InputGroup.svelte

@@ -7,14 +7,13 @@ const gaps = {
 gap = typeof gap === "number" ? gap : gaps[gap];
 </script>
 
-
-<div class="checkbox-group" style:gap={gap + "px"} {...$$restProps}>
-    <slot />
+<div class="checkbox-group" style:gap={gap + 'px'} {...$$restProps}>
+	<slot />
 </div>
 
 <style>
-    .checkbox-group {
-        display: flex;
-        flex-direction: column;
-    }
-</style>
+	.checkbox-group {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/dist/components/FormControl/Label.svelte

@@ -1,9 +1,9 @@
 <label {...$$restProps}>
-    <slot />
+	<slot />
 </label>
 
 <style>
-    label {
-        font-weight: 600;
-    }
-</style>
+	label {
+		font-weight: 600;
+	}
+</style>

package/dist/components/FormControl/Validation.svelte

@@ -1,23 +1,25 @@
-<script>import { IconCheckCircleFill, IconExclamationTriangleFill, IconInfoCircleFill } from "@hyvor/icons";
+<script>import {
+  IconCheckCircleFill,
+  IconExclamationTriangleFill,
+  IconInfoCircleFill
+} from "@hyvor/icons";
 export let state = "error";
 export let role = "alert";
 </script>
 
 <div class="validation {state}" {role} {...$$restProps}>
-    <div class="icon">
-
-        {#if state === 'error'}
-            <IconExclamationTriangleFill style="color:var(--red)" />
-        {:else if state === 'warning'}
-            <IconInfoCircleFill style="color:var(--orange)" />
-        {:else}
-            <IconCheckCircleFill style="color:var(--green)" />
-        {/if}
-
-    </div>
-    <div class="message">
-        <slot />
-    </div>
+	<div class="icon">
+		{#if state === 'error'}
+			<IconExclamationTriangleFill style="color:var(--red)" />
+		{:else if state === 'warning'}
+			<IconInfoCircleFill style="color:var(--orange)" />
+		{:else}
+			<IconCheckCircleFill style="color:var(--green)" />
+		{/if}
+	</div>
+	<div class="message">
+		<slot />
+	</div>
 </div>
 
 <style>.validation {
@@ -50,4 +52,4 @@ export let role = "alert";
 }
 :global(:root.dark) .validation.success {
   color: var(--green);
-}</style>
+}</style>

package/dist/components/FormControl/Validation.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AriaRole } from "svelte/elements";
+import type { AriaRole } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/components/HyvorBar/BarProducts.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+	const PRODUCTS = {
+		talk: {
+			name: 'Hyvor Talk',
+			logo: LogoTalk,
+			url: 'talk.hyvor.com',
+			description: 'Comments, Newsletters, Memberships'
+		},
+		blogs: {
+			name: 'Hyvor Blogs',
+			logo: LogoBlogs,
+			url: 'blogs.hyvor.com',
+			description: 'Blogging Platform'
+		},
+		fortguard: {
+			name: 'FortGuard',
+			logo: LogoFortguard,
+			url: 'fortguard.io',
+			description: 'Spam Detection API'
+		}
+	};
+	export { PRODUCTS };
+</script>
+
+<script>import LogoBlogs from "../../marketing/Logo/LogoBlogs.svelte";
+import LogoFortguard from "../../marketing/Logo/LogoFortguard.svelte";
+import LogoTalk from "../../marketing/Logo/LogoTalk.svelte";
+import { ActionList, ActionListItem, Button, Dropdown } from "../index.js";
+import { IconCaretDownFill, IconBoxArrowUpRight } from "@hyvor/icons";
+export let mobile = false;
+</script>
+
+<Dropdown align={mobile ? 'center' : 'end'} width={325}>
+	<Button slot="trigger" variant="invisible" color="input" size="small">
+		Products
+		<IconCaretDownFill size={10} slot="end" />
+	</Button>
+	<ActionList slot="content">
+		{#each Object.entries(PRODUCTS) as [key, product]}
+			<a href={`https://${product.url}`} target="_blank">
+				<ActionListItem>
+					{product.name}
+					<div slot="description">
+						{product.description}
+					</div>
+					<svelte:component this={product.logo} size={20} slot="start" />
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+		{/each}
+	</ActionList>
+</Dropdown>

package/dist/components/HyvorBar/BarProducts.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+declare const PRODUCTS: {
+    talk: {
+        name: string;
+        logo: typeof LogoTalk;
+        url: string;
+        description: string;
+    };
+    blogs: {
+        name: string;
+        logo: typeof LogoBlogs;
+        url: string;
+        description: string;
+    };
+    fortguard: {
+        name: string;
+        logo: typeof LogoFortguard;
+        url: string;
+        description: string;
+    };
+};
+export { PRODUCTS };
+import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
+import LogoFortguard from '../../marketing/Logo/LogoFortguard.svelte';
+import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
+declare const __propDef: {
+    props: {
+        mobile?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarProductsProps = typeof __propDef.props;
+export type BarProductsEvents = typeof __propDef.events;
+export type BarProductsSlots = typeof __propDef.slots;
+export default class BarProducts extends SvelteComponent<BarProductsProps, BarProductsEvents, BarProductsSlots> {
+}

package/dist/components/HyvorBar/BarSupport.svelte

@@ -0,0 +1,119 @@
+<script>import { ActionList, ActionListItem, Button, Dropdown } from "../index.js";
+import {
+  IconCaretDownFill,
+  IconBoxArrowUpRight,
+  IconChat,
+  IconDiscord,
+  IconInfoCircle,
+  IconFileEarmark,
+  IconChatDots,
+  IconTwitterX,
+  IconLinkedin
+} from "@hyvor/icons";
+import ActionListGroup from "../ActionList/ActionListGroup.svelte";
+import { PRODUCTS } from "./BarProducts.svelte";
+import G2 from "./img/G2.svelte";
+import Trustpilot from "./img/Trustpilot.svelte";
+let supportDropdown = false;
+export let mobile = false;
+export let product;
+export let config;
+function openLiveChat(e) {
+  e.preventDefault();
+  if (window.$crisp) {
+    window.$crisp.push(["do", "chat:open"]);
+  }
+  supportDropdown = false;
+}
+</script>
+
+<Dropdown align={mobile ? 'center' : 'end'} width={325} bind:show={supportDropdown}>
+	<Button slot="trigger" variant="invisible" color="input" size="small">
+		Support
+		<IconCaretDownFill size={10} slot="end" />
+	</Button>
+	<ActionList slot="content">
+		<a href="https://hyvor.community" target="_blank">
+			<ActionListItem>
+				Community Forum
+				<div slot="description">hyvor.community</div>
+				<IconChat slot="start" />
+				<IconBoxArrowUpRight slot="end" size={12} />
+			</ActionListItem>
+		</a>
+		{#if config.docs}
+			<a href="/docs" target="_blank">
+				<ActionListItem>
+					Documentation
+					<div slot="description">
+						Learn how to use {PRODUCTS[product].name}
+					</div>
+					<IconFileEarmark slot="start" />
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+		{/if}
+		<a href="https://hyvor.com/support" target="_blank">
+			<ActionListItem>
+				Support Form
+				<div slot="description">Get help from our team</div>
+				<IconInfoCircle slot="start" />
+				<IconBoxArrowUpRight slot="end" size={12} />
+			</ActionListItem>
+		</a>
+		{#if config.chat}
+			<a href="/chat" on:click={openLiveChat}>
+				<ActionListItem>
+					Live Chat
+					<div slot="description">Chat with our team</div>
+					<IconChatDots slot="start" />
+				</ActionListItem>
+			</a>
+		{/if}
+
+		<ActionListGroup title="Social">
+			<a href="https://hyvor.com/api/go/discord" target="_blank">
+				<ActionListItem>
+					Discord
+					<IconDiscord slot="start" />
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+			{#if config.twitter}
+				<a href={config.twitter} target="_blank">
+					<ActionListItem>
+						Twitter
+						<IconTwitterX slot="start" />
+						<IconBoxArrowUpRight slot="end" size={12} />
+					</ActionListItem>
+				</a>
+			{/if}
+			<a href="https://www.linkedin.com/company/hyvor" target="_blank">
+				<ActionListItem>
+					Linkedin
+					<IconLinkedin slot="start" />
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+		</ActionListGroup>
+
+		<ActionListGroup title="Rate us">
+			<a href="https://www.trustpilot.com/review/hyvor.com" target="_blank">
+				<ActionListItem>
+					<Trustpilot slot="start" />
+					Trustpilot
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+			{#if config.g2}
+				<a href="https://www.g2.com/products/hyvor-talk/reviews" target="_blank">
+					<ActionListItem>
+						<G2 slot="start" />
+						G2
+						<IconBoxArrowUpRight slot="end" size={12} />
+					</ActionListItem>
+				</a>
+			{/if}
+		</ActionListGroup>
+	</ActionList>
+</Dropdown>