feat(component): add Notification

Closes #20

src/components/Notification/InlineNotification.svelte

@@ -0,0 +1,54 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let kind = 'error';
+  export let title = 'provide a title';
+  export let subtitle = ''; // TODO: support subtitle slot?
+  export let role = 'alert';
+  export let notificationType = 'inline';
+  export let iconDescription = 'closes notification';
+  export let hideCloseButton = false;
+  export let lowContrast = false;
+  export let style = undefined;
+
+  import { createEventDispatcher } from 'svelte';
+  import NotificationIcon from './NotificationIcon.svelte';
+  import NotificationTextDetails from './NotificationTextDetails.svelte';
+  import NotificationButton from './NotificationButton.svelte';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx(
+    '--inline-notification',
+    lowContrast && '--inline-notification--low-contrast',
+    kind && `--inline-notification--${kind}`,
+    hideCloseButton && '--inline-notification--hide-close-button',
+    className
+  );
+
+  let open = true;
+
+  $: if (!open) {
+    dispatch('close');
+  }
+</script>
+
+{#if open}
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}>
+    <div class={cx('--inline-notification__details')}>
+      <NotificationIcon {notificationType} {kind} {iconDescription} />
+      <NotificationTextDetails {title} {subtitle} {notificationType}>
+        <slot />
+      </NotificationTextDetails>
+    </div>
+    <slot name="actions" />
+    {#if !hideCloseButton}
+      <NotificationButton
+        {iconDescription}
+        {notificationType}
+        on:click={() => {
+          open = false;
+        }} />
+    {/if}
+  </div>
+{/if}