docs: swapped theme text with icons

docs: refinded all current examples
N00nDay · Oct 7, 2022 · a8fe807 · a8fe807
1 parent c3e88ee
commit a8fe807
Show file tree

Hide file tree

Showing 10 changed files with 482 additions and 191 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -233,10 +233,14 @@
 			<Layout.Header.Extra slot="extra">
 				<Toggle name="toggle" bind:on={darkTheme}>
 					<Toggle.ContentLeft slot="content-left">
-						<Toggle.ContentLeft.Label slot="label">Light Theme</Toggle.ContentLeft.Label>
+						<Toggle.ContentLeft.Label slot="label">
+							<Icon icon="light_mode" class="flex justify-end items-center" />
+						</Toggle.ContentLeft.Label>
 					</Toggle.ContentLeft>
 					<Toggle.ContentRight slot="content-right">
-						<Toggle.ContentRight.Label slot="label">Dark Theme</Toggle.ContentRight.Label>
+						<Toggle.ContentRight.Label slot="label">
+							<Icon icon="dark_mode" class="flex justify-start items-center" />
+						</Toggle.ContentRight.Label>
 					</Toggle.ContentRight>
 				</Toggle>
 

diff --git a/src/routes/accordion/examples.ts b/src/routes/accordion/examples.ts
@@ -59,36 +59,36 @@ export const example = `
 <script lang="ts">
    import { Accordion } from 'stwui';
 
-   let open1 = '';
+   let open = '';
 
    function handleClick(item: string) {
-      if (open1 === item) {
-         open1 = '';
+      if (open === item) {
+         open1= '';
       } else {
-         open1 = item;
+         open = item;
       }
    }
 </script>
 
 <Accordion>
-	<Accordion.Item open={open1 === 'open1'}>
-		<Accordion.Item.Title slot="title" on:click={() => handleClick('open1')}>
+	<Accordion.Item open={open === 'item1'}>
+		<Accordion.Item.Title slot="title" on:click={() => handleClick('item1')}>
 			Item 1
 		</Accordion.Item.Title>
 		<Accordion.Item.Content slot="content">
          accordion_body
 		</Accordion.Item.Content>
 	</Accordion.Item>
-	<Accordion.Item open={open1 === 'open2'}>
-		<Accordion.Item.Title slot="title" on:click={() => handleClick('open2')}>
+	<Accordion.Item open={open === 'item2'}>
+		<Accordion.Item.Title slot="title" on:click={() => handleClick('item2')}>
 			Item 2
 		</Accordion.Item.Title>
 		<Accordion.Item.Content slot="content">
          accordion_body
 		</Accordion.Item.Content>
 	</Accordion.Item>
-	<Accordion.Item open={open1 === 'open3'}>
-		<Accordion.Item.Title slot="title" on:click={() => handleClick('open3')}>
+	<Accordion.Item open={open === 'item3'}>
+		<Accordion.Item.Title slot="title" on:click={() => handleClick('item3')}>
 			Item 3
 		</Accordion.Item.Title>
 		<Accordion.Item.Content slot="content">

diff --git a/src/routes/alert/+page.svelte b/src/routes/alert/+page.svelte
@@ -1,22 +1,8 @@
 <script lang="ts">
-	import { Alert, Button, Card, Col, Icon, Table } from '../../lib';
+	import { Alert, Button, Card, Col, Icon } from '../../lib';
 	import CodeBlock from '../../docs/components/code-block';
-	import { exampleSvelte, props, slots, iconProps } from './examples';
+	import { example, props, slots, iconProps } from './examples';
 	import { PropsTable, SlotsTable } from '../../docs';
-
-	type Type = 'info' | 'warn' | 'error' | 'success';
-	const types: Type[] = ['info', 'warn', 'error', 'success'];
-
-	let type: Type = 'error';
-
-	function changeType() {
-		let index = types.indexOf(type);
-		if (index === 3) {
-			type = types[0];
-		} else {
-			type = types[index + 1];
-		}
-	}
 </script>
 
 <Col class="col-24 md:col-12">
@@ -49,43 +35,7 @@
 
 			<br />
 
-			<CodeBlock language="typescript" code={exampleSvelte} />
-		</Card.Content>
-	</Card>
-</Col>
-
-<Col class="col-24 md:col-12">
-	<Card bordered={false}>
-		<Card.Header slot="header">Dynamic</Card.Header>
-		<Card.Content slot="content">
-			<Alert {type}>
-				<Alert.Icon slot="icon">
-					<Icon
-						icon={type === 'error'
-							? 'cancel'
-							: type === 'success'
-							? 'check_circle'
-							: type === 'info'
-							? 'info'
-							: 'error'}
-						class="text-current"
-					/>
-				</Alert.Icon>
-				<Alert.Title slot="title"><span>Title</span></Alert.Title>
-				<Alert.Description slot="description">I am a description</Alert.Description>
-				<Button
-					slot="extra"
-					size="sm"
-					class="top-[-0.5rem] right-[-0.5rem] text-error-icon dark:text-dark-error-icon"
-					type="danger"
-					on:click={changeType}
-				>
-					View
-					<Button.Trailing slot="trailing">
-						<Button.Trailing.Icon slot="icon" icon="arrow_forward" />
-					</Button.Trailing>
-				</Button>
-			</Alert>
+			<CodeBlock language="typescript" code={example} />
 		</Card.Content>
 	</Card>
 </Col>

diff --git a/src/routes/alert/examples.ts b/src/routes/alert/examples.ts
@@ -41,11 +41,31 @@ export const iconProps: Prop[] = [
 	}
 ];
 
-export const exampleSvelte = `
+export const example = `
 <script lang="ts">
 	import { Alert } from 'stwui';
 </script>
 
 <Alert>
-   <Alert.Title slot="title">Title</Alert.Title>
+	<Alert.Title slot="title">Title</Alert.Title>
+</Alert>
+<br />
+<Alert type="warn">
+	<Alert.Title slot="title">Title</Alert.Title>
+</Alert>
+<br />
+<Alert type="error">
+	<Alert.Icon slot="icon">
+		<Icon icon="cancel" class="text-current" />
+	</Alert.Icon>
+	<Alert.Title slot="title"><span>Title</span></Alert.Title>
+	<Alert.Description slot="description">I am a description</Alert.Description>
+	<Button
+		slot="extra"
+		shape="circle"
+		class="top-[-0.5rem] right-[-0.5rem] text-error-icon dark:text-dark-error-icon"
+		on:click={() => console.log('I clicked extra')}
+	>
+		<Button.Icon slot="icon" icon="close" />
+	</Button>
 </Alert>`;
