fix(Media): class is reactive including child components

docs(media): added including examples, props, and slots tables
N00nDay · Oct 12, 2022 · da3111d · da3111d
1 parent 5157958
commit da3111d
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 5 deletions.
diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -3,7 +3,13 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte/internal';
 
-	const sidebarItems = [
+	interface Item {
+		title: string;
+		href: string;
+		beta?: boolean;
+	}
+
+	const sidebarItems: Item[] = [
 		{
 			title: 'Accordion',
 			href: '/accordion'
@@ -91,6 +97,10 @@
 			title: 'List',
 			href: '/list'
 		},
+		{
+			title: 'Media',
+			href: '/media'
+		},
 		{
 			title: 'Menu',
 			href: '/menu'

diff --git a/src/lib/components/media/Description.svelte b/src/lib/components/media/Description.svelte
@@ -22,7 +22,7 @@
 	});
 
 	const defaultClass = 'mt-1 text-light-secondary-content dark:text-dark-secondary-content';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <p

diff --git a/src/lib/components/media/Media.svelte b/src/lib/components/media/Media.svelte
@@ -4,7 +4,6 @@
 
 <script lang="ts">
 	import { setContext } from 'svelte';
-
 	import { current_component } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -17,7 +16,7 @@
 	});
 
 	const defaultClass = 'flex';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/media/Title.svelte b/src/lib/components/media/Title.svelte
@@ -22,7 +22,7 @@
 	});
 
 	const defaultClass = 'font-bold text-light-content dark:text-dark-content';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <h4

diff --git a/src/routes/media/+page.svelte b/src/routes/media/+page.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Card, Col, Media } from '../../lib';
+	import CodeBlock from '../../docs/components/code-block';
+	import {
+		example,
+		noAvatarExample,
+		slots,
+		avatarProps,
+		contentSlots,
+		titleSlots,
+		descriptionSlots
+	} from './examples';
+	import { PropsTable, SlotsTable } from '../../docs';
+
+	const avatar =
+		'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-8">
+	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
+		<Card bordered={false}>
+			<Card.Content slot="content">
+				<Media>
+					<Media.Avatar src={avatar} />
+					<Media.Content>
+						<Media.Content.Title>Europe Street beat</Media.Content.Title>
+						<Media.Content.Description>www.instagram.com</Media.Content.Description>
+					</Media.Content>
+				</Media>
+			</Card.Content>
+		</Card>
+
+		<br />
+
+		<CodeBlock language="svelte" code={example} />
+	</Card>
+</Col>
+
+<Col class="col-24 md:col-8">
+	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
+		<Card bordered={false}>
+			<Card.Content slot="content">
+				<Media>
+					<Media.Content>
+						<Media.Content.Title>Europe Street beat</Media.Content.Title>
+						<Media.Content.Description>www.instagram.com</Media.Content.Description>
+					</Media.Content>
+				</Media>
+			</Card.Content>
+		</Card>
+
+		<br />
+
+		<CodeBlock language="svelte" code={noAvatarExample} />
+	</Card>
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Media" {slots} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Media.Avatar" props={avatarProps} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Media.Content" slots={contentSlots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Medai.Content.Title" slots={titleSlots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="Medai.Content.Description" slots={descriptionSlots} />
+</Col>
diff --git a/src/routes/media/examples.ts b/src/routes/media/examples.ts
@@ -0,0 +1,113 @@
+import type { Slot, Prop } from '../../docs';
+
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'avatar',
+		component: '<Media.Avatar slot="avatar" />'
+	},
+	{
+		id: '2',
+		slot: 'content',
+		component: '<Media.Content slot="content" />'
+	},
+	{
+		id: '3',
+		slot: 'default',
+		component: ''
+	}
+];
+
+export const avatarProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'align',
+		type: "'top' | 'center' | 'bottom'",
+		default: 'top'
+	},
+	{
+		id: '2',
+		prop: 'src',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '3',
+		prop: 'alt',
+		type: 'string',
+		default: 'avatar'
+	},
+	{
+		id: '4',
+		prop: 'size',
+		type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+		default: 'md'
+	}
+];
+
+export const contentSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'title',
+		component: '<Media.Content.Title slot="title" />'
+	},
+	{
+		id: '2',
+		slot: 'description',
+		component: '<Media.Content.Description slot="description" />'
+	},
+	{
+		id: '3',
+		slot: 'default',
+		component: ''
+	}
+];
+
+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 { Card, Media } from 'stwui';
+</script>
+
+<Card bordered={false}>
+   <Card.Content slot="content">
+      <Media>
+         <Media.Avatar src={avatar} />
+         <Media.Content>
+            <Media.Content.Title>Europe Street beat</Media.Content.Title>
+            <Media.Content.Description>www.instagram.com</Media.Content.Description>
+         </Media.Content>
+      </Media>
+   </Card.Content>
+</Card>`;
+
+export const noAvatarExample = `
+<script lang="ts">
+	import { Card, Media } from 'stwui';
+</script>
+
+<Card bordered={false}>
+   <Card.Content slot="content">
+      <Media>
+         <Media.Content>
+            <Media.Content.Title>Europe Street beat</Media.Content.Title>
+            <Media.Content.Description>www.instagram.com</Media.Content.Description>
+         </Media.Content>
+      </Media>
+   </Card.Content>
+</Card>`;