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

feat(ui-shell): add Content, SkipToContent components

Browse source
This commit is contained in:
Eric Liu 2020-07-17 12:25:10 -07:00
commit 40dc2bf61e
5 changed files with 68 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/UIShell/Content.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
export let id = "main-content";
</script>
<main {...$$props} {id} class:bx--content={true}>
<slot />
</main>

8
src/components/UIShell/SkipToContent.svelte Normal file
View file

@ -0,0 +1,8 @@
<script>
export let href = "#main-content";
export let tabindex = "0";
</script>
<a {...$$props} class:bx--skip-to-content={true} {href} {tabindex} on:click>
<slot>Skip to main content</slot>
</a>

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

@ -1,30 +1,32 @@
<script> <script>
export let story = undefined; export let story = undefined;
import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20'; import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
import Help20 from 'carbon-icons-svelte/lib/Help20'; import Help20 from "carbon-icons-svelte/lib/Help20";
import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16'; import ChangeCatalog16 from "carbon-icons-svelte/lib/ChangeCatalog16";
import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16'; import ManageProtection16 from "carbon-icons-svelte/lib/ManageProtection16";
import Notification20 from 'carbon-icons-svelte/lib/Notification20'; import Notification20 from "carbon-icons-svelte/lib/Notification20";
import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20'; import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20'; import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
import SideNav from './SideNav/SideNav.svelte'; import SideNav from "./SideNav/SideNav.svelte";
import SideNavItems from './SideNav/SideNavItems.svelte'; import SideNavItems from "./SideNav/SideNavItems.svelte";
import SideNavMenu from './SideNav/SideNavMenu.svelte'; import SideNavMenu from "./SideNav/SideNavMenu.svelte";
import SideNavMenuItem from './SideNav/SideNavMenuItem.svelte'; import SideNavMenuItem from "./SideNav/SideNavMenuItem.svelte";
import SideNavLink from './SideNav/SideNavLink.svelte'; import SideNavLink from "./SideNav/SideNavLink.svelte";
import Header from './GlobalHeader/Header.svelte'; import Header from "./GlobalHeader/Header.svelte";
import HeaderNav from './GlobalHeader/HeaderNav.svelte'; import HeaderNav from "./GlobalHeader/HeaderNav.svelte";
import HeaderNavItem from './GlobalHeader/HeaderNavItem.svelte'; import HeaderNavItem from "./GlobalHeader/HeaderNavItem.svelte";
import HeaderNavMenu from './GlobalHeader/HeaderNavMenu.svelte'; import HeaderNavMenu from "./GlobalHeader/HeaderNavMenu.svelte";
import HeaderUtilities from './GlobalHeader/HeaderUtilities.svelte'; import HeaderUtilities from "./GlobalHeader/HeaderUtilities.svelte";
import HeaderActionSearch from './GlobalHeader/HeaderActionSearch.svelte'; import HeaderActionSearch from "./GlobalHeader/HeaderActionSearch.svelte";
import HeaderActionLink from './GlobalHeader/HeaderActionLink.svelte'; import HeaderActionLink from "./GlobalHeader/HeaderActionLink.svelte";
import HeaderAction from './GlobalHeader/HeaderAction.svelte'; import HeaderAction from "./GlobalHeader/HeaderAction.svelte";
import HeaderPanelDivider from './GlobalHeader/HeaderPanelDivider.svelte'; import HeaderPanelDivider from "./GlobalHeader/HeaderPanelDivider.svelte";
import HeaderPanelLink from './GlobalHeader/HeaderPanelLink.svelte'; import HeaderPanelLink from "./GlobalHeader/HeaderPanelLink.svelte";
import HeaderPanelLinks from './GlobalHeader/HeaderPanelLinks.svelte'; import HeaderPanelLinks from "./GlobalHeader/HeaderPanelLinks.svelte";
import Content from "./Content.svelte";
import SkipToContent from "./SkipToContent.svelte";
let isSideNavOpen = undefined; let isSideNavOpen = undefined;
@ -32,8 +34,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: ChangeCatalog16, render: ChangeCatalog16,
title: 'Catalog', title: "Catalog",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -42,8 +44,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: Help20, render: Help20,
title: 'Help', title: "Help",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -52,8 +54,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: SettingsAdjust20, render: SettingsAdjust20,
title: 'Catalog', title: "Catalog",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -62,8 +64,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: ManageProtection16, render: ManageProtection16,
title: 'Catalog', title: "Catalog",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -72,8 +74,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: AppSwitcher20, render: AppSwitcher20,
title: 'App Switcher', title: "App Switcher",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -82,8 +84,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: UserAvatar20, render: UserAvatar20,
title: 'Account', title: "Account",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -92,8 +94,8 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: Notification20, render: Notification20,
title: 'Notifications', title: "Notifications",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
@ -102,15 +104,17 @@
class: undefined, class: undefined,
skeleton: false, skeleton: false,
render: SettingsAdjust20, render: SettingsAdjust20,
title: 'Settings', title: "Settings",
tabindex: '0', tabindex: "0",
focusable: false, focusable: false,
style: undefined style: undefined
}; };
</script> </script>
{#if story === 'header'} {#if story === 'header'}
<Header {...$$props} /> <Header {...$$props}>
<SkipToContent />
</Header>
{:else if story === 'sidenav'} {:else if story === 'sidenav'}
<SideNav isOpen={true}> <SideNav isOpen={true}>
<SideNavItems> <SideNavItems>
@ -197,3 +201,6 @@
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
{/if} {/if}
<Content>
<h2>Page Title</h2>
</Content>

2
src/components/UIShell/index.js
View file

@ -14,3 +14,5 @@ export { default as SideNavItems } from './SideNav/SideNavItems.svelte';
export { default as SideNavLink } from './SideNav/SideNavLink.svelte'; export { default as SideNavLink } from './SideNav/SideNavLink.svelte';
export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte'; export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte';
export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte'; export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte';
export { default as Content } from './Content.svelte';
export { default as SkipToContent } from './SkipToContent.svelte';

4
src/index.js
View file

@ -126,6 +126,8 @@ import {
SideNavLink, SideNavLink,
SideNavMenu, SideNavMenu,
SideNavMenuItem, SideNavMenuItem,
Content,
SkipToContent,
} from "./components/UIShell"; } from "./components/UIShell";
import UnorderedList from "./components/UnorderedList"; import UnorderedList from "./components/UnorderedList";
@ -266,4 +268,6 @@ export {
SideNavMenu, SideNavMenu,
SideNavMenuItem, SideNavMenuItem,
UnorderedList, UnorderedList,
Content,
SkipToContent,
}; };