From c19ddedda6a5cd81c3869be9756bcbf25b102b65 Mon Sep 17 00:00:00 2001
From: Craig Howell <craighowell@Craigs-MacBook-Pro.local>
Date: Thu, 6 Oct 2022 16:41:02 -0400
Subject: [PATCH] fix(Button): fixed default loading jank fix(Loader): stroke
 is now currentColor docs(button): added examples, props, and slots tables

---
 src/lib/components/button-group/Button.svelte |   7 +-
 src/lib/components/button-group/Loader.svelte |  17 +-
 src/lib/components/button/Button.svelte       |  90 +++++----
 src/lib/components/button/Loader.svelte       |  17 +-
 src/routes/button/+page.svelte                |  82 +++++++-
 src/routes/button/examples.ts                 | 188 ++++++++++++++++++
 6 files changed, 333 insertions(+), 68 deletions(-)
 create mode 100644 src/routes/button/examples.ts

diff --git a/src/lib/components/button-group/Button.svelte b/src/lib/components/button-group/Button.svelte
index 25f24672..08e72023 100644
--- a/src/lib/components/button-group/Button.svelte
+++ b/src/lib/components/button-group/Button.svelte
@@ -20,7 +20,6 @@
 	export let active = false;
 	export let loading = false;
 	export let defaultLoading = true;
