fix(Select): removed dependency on material icons

docs(select): updated examples
N00nDay · Oct 19, 2022 · fa86d1d · fa86d1d
1 parent 19813f6
commit fa86d1d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 7 deletions.
diff --git a/src/lib/components/select/index.ts b/src/lib/components/select/index.ts
@@ -2,24 +2,31 @@ import OriginalSelect from './Select.svelte';
 import Label from './Label.svelte';
 import OriginalOptions from './Options.svelte';
 import Option from './Option.svelte';
-import Leading from './Leading.svelte';
+import OriginalLeading from './Leading.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const Select = OriginalSelect as SelectStatic;
 Select.Label = Label;
 Select.Options = OriginalOptions as OptionsStatic;
 Select.Options.Option = Option;
-Select.Leading = Leading;
+Select.Leading = OriginalLeading as LeadingStatic;
+Select.Leading.Icon = Icon;
 
 export default Select;
 
 export interface SelectStatic {
 	new (...args: ConstructorParameters<typeof OriginalSelect>): OriginalSelect;
 	Label: typeof Label;
 	Options: OptionsStatic;
-	Leading: typeof Leading;
+	Leading: LeadingStatic;
 }
 
 export interface OptionsStatic {
 	new (...args: ConstructorParameters<typeof OriginalOptions>): OriginalOptions;
 	Option: typeof Option;
 }
+
+export interface LeadingStatic {
+	new (...args: ConstructorParameters<typeof OriginalLeading>): OriginalLeading;
+	Icon: typeof Icon;
+}
diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
@@ -7,7 +7,8 @@
 		labelSlots,
 		leadingSlots,
 		optionsSlots,
-		optionProps
+		optionProps,
+		iconProps
 	} from './examples';
 	import { PropsTable, SlotsTable, CodeBlock, UpdatedComponent } from '../../docs';
 	import { email } from '../../docs/icons';
@@ -33,7 +34,7 @@
 			<Select name="select-2">
 				<Select.Label slot="label">Label</Select.Label>
 				<Select.Leading slot="leading">
-					<Icon data={email} />
+					<Select.Leading.Icon data={email} />
 				</Select.Leading>
 				<Select.Options slot="options">
 					{#each options as option}
@@ -45,7 +46,7 @@
 			<Select name="select-3" error="There has been an error">
 				<Select.Label slot="label">Label</Select.Label>
 				<Select.Leading slot="leading">
-					<Icon data={email} />
+					<Select.Leading.Icon data={email} />
 				</Select.Leading>
 				<Select.Options slot="options">
 					{#each options as option}
@@ -77,6 +78,10 @@
 	<SlotsTable component="Select.Leading" slots={leadingSlots} />
 </Col>
 
+<Col class="col-24">
+	<PropsTable component="Select.Leading.Icon" props={iconProps} />
+</Col>
+
 <Col class="col-24">
 	<SlotsTable component="Select.Options" slots={optionsSlots} />
 </Col>

diff --git a/src/routes/select/examples.ts b/src/routes/select/examples.ts
@@ -70,6 +70,11 @@ export const leadingSlots: Slot[] = [
 		id: '1',
 		slot: 'default',
 		component: ''
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<Select.Leading.Icon slot="icon" />'
 	}
 ];
 
@@ -90,9 +95,60 @@ export const optionProps: Prop[] = [
 	}
 ];
 
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		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'
+	}
+];
+
 export const example = `
 <script lang="ts">
-	import { Select, Icon } from 'stwui';
+	import { Select } from 'stwui';
 
 	const email = "svg-path";
 	const options = ['Option 1', 'Option 2', 'Option 3'];