chore(components, styles): remove standard html banners (#6078)

## 📄 Description

This PR remove the HTML banner examples and integrated the banner styles
to the `post-banner` web component.

---

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

Author: alizedebray

.changeset/evil-kings-beam.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated the `post-banner` icons.

.changeset/some-snakes-repeat.md

@@ -0,0 +1,22 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': major
+---
+
+Removed the Standard HTML Banner component (`.banner`, `.banner-*`) in favor of the `post-banner` web component.
+
+BEFORE:
+
+```html
+<div role="alert" class="banner banner-success">
+  <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
+</div>
+```
+
+AFTER:
+
+```html
+<post-banner type="success">
+  <p>This is the content of the banner. It helps to draw attention to critical messages.</p>
+</post-banner>
+```

packages/components/cypress/e2e/banner.cy.ts

@@ -1,9 +1,9 @@
-const BANNER_ID = '8fd36823-966e-46a8-8432-a4439f6e208f';
+const BANNER_ID = '105e67d8-31e9-4d0b-87ff-685aba31fd4c';
 
 describe('banner', () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.getComponent('post-banner', BANNER_ID);
+      cy.getComponent('banner', BANNER_ID);
     });
 
     it('should render', () => {
@@ -17,7 +17,7 @@ describe('banner', () => {
 
   describe('dismissible', () => {
     beforeEach(() => {
-      cy.getComponent('post-banner', BANNER_ID, 'dismissible');
+      cy.getComponent('banner', BANNER_ID, 'dismissible');
     });
 
     it('should have a close button', () => {
@@ -33,7 +33,7 @@ describe('banner', () => {
 
 describe('Accessibility', () => {
   it('Has no detectable a11y violations on load for all variants', () => {
-    cy.getSnapshots('post-banner');
+    cy.getSnapshots('banner');
     cy.checkA11y('#root-inner');
   });
 });

packages/components/src/components/post-banner/post-banner.scss

@@ -1,15 +1,96 @@
-@use '@swisspost/design-system-styles/components/banner';
 @use '@swisspost/design-system-styles/components/close';
-@use '@swisspost/design-system-styles/core' as post;
+
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/mixins/icons';
+@use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/mixins/color-scheme';
+
+@use '@swisspost/design-system-styles/variables/components/notification';
+@use '@swisspost/design-system-styles/variables/spacing';
+
+@use '@swisspost/design-system-styles/tokens/components';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: components.$post-banner;
 
 :host {
-  display: block;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  grid-auto-flow: row;
+  row-gap: tokens.get('banner-content-gap');
+  min-height: calc(#{tokens.get('banner-icon-size')} + (2 * #{tokens.get('banner-padding')}));
+  padding: tokens.get('banner-padding');
+  padding-inline-start: calc(#{tokens.get('banner-padding')} + #{tokens.get('banner-icon-size')} + #{tokens.get('banner-gap')});
+  color: var(--post-current-fg);
+  border-style: tokens.get('banner-border-style');
+  border-width: tokens.get('banner-border-width');
+  border-radius: tokens.get('banner-border-radius');
+  box-shadow: tokens.get('banner-elevation');
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    height: tokens.get('banner-icon-size');
+    width: tokens.get('banner-icon-size');
+    inset-block-start: tokens.get('banner-padding');
+    inset-inline-start: tokens.get('banner-padding');
+  }
 
   ::slotted(*) {
-    margin: 0 !important;
+    margin-block: 0 !important;
   }
 }
 
-.visually-hidden {
-  @include post.visuallyhidden();
+@each $name in 'info', 'success', 'warning', 'error' {
+  :host([type="#{$name}"]) {
+    background-color: tokens.get('banner-#{$name}-bg');
+    border-color: tokens.get('banner-#{$name}-border-color');
+    @include color-scheme.set(tokens.get('post-banner-#{$name}-bg-scheme'));
+
+    &::before {
+      background-image: var(--post-signal-icon-#{$name});
+    }
+  }
+}
+
+:host([dismissible]) {
+  pointer-events: auto;
+  position: relative;
+
+  > .btn-close {
+    position: absolute;
+    inset-block-start: tokens.get('banner-padding');
+    inset-inline-end: tokens.get('banner-padding');
+
+    > span {
+      @include utilities.visuallyhidden();
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  align-items: center;
+  margin-block-start: tokens.get('banner-actions-margin-top');
+  gap: tokens.get('banner-actions-gap');
+
+  @include media.only(mobile) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+@include utilities.high-contrast-mode {
+  :host {
+    border-color: CanvasText;
+
+    &::before {
+      color: CanvasText;
+    }
+  }
 }

packages/components/src/components/post-banner/post-banner.tsx

@@ -14,7 +14,6 @@ import { version } from '@root/package.json';
 import { fadeOut } from '@/animations';
 import { checkRequiredAndType, checkEmptyOrOneOf } from '@/utils';
 import { BANNER_TYPES, BannerType } from './banner-types';
-import { nanoid } from 'nanoid';
 
 /**
  * @slot heading - Slot for placing custom content within the banner's heading.
@@ -28,18 +27,16 @@ import { nanoid } from 'nanoid';
   shadow: true,
 })
 export class PostBanner {
+  private mutationObserver = new MutationObserver(this.checkContent.bind(this));
+
   @Element() host: HTMLPostBannerElement;
 
-  @State() bannerId = `p${nanoid(6)}`;
-  @State() classes: string;
-  @State() hasActions: boolean;
-  @State() hasHeading: boolean;
-  @State() onDismissButtonClick = () => this.dismiss();
+  @State() hasActions = false;
 
   /**
    * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
    */
-  @Prop() readonly dismissible: boolean = false;
+  @Prop({reflect: true}) readonly dismissible: boolean = false;
 
   @Watch('dismissible')
   checkDismissible() {
@@ -58,7 +55,7 @@ export class PostBanner {
   /**
    * The type of the banner.
    */
-  @Prop() readonly type: BannerType = 'info';
+  @Prop({reflect: true}) readonly type: BannerType = 'info';
 
   @Watch('type')
   validateType() {
@@ -71,18 +68,18 @@ export class PostBanner {
    */
   @Event() postDismissed: EventEmitter<void>;
 
+  connectedCallback() {
+    this.mutationObserver.observe(this.host, { childList: true });
+  }
+
   componentDidLoad() {
+    this.checkContent();
     this.checkDismissible();
     this.validateType();
   }
 
-  componentWillRender() {
-    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
-    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
-
-    this.classes = `banner ${this.type ? 'banner-' + this.type : ''}`;
-    if (this.dismissible) this.classes += ' banner-dismissible';
-    if (this.hasActions) this.classes += ' banner-action';
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
   }
 
   /**
@@ -98,36 +95,29 @@ export class PostBanner {
     this.postDismissed.emit();
   }
 
-  render() {
-    const defaultBannerContent = [
-      this.hasHeading && (
-        <div key={`${this.bannerId}-heading`} class="banner-heading">
-          <slot name="heading" />
-        </div>
-      ),
-      <slot key={`${this.bannerId}-message`} />,
-    ];
-
-    const actionBannerContent = [
-      <div key={`${this.bannerId}-content`} class="banner-content">
-        {defaultBannerContent}
-      </div>,
-      <div key={`${this.bannerId}-buttons`} class="banner-buttons">
-        <slot name="actions" />
-      </div>,
-    ];
+  private checkContent() {
+    this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
+  }
 
+  render() {
     return (
-      <Host data-version={version}>
-        <div role="alert" class={this.classes} part={this.classes}>
-          {this.dismissible && (
-            <button class="btn-close" onClick={this.onDismissButtonClick}>
-              <span class="visually-hidden">{this.dismissLabel}</span>
-            </button>
-          )}
-
-          {this.hasActions ? actionBannerContent : defaultBannerContent}
-        </div>
+      <Host data-version={version} role="alert">
+        {this.dismissible && (
+          <button class="btn-close" onClick={() => this.dismiss()}>
+            <span>{this.dismissLabel}</span>
+          </button>
+        )}
+
+
+        <slot name="heading" />
+
+        <slot />
+
+        {this.hasActions && (
+          <div class="actions">
+            <slot name="actions" />
+          </div>
+        )}
       </Host>
     );
   }

packages/documentation/cypress/snapshots/components/banner.snapshot.ts

@@ -1,13 +1,7 @@
 describe('Banner', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--banner');
-    cy.get('.banner post-icon', { timeout: 30000 }).should('be.visible');
-    cy.percySnapshot('Banners (Standard HTML)', { widths: [320, 1440] });
-  });
-
-  it('post-banner', () => {
-    cy.visit('/iframe.html?id=snapshots--post-banner');
     cy.get('post-icon', { timeout: 30000 }).should('be.visible');
-    cy.percySnapshot('Banners (Web Component)', { widths: [320, 1440] });
+    cy.percySnapshot('Banners', { widths: [320, 1440] });
   });
 });