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

chore(prettier): use svelteStrictMode

Browse source
This commit is contained in:
Eric Liu 2020-09-04 16:35:49 -07:00
commit 42b8159b1c
182 changed files with 2020 additions and 1912 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/Notification/InlineNotification.svelte
View file

@ -81,29 +81,35 @@
{#if open}
<div
{role}
{kind}
class:bx--inline-notification={true}
class:bx--inline-notification--low-contrast={lowContrast}
class:bx--inline-notification--hide-close-button={hideCloseButton}
class={kind && `bx--inline-notification--${kind}`}
role="{role}"
kind="{kind}"
class:bx--inline-notification="{true}"
class:bx--inline-notification--low-contrast="{lowContrast}"
class:bx--inline-notification--hide-close-button="{hideCloseButton}"
class="{kind && `bx--inline-notification--${kind}`}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<div class:bx--inline-notification__details={true}>
<NotificationIcon {notificationType} {kind} {iconDescription} />
<NotificationTextDetails {title} {subtitle} {notificationType}>
<div class:bx--inline-notification__details="{true}">
<NotificationIcon
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
notificationType="{notificationType}">
<slot />
</NotificationTextDetails>
</div>
<slot name="actions" />
{#if !hideCloseButton}
<NotificationButton
{iconDescription}
{notificationType}
on:click={close} />
iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" />
{/if}
</div>
{/if}

8
src/Notification/Notification.Story.svelte
View file

@ -9,9 +9,9 @@
{#if story === 'inline'}
<InlineNotification
{...$$props}
on:close={() => {
on:close="{() => {
console.log('on:close');
}}>
}}">
<div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton>
</div>
@ -19,8 +19,8 @@
{:else if story === 'toast'}
<ToastNotification
{...$$props}
on:close={() => {
on:close="{() => {
console.log('on:close');
}}
}}"
style="min-width: 30rem; margin-bottom: .5rem" />
{/if}

12
src/Notification/NotificationButton.svelte
View file

@ -28,18 +28,18 @@
<button
type="button"
aria-label={iconDescription}
title={iconDescription}
class:bx--toast-notification__close-button={notificationType === 'toast'}
class:bx--inline-notification__close-button={notificationType === 'inline'}
aria-label="{iconDescription}"
title="{iconDescription}"
class:bx--toast-notification__close-button="{notificationType === 'toast'}"
class:bx--inline-notification__close-button="{notificationType === 'inline'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<svelte:component
this={renderIcon}
{title}
this="{renderIcon}"
title="{title}"
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
</button>

4
src/Notification/NotificationIcon.svelte
View file

@ -35,6 +35,6 @@
</script>
<svelte:component
this={icons[kind]}
title={iconDescription}
this="{icons[kind]}"
title="{iconDescription}"
class="bx--{notificationType}-notification__icon" />

14
src/Notification/NotificationTextDetails.svelte
View file

@ -25,18 +25,18 @@
</script>
{#if notificationType === 'toast'}
<div class:bx--toast-notification__details={true}>
<h3 class:bx--toast-notification__title={true}>{title}</h3>
<div class:bx--toast-notification__subtitle={true}>{subtitle}</div>
<div class:bx--toast-notification__caption={true}>{caption}</div>
<div class:bx--toast-notification__details="{true}">
<h3 class:bx--toast-notification__title="{true}">{title}</h3>
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
<div class:bx--toast-notification__caption="{true}">{caption}</div>
<slot />
</div>
{/if}
{#if notificationType === 'inline'}
<div class:bx--inline-notification__text-wrapper={true}>
<p class:bx--inline-notification__title={true}>{title}</p>
<div class:bx--inline-notification__subtitle={true}>{subtitle}</div>
<div class:bx--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title="{true}">{title}</p>
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
<slot />
</div>
{/if}

27
src/Notification/ToastNotification.svelte
View file

@ -87,25 +87,32 @@
{#if open}
<div
{role}
{kind}
class:bx--toast-notification={true}
class:bx--toast-notification--low-contrast={lowContrast}
class={kind && `bx--toast-notification--${kind}`}
role="{role}"
kind="{kind}"
class:bx--toast-notification="{true}"
class:bx--toast-notification--low-contrast="{lowContrast}"
class="{kind && `bx--toast-notification--${kind}`}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<NotificationIcon {notificationType} {kind} {iconDescription} />
<NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
<NotificationIcon
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
caption="{caption}"
notificationType="{notificationType}">
<slot />
</NotificationTextDetails>
{#if !hideCloseButton}
<NotificationButton
{iconDescription}
{notificationType}
on:click={close} />
iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" />
{/if}
</div>
{/if}