chore: lift components folder

src/Notification/InlineNotification.svelte

@@ -0,0 +1,51 @@
+<script>
+  export let notificationType = "inline";
+  export let kind = "error"; // "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"
+  export let role = "alert";
+  export let title = "provide a title";
+  export let subtitle = "";
+  export let iconDescription = "closes notification";
+  export let lowContrast = false;
+  export let hideCloseButton = false;
+
+  import { createEventDispatcher } from "svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+  import NotificationTextDetails from "./NotificationTextDetails.svelte";
+  import NotificationButton from "./NotificationButton.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: open = true;
+</script>
+
+{#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}`}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <div class:bx--inline-notification__details={true}>
+      <NotificationIcon {notificationType} {kind} {iconDescription} />
+      <NotificationTextDetails {title} {subtitle} {notificationType}>
+        <slot />
+      </NotificationTextDetails>
+    </div>
+    <slot name="actions" />
+    {#if !hideCloseButton}
+      <NotificationButton
+        {iconDescription}
+        {notificationType}
+        on:click={() => {
+          open = false;
+          dispatch('close');
+        }} />
+    {/if}
+  </div>
+{/if}

src/Notification/Notification.Story.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let story = undefined;
+
+  import InlineNotification from "./InlineNotification.svelte";
+  import NotificationActionButton from "./NotificationActionButton.svelte";
+  import ToastNotification from "./ToastNotification.svelte";
+</script>
+
+{#if story === 'inline'}
+  <InlineNotification
+    {...$$props}
+    on:close={() => {
+      console.log('on:close');
+    }}>
+    <div slot="actions">
+      <NotificationActionButton>{$$props.action}</NotificationActionButton>
+    </div>
+  </InlineNotification>
+{:else if story === 'toast'}
+  <ToastNotification
+    {...$$props}
+    on:close={() => {
+      console.log('on:close');
+    }}
+    style="min-width: 30rem; margin-bottom: .5rem" />
+{/if}

src/Notification/Notification.stories.js

@@ -0,0 +1,48 @@
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Notification.Story.svelte";
+
+export default { title: "Notification", decorators: [withKnobs] };
+
+const kinds = {
+  "Error (error)": "error",
+  "Info (info)": "info",
+  "Success (success)": "success",
+  "Warning (warning)": "warning",
+};
+
+export const Toast = () => ({
+  Component,
+  props: {
+    story: "toast",
+    kind: select("The notification kind (kind)", kinds, "info"),
+    lowContrast: boolean("Use low contrast variant (lowContrast)", false),
+    role: text("ARIA role (role)", "alert"),
+    title: text("Title (title)", "Notification title"),
+    subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
+    caption: text("Caption (caption)", "Time stamp [00:00:00]"),
+    iconDescription: text(
+      "Icon description (iconDescription)",
+      "describes the close button"
+    ),
+    hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
+  },
+});
+
+export const Inline = () => ({
+  Component,
+  props: {
+    story: "inline",
+    kind: select("The notification kind (kind)", kinds, "info"),
+    lowContrast: boolean("Use low contrast variant (lowContrast)", false),
+    role: text("ARIA role (role)", "alert"),
+    title: text("Title (title)", "Notification title"),
+    subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
+    caption: text("Caption (caption)", "Time stamp [00:00:00]"),
+    iconDescription: text(
+      "Icon description (iconDescription)",
+      "describes the close button"
+    ),
+    hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
+    action: text("Action (NotificationActionButton > $$slot#action)", "Action"),
+  },
+});

src/Notification/NotificationActionButton.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Button } from "../Button";
+</script>
+
+<Button
+  kind="ghost"
+  size="small"
+  class="bx--inline-notification__action-button"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</Button>

src/Notification/NotificationButton.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let iconDescription = "close icon";
+  export let renderIcon = Close20;
+  export let title = undefined;
+  export let type = "button";
+
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+</script>
+
+<button
+  aria-label={iconDescription}
+  title={iconDescription}
+  {type}
+  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}
+    class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
+    {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
+</button>

src/Notification/NotificationIcon.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let kind = "error";
+  export let notificationType = "toast";
+  export let iconDescription = "closes notification";
+
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
+  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
+  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20";
+  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20";
+  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20";
+  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20";
+
+  const icons = {
+    error: ErrorFilled20,
+    "info-square": InformationSquareFilled20,
+    info: InformationFilled20,
+    success: CheckmarkFilled20,
+    warning: WarningFilled20,
+    "warning-alt": WarningAltFilled20
+  };
+</script>
+
+<svelte:component
+  this={icons[kind]}
+  title={iconDescription}
+  class="bx--{notificationType}-notification__icon" />

src/Notification/NotificationTextDetails.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let title = "title";
+  export let subtitle = "";
+  export let caption = "caption";
+</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>
+    <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>
+    <slot />
+  </div>
+{/if}

src/Notification/ToastNotification.svelte

@@ -0,0 +1,63 @@
+<script>
+  export let iconDescription = "closes notification";
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let kind = "error";
+  export let hideCloseButton = false;
+  export let lowContrast = false;
+  export let timeout = 0;
+  export let role = "alert";
+  export let title = "provide a title";
+  export let subtitle = "";
+  export let caption = "provide a caption";
+
+  import { createEventDispatcher, onMount } from "svelte";
+  import NotificationButton from "./NotificationButton.svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+  import NotificationTextDetails from "./NotificationTextDetails.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: open = true;
+  $: timeoutId = undefined;
+
+  onMount(() => {
+    if (timeout) {
+      timeoutId = window.setTimeout(() => {
+        open = false;
+      }, timeout);
+    }
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      timeoutId = undefined;
+    };
+  });
+</script>
+
+{#if open}
+  <div
+    {role}
+    {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}>
+      <slot />
+    </NotificationTextDetails>
+    {#if !hideCloseButton}
+      <NotificationButton
+        {iconDescription}
+        {notificationType}
+        on:click={() => {
+          open = false;
+          dispatch('close');
+        }} />
+    {/if}
+  </div>
+{/if}

src/Notification/index.js

@@ -0,0 +1,6 @@
+export { default as ToastNotification } from "./ToastNotification.svelte";
+export { default as InlineNotification } from "./InlineNotification.svelte";
+export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
+export { default as NotificationButton } from "./NotificationButton.svelte";
+export { default as NotificationIcon } from "./NotificationIcon.svelte";
+export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";