mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
rebase upstream
This commit is contained in:
Adan Ulloa
parent
00bb031bf4
commit
da470313c4
11 changed files with 2087 additions and 574 deletions
22
package.json
22
package.json
|
|
@ -23,14 +23,14 @@
|
|||
"carbon-icons-svelte": "^10.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.4",
|
||||
"@babel/preset-env": "^7.7.4",
|
||||
"@commitlint/cli": "^8.2.0",
|
||||
"@commitlint/config-conventional": "^8.2.0",
|
||||
"@storybook/addon-knobs": "^5.2.6",
|
||||
"@storybook/addon-storysource": "^5.2.6",
|
||||
"@storybook/cli": "^5.2.6",
|
||||
"@storybook/svelte": "^5.2.6",
|
||||
"@babel/core": "^7.8.0",
|
||||
"@babel/preset-env": "^7.8.0",
|
||||
"@commitlint/cli": "^8.3.4",
|
||||
"@commitlint/config-conventional": "^8.3.4",
|
||||
"@storybook/addon-knobs": "^5.3.1",
|
||||
"@storybook/addon-storysource": "^5.3.1",
|
||||
"@storybook/cli": "^5.3.1",
|
||||
"@storybook/svelte": "^5.3.1",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/svelte": "^1.11.0",
|
||||
"babel-jest": "^24.9.0",
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
"prettier-plugin-svelte": "^0.7.0",
|
||||
"pretty-quick": "^2.0.1",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"rollup": "^1.27.13",
|
||||
"rollup": "^1.29.0",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-svelte": "^5.1.1",
|
||||
"rollup-plugin-terser": "^5.1.3",
|
||||
"svelte": "^3.16.4",
|
||||
"rollup-plugin-terser": "^5.2.0",
|
||||
"svelte": "^3.16.7",
|
||||
"svelte-loader": "^2.13.6"
|
||||
},
|
||||
"contributors": [
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: SettingsAdjust20,
|
||||
title: 'settings',
|
||||
title: 'Settings',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
|
|
@ -193,6 +193,55 @@
|
|||
}
|
||||
];
|
||||
|
||||
const sideNavMenu = [
|
||||
{
|
||||
href: undefined,
|
||||
text: 'Category 1',
|
||||
subMenu: [
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 1'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 2'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Link 2',
|
||||
subMenu: undefined
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Link 3',
|
||||
subMenu: undefined
|
||||
},
|
||||
{
|
||||
href: undefined,
|
||||
text: 'Link 4',
|
||||
subMenu: [
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 1'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 2'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 3'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function searchInStore(event) {
|
||||
if (event.detail.action === leftPanelActions.search.actionString) {
|
||||
searchStore.search(event.detail.textInput);
|
||||
|
|
@ -204,6 +253,10 @@
|
|||
<UIShell {...$$props} {navMenu} />
|
||||
{:else if story === 'with-actions'}
|
||||
<UIShell {...$$props} {rightPanel} on:inputSearch={searchInStore} />
|
||||
{:else if story === 'with-actions-nav'}
|
||||
<UIShell {...$$props} {navMenu} {rightPanel} on:inputSearch={searchInStore} />
|
||||
{:else if story === 'with-actions-sidenav'}
|
||||
<UIShell {...$$props} {sideNavMenu} {rightPanel} on:inputSearch={searchInStore} />
|
||||
{:else}
|
||||
<UIShell {...$$props} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -32,3 +32,23 @@ export const WithActions = () => ({
|
|||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
});
|
||||
|
||||
export const WithActionsAndNav = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'with-actions-nav',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
});
|
||||
|
||||
export const WithActionsAndSidenav = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'with-actions-sidenav',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,16 +5,21 @@
|
|||
export let platformName = undefined;
|
||||
export let navMenu = undefined;
|
||||
export let rightPanel = undefined;
|
||||
export let sideNavMenu = undefined;
|
||||
|
||||
import { cx } from '../../lib';
|
||||
import UIShellNavWrapper from './UIShellNav/UIShellNavWrapper.svelte';
|
||||
import UIShellNavItem from './UIShellNav/UIShellNavItem.svelte';
|
||||
import UIShellRightPanel from './UIShellRightPanel/UIShellRightPanel.svelte';
|
||||
import UIShellSideNavWrapper from './UIShellSideNav/UIShellSideNavWrapper.svelte';
|
||||
import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte';
|
||||
import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte';
|
||||
|
||||
$: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
|
||||
</script>
|
||||
|
||||
<header aria-label={ariaLabel} class={cx('--header')} role="banner">
|
||||
<HamburgerMenu />
|
||||
<a class={cx('--header__name')} {href}>
|
||||
<span class={cx('--header__name--prefix')}>{company}</span>
|
||||
{platformName}
|
||||
|
|
@ -29,4 +34,9 @@
|
|||
{#if rightPanel}
|
||||
<UIShellRightPanel {rightPanel} on:inputSearch />
|
||||
{/if}
|
||||
{#if sideNavMenu}
|
||||
<UIShellSideNavWrapper>
|
||||
<UIShellSideNavItem />
|
||||
</UIShellSideNavWrapper>
|
||||
{/if}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,13 @@
|
|||
<button
|
||||
aria-label={type}
|
||||
class={cx('--header__action', componentIsActive && '--header__action--active')}
|
||||
type="button">
|
||||
<Icon {...icon} render={icon[0].render} />
|
||||
type="button"
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
componentIsActive = !componentIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...icon[0]} render={icon[0].render} />
|
||||
</button>
|
||||
{#if componentIsActive}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -41,17 +41,18 @@
|
|||
}
|
||||
|
||||
.subject-divider {
|
||||
color: #c6c6c6;
|
||||
color: #525252;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #525252;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgb(82, 82, 82);
|
||||
margin: 32px 1rem 8px;
|
||||
}
|
||||
|
||||
.subject-divider span {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
letter-spacing: 0.32px;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -61,14 +62,19 @@
|
|||
class={cx('--header__action', linkIsActive && '--header__action--active')}
|
||||
class:action-link={true}
|
||||
{href}>
|
||||
<Icon {...icon} render={icon.render} />
|
||||
<Icon {...icon} />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
aria-label={type}
|
||||
class={cx('--header__action', linkIsActive && '--header__action--active')}
|
||||
type="button">
|
||||
<Icon {...icon} render={icon.render} />
|
||||
type="button"
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
linkIsActive = !linkIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...icon} />
|
||||
</button>
|
||||
{#if linkIsActive && type === leftPanelTypes.links}
|
||||
<div
|
||||
|
|
@ -77,7 +83,7 @@
|
|||
<ul class={cx('--switcher__item')}>
|
||||
{#each content as subject}
|
||||
{#if subject.subject}
|
||||
<li class={cx('--switcher__item')} class:subject-divider={true}>
|
||||
<li class="subject-divider">
|
||||
<span>{subject.subject}</span>
|
||||
</li>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -145,8 +145,13 @@
|
|||
class:btn-search={true}
|
||||
class:btn-search-disabled={searchIsActive}
|
||||
on:click={() => dispatch('focusInputSearch')}
|
||||
type="button">
|
||||
<Icon {...icon} render={icon.render} />
|
||||
type="button"
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...icon} />
|
||||
</button>
|
||||
<input
|
||||
bind:this={inputSearchField}
|
||||
|
|
@ -168,8 +173,13 @@
|
|||
class:btn-clear-hidden={!searchIsActive}
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click={() => searchStore.clear()}>
|
||||
<Icon {...closeIcon} render={closeIcon.render} />
|
||||
on:click={() => searchStore.clear()}
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...closeIcon} />
|
||||
</button>
|
||||
</div>
|
||||
{#if showResults}
|
||||
|
|
|
|||
29
src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
Normal file
29
src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
export let ariaLabel = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Menu20 from 'carbon-icons-svelte/lib/Menu20';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { closeIcon } from '../constants';
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
$: iconProps = !isOpen ? {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Menu20,
|
||||
title: 'Open Menu',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
} : closeIcon;
|
||||
</script>
|
||||
|
||||
<button
|
||||
aria-label={ariaLabel}
|
||||
class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
|
||||
title="Open menu"
|
||||
type="button"
|
||||
on:click={() => isOpen = !isOpen}>
|
||||
<Icon {...iconProps} />
|
||||
</button>
|
||||
185
src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte
Normal file
185
src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link">
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__item">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link">
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
export let ariaLabel = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<nav class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux')} aria-label={ariaLabel}>
|
||||
<ul class={cx('--side-nav__items')}>
|
||||
<slot />
|
||||
</ul>
|
||||
<footer class="bx--side-nav__footer">
|
||||
<button class="bx--side-nav__toggle" type="button" title="Open">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--assistive-text">Open</span>
|
||||
</button>
|
||||
</footer>
|
||||
</nav>
|
||||
Loading…
Add table
Add a link
Reference in a new issue