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

feat(uishell): add utilitylink

Browse source
This commit is contained in:
Marcus Feitoza 2020-04-05 13:18:39 -03:00
commit d323b2d500
1 changed files with 8 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/UIShell/UIShellNav/UtilityLink.svelte
View file

@ -1,29 +1,10 @@
<script> <script>
export let action = undefined; export let href = undefined;
export let type = undefined; export let type = undefined;
export let icon = undefined; export let icon = undefined;
export let content = undefined;
export let linkIsActive = undefined; export let linkIsActive = undefined;
import { cx } from '../../../lib'; import { cx } from '../../../lib';
import Icon from '../../Icon/Icon.svelte'; import Icon from '../../Icon/Icon.svelte';
import { leftPanelActions, leftPanelTypes } from '../constants';
import { slide } from 'svelte/transition';
let href = undefined;
if (type === leftPanelTypes.link) {
href = content.href;
}
if (!icon) {
const actionsArray = Object.entries(leftPanelActions);
for (const definedAction of actionsArray) {
for (const content of definedAction) {
if (typeof content === 'object') {
if (content.actionString === action) {
icon = content.iconProps;
}
}
}
}
}
</script> </script>
<style> <style>
@ -40,53 +21,12 @@
border-bottom: 1px solid #525252; border-bottom: 1px solid #525252;
margin: 32px 1rem 8px; margin: 32px 1rem 8px;
} }
.subject-divider span {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.32px;
color: #c6c6c6;
}
</style> </style>
{#if type === leftPanelTypes.link} <a
<a aria-label={type}
aria-label={type} class={cx('--header__action', linkIsActive && '--header__action--active')}
class={cx('--header__action', linkIsActive && '--header__action--active')} class:action-link={true}
class:action-link={true} {href}>
{href}> <Icon {...icon} />
<Icon {...icon} /> </a>
</a>
{:else}
<button
aria-label={type}
class={cx('--header__action', linkIsActive && '--header__action--active')}
type="button"
on:keydown={({ key }) => {
if (key === 'Enter') {
linkIsActive = !linkIsActive;
}
}}>
<Icon {...icon} />
</button>
{#if linkIsActive && type === leftPanelTypes.links}
<div
class={cx('--header-panel', '--header-panel--expanded')}
transition:slide={{ duration: 200 }}>
<ul class={cx('--switcher__item')}>
{#each content as subject}
{#if subject.subject}
<li class="subject-divider">
<span>{subject.subject}</span>
</li>
{/if}
{#each subject.items as link}
<li class={cx('--switcher__item')}>
<a class={cx('--switcher__item-link')} href={link.href}>{link.text}</a>
</li>
{/each}
{/each}
</ul>
</div>
{/if}
{/if}