✨ feat: add a11y for toast and improve spinner circle (#1574)

* chore: add a11y for toast and improve spinner circle

* chore: fix e2e lib

* chore: add snackbar a11y features

* chore: adjust gap and aria-hidden to icon

* fix(dropdown): hide closed menu list

* update base images

* chore: adjust notifications

* update base images

* update base images

* chore: fix sass issue

* update base images

* update base images

---------

Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

.changeset/cyan-cars-shout.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**toast**: improve a11y with animation, icon and size options

.changeset/rare-mayflies-turn.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**spinner**: add white options for the circle spinner

.changeset/selfish-taxis-smoke.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**snackbar**: add a11y features

.changeset/strong-cougars-listen.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**notification**: add new light variant and adjust with icons for a better a11y experience

.changeset/tricky-trees-run.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**dropdown**: hide collapsed menu list with the options when not open

packages/core/src/components.d.ts

@@ -2050,13 +2050,23 @@ export namespace Components {
         "interface": BalProps.BalNavbarInterface;
     }
     interface BalNotices {
+        "animated": boolean;
+        "container": 'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | '' | undefined;
         "interface": 'toast' | 'snackbar';
     }
     interface BalNotification {
         /**
           * Defines the color of the element Color type primary is deprecated, please use info instead.
          */
         "color": BalProps.BalNotificationColor;
+        /**
+          * If `true` the notifications are presented in a light variant
+         */
+        "light": boolean;
+        /**
+          * If `true` there will be no icon provided
+         */
+        "noIcon": boolean;
     }
     interface BalNumberInput {
         /**
@@ -3473,6 +3483,10 @@ export namespace Components {
         "value"?: string;
     }
     interface BalToast {
+        /**
+          * If `true` the toast has a cross icon to close the toast.
+         */
+        "closable": boolean;
         /**
           * Closes this toast
          */
@@ -7191,13 +7205,23 @@ declare namespace LocalJSX {
         "interface"?: BalProps.BalNavbarInterface;
     }
     interface BalNotices {
+        "animated"?: boolean;
+        "container"?: 'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | '' | undefined;
         "interface"?: 'toast' | 'snackbar';
     }
     interface BalNotification {
         /**
           * Defines the color of the element Color type primary is deprecated, please use info instead.
          */
         "color"?: BalProps.BalNotificationColor;
+        /**
+          * If `true` the notifications are presented in a light variant
+         */
+        "light"?: boolean;
+        /**
+          * If `true` there will be no icon provided
+         */
+        "noIcon"?: boolean;
     }
     interface BalNumberInput {
         /**
@@ -8580,6 +8604,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface BalToast {
+        /**
+          * If `true` the toast has a cross icon to close the toast.
+         */
+        "closable"?: boolean;
         "closeHandler"?: () => void;
         /**
           * The theme type of the toast. Color type primary is deprecated, please use info instead.

packages/core/src/components/bal-dropdown/bal-dropdown.sass

@@ -108,7 +108,7 @@
 // --------------------------------------------------
 
 .bal-dropdown__list
-  display: block
+  display: none
   visibility: hidden
   opacity: 0
   min-width: 100%
@@ -122,6 +122,7 @@
   box-shadow: var(--bal-shadow-normal)
   z-index: var(--bal-z-index-popup)
   &--expanded
+    display: block
     visibility: visible
     opacity: 1
 

packages/core/src/components/bal-notices/bal-notices.sass

@@ -5,32 +5,69 @@
   bottom: 0 !important
   left: 0 !important
   right: 0 !important
-  padding: 1rem !important
+  padding-top: 1rem !important
+  padding-bottom: 1rem !important
   margin: 0 !important
   overflow: hidden !important
   z-index: var(--bal-z-index-toast) !important
   pointer-events: none !important
   flex-direction: column !important
 
-  .container
-    width: 100% !important
+.bal-notices:not(.bal-notices--container)
+  padding-left: 1rem !important
+  padding-right: 1rem !important
 
-  &.has-snackbar
+.bal-notices__inner
+  display: flex
+  gap: 0.5rem
+
+.bal-notices__inner--snackbar
+  height: 100vh
+  justify-content: flex-end
+  align-items: flex-end
+  flex-direction: column
+  margin: 0.5em
+
+  .bal-snackbar
     justify-content: flex-end
-    align-items: flex-end
-    flex-direction: column-reverse
-    margin: 0.5em
-
-    .bal-snackbar
-      justify-content: flex-end
-      align-self: flex-end
-      pointer-events: auto !important
-
-  &.has-toast
-    justify-content: flex-start
-    align-items: center
-    margin: 0.5em
-
-    .bal-toast
-      justify-content: center
-      align-self: center
+    align-self: flex-end
+    pointer-events: auto !important
+
+.bal-notices__inner--toast
+  flex-direction: column
+  justify-content: flex-start
+  align-items: center
+  margin: 0.5em
+
+  .bal-toast
+    justify-content: center
+    align-self: center
+
+.bal-notices__inner.container
+  --bal-toast-width: 100%
+  --bal-toast-width-tablet: 100%
+  --bal-toast-width-desktop: 100%
+
+.bal-notices--animated
+  .bal-toast
+    animation-duration: 0.3s
+    animation-fill-mode: both
+    animation-name: slideInDown
+  .bal-snackbar
+    animation-duration: 0.3s
+    animation-fill-mode: both
+    animation-name: slideInUp
+
+@keyframes slideInDown
+  from
+    transform: translate3d(0, -100%, 0)
+    visibility: visible
+  to
+    transform: translate3d(0, 0, 0)
+
+@keyframes slideInUp
+  from
+    transform: translate3d(0, 100%, 0)
+    visibility: visible
+  to
+    transform: translate3d(0, 0, 0)

packages/core/src/components/bal-notices/bal-notices.tsx

@@ -1,25 +1,51 @@
 import { Component, Host, h, Prop } from '@stencil/core'
+import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-notices',
   styleUrl: 'bal-notices.sass',
 })
 export class Notices {
+  /**
+   * @internal Tells if the notice is animated
+   */
+  @Prop() animated = true
+
   /**
    * @internal The interface tells the notice where to show the notice.
    */
   @Prop() interface: 'toast' | 'snackbar' = 'toast'
 
+  /**
+   * @internal Sets the content content width with the regular container classes
+   */
+  @Prop() container: 'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | '' | undefined = undefined
+
   render() {
+    const block = BEM.block('notices')
+    const innerEl = block.element('inner')
+
+    const hasContainer = this.interface === 'toast' && this.container !== undefined
+
     return (
       <Host
         class={{
           'bal-app': true,
-          'bal-notices': true,
-          [`has-${this.interface}`]: true,
+          ...block.class(),
+          ...block.modifier('container').class(hasContainer),
+          ...block.modifier('animated').class(this.animated),
         }}
       >
-        <slot></slot>
+        <div
+          class={{
+            ...innerEl.class(),
+            ...innerEl.modifier(this.interface).class(),
+            container: hasContainer,
+            [`is-${this.container}`]: hasContainer && this.container !== '',
+          }}
+        >
+          <slot></slot>
+        </div>
       </Host>
     )
   }