mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(uishell): better descriptions

Browse source
This commit is contained in:
Marcus Feitoza 2020-04-18 13:02:02 -03:00
commit 2424b32c87
2 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/UIShell/UIShell.Story.svelte
View file

@ -109,9 +109,9 @@
}; };
</script> </script>
{#if story === 'base'} {#if story === 'header'}
<Header {...$$props} /> <Header {...$$props} />
{:else if story === 'with-header-and-nav'} {:else if story === 'header-with-nav'}
<Header {...$$props}> <Header {...$$props}>
<HeaderNav> <HeaderNav>
<HeaderNavItem href="/" text="Link 1" /> <HeaderNavItem href="/" text="Link 1" />
@ -124,7 +124,7 @@
</HeaderNavMenu> </HeaderNavMenu>
</HeaderNav> </HeaderNav>
</Header> </Header>
{:else if story === 'with-utilities'} {:else if story === 'header-with-utilities'}
<Header {...$$props}> <Header {...$$props}>
<HeaderUtilities> <HeaderUtilities>
<HeaderActionSearch /> <HeaderActionSearch />
@ -142,7 +142,7 @@
<HeaderActionLink type="Account" icon={iAccount} /> <HeaderActionLink type="Account" icon={iAccount} />
</HeaderUtilities> </HeaderUtilities>
</Header> </Header>
{:else if story === 'with-switcher'} {:else if story === 'header-with-switcher'}
<Header {...$$props}> <Header {...$$props}>
<HeaderUtilities> <HeaderUtilities>
<HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}> <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
@ -159,7 +159,7 @@
</HeaderAction> </HeaderAction>
</HeaderUtilities> </HeaderUtilities>
</Header> </Header>
{:else if story === 'with-sidenav'} {:else if story === 'header-and-sidenav'}
<Header bind:isSideNavOpen {...$$props} /> <Header bind:isSideNavOpen {...$$props} />
<SideNav isOpen={isSideNavOpen}> <SideNav isOpen={isSideNavOpen}>
<SideNavItems> <SideNavItems>

20
src/components/UIShell/UIShell.stories.js
View file

@ -3,50 +3,50 @@ import Component from './UIShell.Story.svelte';
export default { title: 'UIShell', decorators: [withKnobs] }; export default { title: 'UIShell', decorators: [withKnobs] };
export const Base = () => ({ export const Header = () => ({
Component, Component,
props: { props: {
story: 'base', story: 'header',
href: text('The link href (href)', '#'), href: text('The link href (href)', '#'),
company: text('Company name', 'IBM'), company: text('Company name', 'IBM'),
platformName: text('Platform name', 'Platform Name') platformName: text('Platform name', 'Platform Name')
} }
}); });
export const WithHeaderAndNav = () => ({ export const HeaderWithNav = () => ({
Component, Component,
props: { props: {
story: 'with-header-and-nav', story: 'header-with-nav',
href: text('The link href (href)', '#'), href: text('The link href (href)', '#'),
company: text('Company name', 'IBM'), company: text('Company name', 'IBM'),
platformName: text('Platform name', 'Platform Name') platformName: text('Platform name', 'Platform Name')
} }
}); });
export const WithUtilities = () => ({ export const HeaderWithUtilities = () => ({
Component, Component,
props: { props: {
story: 'with-utilities', story: 'header-with-utilities',
href: text('The link href (href)', '#'), href: text('The link href (href)', '#'),
company: text('Company name', 'IBM'), company: text('Company name', 'IBM'),
platformName: text('Platform name', 'Platform Name') platformName: text('Platform name', 'Platform Name')
} }
}); });
export const WithSwitcher = () => ({ export const HeaderWithSwitcher = () => ({
Component, Component,
props: { props: {
story: 'with-switcher', story: 'header-with-switcher',
href: text('The link href (href)', '#'), href: text('The link href (href)', '#'),
company: text('Company name', 'IBM'), company: text('Company name', 'IBM'),
platformName: text('Platform name', 'Platform Name') platformName: text('Platform name', 'Platform Name')
} }
}); });
export const WithSidenav = () => ({ export const HeaderAndSidenav = () => ({
Component, Component,
props: { props: {
story: 'with-sidenav', story: 'header-and-sidenav',
href: text('The link href (href)', '#'), href: text('The link href (href)', '#'),
company: text('Company name', 'IBM'), company: text('Company name', 'IBM'),
platformName: text('Platform name', 'Platform Name') platformName: text('Platform name', 'Platform Name')