fix: removed all dependence on material icons

fix(Layout): removed BottomNavigation this will be added back later fix(Post): Action has been refactored to align with the rest of the library docs: removed all references to material icons and replaced where necessary
N00nDay · Oct 19, 2022 · 7d58daf · 7d58daf
1 parent e0d6a99
commit 7d58daf
Show file tree

Hide file tree

Showing 41 changed files with 447 additions and 2,614 deletions.
diff --git a/src/app.html b/src/app.html
@@ -82,12 +82,6 @@
 		<link rel="icon" sizes="512x512" href="/512x512.png" />
 		<link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
 
-		<!-- Material Icons -->
-		<link
-			href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
-			rel="stylesheet"
-		/>
-
 		%sveltekit.head%
 	</head>
 	<body>

diff --git a/src/docs/components/search/Search.svelte b/src/docs/components/search/Search.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { data } from '../../search-data';
-	import { Modal, Portal, Icon, Button } from '../../../lib';
+	import { Modal, Portal, Icon, Button, Empty } from '../../../lib';
 	import { goto } from '$app/navigation';
 	import { scale } from 'svelte/transition';
 	import Kbd from '../kbd/Kbd.svelte';
@@ -12,7 +12,7 @@
 		magnify,
 		toggle_switch
 	} from '../../icons';
-	import { info } from '../../../lib/icons';
+	import { close, info } from '../../../lib/icons';
 
 	let input: HTMLInputElement;
 
@@ -134,8 +134,8 @@
 							on:click={handleClear}
 							on:keypress
 						>
-							<span class="material-icons text-light-icon dark:text-dark-icon text-base">
-								clear
+							<span class="text-light-icon dark:text-dark-icon">
+								<Icon data={close} />
 							</span>
 						</span>
 					{/if}
@@ -184,17 +184,13 @@
 						{/each}
 					</ul>
 				{:else}
-					<div class="py-14 px-6 text-center text-sm sm:px-14">
-						<span
-							class="mx-auto text-5xl text-light-secondary-content dark:text-dark-secondary-content"
+					<Empty class="p-12">
+						<Empty.Icon slot="icon" data={info} />
+						<Empty.Title slot="title">No results found</Empty.Title>
+						<Empty.Description slot="description"
+							>No results found for this search. Please try again.</Empty.Description
 						>
-							<Icon data={info} />
-						</span>
-						<h2 class="mt-4 text-light-content dark:text-dark-content">No results found</h2>
-						<p class="mt-2 text-light-secondary-content dark:text-dark-secondary-content">
-							No components found for this search term. Please try again.
-						</p>
-					</div>
+					</Empty>
 				{/if}
 			</Modal.Content>
 		</Modal>

diff --git a/src/lib/components/chip/Close.svelte b/src/lib/components/chip/Close.svelte
@@ -3,10 +3,13 @@
 	import { getContext } from 'svelte';
 	import { useContext } from '../../utils/useContext';
 	import { CHIP_CONTEXT_ID } from './Chip.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import { close } from '../../icons';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
+
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	let defaultClass =
@@ -56,5 +59,5 @@
 	{...exclude($$props, ['use', 'class'])}
 >
 	<span class="sr-only">Remove option</span>
-	<span class="material-icons">close</span>
+	<Icon data={close} />
 </button>
diff --git a/src/lib/components/datepicker/DateInput.svelte b/src/lib/components/datepicker/DateInput.svelte
@@ -34,10 +34,7 @@
 		};
 	})();
 
-	// export let trailing: MaterialIcon | undefined = 'calendar_month';
 	export let name: string;
-	// export let label: string | undefined = undefined;
-	// export let srOnly = false;
 	export let error: string | undefined = undefined;
 	export let placeholder: string | undefined = undefined;
 	export let value: Date | null = null;

diff --git a/src/lib/components/datepicker/DatePicker.svelte b/src/lib/components/datepicker/DatePicker.svelte
@@ -6,6 +6,12 @@
 	import { fly } from 'svelte/transition';
 	import Card from '../card';
 	import Button from '../button';
+	import {
+		chevron_double_left,
+		chevron_double_right,
+		chevron_left,
+		chevron_right
+	} from '../../icons';
 
 	export let value: Dayjs | null = null;
 	export let handleSelect: (d: Dayjs) => void;
@@ -223,7 +229,7 @@
 			class="mr-1 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 			on:click={() => handleArrow('year', 'subtract')}
 		>
-			<Button.Icon slot="icon" icon="keyboard_double_arrow_left" />
+			<Button.Icon slot="icon" data={chevron_double_left} />
 		</Button>
 		<Button
 			ariaLabel="previous month"
@@ -233,7 +239,7 @@
 			class="bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 			on:click={() => handleArrow('month', 'subtract')}
 		>
