docs: split Avatar from AvatarGroup

fix(Autocomplete.List.EmptyOption): replaced label prop with default slot docs(accordion): added default slots docs(alert): added default slots docs(autocomplete): updated to show change from label prop to default slot docs(avatar-group): split from avatar docs docs(avatar): moved AvatarGroup to its own page
N00nDay · Oct 11, 2022 · fc8e272 · fc8e272
1 parent 0d5c681
commit fc8e272
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 182 deletions.
diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -19,6 +19,10 @@
 			title: 'Avatar',
 			href: '/avatar'
 		},
+		{
+			title: 'AvatarGroup',
+			href: '/avatar-group'
+		},
 		{
 			title: 'Badge',
 			href: '/badge'

diff --git a/src/lib/components/autocomplete/EmptyOption.svelte b/src/lib/components/autocomplete/EmptyOption.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 
-	export let label = 'No Options Available';
-
 	const defaultClass =
 		'group text-light-content dark:text-dark-content select-none p-0.5 w-full relative py-1.5 pl-2.5 pr-7 w-full rounded-md overflow-hidden';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<li class={finalClass} role="option" aria-selected="false">
-	<span class="font-normal block truncate"> {label} </span>
+<li class={finalClass} style={$$props.style} role="option" aria-selected="false">
+	<span class="font-normal block truncate">
+		{#if $$slots.default}<slot />{:else}No Options Available{/if}
+	</span>
 </li>
diff --git a/src/routes/accordion/examples.ts b/src/routes/accordion/examples.ts
@@ -54,7 +54,7 @@ export const example = `
 
    function handleClick(item: string) {
       if (open === item) {
-         open1= '';
+         open= '';
       } else {
          open = item;
       }

diff --git a/src/routes/alert/+page.svelte b/src/routes/alert/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Alert, Button, Card, Col, Icon } from '../../lib';
 	import CodeBlock from '../../docs/components/code-block';
-	import { example, props, slots, iconProps } from './examples';
+	import { example, props, slots, iconProps, titleSlots, descriptionSlots } from './examples';
 	import { PropsTable, SlotsTable } from '../../docs';
 </script>
 
@@ -51,3 +51,11 @@
 <Col class="col-24">
 	<PropsTable component="Alert.Icon" props={iconProps} />
 </Col>
+
+<Col class="col-24">
+	<SlotsTable component="Alert.Title" slots={titleSlots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Alert.Description" slots={descriptionSlots} />
+</Col>
diff --git a/src/routes/alert/examples.ts b/src/routes/alert/examples.ts
@@ -41,6 +41,22 @@ export const iconProps: Prop[] = [
 	}
 ];
 
+export const titleSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const descriptionSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: ''
+	}
+];
+
 export const example = `
 <script lang="ts">
 	import { Alert } from 'stwui';

diff --git a/src/routes/autocomplete/+page.svelte b/src/routes/autocomplete/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Autocomplete, Card, Col } from '../../lib';
 	import CodeBlock from '../../docs/components/code-block';
-	import { example, props, slots, listSlots, optionProps, emptyOptionProps } from './examples';
+	import { example, props, slots, listSlots, optionProps, emptyOptionSlots } from './examples';
 	import { PropsTable, SlotsTable, BetaComponent } from '../../docs';
 
 	let value1: string;
@@ -141,5 +141,5 @@
 </Col>
 
 <Col class="col-24">
-	<PropsTable component="Autocomplete.List.EmptyOption" props={emptyOptionProps} />
+	<SlotsTable component="Autocomplete.List.EmptyOption" slots={emptyOptionSlots} />
 </Col>
diff --git a/src/routes/autocomplete/examples.ts b/src/routes/autocomplete/examples.ts
@@ -93,12 +93,11 @@ export const optionProps: Prop[] = [
 	}
 ];
 
-export const emptyOptionProps: Prop[] = [
+export const emptyOptionSlots: Slot[] = [
 	{
 		id: '1',
-		prop: 'label',
-		type: 'string',
-		default: 'No Options Available'
+		slot: 'default',
+		component: ''
 	}
 ];
 

diff --git a/src/routes/avatar-group/+page.svelte b/src/routes/avatar-group/+page.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { AvatarGroup, Card, Col } from '../../lib';
+	import CodeBlock from '../../docs/components/code-block';
+	import {
+		exampleGroup,
+		slots,
+		iconProps,
+		placeholderSlots,
+		indicatorProps,
+		groupProps,
+		groupSlots,
+		groupAvatarProps
+	} from './examples';
+	import { PropsTable, SlotsTable } from '../../docs';
+
+	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>
+
+<Col class="col-24 md:col-12">
+	<Card bordered={false}>
+		<Card.Header slot="header">Avatar Group</Card.Header>
+		<Card.Content slot="content" class="p-4">
+			<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>
+				{#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>
+
+			<br />
+			<br />
+
+			<CodeBlock language="svelte" code={exampleGroup} />
+		</Card.Content>
+	</Card>
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="AvatarGroup" props={groupProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="AvatarGroup" slots={groupSlots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="AvatarGroup.Avatar" props={groupAvatarProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="AvatarGroup.Avatar" {slots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="AvatarGroup.Avatar.Placeholder" slots={placeholderSlots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="AvatarGroup.Avatar.Placeholder.Icon" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="AvatarGroup.Avatar.Indicator" props={indicatorProps} />
+</Col>
diff --git a/src/routes/avatar-group/examples.ts b/src/routes/avatar-group/examples.ts
@@ -0,0 +1,164 @@
+import type { Slot, Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'src',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'alt',
+		type: 'string',
+		default: 'avatar'
+	},
+	{
+		id: '3',
+		prop: 'shape',
+		type: "'circle' | 'rounded' | 'square'",
+		default: 'circle'
+	},
+	{
+		id: '4',
+		prop: 'size',
+		type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+		default: 'md'
+	},
+	{
+		id: '5',
+		prop: 'initials',
+		type: 'string',
+		default: ''
+	}
+];
+
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'placeholder',
+		component: '<Avatar.Placeholder slot="placeholder" />'
+	},
+	{
+		id: '2',
+		slot: 'indicator',
+		component: '<Avatar.Indicator slot="indicator" />'
+	}
+];
+
+export const placeholderSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'icon',
+		component: '<Avatar.Placeholder.Icon slot="icon" />'
+	},
+	{
+		id: '2',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'icon',
+		type: '<a class="link" href="/types#MaterialIcon">MaterialIcon</a>',
+		default: ''
+	}
+];
+
+export const indicatorProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'placement',
+		type: "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'",
+		default: 'top-right'
+	}
+];
+
+export const groupProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'shape',
+		type: "'circle' | 'rounded' | 'square'",
+		default: 'circle'
+	},
+	{
+		id: '2',
+		prop: 'size',
+		type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+		default: 'md'
+	}
+];
+
+export const groupSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: '<AvatarGroup.Avatar />'
+	}
+];
+
+export const groupAvatarProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'src',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'alt',
+		type: 'string',
+		default: 'avatar'
+	},
+	{
+		id: '3',
+		prop: 'initials',
+		type: 'string',
+		default: ''
+	}
+];
+
+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>
+	{#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>`;