@hyvor/design 0.0.66 → 0.0.68

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

@@ -49,28 +49,27 @@ function hideNavOnMobile() {
 </script>
 
 <div class="docs-nav">
+	{#if active}
+		<button class="mobile hds-box" on:click={handleMobileClick}>
+			<div class="left">
+				{#if active.category}
+					<span class="category">{active.category}</span> &raquo;
+				{/if}
+				<span class="name">{active.name}</span>
+			</div>
+			<IconList size={18} />
+		</button>
+	{/if}
 
-    {#if active}
-        <button class="mobile hds-box" on:click={handleMobileClick}>
-            <div class="left">
-                {#if active.category}
-                    <span class="category">{active.category}</span> &raquo;
-                {/if}
-                <span class="name">{active.name}</span>
-            </div>
-            <IconList size={18} />
-        </button>
-    {/if}
-
-    <nav 
-        class="hds-box nav-inner" 
-        bind:this={navEl}
-        use:clickOutside={{
-            callback: handleNavOutsideClick
-        }}
-    >
-        <slot />
-    </nav>
+	<nav
+		class="hds-box nav-inner"
+		bind:this={navEl}
+		use:clickOutside={{
+			callback: handleNavOutsideClick
+		}}
+	>
+		<slot />
+	</nav>
 </div>
 
 <style>.docs-nav {
@@ -128,4 +127,4 @@ nav {
     max-height: 500px;
     z-index: 100;
   }
-}</style>
+}</style>

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

@@ -2,38 +2,38 @@
 </script>
 
 <div class="nav-category">
-  <div class="name">
-    <span class="button-content">
-      {#if $$slots.start}
-        <span class="slot start"><slot name="start" /></span>
-      {/if}
+	<div class="name">
+		<span class="button-content">
+			{#if $$slots.start}
+				<span class="slot start"><slot name="start" /></span>
+			{/if}
 
-      {#if $$slots.end}
-        <span class="slot end"><slot name="end" /></span>
-      {/if}
-    </span>
-    {name}
-  </div>
-  <div class="nav-items">
-    <slot />
-  </div>
+			{#if $$slots.end}
+				<span class="slot end"><slot name="end" /></span>
+			{/if}
+		</span>
+		{name}
+	</div>
+	<div class="nav-items">
+		<slot />
+	</div>
 </div>
 
 <style>
-  .nav-category {
-    margin-bottom: 20px;
-  }
+	.nav-category {
+		margin-bottom: 20px;
+	}
 
-  .name {
-    font-weight: 600;
-    padding: 10px 25px;
-    display: flex;
-    align-items: center;
-  }
+	.name {
+		font-weight: 600;
+		padding: 10px 25px;
+		display: flex;
+		align-items: center;
+	}
 
-  .slot.start {
-    margin-right: 5px;
-    margin-left: 0;
-    display: flex;
-  }
+	.slot.start {
+		margin-right: 5px;
+		margin-left: 0;
+		display: flex;
+	}
 </style>

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

@@ -2,33 +2,30 @@
 export let href;
 </script>
 
-
-<a 
-    href={href}
-    class:active={href === $page.url.pathname}
-    aria-current={href === $page.url.pathname ? "page" : undefined}
+<a
+	{href}
+	class:active={href === $page.url.pathname}
+	aria-current={href === $page.url.pathname ? 'page' : undefined}
 >
-    <slot />
+	<slot />
 </a>
 
 <style>
+	a {
+		display: block;
+		padding: 4px 25px;
+		color: var(--text-light);
+		font-size: 14px;
+		letter-spacing: 0.3px;
+		border-left: 3px solid transparent;
+	}
 
-    a {
-        display: block;
-        padding: 4px 25px;
-        color: var(--text-light);
-        font-size: 14px;
-        letter-spacing: .3px;
-        border-left: 3px solid transparent;
-    }
-
-    a:hover {
-        background-color: var(--hover);
-    }
-
-    a.active {
-        background-color: var(--accent-lightest);
-        border-left: 3px solid var(--accent);
-    }
+	a:hover {
+		background-color: var(--hover);
+	}
 
-</style>
+	a.active {
+		background-color: var(--accent-lightest);
+		border-left: 3px solid var(--accent);
+	}
+</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte

@@ -1,32 +1,29 @@
 <script>
-  import Toc from "../Toc.svelte";
-
+	import Toc from '../Toc.svelte';
 </script>
+
 <div class="sidebar">
-    <Toc />
+	<Toc />
 </div>
 
-
 <style>
+	.sidebar {
+		width: 220px;
+		top: var(--header-height, 0);
+		padding: 25px 0;
+		position: sticky;
+		flex-shrink: 0;
+		align-self: flex-start;
+	}
 
-    .sidebar {
-        width: 220px;
-        top: var(--header-height, 0);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-    }
-
-    @media (max-width: 992px) {
-        .sidebar {
-            order: 1;
-            position: relative;
-            top: initial;
-            padding: 0 15px;
-            margin-bottom: 20px;
-            width: 100%;
-        }
-    }
-
-</style>
+	@media (max-width: 992px) {
+		.sidebar {
+			order: 1;
+			position: relative;
+			top: initial;
+			padding: 0 15px;
+			margin-bottom: 20px;
+			width: 100%;
+		}
+	}
+</style>

package/dist/marketing/Docs/Toc.svelte

@@ -35,24 +35,22 @@ function handleMobileClick(e) {
 </script>
 
 <div class="wrap hds-box">
+	<div class="mobile">
+		<Button color="input" on:click={handleMobileClick}>
+			Table of Contents
+			<svelte:fragment slot="end">
+				{#if mobileShown}
+					<IconCaretDown size={14} />
+				{:else}
+					<IconCaretRight size={14} />
+				{/if}
+			</svelte:fragment>
+		</Button>
+	</div>
 
-    <div class="mobile">
-        <Button color="input" on:click={handleMobileClick}>
-            Table of Contents 
-            <svelte:fragment slot="end">
-                {#if mobileShown}
-                    <IconCaretDown size={14} />
-                {:else}
-                    <IconCaretRight size={14} />
-                {/if}
-            </svelte:fragment>
-        </Button>
-    </div>
-
-    <div class="toc-wrap" bind:this={tocElement}>
-        <Loader block padding={30} size="small" />
-    </div>
-
+	<div class="toc-wrap" bind:this={tocElement}>
+		<Loader block padding={30} size="small" />
+	</div>
 </div>
 
 <style>.wrap {
@@ -112,7 +110,7 @@ function handleMobileClick(e) {
   font-weight: 700;
 }
 .toc-wrap :global(.toc-link::before) {
-  background-color: #EEE;
+  background-color: #eee;
   content: " ";
   display: inline-block;
   height: inherit;
@@ -146,4 +144,4 @@ function handleMobileClick(e) {
   :global(.is-active-link::before) {
     background-color: #eee !important;
   }
-}</style>
+}</style>

package/dist/marketing/Document/Document.svelte

@@ -0,0 +1,59 @@
+<script>import FeatureSectionTitle from "./DocumentTitle.svelte";
+export let title;
+export let subtitle;
+</script>
+
+<section>
+	<div class="hds-container container">
+		<FeatureSectionTitle {title} />
+		<div class="date">{subtitle}</div>
+		<content><slot /></content>
+	</div>
+</section>
+
+<style>* {
+  line-height: 30px;
+}
+
+.container {
+  margin: 0 auto 20px auto;
+  padding: 30px 15px 20px 15px;
+}
+.container :global(.wrap) {
+  margin-top: 0 !important;
+}
+.container .date {
+  text-align: center;
+  margin: 15px 0 60px 0;
+  color: var(--text-light);
+}
+.container content :global(h2) {
+  font-size: 32px !important;
+  font-weight: 600;
+  margin-top: 40px;
+  position: relative;
+}
+.container content :global(h3) {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+.container content :global(p) {
+  margin-top: 20px;
+}
+.container content :global(ul) {
+  margin-top: 20px;
+}
+.container content :global(ol) {
+  margin-top: 20px;
+}
+.container content :global(hr) {
+  margin: 40px 0;
+  border: none;
+  height: 1px;
+  background-color: var(--border);
+}
+.container content :global(a) {
+  color: var(--link);
+  text-decoration: underline;
+}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DocumentProps = typeof __propDef.props;
+export type DocumentEvents = typeof __propDef.events;
+export type DocumentSlots = typeof __propDef.slots;
+export default class Document extends SvelteComponent<DocumentProps, DocumentEvents, DocumentSlots> {
+}
+export {};

package/dist/marketing/Document/DocumentTitle.svelte

@@ -0,0 +1,63 @@
+<script>export let title;
+export let subtitle = void 0;
+export let icon = null;
+export let h2Style = void 0;
+export let wrapStyle = void 0;
+</script>
+
+<div class="wrap document-title" style={wrapStyle}>
+	<h2 style={h2Style}>
+		{title}
+		{#if icon}
+			<div class="img-wrap">
+				<img src={icon} alt={title} />
+			</div>
+		{/if}
+	</h2>
+
+	{#if subtitle}
+		<h3>{@html subtitle}</h3>
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		margin-top: 100px;
+	}
+	h2 {
+		font-size: 38px;
+		font-weight: 700;
+		margin-bottom: 10px;
+		margin-top: 20px;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	h3 {
+		font-size: 20px;
+		width: 650px;
+		max-width: 100%;
+		margin: 0 auto;
+		font-weight: normal;
+		line-height: 1.4;
+		text-align: center;
+	}
+	.img-wrap {
+		text-align: center;
+		margin-left: 20px;
+		display: inline-flex;
+		align-items: center;
+	}
+	img {
+		width: 85px;
+		height: 85px;
+	}
+
+	@media (max-width: 992px) {
+		h2 {
+			flex-direction: column-reverse;
+			gap: 15px;
+		}
+	}
+</style>

package/dist/marketing/Document/DocumentTitle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle?: string | undefined;
+        icon?: string | null | undefined;
+        h2Style?: string | undefined;
+        wrapStyle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocumentTitleProps = typeof __propDef.props;
+export type DocumentTitleEvents = typeof __propDef.events;
+export type DocumentTitleSlots = typeof __propDef.slots;
+export default class DocumentTitle extends SvelteComponent<DocumentTitleProps, DocumentTitleEvents, DocumentTitleSlots> {
+}
+export {};