diff --git a/src/routes/avatar/+page.svelte b/src/routes/avatar/+page.svelte
@@ -2,8 +2,10 @@
 	import { Avatar, AvatarGroup, Card, Col } from '../../lib';
 	import CodeBlock from '../../docs/components/code-block';
 	import {
-		avatarExample,
-		avatarGroupExample,
+		exampleSize,
+		exampleIndicator,
+		exampleInitials,
+		exampleGroup,
 		props,
 		slots,
 		iconProps,
@@ -44,80 +46,64 @@
 				size="xl"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 			/>
+
 			<br />
-			<br />
-			<Avatar
-				size="xs"
-				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-			>
-				<Avatar.Indicator slot="indicator" />
-			</Avatar>
-			<Avatar
-				size="sm"
-				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-			>
-				<Avatar.Indicator slot="indicator" />
-			</Avatar>
-			<Avatar
-				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-			>
-				<Avatar.Indicator slot="indicator" />
-			</Avatar>
-			<Avatar
-				size="lg"
-				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-			>
-				<Avatar.Indicator slot="indicator" />
-			</Avatar>
-			<Avatar
-				size="xl"
-				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-			>
-				<Avatar.Indicator slot="indicator" />
-			</Avatar>
-			<br />
-			<br />
+
+			<CodeBlock language="typescript" code={exampleSize} />
+		</Card.Content>
+	</Card>
+</Col>
+
+<Col class="col-24 md:col-12">
+	<Card bordered={false}>
+		<Card.Header slot="header">Indicator</Card.Header>
+		<Card.Content slot="content" class="p-4">
 			<Avatar
 				class="mr-2"
 				size="xs"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-				shape="rounded"
 			>
-				<Avatar.Indicator slot="indicator" placement="bottom-right" />
+				<Avatar.Indicator slot="indicator" placement="top-left" />
 			</Avatar>
 			<Avatar
 				class="mr-2"
 				size="sm"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-				shape="rounded"
 			>
-				<Avatar.Indicator slot="indicator" placement="bottom-right" />
+				<Avatar.Indicator slot="indicator" placement="top-right" />
 			</Avatar>
 			<Avatar
 				class="mr-2"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-				shape="rounded"
 			>
-				<Avatar.Indicator slot="indicator" placement="bottom-right" />
+				<Avatar.Indicator slot="indicator" placement="bottom-left" />
 			</Avatar>
 			<Avatar
 				class="mr-2"
 				size="lg"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-				shape="rounded"
 			>
 				<Avatar.Indicator slot="indicator" placement="bottom-right" />
 			</Avatar>
 			<Avatar
 				class="mr-2"
 				size="xl"
 				src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-				shape="rounded"
 			>
-				<Avatar.Indicator slot="indicator" placement="bottom-right" />
+				<Avatar.Indicator slot="indicator" placement="top-right" />
 			</Avatar>
+
 			<br />
-			<br />
+
+			<CodeBlock language="typescript" code={exampleIndicator} />
+		</Card.Content>
+	</Card>
+</Col>
+
+<Col class="col-24 md:col-12">
+	<Card bordered={false}>
+		<Card.Header slot="header">Initials</Card.Header>
+		<Card.Content slot="content" class="p-4">
 			<Avatar size="xs" initials="CH" />
 			<Avatar size="sm" initials="CH" />
 			<Avatar initials="CH" />
@@ -126,7 +112,7 @@
 
 			<br />
 
-			<CodeBlock language="typescript" code={avatarExample} />
+			<CodeBlock language="typescript" code={exampleInitials} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -167,7 +153,7 @@
 
 			<br />
 
-			<CodeBlock language="typescript" code={avatarGroupExample} />
+			<CodeBlock language="typescript" code={exampleGroup} />
 		</Card.Content>
 	</Card>
 </Col>

diff --git a/src/routes/avatar/examples.ts b/src/routes/avatar/examples.ts
@@ -121,20 +121,87 @@ export const groupAvatarProps: Prop[] = [
 	}
 ];
 
