fix(Timeline): removed dependency on material icons

docs(timeline): updated examples docs(Navigation): removed all updated flags causing clutter
N00nDay · Oct 19, 2022 · 44bdde2 · 44bdde2
1 parent c4712a7
commit 44bdde2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 29 deletions.
diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -21,8 +21,7 @@
 		},
 		{
 			title: 'Autocomplete',
-			href: '/autocomplete',
-			updated: true
+			href: '/autocomplete'
 		},
 		{
 			title: 'Avatar',
@@ -66,13 +65,11 @@
 		},
 		{
 			title: 'Currency',
-			href: '/currency',
-			updated: true
+			href: '/currency'
 		},
 		{
 			title: 'Datepicker',
-			href: '/datepicker',
-			updated: true
+			href: '/datepicker'
 		},
 		{
 			title: 'Divider',
@@ -96,13 +93,11 @@
 		},
 		{
 			title: 'Input',
-			href: '/input',
-			updated: true
+			href: '/input'
 		},
 		{
 			title: 'InputNumber',
-			href: '/input-number',
-			updated: true
+			href: '/input-number'
 		},
 		{
 			title: 'List',
@@ -147,8 +142,7 @@
 		},
 		{
 			title: 'Select',
-			href: '/select',
-			updated: true
+			href: '/select'
 		},
 		{
 			title: 'Slider',
@@ -177,17 +171,16 @@
 		},
 		{
 			title: 'TextArea',
-			href: '/text-area',
-			updated: true
+			href: '/text-area'
 		},
 		{
 			title: 'Timeline',
-			href: '/timeline'
+			href: '/timeline',
+			beta: true
 		},
 		{
 			title: 'Toggle',
-			href: '/toggle',
-			updated: true
+			href: '/toggle'
 		}
 	];
 

diff --git a/src/lib/components/timeline/Item.svelte b/src/lib/components/timeline/Item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { MaterialIcon } from '../../types';
 	import Avatar from '../avatar';
+	import Icon from '../icon/Icon.svelte';
 	import { formatDate } from '../../utils';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -13,7 +13,7 @@
 	export let creator: string;
 	export let created: Date;
 	export let description: string;
-	export let icon: MaterialIcon | undefined = undefined;
+	export let icon: string | undefined = undefined;
 </script>
 
 {#if type === 'comment'}
@@ -69,7 +69,9 @@
 						<div
 							class="flex h-8 w-8 items-center justify-center rounded-full bg-light-icon-background dark:bg-dark-icon-background ring-8 ring-light-surface dark:ring-dark-surface"
 						>
-							<span class="material-icons text-light-content dark:text-dark-content">{icon}</span>
+							<span class="material-icons text-light-content dark:text-dark-content">
+								<Icon data={icon} />
+							</span>
 						</div>
 					</div>
 				</div>

diff --git a/src/lib/types/timeline-item.ts b/src/lib/types/timeline-item.ts
@@ -1,10 +1,8 @@
-import type { MaterialIcon } from './';
-
 export interface TimelineItem {
 	type?: 'comment';
 	avatar?: string;
 	creator: string;
 	created: Date;
 	description: string;
-	icon?: MaterialIcon;
+	icon?: string;
 }
diff --git a/src/routes/timeline/+page.svelte b/src/routes/timeline/+page.svelte
@@ -2,7 +2,9 @@
 	import { Card, Col, Timeline } from '../../lib';
 	import type { TimelineItem } from '../../lib/types/timeline-item';
 	import { example, slots, itemProps } from './examples';
-	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
+	import { PropsTable, SlotsTable, CodeBlock, BetaComponent } from '../../docs';
+
+	import { account, currency_usd } from '../../lib/icons';
 
 	const timeline: TimelineItem[] = [
 		{
@@ -15,7 +17,7 @@
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam.'
 		},
 		{
-			icon: 'account_circle',
+			icon: account,
 			created: new Date(2022, 8, 5),
 			avatar:
 				'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',
@@ -24,7 +26,7 @@
 				'<span class="text-light-content dark:text-dark-content font-medium">Hilary Mahy</span> assigned <span class="text-light-content dark:text-dark-content font-medium">Kristin Watson</span>'
 		},
 		{
-			icon: 'local_offer',
+			icon: currency_usd,
 			created: new Date(2022, 8, 6),
 			avatar:
 				'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',
@@ -44,6 +46,10 @@
 	];
 </script>
 
+<Col class="col-24">
+	<BetaComponent />
+</Col>
+
 <Col class="col-24">
 	<Card bordered={false}>
 		<Card.Content slot="content" class="p-4">

diff --git a/src/routes/timeline/examples.ts b/src/routes/timeline/examples.ts
@@ -42,7 +42,7 @@ export const itemProps: Prop[] = [
 	{
 		id: '6',
 		prop: 'icon',
-		type: '<a class="link" href="/types#MaterialIcon">MaterialIcon</a> | undefined',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a> | undefined',
 		default: ''
 	}
 ];
@@ -52,6 +52,9 @@ export const example = `
 	import { Timeline } from 'stwui';
 	import type { TimelineItem } from '../../lib/types/timeline-item';
 
+	const account = "svg-path";
+	const currency_usd = "svg-path";
+
 	const timeline: TimelineItem[] = [
 		{
 			created: new Date(2022, 8, 1),
@@ -61,14 +64,14 @@ export const example = `
 			description: 'Lorem ipsum...'
 		},
 		{
-			icon: 'account_circle',
+			icon: account,
 			created: new Date(2022, 8, 5),
 			avatar: "image.png",
 			creator: 'Hilary Mahy',
 			description: 'Lorem ipsum...'
 		},
 		{
-			icon: 'local_offer',
+			icon: currency_usd,
 			created: new Date(2022, 8, 6),
 			avatar: "image.png",
 			creator: 'Hilary Mahy',