feat(ld-notification): placement prop

src/liquid/components/ld-notification/ld-notification.css

@@ -1,13 +1,15 @@
-.ld-notifcation {
+.ld-notification {
   position: fixed;
   z-index: 2147483647; /* Highest possible */
   display: flex;
   justify-content: center;
+  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
   min-width: 20rem;
-  font: var(--ld-typo-body-s);
+  font: var(--ld-typo-body-m);
+  pointer-events: none;
 }
 
 @keyframes ld-notification-fade-in {
@@ -31,9 +33,9 @@
 }
 
 .ld-notification__item {
+  pointer-events: auto;
   position: absolute;
   transform-origin: center;
-  bottom: var(--ld-sp-40);
   box-shadow: var(--ld-shadow-sticky);
   width: fit-content;
   min-width: 19rem;
@@ -60,23 +62,52 @@
 
   &:nth-last-of-type(2) {
     opacity: 0.75;
-    transform: scale(0.975) translateY(25%);
   }
 
   &:nth-last-of-type(3) {
     opacity: 0.5;
-    transform: scale(0.95) translateY(50%);
   }
 
   &:nth-last-of-type(4) {
     opacity: 0.25;
-    transform: scale(0.925) translateY(75%);
   }
 
   &.ld-notification__item--dismissed {
     opacity: 0;
     animation: ld-notification-fade-out 0.2s linear forwards;
   }
+
+  .ld-notification--bottom & {
+    bottom: var(--ld-sp-32);
+
+    &:nth-last-of-type(2) {
+      transform: scale(0.975) translateY(25%);
+    }
+
+    &:nth-last-of-type(3) {
+      transform: scale(0.95) translateY(50%);
+    }
+
+    &:nth-last-of-type(4) {
+      transform: scale(0.925) translateY(75%);
+    }
+  }
+
+  .ld-notification--top & {
+    top: var(--ld-sp-32);
+
+    &:nth-last-of-type(2) {
+      transform: scale(0.975) translateY(-25%);
+    }
+
+    &:nth-last-of-type(3) {
+      transform: scale(0.95) translateY(-50%);
+    }
+
+    &:nth-last-of-type(4) {
+      transform: scale(0.925) translateY(-75%);
+    }
+  }
 }
 
 .ld-notification__item--info {
@@ -98,6 +129,10 @@
 }
 
 .ld-notification__item-content {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--ld-sp-12);
   padding: var(--ld-sp-8) var(--ld-sp-12);
 }
 
@@ -107,15 +142,15 @@
   flex-shrink: 0;
   border: 0;
   border-radius: var(--ld-br-full);
-  user-select: none;
-  touch-action: manipulation;
   background-color: transparent;
-  -webkit-touch-callout: none;
   cursor: pointer;
   padding: 0;
   height: 2.5rem;
   width: 2.5rem;
   display: inline-grid;
   place-items: center;
   color: inherit;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
 }

src/liquid/components/ld-notification/ld-notification.tsx

@@ -1,5 +1,5 @@
 import '../../components' // type definitions for type checks and intelliSense
-import { Component, h, Host, Listen, State, Watch } from '@stencil/core'
+import { Component, h, Host, Listen, Prop, State, Watch } from '@stencil/core'
 
 type Notification = {
   type: 'info' | 'warn' | 'error'
@@ -16,6 +16,11 @@ const FADE_TRANSITION_DURATION = 200
   shadow: false,
 })
 export class LdNotification {
+  /**
+   * Notification placement within the screen.
+   */
+  @Prop() placement: 'top' | 'bottom' = 'top'
+
   @State() queue: Notification[] = []
   @State() queueDismissed: Notification[] = []
 
@@ -141,10 +146,14 @@ export class LdNotification {
       </svg>
     `
 
+    let cl = 'ld-notification'
+    cl += ` ld-notification--${this.placement}`
+
     return (
       <Host
-        class="ld-notifcation"
+        class={cl}
         role="region"
+        aria-label="Notifications"
         aria-live="polite"
         aria-relevant="additions"
       >

src/liquid/components/ld-notification/readme.md

@@ -32,14 +32,63 @@ dispatchEvent(new CustomEvent('ldNotification', {
 
 ## Notification timeout
 
+While notifications with type `'error'` do not time out, notifications of type `'info'` and `'warn'` have a default timeout of **six seconds** after which they disappear automatically. You can customize this timeout by attaching a timeout value of your choice to the appropriate property on the event detail object: 
+
+```js
+dispatchEvent(new CustomEvent('ldNotification', {
+  detail: {
+    content: 'Here is a message for you.',
+    type: 'info',
+    timeout: 8000, // in milliseconds
+  }
+}))
+```
+
+If you want to prevent a notification of type `'info'` and `'warn'` from timing out, use the timeout value `0`:
+
+```js
+dispatchEvent(new CustomEvent('ldNotification', {
+  detail: {
+    content: 'Here is a message for you.',
+    type: 'info',
+    timeout: 0, // notification will not time out
+  }
+}))
+```
+
 ## Notification content
 
+The examples above used simple text as content for the notification. But you can also use an HTML string containing links and other components:
+
+ ```js
+dispatchEvent(new CustomEvent('ldNotification', {
+  detail: {
+    content: '<ld-icon name="placeholder"></ld-icon> A notification with an icon.',
+    type: 'info',
+  }
+}))
+```
+
 ## Redundant notifications handling
 
+If a notification event is triggered containing the same content and type as another notification which already is queued for notification display, the event is ignored. If you still need to trigger another notification with the same content, you can append a zero-space character to your content.
+
 ## Dismissing current notificaiton
 
+You can dismiss the current notification programmatically by dispatching the `ldNotificationDismiss` event on the `window`:
+
+```js
+dispatchEvent(new CustomEvent('ldNotificationDismiss'))
+```
+
 ## Clearing all notifications
 
+You can dismiss all notifications programmatically by dispatching the `ldNotificationClear` event on the `window`:
+
+```js
+dispatchEvent(new CustomEvent('ldNotificationClear'))
+```
+
 ## Examples
 
 The examples below illustrate how you can trigger notifications using different parameters:
@@ -55,7 +104,7 @@ The examples below illustrate how you can trigger notifications using different
 }
 </style>
 
-<ld-notification></ld-notification>
+<ld-notification placement="bottom"></ld-notification>
 
 <form class="notification-form" id="form-info">
   <ld-label>
@@ -185,6 +234,13 @@ formClear.addEventListener('submit', ev => {
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property    | Attribute   | Description                               | Type                | Default |
+| ----------- | ----------- | ----------------------------------------- | ------------------- | ------- |
+| `placement` | `placement` | Notification placement within the screen. | `"bottom" \| "top"` | `'top'` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*