fix(Button): added Button.Leading, Button.Trailing, and Button.Icon

docs(button): updated examples
N00nDay · Oct 18, 2022 · 41b31ab · 41b31ab
1 parent 6d32860
commit 41b31ab
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 46 deletions.
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
@@ -34,11 +34,6 @@
 	export let disableHover = false;
 	export let ariaLabel: undefined | string = undefined;
 
-	setContext(BUTTON_CONTEXT_ID, {
-		button: true,
-		size
-	});
-
 	let iconSize = '';
 	if (size === 'xs') {
 		iconSize = '16px';
@@ -54,6 +49,11 @@
 		iconSize = '34px';
 	}
 
+	setContext(BUTTON_CONTEXT_ID, {
+		button: true,
+		iconSize
+	});
+
 	let defaultClass =
 		'btn group relative inline-flex justify-center items-center font-medium active:hover:animate-none active:hover:scale-95 outline-none';
 	if (loading) {

diff --git a/src/lib/components/button/Icon.svelte b/src/lib/components/button/Icon.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { BUTTON_CONTEXT_ID } from './Button.svelte';
+	import { useContext } from '../../utils/useContext';
+	import { getContext } from 'svelte/internal';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
+
+	const { iconSize }: { iconSize: string } = getContext(BUTTON_CONTEXT_ID);
+
+	export let data = '';
+	export let viewBox = extractViewBox(data);
+
+	export let size = iconSize;
+	export let width = size;
+	export let height = size;
+
+	export let color = 'currentColor';
+	export let stroke = color;
+	export let fill = color;
+
+	$: elements = data.replace(/<svg ([^>]*)>/, '').replace('</svg>', '');
+
+	function extractViewBox(svg: string) {
+		const regex = /viewBox="([\d\- ]+)"/;
+		const res = regex.exec(svg);
+		if (!res) return '0 0 24 24'; // default value
+		return res[1];
+	}
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{width}
+	{height}
+	{viewBox}
+	{stroke}
+	{fill}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'fill', 'viewBox', 'width', 'height', 'stroke'])}
+>
+	{@html elements}
+</svg>
diff --git a/src/lib/components/button/index.ts b/src/lib/components/button/index.ts
@@ -1,12 +1,19 @@
 import OriginalButton from './Button.svelte';
 import Loader from './Loader.svelte';
+import Icon from './Icon.svelte';
 
 const Button = OriginalButton as ButtonStatic;
 Button.Loader = Loader;
+Button.Icon = Icon;
+Button.Leading = Icon;
+Button.Trailing = Icon;
 
 export default Button;
 
 export interface ButtonStatic {
 	new (...args: ConstructorParameters<typeof OriginalButton>): OriginalButton;
 	Loader: typeof Loader;
+	Icon: typeof Icon;
+	Leading: typeof Icon;
+	Trailing: typeof Icon;
 }
diff --git a/src/routes/button/+page.svelte b/src/routes/button/+page.svelte
@@ -8,7 +8,8 @@
 		exampleShape,
 		exampleSwap,
 		props,
-		slots
+		slots,
+		iconProps
 	} from './examples';
 	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
 	import { home } from '../../docs/icons';
@@ -92,27 +93,27 @@
 		<Card.Header slot="header">Leading & Trailing</Card.Header>
 		<Card.Content slot="content" class="p-4">
 			<Button {loading} on:click={toggleLoading}>
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				Default button
 			</Button>
 
 			<Button type="primary">
-				<Icon data={home} slot="leading" let:size {size} />I am primary</Button
+				<Button.Leading data={home} slot="leading" />I am primary</Button
 			>
 
 			<Button type="danger" {loading}
 				>I am scary
-				<Icon data={home} slot="trailing" let:size {size} />
+				<Button.Trailing data={home} slot="trailing" />
 			</Button>
 
 			<Button type="ghost"
 				>Boo I am a ghost
-				<Icon data={home} slot="trailing" let:size {size} />
+				<Button.Trailing data={home} slot="trailing" />
 			</Button>
 
 			<Button type="link"
 				>I am a link
-				<Icon data={home} slot="trailing" let:size {size} />
+				<Button.Trailing data={home} slot="trailing" />
 			</Button>
 
 			<br />
@@ -128,7 +129,7 @@
 		<Card.Header slot="header">Shape</Card.Header>
 		<Card.Content slot="content" class="p-4">
 			<Button shape="circle" on:click={toggleLoading} {loading}>
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" shape="square">I am primary</Button>
@@ -152,16 +153,16 @@
 		<Card.Header slot="header">Swap Icon</Card.Header>
 		<Card.Content slot="content" class="p-4">
 			<Button shape="circle" on:click={toggleLoading}>
-				<Swap slot="icon" {loading} let:size>
-					<Icon data={menu} slot="on" {size} />
-					<Icon data={close} slot="off" {size} />
+				<Swap slot="icon" {loading}>
+					<Button.Icon data={menu} slot="on" />
+					<Button.Icon data={close} slot="off" />
 				</Swap>
 			</Button>
 
 			<Button type="primary">
