adjust toast notification to look more proper as a one liner

Author: nielslyngsoe

packages/uui-toast-notification-layout/lib/uui-toast-notification-layout.element.ts

@@ -15,7 +15,13 @@ export class UUIToastNotificationLayoutElement extends LitElement {
   static styles = [
     UUITextStyles,
     css`
-      #message > h5 {
+      #message {
+        margin-bottom: calc(var(--uui-size-space-1) * -1);
+      }
+      #message::after {
+        content: '';
+        display: block;
+        clear: both;
       }
       #actions {
         /*
@@ -26,15 +32,9 @@ export class UUIToastNotificationLayoutElement extends LitElement {
         display: block;
         float: right;
 
-        margin-top: var(--uui-size-space-3);
+        margin-top: var(--uui-size-space-4);
         margin-bottom: calc(var(--uui-size-space-2) * -1);
       }
-
-      #message::after {
-        content: '';
-        display: block;
-        clear: both;
-      }
     `,
   ];
 
@@ -59,7 +59,8 @@ export class UUIToastNotificationLayoutElement extends LitElement {
     return html`
       <div id="message" class="uui-text">
         <h5
-          style=${this._headlineSlotHasContent || this.headline !== null
+          style=${this._headlineSlotHasContent ||
+          (this.headline && this.headline !== '')
             ? ''
             : 'display: none'}>
           ${this.headline}

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -84,10 +84,9 @@ export class UUIToastNotificationElement extends LitElement {
 
       #close {
         float: right;
-        margin-top: -7px;
+        margin-top: -6px;
         margin-left: var(--uui-size-space-1);
-        margin-bottom: calc(var(--uui-size-space-2) * -1);
-        margin-bottom: var(--uui-size-space-1);
+        margin-bottom: -4px;
       }
 
       #close > uui-button {

packages/uui-toast-notification/lib/uui-toast-notification.story.ts

@@ -42,14 +42,15 @@ AAAOverview.parameters = {
 export const ErrorStyle: Story = props => html`<uui-toast-notification
   .open=${props.open}
   .look=${props.look}>
-  <uui-toast-notification-layout headline="Document could not be published!">
-    An error occurred while attempting to contact the server. Please check your
-    internet connection.
+  <uui-toast-notification-layout .headline=${props.headline}>
+    ${props.message}
     <uui-button slot="actions" look="danger">Retry</uui-button>
   </uui-toast-notification-layout>
 </uui-toast-notification>`;
 ErrorStyle.args = {
   headline: 'Document could not be published!',
+  message:
+    'An error occurred while attempting to contact the server. Please check your internet connection.',
   look: 'danger',
 };
 ErrorStyle.parameters = {
@@ -70,12 +71,13 @@ export const PositiveStyle: Story = props => html`<uui-toast-notification
   .open=${props.open}
   .look=${props.look}>
   <uui-toast-notification-layout .headline=${props.headline}>
-    <p>This document is now saved and published.</p>
+    ${props.message}
     <uui-button slot="actions" .look=${props.look}>View in browser</uui-button>
   </uui-toast-notification-layout>
 </uui-toast-notification>`;
 PositiveStyle.args = {
   headline: 'Document was published',
+  message: 'This document is now saved and published.',
   look: 'positive',
 };
 PositiveStyle.parameters = {