Added option to set text for HeaderAction(Link) component

This commit is contained in:
Daniel Boven 2020-07-16 11:51:43 +02:00
commit 7f1a769889
4 changed files with 13 additions and 13 deletions

View file

@ -2,10 +2,11 @@
export let type = undefined; export let type = undefined;
export let icon = undefined; export let icon = undefined;
export let isOpen = undefined; export let isOpen = undefined;
export let text = undefined;
let elRigthPanel = undefined; let elRigthPanel = undefined;
import { cx } from '../../../lib'; import { cx, optional } from '../../../lib';
import Icon from '../../Icon/Icon.svelte'; import Icon from '../../Icon/Icon.svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
@ -23,12 +24,13 @@
<div> <div>
<button <button
aria-label={type} aria-label={type}
class={cx('--header__action', isOpen && '--header__action--active')} class={cx('--header__action', isOpen && '--header__action--active', text && '--header__action--text')}
type="button" type="button"
on:click={() => { on:click={() => {
isOpen = true; isOpen = true;
}}> }}>
<Icon {...icon} /> <Icon {...icon} />
{optional(text)}
</button> </button>
{#if isOpen} {#if isOpen}
<div <div
@ -38,4 +40,4 @@
<slot /> <slot />
</div> </div>
{/if} {/if}
</div> </div>

View file

@ -3,18 +3,12 @@
export let type = undefined; export let type = undefined;
export let icon = undefined; export let icon = undefined;
export let linkIsActive = undefined; export let linkIsActive = undefined;
import { cx } from '../../../lib'; export let text = undefined;
import { cx, optional } from '../../../lib';
import Icon from '../../Icon/Icon.svelte'; import Icon from '../../Icon/Icon.svelte';
</script> </script>
<style> <style>
.action-link {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-top: 10px;
}
.subject-divider { .subject-divider {
color: #525252; color: #525252;
padding-bottom: 4px; padding-bottom: 4px;
@ -25,8 +19,8 @@
<a <a
aria-label={type} aria-label={type}
class={cx('--header__action', linkIsActive && '--header__action--active')} class={cx('--header__action', linkIsActive && '--header__action--active', text && '--header__action--text')}
class:action-link={true}
{href}> {href}>
<Icon {...icon} /> <Icon {...icon} />
{optional(text)}
</a> </a>

View file

@ -1,3 +1,4 @@
export { cx } from './cx'; export { cx } from './cx';
export { css } from './css'; export { css } from './css';
export { fillArray } from './fill-array'; export { fillArray } from './fill-array';
export { optional } from './optional';

3
src/lib/optional.js Normal file
View file

@ -0,0 +1,3 @@
const optional = x => x || '';
export { optional };