-				<Swap {loading} slot="leading" let:size>
-					<Icon data={menu} slot="on" {size} />
-					<Icon data={close} slot="off" {size} />
+				<Swap {loading} slot="leading">
+					<Button.Icon data={menu} slot="on" />
+					<Button.Icon data={close} slot="off" />
 				</Swap>
 				I am primary
 			</Button>
@@ -189,51 +190,51 @@
 			<Button type="primary" size="xl">xl</Button>
 
 			<Button type="primary" size="xs" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" size="sm" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" size="md" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" size="lg" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" size="xl" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="primary" size="fab" shape="circle">
-				<Icon data={home} slot="icon" let:size {size} />
+				<Button.Icon data={home} slot="icon" />
 			</Button>
 
 			<Button type="default" size="xs">
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				xs</Button
 			>
 
 			<Button type="default" size="sm">
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				sm</Button
 			>
 
 			<Button type="default" size="md">
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				md</Button
 			>
 
 			<Button type="default" size="lg">
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				lg</Button
 			>
 
 			<Button type="default" size="xl">
-				<Icon data={home} slot="leading" let:size {size} />
+				<Button.Leading data={home} slot="leading" />
 				xl</Button
 			>
 		</Card.Content>
@@ -247,3 +248,15 @@
 <Col class="col-24">
 	<SlotsTable component="Button" {slots} />
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Leading" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Icon" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Button.Trailing" props={iconProps} />
+</Col>
diff --git a/src/routes/button/examples.ts b/src/routes/button/examples.ts
@@ -61,12 +61,12 @@ export const slots: Slot[] = [
 	{
 		id: '1',
 		slot: 'leading',
-		component: '<Icon path="" slot="leading" let:size {size} />'
+		component: '<Button.Leading slot="leading" />'
 	},
 	{
 		id: '2',
 		slot: 'icon',
-		component: '<Icon path="" slot="icon" let:size {size} />'
+		component: '<Button.Icon slot="icon" />'
 	},
 	{
 		id: '3',
@@ -76,7 +76,58 @@ export const slots: Slot[] = [
 	{
 		id: '4',
 		slot: 'trailing',
-		component: '<Icon path="" slot="trailing" let:size {size} />'
+		component: '<Button.Trailing slot="trailing" />'
+	}
+];
+
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
 	}
 ];
 
@@ -115,45 +166,45 @@ export const exampleDisabled = `
 
 export const exampleLeadingTrailing = `
 <script lang="ts">
-	import { Button, Icon } from 'stwui';
+	import { Button } from 'stwui';
 
 	const home = "svg-path";
 </script>
 
 <Button>
-	<Icon data={home} slot="leading" let:size {size} />
+	<Button.Leading data={home} slot="leading" />
 	Default button
 </Button>
 
 <Button type="primary">
-	<Icon data={home} slot="leading" let:size {size} />
+	<Button.Leading data={home} slot="leading" />
 	I am primary
 </Button>
 
 <Button type="danger">
 	I am scary
-	<Icon data={home} slot="trailing" let:size {size} />
+	<Button.Trailing data={home} slot="trailing" />
 </Button>
 
 <Button type="ghost">
 	Boo I am a ghost
-	<Icon data={home} slot="trailing" let:size {size} />
+	<Button.Trailing data={home} slot="trailing" />
 </Button>
 
 <Button type="link">
 	I am a link
-	<Icon data={home} slot="trailing" let:size {size} />
+	<Button.Trailing data={home} slot="trailing" />
 </Button>`;
 
 export const exampleShape = `
 <script lang="ts">
-	import { Button, Icon } from 'stwui';
+	import { Button } from 'stwui';
 
 	const home = "svg-path";
 </script>
 
 <Button shape="circle">
-	<Icon data={home} slot="icon" let:size {size} />
+	<Button.Icon data={home} slot="icon" />
 </Button>
 
 <Button type="primary" shape="square">I am primary</Button>
@@ -176,16 +227,16 @@ export const exampleSwap = `
 </script>
 
 <Button shape="circle" on:click={toggleLoading}>
-	<Swap slot="icon" {loading} let:size>
-		<Icon data={menu} slot="on" {size} />
-		<Icon data={close} slot="off" {size} />
+	<Swap slot="icon" {loading}>
+		<Button.Icon data={menu} slot="on" />
+		<Button.Icon data={close} slot="off" />
 	</Swap>
 </Button>
 
 <Button type="primary">
-	<Swap {loading} slot="leading" let:size>
-		<Icon data={menu} slot="on" {size} />
-		<Icon data={close} slot="off" {size} />
+	<Swap {loading} slot="leading">
+		<Button.Icon data={menu} slot="on" />
+		<Button.Icon data={close} slot="off" />
 	</Swap>
 	I am primary
 </Button>`;