fix(styles): clean up alert and toast styles

.changeset/clever-kangaroos-switch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated close button styles.

.changeset/purple-sloths-bow.md

@@ -0,0 +1,10 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated alert and toast styles.
+
+Deprecated classes for alerts/notifications:
+- alert-error becomes alert-danger
+- alert-notification becomes alert-primary
+- toast-notification becomes toast-primary

.changeset/thirty-countries-agree.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-demo': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Added a gray notification variant for cookie banners.

packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html

@@ -3,6 +3,30 @@ <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <p>
+    The following two color variants are deprecated and will be removed in the next major version
+    of the styles package:
+  </p>
+  <ul>
+    <li>
+      <code>alert-error</code>
+      becomes
+      <code>alert-danger</code>
+    </li>
+    <li>
+      <code>alert-notification</code>
+      becomes
+      <code>alert-primary</code>
+    </li>
+    <li>
+      <code>toast-notification</code>
+      becomes
+      <code>toast-primary</code>
+    </li>
+  </ul>
+</div>
+
 <section class="continous-text">
   <h3>Usage</h3>
   <div class="alert-container mt-5">
@@ -37,24 +61,6 @@ <h1>Toast / Small notification bar</h1>
   content. It should always close the toast when you click on it.
 </p>
 <section>
-  <div class="alert alert-warning">
-    <p>
-      The following two color variants are deprecated and will be removed in the next major version
-      of the styles package:
-    </p>
-    <ul>
-      <li>
-        <code>alert-error</code>
-        becomes
-        <code>alert-danger</code>
-      </li>
-      <li>
-        <code>alert-notification</code>
-        becomes
-        <code>alert-primary</code>
-      </li>
-    </ul>
-  </div>
   <app-toast-demo></app-toast-demo>
 </section>
 <code

packages/demo/src/app/bootstrap/components/alert/alert-demo/alert-demo.component.html

@@ -1,28 +1,20 @@
 <div class="alert-container">
   <div class="alert alert-primary" role="alert">
-    <h4 class="alert-heading">alert-primary (Same as notification)</h4>
+    <h4 class="alert-heading">alert-primary</h4>
     <p>A simple primary alert—check it out!</p>
   </div>
-  <div class="alert alert-notification" role="alert">
-    <h4 class="alert-heading">alert-notification (Same as primary)</h4>
-    <p>A simple notification alert—check it out!</p>
-  </div>
   <div class="alert alert-success" role="alert">
     <h4 class="alert-heading">alert-success</h4>
     <p>A simple success alert—check it out!</p>
   </div>
   <div class="alert alert-danger" role="alert">
-    <h4 class="alert-heading">alert-danger (Same as error)</h4>
+    <h4 class="alert-heading">alert-danger</h4>
     <p>
       A simple danger alert with
       <a href="#" class="alert-link">an example link</a>
       . Give it a click if you like.
     </p>
   </div>
-  <div class="alert alert-error" role="alert">
-    <h4 class="alert-heading">alert-error (Same as danger)</h4>
-    <p>A simple error alert—check it out!</p>
-  </div>
   <div class="alert alert-warning" role="alert">
     <h4 class="alert-heading">alert-warning</h4>
     <p>A simple warning alert—check it out!</p>
@@ -61,6 +53,17 @@ <h4 class="alert-heading">Example for dismissible alert</h4>
   <div class="alert alert-primary" role="alert">
     <p>Example with only one line of text.</p>
   </div>
+  <div class="alert alert-gray alert-action alert-dismissible" role="alert">
+    <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
+    <div class="alert-content">
+      <p>We use cookies to improve your user experience. Depending on <a href="#">your settings</a>, we also use cookies for analysis purposes and to provide you with personalized content and relevant advertising. You can find more information in our <a href="#">data protection declaration</a>.</p>
+    </div>
+    <div class="alert-buttons">
+      <button class="btn btn-primary btn-animated">
+        <span>Allow cookies</span>
+      </button>
+    </div>
+  </div>
 </div>
 
 <h3>Fixed alert</h3>

packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html

@@ -1,84 +1,77 @@
 <div class="row">
-    <div class="col-md-6">
-<div class="toast-container" id="toast-container-left">
-      <div class="toast toast-notification">
-        <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-        <div class="toast-title">Notification Title</div>
-        <div class="toast-message">Notification Message</div>
-      </div>
+  <div class="col-md-6">
+    <div class="toast-container" id="toast-container-left">
       <div class="toast toast-primary">
         <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
         <div class="toast-title">Primary</div>
-        <div class="toast-message">Same as "Notification"</div>
+        <div class="toast-message">Notification message.</div>
       </div>
       <div class="toast toast-success">
         <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-        <div class="toast-title">Success example - You did it!</div>