-	export let buttonLoaderColor = '#ffffff';
 	export let disabled = false;
 
 	useContext({
@@ -66,7 +65,7 @@
 					<slot name="leading" />
 				</svelte:fragment>
 				<svelte:fragment slot="off">
-					<ButtonLoader color={buttonLoaderColor} />
+					<ButtonLoader />
 				</svelte:fragment>
 			</Swap>
 		</div>
@@ -79,7 +78,7 @@
 					<slot name="icon" />
 				</svelte:fragment>
 				<svelte:fragment slot="off">
-					<ButtonLoader color={buttonLoaderColor} />
+					<ButtonLoader />
 				</svelte:fragment>
 			</Swap>
 		</div>
@@ -87,7 +86,7 @@
 		<slot name="trailing" />
 	{:else if loading && defaultLoading && !$$slots.leading && !$$slots.icon}
 		<div transition:scale|local class="mr-2 flex justify-center items-center relative">
-			<ButtonLoader color={buttonLoaderColor} />
+			<ButtonLoader />
 		</div>
 		<slot />
 		<slot name="trailing" />
diff --git a/src/lib/components/button-group/Loader.svelte b/src/lib/components/button-group/Loader.svelte
index c06033d0..f34a7c74 100644
--- a/src/lib/components/button-group/Loader.svelte
+++ b/src/lib/components/button-group/Loader.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-	export let color: string;
+	import { twMerge } from 'tailwind-merge';
+
+	const defaultClass = 'button-loader';
+	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<svg
-	class="button-loader{$$props.class ? ` ${$$props.class}` : ''}"
-	viewBox="25 25 50 50"
-	stroke-width="5"
->
-	<circle class="background-circle" stroke={color} cx="50" cy="50" r="20" />
-	<circle class="animated" stroke={color} cx="50" cy="50" r="20" />
+<svg class={finalClass} viewBox="25 25 50 50" stroke-width="5">
+	<circle class="background-circle" cx="50" cy="50" r="20" />
+	<circle class="animated" cx="50" cy="50" r="20" />
 </svg>
 
 <style>
@@ -30,9 +29,11 @@
 	.background-circle {
 		fill: none;
 		opacity: 0.25;
+		stroke: currentColor;
 	}
 	.animated {
 		fill: none;
+		stroke: currentColor;
 		stroke-dasharray: 1, 200;
 		stroke-dashoffset: 0;
 		stroke-linecap: round;
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
index 845465b5..f2e3d0a3 100644
--- a/src/lib/components/button/Button.svelte
+++ b/src/lib/components/button/Button.svelte
@@ -29,20 +29,9 @@
 		| 'text'
 		| 'dark'
 		| undefined = undefined;
-	export let loaderColor: string | undefined = undefined;
 	export let shape: 'square' | 'circle' | 'rounded' | 'pill' = 'rounded';
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fab' = 'md';
 
-	const buttonLoaderColor = loaderColor
-		? loaderColor
-		: type === 'primary'
-		? '#ffffff'
-		: type === 'danger'
-		? '#ffffff'
-		: type === 'link'
-		? '#2563eb'
-		: '#000000';
-
 	setContext(BUTTON_CONTEXT_ID, {
 		button: true,
 		size
@@ -93,36 +82,55 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	{#if defaultLoading && $$slots.leading}
-		<div class="mr-2 flex justify-center items-center relative">
-			<Swap {loading}>
-				<svelte:fragment slot="on">
-					<slot name="leading" />
-				</svelte:fragment>
-				<svelte:fragment slot="off">
-					<ButtonLoader color={buttonLoaderColor} />
-				</svelte:fragment>
-			</Swap>
-		</div>
-		<slot />
-		<slot name="trailing" />
-	{:else if defaultLoading && $$slots.icon}
-		<div class="flex justify-center items-center relative">
-			<Swap {loading}>
-				<svelte:fragment slot="on">
-					<slot name="icon" />
-				</svelte:fragment>
-				<svelte:fragment slot="off">
-					<ButtonLoader color={buttonLoaderColor} />
-				</svelte:fragment>
-			</Swap>
-		</div>
-		<slot />
-		<slot name="trailing" />
-	{:else if loading && defaultLoading && !$$slots.leading && !$$slots.icon}
-		<div transition:scale|local class="mr-2 flex justify-center items-center relative">
-			<ButtonLoader color={buttonLoaderColor} />
-		</div>
+	{#if defaultLoading}
+		{#if $$slots.leading && $$slots.icon}
+			<div class="mr-2 flex justify-center items-center relative">
+				<Swap {loading}>
+					<svelte:fragment slot="on">
+						<slot name="leading" />
+					</svelte:fragment>
+					<svelte:fragment slot="off">
+						<ButtonLoader />
+					</svelte:fragment>
+				</Swap>
+			</div>
+			<div class="flex justify-center items-center relative">
+				<Swap {loading}>
+					<svelte:fragment slot="on">
+						<slot name="icon" />
+					</svelte:fragment>
+					<svelte:fragment slot="off">
+						<ButtonLoader />
+					</svelte:fragment>
+				</Swap>
+			</div>
+		{:else if $$slots.leading}
+			<div class="mr-2 flex justify-center items-center relative">
+				<Swap {loading}>
+					<svelte:fragment slot="on">
+						<slot name="leading" />
+					</svelte:fragment>
+					<svelte:fragment slot="off">
+						<ButtonLoader />
+					</svelte:fragment>
+				</Swap>
+			</div>
+		{:else if $$slots.icon}
+			<div class="flex justify-center items-center relative">
+				<Swap {loading}>
+					<svelte:fragment slot="on">
+						<slot name="icon" />
+					</svelte:fragment>
+					<svelte:fragment slot="off">
+						<ButtonLoader />
+					</svelte:fragment>
+				</Swap>
+			</div>
+		{:else if loading}
+			<div transition:scale|local class="mr-2 flex justify-center items-center relative">
+				<ButtonLoader />
+			</div>
+		{/if}
 		<slot />
 		<slot name="trailing" />
 	{:else}
diff --git a/src/lib/components/button/Loader.svelte b/src/lib/components/button/Loader.svelte
index c06033d0..f34a7c74 100644
--- a/src/lib/components/button/Loader.svelte
+++ b/src/lib/components/button/Loader.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-	export let color: string;
+	import { twMerge } from 'tailwind-merge';
+
+	const defaultClass = 'button-loader';
+	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<svg
-	class="button-loader{$$props.class ? ` ${$$props.class}` : ''}"
-	viewBox="25 25 50 50"
-	stroke-width="5"
->
-	<circle class="background-circle" stroke={color} cx="50" cy="50" r="20" />
-	<circle class="animated" stroke={color} cx="50" cy="50" r="20" />
+<svg class={finalClass} viewBox="25 25 50 50" stroke-width="5">
+	<circle class="background-circle" cx="50" cy="50" r="20" />
+	<circle class="animated" cx="50" cy="50" r="20" />
 </svg>
 
 <style>
@@ -30,9 +29,11 @@
 	.background-circle {
 		fill: none;
 		opacity: 0.25;
+		stroke: currentColor;
 	}
 	.animated {
 		fill: none;
+		stroke: currentColor;
 		stroke-dasharray: 1, 200;
 		stroke-dashoffset: 0;
 		stroke-linecap: round;
diff --git a/src/routes/button/+page.svelte b/src/routes/button/+page.svelte
index c78d34b7..4e05900b 100644
--- a/src/routes/button/+page.svelte
+++ b/src/routes/button/+page.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
 	import { Button, Card, Col, Icon, Swap } from '../../lib';
+	import CodeBlock from '../../docs/components/code-block';
+	import {
+		exampleDefault,
+		exampleLoading,
+		exampleDisabled,
+		exampleLeadingTrailing,
+		exampleShape,
+		exampleSwap,
+		props,
+		slots,
+		leadingTrailingIconSlots,
+		iconProps
+	} from './examples';
+	import { PropsTable, SlotsTable } from '../../docs';
 
 	let loading = false;
 
-	function handleClick() {
-		console.log('button clicked!');
-	}
-
 	function toggleLoading() {
 		loading = !loading;
 	}
@@ -16,7 +26,7 @@
 	<Card bordered>
 		<Card.Header slot="header">Basic</Card.Header>
 		<Card.Content slot="content" class="p-4">
-			<Button on:click={handleClick}>Default button</Button>
+			<Button on:click={() => console.log("I've been clicked!")}>Default button</Button>
 
 			<Button type="primary">I am primary</Button>
 
@@ -25,6 +35,11 @@
 			<Button type="ghost">Boo I am a ghost</Button>
 
 			<Button type="link">I am a link</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleDefault} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -42,6 +57,11 @@
 			<Button type="ghost" loading>Boo I am a ghost</Button>
 
 			<Button type="link" loading>I am a link</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleLoading} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -59,6 +79,11 @@
 			<Button type="ghost" disabled>Boo I am a ghost</Button>
 
 			<Button type="link" disabled>I am a link</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleDisabled} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -100,6 +125,11 @@
 					<Button.Trailing.Icon icon="paid" />
 				</Button.Trailing>
 			</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleLeadingTrailing} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -119,6 +149,11 @@
 			<Button type="ghost">Boo I am a ghost</Button>
 
 			<Button type="link">I am a link</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleShape} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -141,8 +176,13 @@
 						<Icon slot="off" icon="close" />
 					</Swap>
 				</Button.Leading>
-				I am primary</Button
-			>
+				I am primary
+			</Button>
+
+			<br />
+			<br />
+
+			<CodeBlock language="typescript" code={exampleSwap} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -214,3 +254,31 @@
 		</Card.Content>
 	</Card>
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Button" {props} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Button" {slots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Button.Leading" slots={leadingTrailingIconSlots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Leading.Icon" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Icon" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Button.Trailing" slots={leadingTrailingIconSlots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Trailing.Icon" props={iconProps} />
+</Col>
diff --git a/src/routes/button/examples.ts b/src/routes/button/examples.ts
new file mode 100644
index 00000000..2e205eb0
--- /dev/null
+++ b/src/routes/button/examples.ts
@@ -0,0 +1,188 @@
+import type { Slot, Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'disabled',
+		type: 'boolean',
+		default: 'false'
+	},
+	{
+		id: '2',
+		prop: 'htmlType',
+		type: "'button' | 'submit' | 'reset'",
+		default: 'button'
+	},
+	{
+		id: '3',
+		prop: 'loading',
+		type: 'boolean',
+		default: 'false'
+	},
+	{
+		id: '4',
+		prop: 'defaultLoading',
+		type: 'boolean',
+		default: 'true'
+	},
+	{
+		id: '5',
+		prop: 'type',
+		type: "'default'| 'primary' | 'danger' | 'ghost' | 'link' | 'text' | 'dark' | undefined",
+		default: ''
+	},
+	{
+		id: '6',
+		prop: 'shape',
+		type: "'square' | 'circle' | 'rounded' | 'pill'",
+		default: 'rounded'
+	},
+	{
+		id: '7',
+		prop: 'size',
+		type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fab'",
+		default: 'md'
+	}
+];
+
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'leading',
+		component: '<Button.Leading slot="leading" />'
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<Button.Icon slot="icon" />'
+	},
+	{
+		id: '3',
+		slot: 'default',
+		component: ''
+	},
+	{
+		id: '4',
+		slot: 'trailing',
+		component: '<Button.Trailing slot="trailing" />'
+	}
+];
+
+export const leadingTrailingIconSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'icon',
+		component: '<Button.Leading.Icon slot="icon" />'
+	},
+	{
+		id: '2',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'icon',
+		type: 'MaterialIcon (string)',
+		default: ''
+	}
+];
+
+export const exampleDefault = `
+<script lang="ts">
+	import { Button } from 'stwui';
+</script>
+
+<Button on:click={() => console.log("I've been clicked!")}>Default button</Button>
+<Button type="primary">I am primary</Button>
+<Button type="danger">I am scary</Button>
+<Button type="ghost">Boo I am a ghost</Button>
+<Button type="link">I am a link</Button>`;
+
+export const exampleLoading = `
+<script lang="ts">
+	import { Button } from 'stwui';
+</script>
+
+<Button loading>Default button</Button>
+<Button type="primary" loading>I am primary</Button>
+<Button type="danger" loading>I am scary</Button>
+<Button type="ghost" loading>Boo I am a ghost</Button>
+<Button type="link" loading>I am a link</Button>`;
+
+export const exampleDisabled = `
+<script lang="ts">
+	import { Button } from 'stwui';
+</script>
+
+<Button disabled>Default button</Button>
+<Button type="primary" disabled>I am primary</Button>
+<Button type="danger" disabled>I am scary</Button>
+<Button type="ghost" disabled>Boo I am a ghost</Button>
+<Button type="link" disabled>I am a link</Button>`;
+
+export const exampleLeadingTrailing = `
+<script lang="ts">
+	import { Button } from 'stwui';
+</script>
+
+<Button>
+	<Button.Leading slot="leading">
+		<Button.Leading.Icon icon="paid" />
+	</Button.Leading>
+	Default Button
+</Button>
+
+<Button>
+   Default Button
+	<Button.Trailing slot="trailing">
+		<Button.Trailing.Icon icon="paid" />
+	</Button.Trailing>
+</Button>`;
+
+export const exampleShape = `
+<script lang="ts">
+	import { Button } from 'stwui';
+</script>
+
+<Button shape="circle" on:click={toggleLoading} {loading}>
+	<Button.Icon slot="icon" icon="paid" />
+</Button>
+
+<Button type="primary" shape="square">I am primary</Button>
+
+<Button type="danger" shape="rounded">I am scary</Button>
+
+<Button type="ghost">Boo I am a ghost</Button>
+
+<Button type="link">I am a link</Button>`;
+
+export const exampleSwap = `
+<script lang="ts">
+	import { Button, Swap } from 'stwui';
+
+   let loading = false;
+
+   function toggleLoading() {
+      loading = !loading;
+   }
+</script>
+
+<Button shape="circle" on:click={toggleLoading}>
+   <Swap slot="icon" {loading}>
+      <Icon slot="on" icon="menu" />
+      <Icon slot="off" icon="close" />
+   </Swap>
+</Button>
+
+<Button type="primary">
+   <Button.Leading slot="leading">
+      <Swap {loading}>
+         <Icon slot="on" icon="menu" />
+         <Icon slot="off" icon="close" />
+      </Swap>
+   </Button.Leading>
+   I am primary
+</Button>`;