mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
refactor(ui-shell): use $$restProps, remove cx
This commit is contained in:
Eric Liu
parent
e886d772c7
commit
1e5333dd64
26 changed files with 230 additions and 425 deletions
|
|
@ -2,6 +2,6 @@
|
|||
export let id = "main-content";
|
||||
</script>
|
||||
|
||||
<main {...$$props} {id} class:bx--content={true}>
|
||||
<main {id} class:bx--content={true} {...$$restProps}>
|
||||
<slot />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<script>
|
||||
import TextInput from "../TextInput/TextInput.svelte";
|
||||
import Toggle from "../Toggle/Toggle.svelte";
|
||||
import { Button } from "../Button/Button.svelte";
|
||||
</script>
|
||||
|
||||
<label>Test Field</label>
|
||||
<br />
|
||||
<br />
|
||||
<TextInput />
|
||||
<br />
|
||||
<br />
|
||||
<Toggle labelText="Test toggler" />
|
||||
<br />
|
||||
<br />
|
||||
<Button>Test Button</Button>
|
||||
|
|
@ -5,23 +5,23 @@
|
|||
export let platformName = undefined;
|
||||
export let isSideNavOpen = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import HamburgerMenu from '../SideNav/HamburgerMenu.svelte';
|
||||
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
|
||||
|
||||
let winWidth = undefined;
|
||||
$: isSideNavOpen = winWidth >= 1056;
|
||||
|
||||
$: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
|
||||
$: isSideNavOpen = winWidth >= 1056;
|
||||
$: ariaLabel =
|
||||
company + (uiShellAriaLabel || $$props["aria-label"] || platformName);
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={winWidth} />
|
||||
|
||||
<header aria-label={ariaLabel} class={cx('--header')} role="banner">
|
||||
<header role="banner" aria-label={ariaLabel} class:bx--header={true}>
|
||||
{#if winWidth < 1056}
|
||||
<HamburgerMenu bind:isOpen={isSideNavOpen} />
|
||||
{/if}
|
||||
<a class={cx('--header__name')} {href} on:click>
|
||||
<span class={cx('--header__name--prefix')}>{company}</span>
|
||||
<a {href} class:bx--header__name={true} {...$$restProps} on:click>
|
||||
<span class:bx--header__name--prefix={true}>{company}</span>
|
||||
{platformName}
|
||||
</a>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -4,45 +4,46 @@
|
|||
export let isOpen = undefined;
|
||||
export let text = undefined;
|
||||
|
||||
let elRigthPanel = undefined;
|
||||
import { Icon } from "../../Icon";
|
||||
import { slide } from "svelte/transition";
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
function mouseUp({ target }) {
|
||||
if (target && elRigthPanel) {
|
||||
if (!elRigthPanel.contains(target)) {
|
||||
isOpen = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
let refPanel = null;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-text {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.action-text {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.action-text > span {
|
||||
margin-left: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.action-text > span {
|
||||
margin-left: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
<svelte:window
|
||||
on:mouseup={({ target }) => {
|
||||
if (target && refPanel) {
|
||||
if (!refPanel.contains(target)) {
|
||||
isOpen = false;
|
||||
}
|
||||
}
|
||||
}} />
|
||||
|
||||
<div>
|
||||
<button
|
||||
aria-label={type}
|
||||
class={cx('--header__action', isOpen && '--header__action--active')}
|
||||
class:action-text={text}
|
||||
type="button"
|
||||
aria-label={type}
|
||||
class:bx--header__action={true}
|
||||
class:bx--header__action--active={isOpen}
|
||||
class:action-text={text}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
isOpen = true;
|
||||
}}>
|
||||
|
|
@ -55,8 +56,9 @@
|
|||
</button>
|
||||
{#if isOpen}
|
||||
<div
|
||||
bind:this={elRigthPanel}
|
||||
class={cx('--header-panel', '--header-panel--expanded')}
|
||||
bind:this={refPanel}
|
||||
class:bx--header-panel={true}
|
||||
class:bx--header-panel--expanded={true}
|
||||
transition:slide={{ duration: 200 }}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
export let type = undefined;
|
||||
export let icon = undefined;
|
||||
export let linkIsActive = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
|
||||
import { Icon } from "../../Icon";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -15,17 +15,12 @@
|
|||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.subject-divider {
|
||||
color: #525252;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #525252;
|
||||
margin: 32px 1rem 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a
|
||||
aria-label={type}
|
||||
class={cx('--header__action', linkIsActive && '--header__action--active')}
|
||||
class:bx--header__action={true}
|
||||
class:bx--header__action--active={linkIsActive}
|
||||
class:action-link={true}
|
||||
{href}>
|
||||
<Icon {...icon} />
|
||||
|
|
|
|||
|
|
@ -1,48 +1,40 @@
|
|||
<script>
|
||||
export let searchIsActive = undefined;
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { closeIcon, searchIcon } from '../constants';
|
||||
import searchStore from '../searchStore';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Close20 from "carbon-icons-svelte/lib/Close20";
|
||||
import Search20 from "carbon-icons-svelte/lib/Search20";
|
||||
import { Icon } from "../../Icon";
|
||||
import searchStore from "../searchStore";
|
||||
|
||||
let searchTabIndex = '0';
|
||||
let closeTabIndex = '-1';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let searchTabIndex = "0";
|
||||
let closeTabIndex = "-1";
|
||||
let elInput = undefined;
|
||||
let elTypeSearch = undefined;
|
||||
let isSearchFocus = false;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function dispatchInputs(event) {
|
||||
const params = {
|
||||
action: 'search',
|
||||
action: "search",
|
||||
textInput: event.target.value
|
||||
};
|
||||
dispatch('inputSearch', params);
|
||||
}
|
||||
|
||||
function mouseUp({ target }) {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
dispatch("inputSearch", params);
|
||||
}
|
||||
|
||||
$: if (!searchIsActive) {
|
||||
if (elInput) {
|
||||
elInput.value = '';
|
||||
elInput.value = "";
|
||||
}
|
||||
searchStore.clear();
|
||||
}
|
||||
$: if (searchIsActive) {
|
||||
searchTabIndex = '-1';
|
||||
closeTabIndex = '0';
|
||||
searchTabIndex = "-1";
|
||||
closeTabIndex = "0";
|
||||
} else {
|
||||
searchTabIndex = '0';
|
||||
closeTabIndex = '-1';
|
||||
searchTabIndex = "0";
|
||||
closeTabIndex = "-1";
|
||||
}
|
||||
$: if (isSearchFocus) {
|
||||
elInput.focus();
|
||||
|
|
@ -63,19 +55,23 @@
|
|||
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.search-wrapper-hidden {
|
||||
max-width: 3rem;
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
.search-focus {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.search-wrapper-2 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid #393939;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
|
|
@ -85,10 +81,12 @@
|
|||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-search-disabled {
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-search {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
|
|
@ -104,10 +102,12 @@
|
|||
padding: 0;
|
||||
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.input-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
|
|
@ -118,35 +118,33 @@
|
|||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
|
||||
.btn-clear-hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.search-list {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
padding: 1rem 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3rem;
|
||||
background-color: #161616;
|
||||
border: 1px solid #393939;
|
||||
border-top: none;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
<svelte:window
|
||||
on:mouseup={({ target }) => {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}} />
|
||||
|
||||
<div
|
||||
bind:this={elTypeSearch}
|
||||
role="search"
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden={!searchIsActive}
|
||||
class:search-focus={isSearchFocus || searchIsActive}
|
||||
role="search">
|
||||
class:search-focus={isSearchFocus || searchIsActive}>
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
|
|
@ -155,7 +153,7 @@
|
|||
<button
|
||||
tabindex={searchTabIndex}
|
||||
aria-label="Search"
|
||||
class={cx('--header__action')}
|
||||
class:bx--header__action={true}
|
||||
class:btn-search={true}
|
||||
class:btn-search-disabled={searchIsActive}
|
||||
on:click={() => {
|
||||
|
|
@ -169,7 +167,7 @@
|
|||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...searchIcon} />
|
||||
<Icon title="Search" tabindex="0" render={Search20} />
|
||||
</button>
|
||||
<input
|
||||
bind:this={elInput}
|
||||
|
|
@ -186,7 +184,7 @@
|
|||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex={closeTabIndex}
|
||||
class={cx('--header__action')}
|
||||
class:bx--header__action={true}
|
||||
class:btn-clear={true}
|
||||
class:btn-clear-hidden={!searchIsActive}
|
||||
type="button"
|
||||
|
|
@ -201,7 +199,7 @@
|
|||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...closeIcon} />
|
||||
<Icon title="Close" tabindex="0" render={Close20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script>
|
||||
export let ariaLabel = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<nav aria-label={ariaLabel} class={cx('--header__nav')}>
|
||||
<ul aria-label={ariaLabel} class={cx('--header__menu-bar')} role="menubar">
|
||||
<nav aria-label={ariaLabel} class:bx--header__nav={true} {...$$restProps}>
|
||||
<ul role="menubar" aria-label={ariaLabel} class:bx--header__menu-bar={true}>
|
||||
<slot />
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<a
|
||||
class={cx('--header__menu-item')}
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
{href}
|
||||
class:bx--header__menu-item={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
@ -16,8 +17,7 @@
|
|||
on:keyup
|
||||
on:keydown
|
||||
on:focus
|
||||
on:blur
|
||||
{href}>
|
||||
<span class={cx('--text-truncate--end')}>{text}</span>
|
||||
on:blur>
|
||||
<span class:bx--text-truncate--end={true}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,37 @@
|
|||
<script>
|
||||
export let text = undefined;
|
||||
export let iconDescription = 'Expand/Collapse';
|
||||
export let expanded = false;
|
||||
export let href = '/';
|
||||
export let href = "/";
|
||||
export let text = undefined;
|
||||
export let iconDescription = "Expand/Collapse";
|
||||
|
||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||
import { cx } from '../../../lib';
|
||||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
|
||||
|
||||
let listItemSubMenu = undefined;
|
||||
|
||||
const mouseUp = ({ target }) => {
|
||||
if (listItemSubMenu) {
|
||||
if (listItemSubMenu.contains(target) || target === listItemSubMenu) {
|
||||
expanded = !expanded;
|
||||
} else {
|
||||
if (expanded) {
|
||||
expanded = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
let ref = null;
|
||||
</script>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
<svelte:window
|
||||
on:mouseup={({ target }) => {
|
||||
if (ref.contains(target) || target === ref) {
|
||||
expanded = !expanded;
|
||||
} else {
|
||||
if (expanded) {
|
||||
expanded = false;
|
||||
}
|
||||
}
|
||||
}} />
|
||||
|
||||
<li class={cx('--header__submenu')} title={iconDescription}>
|
||||
<li class:bx--header__submenu={true} title={iconDescription}>
|
||||
<a
|
||||
bind:this={listItemSubMenu}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={expanded}
|
||||
class={cx('--header__menu-item', '--header__menu-title')}
|
||||
bind:this={ref}
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={expanded}
|
||||
aria-label={text}
|
||||
{href}
|
||||
class:bx--header__menu-item={true}
|
||||
class:bx--header__menu-title={true}
|
||||
{...$$restProps}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
|
|
@ -48,9 +46,11 @@
|
|||
on:focus
|
||||
on:blur>
|
||||
{text}
|
||||
<ChevronDown16 class={cx('--header__menu-arrow')} aria-label={iconDescription} />
|
||||
<ChevronDown16
|
||||
aria-label={iconDescription}
|
||||
class="bx--header__menu-arrow" />
|
||||
</a>
|
||||
<ul aria-label={text} class={cx('--header__menu')} role="menu">
|
||||
<ul role="menu" aria-label={text} class:bx--header__menu={true}>
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
border-bottom: 1px solid #525252;
|
||||
margin: 32px 1rem 8px;
|
||||
}
|
||||
|
||||
.subject-divider span {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<script>
|
||||
export let href;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
export let href = undefined;
|
||||
</script>
|
||||
|
||||
<li class={cx('--switcher__item')}>
|
||||
<a class={cx('--switcher__item-link')} {href}>
|
||||
<li class:bx--switcher__item={true}>
|
||||
<a {href} class:bx--switcher__item-link={true} {...$$restProps}>
|
||||
<slot />
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<script>
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<ul class={cx('--switcher__item')}>
|
||||
<ul class:bx--switcher__item={true}>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<script>
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<div class={cx('--header__global')}>
|
||||
<div class:bx--header__global={true}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,24 @@
|
|||
export let ariaLabel = undefined;
|
||||
export let isOpen = false;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Menu20 from 'carbon-icons-svelte/lib/Menu20';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { closeIcon } from '../constants';
|
||||
|
||||
$: iconProps = !isOpen
|
||||
? {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Menu20,
|
||||
title: 'Open Menu',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
: closeIcon;
|
||||
import { fly } from "svelte/transition";
|
||||
import Close20 from "carbon-icons-svelte/lib/Close20";
|
||||
import Menu20 from "carbon-icons-svelte/lib/Menu20";
|
||||
import { Icon } from "../../Icon";
|
||||
</script>
|
||||
|
||||
<button
|
||||
transition:fly={{ x: -200, delay: 50, duration: 250 }}
|
||||
aria-label={ariaLabel}
|
||||
class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
|
||||
title="Open menu"
|
||||
type="button"
|
||||
title="Open menu"
|
||||
aria-label={ariaLabel}
|
||||
class:bx--header__action={true}
|
||||
class:bx--header__menu-trigger={true}
|
||||
class:bx--header__menu-toggle={true}
|
||||
{...$$restProps}
|
||||
transition:fly={{ x: -200, delay: 50, duration: 250 }}
|
||||
on:click
|
||||
on:click={() => (isOpen = !isOpen)}>
|
||||
<Icon {...iconProps} />
|
||||
<Icon
|
||||
title={isOpen ? 'Close' : 'Open Menu'}
|
||||
render={isOpen ? Close20 : Menu20} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script>
|
||||
export let ariaLabel = undefined;
|
||||
export let isOpen = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
|
||||
$: footerSpanText = isOpen ? 'Open' : 'Close';
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
|
||||
aria-label={ariaLabel}>
|
||||
aria-label={ariaLabel}
|
||||
class:bx--side-nav__navigation={true}
|
||||
class:bx--side-nav={true}
|
||||
class:bx--side-nav--ux={true}
|
||||
class:bx--side-nav--expanded={isOpen}
|
||||
{...$$restProps}>
|
||||
<slot />
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<script>
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<ul class={cx('--side-nav__items')}>
|
||||
<ul class:bx--side-nav__items={true}>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<script>
|
||||
export let isSelected = false;
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
export let icon = undefined;
|
||||
export let isSelected = false;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { Icon } from "../../Icon";
|
||||
</script>
|
||||
|
||||
<li class={cx('--side-nav__item')}>
|
||||
<li class:bx--side-nav__item={true}>
|
||||
<a
|
||||
{href}
|
||||
class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
|
||||
aria-current={isSelected ? 'page' : ''}
|
||||
{href}
|
||||
class:bx--side-nav__link={true}
|
||||
class:bx--side-nav__link--current={isSelected}
|
||||
{...$$restProps}
|
||||
on:click>
|
||||
<div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
|
||||
<div class:bx--side-nav__icon={true} class:bx--side-nav__icon--small={true}>
|
||||
{#if icon}
|
||||
<Icon {...icon} />
|
||||
{/if}
|
||||
</div>
|
||||
<span class={cx('--side-nav__link-text')}>{text}</span>
|
||||
<span class:bx--side-nav__link-text={true}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,37 @@
|
|||
<script>
|
||||
export let expanded = false;
|
||||
export let text = undefined;
|
||||
export let icon = undefined;
|
||||
export let expanded = false;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||
|
||||
let iconProps = {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ChevronDown16,
|
||||
title: 'Open Menu',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
|
||||
import { Icon } from "../../Icon";
|
||||
</script>
|
||||
|
||||
<li class={cx('--side-nav__item', '--side-nav__item--icon')}>
|
||||
<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={true}>
|
||||
<button
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={expanded}
|
||||
class={cx('--side-nav__submenu')}
|
||||
type="button"
|
||||
class:bx--side-nav__submenu={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
expanded = !expanded;
|
||||
}}>
|
||||
<div class={cx('--side-nav__icon')}>
|
||||
<div class:bx--side-nav__icon={true}>
|
||||
{#if icon}
|
||||
<Icon {...icon} />
|
||||
{/if}
|
||||
</div>
|
||||
<span class={cx('--side-nav__submenu-title')}>{text}</span>
|
||||
<div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
|
||||
<Icon {...iconProps} />
|
||||
<span class:bx--side-nav__submenu-title={true}>{text}</span>
|
||||
<div
|
||||
class:bx--side-nav__icon={true}
|
||||
class:bx--side-nav__icon--small={true}
|
||||
class:bx--side-nav__submenu-chevron={true}>
|
||||
<Icon title="Open Menu" tabindex="0" render={ChevronDown16} />
|
||||
</div>
|
||||
</button>
|
||||
<ul class={cx('--side-nav__menu')} role="menu">
|
||||
<ul role="menu" class:bx--side-nav__menu={true}>
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
<script>
|
||||
export let isSelected = undefined;
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
export let isSelected = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<li class={cx('--side-nav__menu-item')} role="none">
|
||||
<li role="none" class:bx--side-nav__menu-item={true}>
|
||||
<a
|
||||
{href}
|
||||
class={cx('--side-nav__link')}
|
||||
role="menuitem"
|
||||
aria-current={isSelected ? 'page' : ''}
|
||||
{href}
|
||||
class:bx--side-nav__link={true}
|
||||
{...$$restProps}
|
||||
on:click>
|
||||
<span class={cx('--side-nav__link-text')}>{text}</span>
|
||||
<span class:bx--side-nav__link-text={true}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,64 @@
|
|||
import { withKnobs, text } from '@storybook/addon-knobs';
|
||||
import Component from './UIShell.Story.svelte';
|
||||
import { withKnobs, text } from "@storybook/addon-knobs";
|
||||
import Component from "./UIShell.Story.svelte";
|
||||
|
||||
export default { title: 'UIShell', decorators: [withKnobs] };
|
||||
export default { title: "UIShell", decorators: [withKnobs] };
|
||||
|
||||
export const Header = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'header',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "header",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
||||
export const Sidenav = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'sidenav',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "sidenav",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
||||
export const HeaderWithNav = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'header-with-nav',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "header-with-nav",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
||||
export const HeaderWithUtilities = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'header-with-utilities',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "header-with-utilities",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
||||
export const HeaderWithSwitcher = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'header-with-switcher',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "header-with-switcher",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
||||
export const HeaderAndSidenav = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'header-and-sidenav',
|
||||
href: text('The link href (href)', '#'),
|
||||
company: text('Company name', 'IBM'),
|
||||
platformName: text('Platform name', 'Platform Name')
|
||||
}
|
||||
story: "header-and-sidenav",
|
||||
href: text("The link href (href)", "#"),
|
||||
company: text("Company name", "IBM"),
|
||||
platformName: text("Platform name", "Platform Name"),
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
import Search20 from 'carbon-icons-svelte/lib/Search20';
|
||||
import Help20 from 'carbon-icons-svelte/lib/Help20';
|
||||
import Notification20 from 'carbon-icons-svelte/lib/Notification20';
|
||||
import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20';
|
||||
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
|
||||
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||
|
||||
export const leftPanelActions = {
|
||||
search: {
|
||||
actionString: 'Search',
|
||||
iconProps: {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Search20,
|
||||
title: 'Search',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
},
|
||||
help: {
|
||||
actionString: 'Help',
|
||||
iconProps: {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Help20,
|
||||
title: 'Help',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
},
|
||||
notifications: {
|
||||
actionString: 'Notifications',
|
||||
iconProps: {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Notification20,
|
||||
title: 'Notifications',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
},
|
||||
account: {
|
||||
actionString: 'Account',
|
||||
iconProps: {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: UserAvatar20,
|
||||
title: 'Account',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
},
|
||||
switcher: {
|
||||
actionString: 'Switcher',
|
||||
iconProps: {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: AppSwitcher20,
|
||||
title: 'App Switcher',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const leftPanelTypes = {
|
||||
search: 'Search',
|
||||
component: 'Component',
|
||||
link: 'Link',
|
||||
links: 'Links'
|
||||
};
|
||||
|
||||
export const closeIcon = {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Close20,
|
||||
title: 'Close',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
||||
export const searchIcon = {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Search20,
|
||||
title: 'Search',
|
||||
tabindex: '0',
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export function isChildOf(target, parentId) {
|
||||
if (target.id) {
|
||||
if (target.id == parentId) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (target.parentNode) {
|
||||
if (target.parentNode.id) {
|
||||
if (target.parentNode.id == parentId) {
|
||||
return true;
|
||||
} else {
|
||||
return isChildOf(target.parentNode, parentId);
|
||||
}
|
||||
} else {
|
||||
return isChildOf(target.parentNode, parentId);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
export { default as Header } from './GlobalHeader/Header.svelte';
|
||||
export { default as HeaderAction } from './GlobalHeader/HeaderAction.svelte';
|
||||
export { default as HeaderActionLink } from './GlobalHeader/HeaderActionLink.svelte';
|
||||
export { default as HeaderActionSearch } from './GlobalHeader/HeaderActionSearch.svelte';
|
||||
export { default as HeaderNav } from './GlobalHeader/HeaderNav.svelte';
|
||||
export { default as HeaderNavItem } from './GlobalHeader/HeaderNavItem.svelte';
|
||||
export { default as HeaderNavMenu } from './GlobalHeader/HeaderNavMenu.svelte';
|
||||
export { default as HeaderPanelDivider } from './GlobalHeader/HeaderPanelDivider.svelte';
|
||||
export { default as HeaderPanelLink } from './GlobalHeader/HeaderPanelLink.svelte';
|
||||
export { default as HeaderPanelLinks } from './GlobalHeader/HeaderPanelLinks.svelte';
|
||||
export { default as HeaderUtilities } from './GlobalHeader/HeaderUtilities.svelte';
|
||||
export { default as SideNav } from './SideNav/SideNav.svelte';
|
||||
export { default as SideNavItems } from './SideNav/SideNavItems.svelte';
|
||||
export { default as SideNavLink } from './SideNav/SideNavLink.svelte';
|
||||
export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte';
|
||||
export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte';
|
||||
export { default as Content } from './Content.svelte';
|
||||
export { default as SkipToContent } from './SkipToContent.svelte';
|
||||
export { default as Header } from "./GlobalHeader/Header.svelte";
|
||||
export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
|
||||
export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte";
|
||||
export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte";
|
||||
export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
|
||||
export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
|
||||
export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";
|
||||
export { default as HeaderPanelDivider } from "./GlobalHeader/HeaderPanelDivider.svelte";
|
||||
export { default as HeaderPanelLink } from "./GlobalHeader/HeaderPanelLink.svelte";
|
||||
export { default as HeaderPanelLinks } from "./GlobalHeader/HeaderPanelLinks.svelte";
|
||||
export { default as HeaderUtilities } from "./GlobalHeader/HeaderUtilities.svelte";
|
||||
export { default as SideNav } from "./SideNav/SideNav.svelte";
|
||||
export { default as SideNavItems } from "./SideNav/SideNavItems.svelte";
|
||||
export { default as SideNavLink } from "./SideNav/SideNavLink.svelte";
|
||||
export { default as SideNavMenu } from "./SideNav/SideNavMenu.svelte";
|
||||
export { default as SideNavMenuItem } from "./SideNav/SideNavMenuItem.svelte";
|
||||
export { default as Content } from "./Content.svelte";
|
||||
export { default as SkipToContent } from "./SkipToContent.svelte";
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { cx } from '../cx';
|
||||
|
||||
test('cx', () => {
|
||||
expect(cx(null)).toEqual('');
|
||||
expect(cx(undefined)).toEqual('');
|
||||
expect(cx('--')).toEqual('bx--');
|
||||
expect(cx('--', null)).toEqual('bx--');
|
||||
expect(cx(0, undefined, '--', null, 1)).toEqual('bx--');
|
||||
expect(cx(1 && '1', 0 && '0')).toEqual('1');
|
||||
});
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const prefix = 'bx';
|
||||
|
||||
function cx(...items) {
|
||||
const classes = [];
|
||||
|
||||
items.forEach(item => {
|
||||
if (typeof item === 'string') {
|
||||
if (item.slice(0, 2) === '--') {
|
||||
classes.push(`${prefix}${item}`);
|
||||
} else {
|
||||
classes.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
export { cx };
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { cx } from "./cx";
|
||||
Loading…
Add table
Add a link
Reference in a new issue