+        <div class="toast-title">Success - You did it!</div>
       </div>
       <div class="toast toast-warning">
         <div class="toast-title">Warning Message</div>
         <div class="toast-message">Example without a button to close the toast.</div>
       </div>
       <div class="toast toast-danger">
         <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-        <div class="toast-title">Danger - same as error.</div>
+        <div class="toast-title">Danger - Something went wrong...</div>
       </div>
-      <div class="toast toast-error">
+      <div class="toast toast-info">
         <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-        <div class="toast-title">Error - Same as Danger.</div>
+        <div class="toast-title">Information</div>
+        <div class="toast-message">
+          Important information with a long text. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+        </div>
       </div>
     </div>
   </div>
   <div class="col-md-6">
     <div class="toast-container" id="toast-container-right">
-        <div class="toast toast-info">
-          <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-          <div class="toast-title">Information</div>
-          <div class="toast-message">
-            Important information with a long text. Lorem ipsum dolor sit
-            amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-          </div>
-        </div>
-        <div class="toast toast-info pi-1001">
-          <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-          <div class="toast-title">Special Icons (Black)</div>
-          <div class="toast-message">Example with custom icon. Only needs the corresponding "pi"-class added to the toast.</div>
-        </div>
-        <div class="toast toast-notification pi-2063-white">
-          <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-          <div class="toast-title">Special Icons (White)</div>
-          <div class="toast-message">Example with white icon. Icon needs to be extended in sass.</div>
-        </div>
-        <div class="toast toast-notification no-icon">
-          <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
-          <div class="toast-title">Example without an icon</div>
-          <div class="toast-message">Add class "no-icon" to the toast.</div>
-        </div>
+      <div class="toast toast-info pi-1001">
+        <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
+        <div class="toast-title">Special Icons (Black)</div>
+        <div class="toast-message">Example with custom icon. Only needs the corresponding "pi"-class added to the toast.</div>
+      </div>
+      <div class="toast toast-primary pi-2063-white">
+        <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
+        <div class="toast-title">Special Icons (White)</div>
+        <div class="toast-message">Example with white icon. Icon needs to be extended in sass.</div>
       </div>
+      <div class="toast toast-primary no-icon">
+        <button class="toast-close-button" aria-label="Close"><span aria-hidden="true"></span></button>
+        <div class="toast-title">Example without an icon</div>
+        <div class="toast-message">Add class "no-icon" to the toast.</div>
+      </div>
+    </div>
   </div>
 </div>
 
 <div class="heading my-3">
-<h4>Example for ngx-Toaster</h4>
-<a href="https://www.npmjs.com/package/ngx-toastr" target="_blank" rel="noopener"
-     class="btn btn-sm btn-primary">Ngx Bootstap Doc</a>
+  <h4>Examples of ngx-toastr</h4>
+  <a href="https://www.npmjs.com/package/ngx-toastr" target="_blank" rel="noopener"
+     class="btn btn-sm btn-primary me-2">ngx-toastr Documentation</a>
+  <a href="https://ngx-toastr.vercel.app/" target="_blank" rel="noopener"
+     class="btn btn-sm btn-primary">ngx-toastr Demo</a>
 </div>
 <p class="mb-3 mt-5">Screen reader output is a little better if the close button is disabled (alert messages can still be closed by clicking on them). Pass the following option to disable the close button:</p>
 <code class="d-block mt-3 mb-5" [highlight]="JSON.stringify(toastOptions, null, 2)" [languages]="['typescript']"></code>
 <section>
-<button class="btn btn-secondary btn-animated" (click)="showError()">
-  <span>Show Toaster error</span>
-</button>
+  <button class="btn btn-secondary btn-animated" (click)="showError()">
+    <span>Show Danger Toast</span>
+  </button>
 
-<button class="btn btn-secondary btn-animated ms-3" (click)="showSuccess()">
-  <span>Show Toaster success</span>
-</button>
+  <button class="btn btn-secondary btn-animated ms-3" (click)="showSuccess()">
+    <span>Show Success Toast</span>
+  </button>
 
-<button class="btn btn-secondary btn-animated ms-3" (click)="showInfo()">
-  <span>Show Toaster Info</span>
-</button>
+  <button class="btn btn-secondary btn-animated ms-3" (click)="showInfo()">
+    <span>Show Info Toast</span>
+  </button>
 
-<button class="btn  btn-secondary btn-animated ms-3" (click)="showWarning()">
-  <span>Show Toaster Warning</span>
-</button>
+  <button class="btn  btn-secondary btn-animated ms-3" (click)="showWarning()">
+    <span>Show Warning Toast</span>
+  </button>
 </section>

packages/demo/src/app/home/home.component.html

@@ -44,7 +44,7 @@ <h2 class="font-curve-large">Design System</h2>
     </p>
     <p>
       <span>ngx-toastr:</span>
