Merge pull request #30 from kampsy/dev

Dev
kampsy · Jan 23, 2025 · 0f0d2bb · 0f0d2bb
2 parents 6e3837d + a145632
commit 0f0d2bb
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 22 deletions.
diff --git a/src/docs/data/showMore.ts b/src/docs/data/showMore.ts
@@ -0,0 +1,8 @@
+export const showMoreDefault = `
+import { ShowMore } from 'kampsy-ui';
+
+let isActive = $state(false);
+
+<div class="w-full">
+    <ShowMore bind:isActive />
+</div>`;
diff --git a/src/docs/utils/data.ts b/src/docs/utils/data.ts
@@ -16,22 +16,14 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'colors',
-                url: '/colors',
-                badge: {
-                    name: 'updated',
-                    variant: 'purple'
-                }
+                url: '/colors'
             }
         ]
 
     },
     {
         title: {
-            name: 'components',
-            badge: {
-                name: 'alpha',
-                variant: 'amber'
-            }
+            name: 'components'
         },
         ul: [
             {
@@ -53,11 +45,7 @@ export const asideData: Array<AsideT> = [
             },
             {
                 name: 'checkbox',
-                url: '/checkbox',
-                badge: {
-                    name: 'new',
-                    variant: 'green'
-                }
+                url: '/checkbox'
             },
             {
                 name: 'choicebox',
@@ -107,6 +95,14 @@ export const asideData: Array<AsideT> = [
                 name: 'select',
                 url: '/select'
             },
+            {
+                "name": 'show more',
+                "url": '/show-more',
+                badge: {
+                    name: 'new',
+                    variant: 'green'
+                }
+            },
             {
                 name: 'spinner',
                 url: '/spinner'

diff --git a/src/lib/button/button.svelte b/src/lib/button/button.svelte
@@ -109,7 +109,7 @@
 
 	let loadingDisabledClass = $derived.by(() => {
 		if (disabled || loading) {
-			return 'cursor-not-allowed text-kui-light-gray-700 dark:text-kui-dark-gray-700  bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 border border-kui-light-gray-200 dark:border-kui-dark-gray-400';
+			return 'cursor-not-allowed text-kui-light-gray-700 dark:text-kui-dark-gray-700 bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 border border-kui-light-gray-200 dark:border-kui-dark-gray-400';
 		}
 		return '';
 	});
@@ -154,7 +154,7 @@
 {/snippet}
 
 {#snippet mainButton()}
-	<button aria-label={ariaLabel} {onclick} type="button" {disabled} class="{buttonClass} ">
+	<button aria-label={ariaLabel} {onclick} type="button" {disabled} class="{buttonClass} transition duration-300">
 		<div class="w-full h-full px-[6px] flex items-center justify-center gap-[8px]">
 			{@render prefixSnip()}
 			<span class="font-medium first-letter:capitalize">

diff --git a/src/lib/collapse/trigger.svelte b/src/lib/collapse/trigger.svelte
@@ -57,15 +57,22 @@
 	};
 </script>
 
-<button {onclick} class="w-full flex items-center justify-between text-left bg-transparent {paddingClass} ">
+<button
+	{onclick}
+	class="w-full flex items-center justify-between text-left bg-transparent {paddingClass} "
+>
 	{#if children}
 		<span class="{textClass} text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold"
 			>{@render children()}</span
 		>
 	{/if}
 	<div class="">
-		<div class="w-[16px] h-[16px] {rotate} transform-gpu duration-200 text-kui-light-gray-1000 dark:text-kui-dark-gray-1000">
-			<ChevronDownSmall />
+		<div class="w-[16px] h-[16px] overflow-hidden">
+			<div
+				class="w-[16px] h-[16px] {rotate} transform-gpu duration-200 text-kui-light-gray-1000 dark:text-kui-dark-gray-1000"
+			>
+				<ChevronDownSmall />
+			</div>
 		</div>
 	</div>
 </button>
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -59,6 +59,9 @@ export { default as ProjectBanner } from './projectBanner/banner.svelte';
 // Select
 export * as Select from './select/index.js';
 
+// Show more
+export { default as ShowMore } from './showMore/showMore.svelte';
+
 // Spinner
 export { default as Spinner } from './spinner/spinner.svelte';
 

diff --git a/src/lib/showMore/showMore.svelte b/src/lib/showMore/showMore.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { ChevronDownSmall } from '$lib/icons/index.js';
+
+	type propsT = {
+		isActive: boolean;
+	};
+
+	let { isActive = $bindable(false)}: propsT = $props();
+
+	const onclick = () => {
+		isActive = !isActive;
+	};
+
+	let rotate = $derived.by(() => {
+		if (isActive) {
+			return 'rotate-180';
+		}
+		return '';
+	});
+
+    let ariaLabel = $derived.by(() => {
+        if (isActive) {
+            return 'Show less content';
+        }
+        return 'Show more content';
+    });
+
+	let buttonText = $derived.by(() => {
+		if (isActive) {
+			return 'show less';
+		}
+		return 'Show more';
+	});
+</script>
+
+{#snippet suffixSnip()}
+	<div class="w-4 h-4">
+		<div
+			class="rounded-full w-4 h-4 {rotate} transform-gpu duration-200 flex items-center justify-center"
+		>
+			<ChevronDownSmall />
+		</div>
+	</div>
+{/snippet}
+
+<div class="w-full">
+	<div class="flex items-center box-border">
+		<div class="grow border-t border-kui-light-gray-400 dark:border-kui-dark-gray-400">
+			<!--line-->
+		</div>
+		<div class="grow-0">
+			<button
+				{onclick}
+				aria-label={ariaLabel}
+				type="button"
+				class="rounded-full p-1.5 border border-kui-light-gray-400 dark:border-kui-dark-gray-400
+                hover:border-kui-light-gray-500 dark:hover:border-kui-dark-gray-500 hover:bg-kui-light-gray-200
+                dark:hover:bg-kui-dark-gray-200 transition duration-300"
+			>
+				<div class="px-1.5 w-full flex items-center gap-1 justify-center">
+					<div class="font-medium capitalize text-sm">{buttonText}</div>
+					{@render suffixSnip()}
+				</div>
+			</button>
+		</div>
+		<div class="grow border-t border-kui-light-gray-400 dark:border-kui-dark-gray-400">
+			<!--second line-->
+		</div>
+	</div>
+</div>
diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
@@ -131,7 +131,7 @@
 	<Row bottomLine={false}>
 		<Pagination
 			previous={{ title: 'project banner', href: '/project-banner' }}
-			next={{ title: 'spinner', href: '/spinner' }}
+			next={{ title: 'show more', href: '/show-more' }}
 		/>
 	</Row>
 {/snippet}

diff --git a/src/routes/show-more/+page.svelte b/src/routes/show-more/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import Aside from '$lib/../docs/ui/aside.svelte';
+	import Row from '$lib/../docs/ui/row.svelte';
+	import Shell from '$lib/../docs/ui/shell.svelte';
+	import { asideData } from '$lib/../docs/utils/data.js';
+	import CollapseCode from '$lib/collapse/collapseCode.svelte';
+	import type { Snippet } from 'svelte';
+	import Pagination from '$lib/pagination/pagination.svelte';
+	import { ShowMore } from '$lib/index.js';
+	import { showMoreDefault } from '../../docs/data/showMore.js';
+
+	let isActive = $state(false);
+
+	$inspect(isActive);
+</script>
+
+<svelte:head>
+	<title>Show More</title>
+</svelte:head>
+
+{#snippet error()}
+	<Row>
+		<h1
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] lg:text-[40px] font-semibold leading-[32px] lg:leading-[48px] tracking-[-0.96px] lg:tracking-[-2.4px] mb-3"
+		>
+			Show more
+		</h1>
+		<p
+			class="first-letter:capitalize text-kui-light-gray-900 dark:text-kui-dark-gray-900 text-[16px] lg:text-[20px] font-normal leading-[24px] lg:leading-[30px] tracking-normal lg:tracking-[-0.33px]"
+		>
+			Styling component to show expanded or collapsed content.
+		</p>
+	</Row>
+{/snippet}
+
+{#snippet demoAndCode(demo: Snippet, code: string)}
+	<div
+		class="bg-kui-light-bg dark:bg-kui-dark-bg border border-kui-light-gray-200 dark:border-kui-dark-gray-400 rounded-xl overflow-hidden"
+	>
+		<div class="w-full p-4 lg:p-6 overflow-x-auto">
+			<div class="w-full flex flex-wrap gap-4">
+				{@render demo()}
+			</div>
+		</div>
+		<CollapseCode {code} />
+	</div>
+{/snippet}
+
+{#snippet defaultShowMore()}
+	<Row>
+		<h2
+			class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
+		>
+			<a href="#default" id="default">default</a>
+		</h2>
+		<div class="mt-4 xl:mt-7">
+			{#snippet demo()}
+				<div class="w-full">
+					<ShowMore bind:isActive />
+				</div>
+			{/snippet}
+			{@render demoAndCode(demo, showMoreDefault)}
+		</div>
+	</Row>
+{/snippet}
+
+{#snippet prevAndNext()}
+	<Row bottomLine={false}>
+		<Pagination
+			previous={{ title: 'select', href: '/select' }}
+			next={{ title: 'spinner', href: '/spinner' }}
+		/>
+	</Row>
+{/snippet}
+
+{#snippet cont()}
+	{@render error()}
+	{@render defaultShowMore()}
+	{@render prevAndNext()}
+{/snippet}
+
+{#snippet aside()}
+	<Aside asideDataList={asideData} />
+{/snippet}
+
+<Shell asideSlot={aside} contSlot={cont} />
diff --git a/src/routes/spinner/+page.svelte b/src/routes/spinner/+page.svelte
@@ -79,7 +79,7 @@
 {#snippet prevAndNext()}
 	<Row bottomLine={false}>
 		<Pagination
-			previous={{ title: 'select', href: '/select' }}
+			previous={{ title: 'show more', href: '/show-more' }}
 			next={{ title: 'split button', href: '/split-button' }}
 		/>
 	</Row>