Skip to content

Commit

Permalink
fix(Tabs): removed dependency on material icons
Browse files Browse the repository at this point in the history 
fix(Tabs): swapped out Icon
docs(tabs): updated examples
  • Loading branch information
@N00nDay
N00nDay committed Oct 19, 2022
1 parent c91ece0 commit c4712a7
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 73 deletions.
47 changes: 0 additions & 47 deletions src/lib/components/tabs/Icon.svelte
View file

This file was deleted.

6 changes: 5 additions & 1 deletion src/lib/components/tabs/Tab.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,11 @@
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
>
<slot name="icon" />
{#if $$slots.icon}
<span class="mr-2">
<slot name="icon" />
</span>
{/if}
<slot />
{#if variant === 'bar'}
<span
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/tabs/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import OriginalTabs from './Tabs.svelte';
import OriginalTab from './Tab.svelte';
import Icon from './Icon.svelte';
import Icon from '../icon/Icon.svelte';

const Tabs = OriginalTabs as TabsStatic;
Tabs.Tab = OriginalTab as TabStatic;
Expand Down
16 changes: 9 additions & 7 deletions src/routes/tabs/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,30 @@
tabSlots
} from './examples';
import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
import { home } from '../../docs/icons';
import { check, info } from '../../lib/icons';
interface Tab {
href: string;
title: string;
icon: MaterialIcon;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
icon: 'home'
data: home
},
{
href: '#tab2',
title: 'Tab 2',
icon: 'done'
data: check
},
{
href: '#tab3',
title: 'Tab 3',
icon: 'info'
data: info
}
];
Expand All @@ -47,7 +49,7 @@
<Tabs {currentTab}>
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand All @@ -67,7 +69,7 @@
<Tabs {currentTab} variant="full-width">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand All @@ -87,7 +89,7 @@
<Tabs {currentTab} variant="bar">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand Down
88 changes: 71 additions & 17 deletions src/routes/tabs/examples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,37 +60,83 @@ export const tabSlots: Slot[] = [
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'
}
];

export const example1 = `
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
icon: MaterialIcon;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
icon: 'home'
data: home
},
{
href: '#tab2',
title: 'Tab 2',
icon: 'done'
data: check
},
{
href: '#tab3',
title: 'Tab 3',
icon: 'info'
data: info
}
];
Expand All @@ -100,7 +146,7 @@ export const example1 = `
<Tabs {currentTab}>
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand All @@ -110,27 +156,31 @@ export const example2 = `
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
icon: MaterialIcon;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
icon: 'home'
data: home
},
{
href: '#tab2',
title: 'Tab 2',
icon: 'done'
data: check
},
{
href: '#tab3',
title: 'Tab 3',
icon: 'info'
data: info
}
];
Expand All @@ -140,7 +190,7 @@ export const example2 = `
<Tabs {currentTab} variant="full-width">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand All @@ -150,27 +200,31 @@ export const example3 = `
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
icon: MaterialIcon;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
icon: 'home'
data: home
},
{
href: '#tab2',
title: 'Tab 2',
icon: 'done'
data: check
},
{
href: '#tab3',
title: 'Tab 3',
icon: 'info'
data: info
}
];
Expand All @@ -180,7 +234,7 @@ export const example3 = `
<Tabs {currentTab} variant="bar">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" icon={tab.icon} />
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
Expand Down

0 comments on commit c4712a7

Please sign in to comment.