-      <span>{{ getVersion(ngxToasterVersion) }}</span>
+      <span>{{ getVersion(ngxToastrVersion) }}</span>
     </p>
   </div>
 </ng-template>

packages/demo/src/app/home/home.component.ts

@@ -25,7 +25,7 @@ export class HomeComponent {
   public angularVersion: string = environment.ANGULAR_VERSION;
   public bootstrapVersion: string = environment.BOOTSTRAP_VERSION;
   public ngBootstrapVersion: string = environment.NG_BOOTSTRAP_VERSION;
-  public ngxToasterVersion: string = environment.NGX_TOASTER;
+  public ngxToastrVersion: string = environment.NGX_TOASTR;
   public isIE11 = false;
   public isMigratingIntranet = this.getLocaleStorage(this.migrationTypeIntranetKey) ?? false;
   public isMigratingAngular = this.getLocaleStorage(this.migrationTypeAngularKey) ?? true;
@@ -120,7 +120,7 @@ export class HomeComponent {
     this.isIE11 = window.navigator.userAgent.includes('Trident/7.0');
 
     const localStorageCheckboxes: Object = this.getLocaleStorage(this.migrationAccordionGroupedCheckboxesKey) ?? {};
-    
+
     for (const groupKey in this.migrationAccordionGroupedCheckboxes) {
       const checkboxGroup = this.migrationAccordionGroupedCheckboxes[groupKey];
       const storageGroup = localStorageCheckboxes[groupKey] ?? {};

packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html

@@ -3,6 +3,25 @@ <h1 class="bold font-curve-large">Alerts</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <p>
+    The following two color variants are deprecated and will be removed in the next major version
+    of the styles package:
+  </p>
+  <ul>
+    <li>
+      <code>alert-error</code>
+      becomes
+      <code>alert-danger</code>
+    </li>
+    <li>
+      <code>alert-notification</code>
+      becomes
+      <code>alert-primary</code>
+    </li>
+  </ul>
+</div>
+
 <p>For more information about available alerts/notifications, check the <a [routerLink]="'../../bootstrap-samples/alert'">Alert/Notification page under the "Bootstrap" Menu</a>.</p>
 <section>
   <app-ngb-alert-demo (setArray)="setArrayTemplate($event)"></app-ngb-alert-demo>

packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.ts

@@ -36,26 +36,15 @@ export class NgbAlertDemoComponent {
     }, {
       id: 4,
       type: 'danger',
-      title: 'Danger (same as error)',
+      title: 'Danger',
       message: 'This is a danger alert',
       class: ''
-    }, {
-      id: 5,
-      type: 'error',
-      title: 'This is an error alert (same as danger)',
-      class: ''
     },{
       id: 6,
       type: 'primary',
-      title: 'Primary (same as notification)',
+      title: 'Primary',
       message: 'This is a primary alert',
       class: ''
-    }, {
-      id: 7,
-      type: 'notification',
-      title: 'Notification (same as primary)',
-      message: 'This is a notification alert',
-      class: ''
     }, {
       id: 8,
       type: 'primary',

packages/demo/src/environments/environment.prod.ts

@@ -5,5 +5,5 @@ export const environment = {
   VERSION: packageJson.version,
   ANGULAR_VERSION: packageJson.dependencies["@angular/core"],
   NG_BOOTSTRAP_VERSION: packageJson.dependencies["@ng-bootstrap/ng-bootstrap"],
-  NGX_TOASTER: packageJson.dependencies["ngx-toastr"],
+  NGX_TOASTR: packageJson.dependencies["ngx-toastr"],
 };

packages/demo/src/environments/environment.ts

@@ -10,7 +10,7 @@ export const environment = {
   ANGULAR_VERSION: packageJson.dependencies['@angular/core'],
   BOOTSTRAP_VERSION: packageJson.dependencies.bootstrap,
   NG_BOOTSTRAP_VERSION: packageJson.dependencies['@ng-bootstrap/ng-bootstrap'],
-  NGX_TOASTER: packageJson.dependencies['ngx-toastr'],
+  NGX_TOASTR: packageJson.dependencies['ngx-toastr'],
 };
 
 /*

packages/documentation-v7/.storybook/styles/preview.scss

@@ -123,17 +123,29 @@
 
     &.alert-sm {
       padding: 0.25em 1em 0.25em 3em;
-      background-size: 1.5em;
-      background-position: 0.75em center;
       font-size: 0.9em;
       font-weight: 400;
+
+      &::before {
+        height: 1.5em;
+        width: 1.5em;
+        left: 0.75em;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
 
     &.alert-md {
       padding: 1em 2em 1em 4em;
-      background-size: 2em;
-      background-position: 1em center;
       font-size: inherit;
+
+      &::before {
+        height: 2em;
+        width: 2em;
+        left: 1em;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
   }
 }