-			<Button.Icon slot="icon" icon="chevron_left" />
+			<Button.Icon slot="icon" data={chevron_left} />
 		</Button>
 		<div class="flex-grow px-2 text-center font-medium relative overflow-hidden h-full">
 			<!-- {#key calendarDays} -->
@@ -253,7 +259,7 @@
 			class="bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 			on:click={() => handleArrow('month', 'add')}
 		>
-			<Button.Icon slot="icon" icon="chevron_right" />
+			<Button.Icon slot="icon" data={chevron_right} />
 		</Button>
 		<Button
 			ariaLabel="next month"
@@ -263,7 +269,7 @@
 			class="ml-1 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 			on:click={() => handleArrow('year', 'add')}
 		>
-			<Button.Icon slot="icon" icon="keyboard_double_arrow_right" />
+			<Button.Icon slot="icon" data={chevron_double_right} />
 		</Button>
 	</div>
 	<div class="h-8 grid grid-cols-7 px-3 pt-2">

diff --git a/src/lib/components/drawer/Header.svelte b/src/lib/components/drawer/Header.svelte
@@ -2,6 +2,7 @@
 	import { twMerge } from 'tailwind-merge';
 	import { getContext } from 'svelte';
 	import Button from '../button';
+	import { close } from '../../icons';
 	import { DRAWER_CONTEXT_ID } from './Drawer.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { get_current_component } from 'svelte/internal';
@@ -34,9 +35,9 @@
 		</h2>
 		<!-- TODO: pull out to allow for customization? -->
 		{#if handleClose}
-			<div class="ml-3 flex h-7 items-center">
+			<div class="ml-3 flex items-center">
 				<Button ariaLabel="close" type="ghost" on:click={handleClose} shape="circle">
-					<Button.Icon slot="icon" icon="close" />
+					<Button.Icon slot="icon" data={close} />
 				</Button>
 			</div>
 		{/if}

diff --git a/src/lib/components/empty/Icon.svelte b/src/lib/components/empty/Icon.svelte
@@ -1,24 +1,3 @@
-<!-- <script lang="ts">
-	import type { MaterialIcon } from '../../types';
-	import { twMerge } from 'tailwind-merge';
-	import { get_current_component } from 'svelte/internal';
-	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
-	export let use: ActionArray = [];
-	import { exclude } from '../../utils/exclude';
-	const forwardEvents = forwardEventsBuilder(get_current_component());
-
-	export let icon: MaterialIcon;
-
-	const defaultClass = 'material-icons text-light-icon dark:text-dark-icon mx-auto text-5xl';
-	$: finalClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<span
-	class={finalClass}
-	use:useActions={use}
-	use:forwardEvents
-	{...exclude($$props, ['use', 'class'])}>{icon}</span
-> -->
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component } from 'svelte/internal';

diff --git a/src/lib/components/layout/BottomNavigation.svelte b/src/lib/components/layout/BottomNavigation.svelte
diff --git a/src/lib/components/layout/BottomNavigationCreateItem.svelte b/src/lib/components/layout/BottomNavigationCreateItem.svelte
diff --git a/src/lib/components/layout/BottomNavigationItem.svelte b/src/lib/components/layout/BottomNavigationItem.svelte
diff --git a/src/lib/components/layout/index.ts b/src/lib/components/layout/index.ts
@@ -4,26 +4,20 @@ import Extra from './HeaderExtra.svelte';
 import Sidebar from './Sidebar.svelte';
 import OriginalContent from './Content.svelte';
 import Body from './Body.svelte';
-import OriginalBottomNavigation from './BottomNavigation.svelte';
-import Item from './BottomNavigationItem.svelte';
-// import BottomNavigationCreateItem from './BottomNavigationCreateItem.svelte';
 
 const Layout = OriginalLayout as LayoutStatic;
 Layout.Header = OriginalHeader as LayoutHeaderStatic;
 Layout.Header.Extra = Extra;
 Layout.Content = OriginalContent as LayoutContentStatic;
 Layout.Content.Body = Body;
 Layout.Content.Sidebar = Sidebar;
-Layout.BottomNavigation = OriginalBottomNavigation as LayoutBottomNavigationStatic;
-Layout.BottomNavigation.Item = Item;
 
 export default Layout;
 
 export interface LayoutStatic {
 	new (...args: ConstructorParameters<typeof OriginalLayout>): OriginalLayout;
 	Header: LayoutHeaderStatic;
 	Content: LayoutContentStatic;
-	BottomNavigation: LayoutBottomNavigationStatic;
 }
 
 export interface LayoutHeaderStatic {
@@ -36,8 +30,3 @@ export interface LayoutContentStatic {
 	Body: typeof Body;
 	Sidebar: typeof Sidebar;
 }
-
-export interface LayoutBottomNavigationStatic {
-	new (...args: ConstructorParameters<typeof OriginalBottomNavigation>): OriginalBottomNavigation;
-	Item: typeof Item;
-}