fix(Chip): added default slot

docs(chip): added examples, props, and slots tables
N00nDay · Oct 9, 2022 · 87c6d29 · 87c6d29 · vercel · Oct 9, 2022
1 parent 5d7e228
commit 87c6d29
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 6 deletions.
diff --git a/src/lib/components/chip/Chip.svelte b/src/lib/components/chip/Chip.svelte
@@ -52,4 +52,5 @@
 	<slot name="avatar" />
 	<slot name="label" />
 	<slot name="close" />
+	<slot />
 </span>
diff --git a/src/routes/chip/+page.svelte b/src/routes/chip/+page.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { Card, Chip, Col } from '../../lib';
+	import CodeBlock from '../../docs/components/code-block';
+	import { example, closeExample, props, slots, avatarProps, labelSlots } from './examples';
+	import { PropsTable, SlotsTable } from '../../docs';
 
 	const avatar =
 		'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80';
 </script>
 
-<Col class="col-24">
+<Col class="col-24 md:col-12">
 	<Card bordered={false}>
 		<Card.Header slot="header">Chip</Card.Header>
 		<Card.Content slot="content" class="p-4">
@@ -31,15 +34,15 @@
 				<Chip.Label slot="label">Castor Troy</Chip.Label>
 			</Chip>
 
-			<Chip class="bg-black text-white bg-opacity-100">
-				<Chip.Avatar slot="avatar" src={avatar} />
-				<Chip.Label slot="label">Castor Troy</Chip.Label>
-			</Chip>
+			<br />
+			<br />
+
+			<CodeBlock language="svelte" code={example} />
 		</Card.Content>
 	</Card>
 </Col>
 
-<Col class="col-24">
+<Col class="col-24 md:col-12">
 	<Card bordered={false}>
 		<Card.Header slot="header">Chip with Close</Card.Header>
 		<Card.Content slot="content" class="p-4">
@@ -53,6 +56,27 @@
 				<Chip.Label slot="label">Castor Troy</Chip.Label>
 				<Chip.Close slot="close" />
 			</Chip>
+
+			<br />
+			<br />
+
+			<CodeBlock language="svelte" code={closeExample} />
 		</Card.Content>
 	</Card>
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Chip" {props} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Chip" {slots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Chip.Avatar" props={avatarProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Chip.Label" slots={labelSlots} />
+</Col>
diff --git a/src/routes/chip/examples.ts b/src/routes/chip/examples.ts
@@ -0,0 +1,105 @@
+import type { Slot, Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'type',
+		type: "'info' | 'warn' | 'success' | 'error' | 'default'",
+		default: 'default'
+	},
+	{
+		id: '2',
+		prop: 'type',
+		type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+		default: 'md'
+	}
+];
+
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'avatar',
+		component: '<Chip.Avatar slot="avatar" />'
+	},
+	{
+		id: '2',
+		slot: 'label',
+		component: '<Chip.Label slot="label" />'
+	},
+	{
+		id: '3',
+		slot: 'close',
+		component: '<Chip.Close slot="close" />'
+	},
+	{
+		id: '4',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const avatarProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'src',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'alt',
+		type: 'string',
+		default: 'user-avatar'
+	}
+];
+
+export const labelSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const example = `
+<script lang="ts">
+	import { Chip } from 'stwui';
+</script>
+
+<Chip size="xs">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+</Chip>
+<Chip size="sm" type="success">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+</Chip>
+
+<Chip type="warn">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+</Chip>
+<Chip size="lg" type="error">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+</Chip>
+<Chip size="xl">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+</Chip>`;
+
+export const closeExample = `
+<script lang="ts">
+	import { Chip } from 'stwui';
+</script>
+
+<Chip type="info">
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+   <Chip.Close slot="close" />
+</Chip>
+<Chip>
+   <Chip.Avatar slot="avatar" src="image.png" />
+   <Chip.Label slot="label">Castor Troy</Chip.Label>
+   <Chip.Close slot="close" />
+</Chip>`;