fix(Notification): swapped out Icon

fix(Notification): removed dependency on material icons docs(notification): updated examples
N00nDay · Oct 19, 2022 · 68c6bc5 · 68c6bc5
1 parent 7015516
commit 68c6bc5
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 37 deletions.
diff --git a/src/lib/components/notification/Icon.svelte b/src/lib/components/notification/Icon.svelte
diff --git a/src/lib/components/notification/Placeholder.svelte b/src/lib/components/notification/Placeholder.svelte
@@ -4,7 +4,8 @@
 	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
-	import Icon from './Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import { account } from '../../icons';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
@@ -19,9 +20,30 @@
 		component: 'Notification.Avatar.Placeholder'
 	});
 
-	const { shape }: { shape: 'circle' | 'rounded' | 'square' } = getContext(
-		NOTIFICATION_AVATAR_CONTEXT_ID
-	);
+	const {
+		shape,
+		size
+	}: { shape: 'circle' | 'rounded' | 'square'; size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } =
+		getContext(NOTIFICATION_AVATAR_CONTEXT_ID);
+
+	let iconContainerClass = 'absolute text-light-icon dark:text-dark-icon h-full w-full';
+	let iconSize = '';
+	if (size === 'xs') {
+		iconContainerClass += ' bottom-[-0.25rem]';
+		iconSize = '24px';
+	} else if (size === 'sm') {
+		iconContainerClass += ' bottom-[-0.35rem]';
+		iconSize = '32px';
+	} else if (size === 'md') {
+		iconContainerClass += ' bottom-[-0.5rem]';
+		iconSize = '40px';
+	} else if (size === 'lg') {
+		iconContainerClass += ' text-6xl bottom-[-0.6rem]';
+		iconSize = '48px';
+	} else if (size === 'xl') {
+		iconContainerClass += ' bottom-[-0.75rem]';
+		iconSize = '64px';
+	}
 
 	let defaultClass =
 		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
@@ -47,7 +69,9 @@
 		<slot name="icon" />
 		<slot />
 	{:else}
-		<Icon class="text-light-icon dark:text-dark-icon" icon="person" />
+		<span class={iconContainerClass}>
+			<Icon data={account} size={iconSize} />
+		</span>
 	{/if}
 </div>
 

diff --git a/src/lib/components/notification/index.ts b/src/lib/components/notification/index.ts
@@ -5,7 +5,7 @@ import Avatar from './Avatar.svelte';
 import Description from './Description.svelte';
 import Extra from './Extra.svelte';
 import Title from './Title.svelte';
-import Icon from './Icon.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const Notification = OriginalNotification as NotificationStatic;
 Notification.Leading = OriginalLeading as LeadingStatic;

diff --git a/src/routes/notification/+page.svelte b/src/routes/notification/+page.svelte
@@ -16,13 +16,15 @@
 		extraSlots
 	} from './examples';
 	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
+	import { folder } from '../../docs/icons';
+	import { close } from '../../lib/icons';
 </script>
 
-<Col class="col-24 sm:col-12 md:col-6">
+<Col class="col-24 sm:col-12">
 	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
 		<Notification>
 			<Notification.Leading slot="leading">
-				<Notification.Leading.Icon icon="account_tree" class="text-pink-500" />
+				<Notification.Leading.Icon data={folder} class="text-pink-500" />
 			</Notification.Leading>
 			<Notification.Content slot="content">
 				<Notification.Content.Title slot="title">Successfully Saved!</Notification.Content.Title>
@@ -32,7 +34,7 @@
 			</Notification.Content>
 			<Notification.Extra slot="extra" class="-top-2 -right-2">
 				<Button on:click={() => console.log('notification closed!')} shape="circle">
-					<Button.Icon slot="icon" icon="close" />
+					<Button.Icon slot="icon" data={close} />
 				</Button>
 			</Notification.Extra>
 		</Notification>
@@ -43,7 +45,7 @@
 	</Card>
 </Col>
 
-<Col class="col-24 sm:col-12 md:col-6">
+<Col class="col-24 sm:col-12">
 	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
 		<Notification type="success">
 			<Notification.Content slot="content">
@@ -65,7 +67,7 @@
 	</Card>
 </Col>
 
-<Col class="col-24 sm:col-12 md:col-6">
+<Col class="col-24 sm:col-12">
 	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
 		<Notification type="info">
 			<Notification.Content slot="content">
@@ -87,7 +89,7 @@
 	</Card>
 </Col>
 
-<Col class="col-24 sm:col-12 md:col-6">
+<Col class="col-24 sm:col-12">
 	<Card bordered={false} elevation="none" class="bg-transparent dark:bg-transparent">
 		<Notification>
 			<Notification.Content slot="content">

diff --git a/src/routes/notification/examples.ts b/src/routes/notification/examples.ts
@@ -63,9 +63,51 @@ export const avatarProps: Prop[] = [
 export const iconProps: Prop[] = [
 	{
 		id: '1',
-		prop: 'icon',
-		type: '<a class="link" href="/types#MaterialIcon">MaterialIcon</a>',
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
 		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string | undefined',
+		default: ''
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
 	}
 ];
 
@@ -114,11 +156,14 @@ export const extraSlots: Slot[] = [
 export const example = `
 <script lang="ts">
 	import { Notification, Button } from 'stwui';
+
+	const folder = "svg-path";
+	const close = "svg-path";
 </script>
 
 <Notification>
    <Notification.Leading slot="leading">
-      <Notification.Leading.Icon icon="account_tree" class="text-pink-500" />
+		<Notification.Leading.Icon data={folder} class="text-pink-500" />
    </Notification.Leading>
    <Notification.Content slot="content">
       <Notification.Content.Title slot="title">Successfully Saved!</Notification.Content.Title>
@@ -128,7 +173,7 @@ export const example = `
    </Notification.Content>
    <Notification.Extra slot="extra" class="-top-2 -right-2">
       <Button on:click={() => console.log('notification closed!')} shape="circle">
-         <Button.Icon slot="icon" icon="close" />
+         <Button.Icon slot="icon" data={close} />
       </Button>
    </Notification.Extra>
 </Notification>`;