-export const avatarExample = `
+export const exampleSize = `
 <script lang="ts">
    import { Avatar } from 'stwui';
 </script>
 
-<Avatar src="image.png" />`;
+<Avatar src="image.png" size="xs" />
+<Avatar src="image.png" size="sm" />
+<Avatar src="broken-image.png" />
+<Avatar src="image.png" size="lg" />
+<Avatar src="image.png" size="xl" />`;
 
-export const avatarGroupExample = `
+export const exampleIndicator = `
+<script lang="ts">
+   import { Avatar } from 'stwui';
+</script>
+
+<Avatar size="xs" src="image.png">
+	<Avatar.Indicator slot="indicator" placement="bottom-right" />
+</Avatar>
+<Avatar size="sm" src="image.png">
+	<Avatar.Indicator slot="indicator" placement="bottom-right" />
+</Avatar>
+<Avatar src="image.png">
+	<Avatar.Indicator slot="indicator" placement="bottom-right" />
+</Avatar>
+<Avatar size="lg" src="image.png">
+	<Avatar.Indicator slot="indicator" placement="bottom-right" />
+</Avatar>
+<Avatar size="xl" src="image.png">
+	<Avatar.Indicator slot="indicator" placement="bottom-right" />
+</Avatar>`;
+
+export const exampleInitials = `
+<script lang="ts">
+   import { Avatar } from 'stwui';
+</script>
+
+<Avatar size="xs" initials="CH" />
+<Avatar size="sm" initials="CH" />
+<Avatar initials="CH" />
+<Avatar size="lg" initials="CH" />
+<Avatar size="xl" initials="CH" />`;
+
+export const exampleGroup = `
 <script lang="ts">
    import { AvatarGroup } from 'stwui';
+
+	const avatars = [
+		'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+		'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+		'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',
+		'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
+	];
 </script>
 
+<AvatarGroup size="xs">
+	{#each avatars as avatar}
+		<AvatarGroup.Avatar src={avatar} />
+	{/each}
+</AvatarGroup>
+<br />
+<AvatarGroup size="sm">
+	{#each avatars as avatar}
+		<AvatarGroup.Avatar src={avatar} />
+	{/each}
+</AvatarGroup>
+<br />
 <AvatarGroup>
-   <AvatarGroup.Avatar src="image.png" />
-   <AvatarGroup.Avatar src="image.png" />
-   <AvatarGroup.Avatar src="image.png" />
+	{#each avatars as avatar}
+		<AvatarGroup.Avatar src={avatar} />
+	{/each}
+</AvatarGroup>
+<br />
+<AvatarGroup size="lg">
+	{#each avatars as avatar}
+		<AvatarGroup.Avatar src={avatar} class="ring-primary dark:ring-primary" />
+	{/each}
+</AvatarGroup>
+<br />
+<AvatarGroup size="xl">
+	{#each avatars as avatar}
+		<AvatarGroup.Avatar src={avatar} />
+	{/each}
 </AvatarGroup>`;