refactor(disable-animation): migrate disable-animation mechanism

.storybook/preview.ts

@@ -84,4 +84,5 @@ export const decorators: Decorator[] = [
       ? html`<div style="padding: 2rem;min-height: 100vh">${story()}</div>`
       : story(),
   withBackgroundDecorator,
+  (story) => (isChromatic() ? html`<div class="sbb-disable-animation">${story()}</div>` : story()),
 ];

src/components/accordion/accordion.e2e.ts

@@ -19,15 +19,15 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     element = await fixture(
       html`
         <sbb-accordion title-level="4">
-          <sbb-expansion-panel id="panel-1" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-1" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-1">Header 1</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
           </sbb-expansion-panel>
-          <sbb-expansion-panel id="panel-2" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-2" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-2">Header 2</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
           </sbb-expansion-panel>
-          <sbb-expansion-panel id="panel-3" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-3" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-3">Header 3</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 3</sbb-expansion-panel-content>
           </sbb-expansion-panel>

src/components/accordion/accordion.stories.ts

@@ -33,15 +33,6 @@ const multi: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Accordion',
-  },
-};
-
 const titleLevel: InputType = {
   control: {
     type: 'inline-radio',
@@ -119,7 +110,6 @@ const contentText: InputType = {
 const defaultArgTypes: ArgTypes = {
   numberOfPanels,
   multi,
-  'disable-animation': disableAnimation,
   'title-level': titleLevel,
   color,
   expanded,
@@ -133,7 +123,6 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   numberOfPanels: 3,
   multi: false,
-  'disable-animation': false,
   'title-level': titleLevel.options![2],
   color: color.options![0],
   expanded: false,
@@ -226,12 +215,6 @@ export const Multi: StoryObj = {
   args: { ...defaultArgs, multi: true },
 };
 
-export const NoAnimation: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
-};
-
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {

src/components/accordion/accordion.ts

@@ -32,13 +32,6 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _titleLevel: SbbTitleLevel | null = null;
 
-  /**
-   * Whether the animation should be disabled.
-   * @controls SbbExpansionPanelElement.disableAnimation
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** Whether more than one sbb-expansion-panel can be open at the same time. */
   @property({ type: Boolean })
   public set multi(value: boolean) {
@@ -98,7 +91,6 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     this._expansionPanels.forEach(
       (panel: SbbExpansionPanelElement, index: number, array: SbbExpansionPanelElement[]) => {
         panel.titleLevel = this.titleLevel;
-        panel.disableAnimation = this.disableAnimation;
         panel.toggleAttribute('data-accordion-first', index === 0);
         panel.toggleAttribute('data-accordion-last', index === array.length - 1);
       },

src/components/accordion/readme.md

@@ -43,11 +43,10 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                    | Default | Description                                                                 |
-| ------------------ | ------------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
-| `titleLevel`       | `title-level`       | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
-| `disableAnimation` | `disable-animation` | public  | `boolean`               | `false` | Whether the animation should be disabled.                                   |
-| `multi`            | `multi`             | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
+| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                 |
+| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
+| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
+| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
 
 ## Slots
 

src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js

@@ -8,6 +8,7 @@ snapshots["sbb-alert-group should render Dom"] =
   role="status"
 >
   <sbb-alert
+    animation="open"
     data-state="opening"
     href="https://www.sbb.ch"
     size="m"
@@ -113,3 +114,24 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] =
 `;
 /* end snapshot sbb-alert-group should render A11y tree Firefox */
 
+snapshots["sbb-alert-group should render with slots"] = 
+`<sbb-alert-group
+  accessibility-title-level="3"
+  role="status"
+>
+  <span slot="accessibility-title">
+    Interruptions
+  </span>
+  <sbb-alert
+    animation="open"
+    data-state="opening"
+    href="https://www.sbb.ch"
+    size="m"
+    title-content="Interruption between Genève and Lausanne"
+  >
+    The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
+  </sbb-alert>
+</sbb-alert-group>
+`;
+/* end snapshot sbb-alert-group should render with slots */
+

src/components/alert/alert-group/alert-group.spec.ts

@@ -49,18 +49,7 @@ describe(`sbb-alert-group`, () => {
       </sbb-alert-group>
     `);
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-alert-group accessibility-title-level='3' role='status'>
-          <span slot="accessibility-title">
-            Interruptions
-          </span>
-          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m" data-state="opening">
-            The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
-          </sbb-alert>
-        </sbb-alert-group>
-      `,
-    );
+    await expect(root).dom.to.be.equalSnapshot();
     expect(root).shadowDom.to.be.equal(
       `
         <div class="sbb-alert-group">

src/components/alert/alert/alert.scss

@@ -19,7 +19,10 @@ $open-anim-opacity-to: 1;
   --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
-  --sbb-alert-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-alert-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-6x)
+  );
 
   @include sbb.mq($from: medium) {
     --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
@@ -35,9 +38,8 @@ $open-anim-opacity-to: 1;
   display: block;
 }
 
-:host([disable-animation]) {
-  // To avoid flickering, we need 0 instead of 0.1ms here.
-  --sbb-alert-animation-duration: 0ms;
+:host([animation='none']) {
+  @include sbb.disable-animation;
 }
 
 :host([size='s']) {

src/components/alert/alert/alert.spec.ts

@@ -12,12 +12,12 @@ describe(`sbb-alert`, () => {
 
   it('should render default properties', async () => {
     element = await fixture(
-      html`<sbb-alert disable-animation title-content="Interruption">Alert content</sbb-alert>`,
+      html`<sbb-alert title-content="Interruption">Alert content</sbb-alert>`,
     );
 
     expect(element).dom.to.be.equal(
       `
-        <sbb-alert disable-animation title-content="Interruption" size="m" data-state="opening">
+        <sbb-alert title-content="Interruption" size="m" data-state="opening" animation="open">
            Alert content
         </sbb-alert>
       `,
@@ -32,7 +32,6 @@ describe(`sbb-alert`, () => {
         title-content="Interruption"
         title-level="2"
         size="l"
-        disable-animation
         icon-name="disruption"
         accessibility-label="label"
         href="https://www.sbb.ch"
@@ -49,12 +48,12 @@ describe(`sbb-alert`, () => {
           title-content="Interruption"
           title-level="2"
           size="l"
-          disable-animation
           icon-name="disruption"
           accessibility-label="label"
           href="https://www.sbb.ch"
           rel="noopener" target="_blank"
           link-content="Show much more"
+          animation="open"
           data-state="opening"
         >
            Alert content
@@ -66,7 +65,6 @@ describe(`sbb-alert`, () => {
 
   testA11yTreeSnapshot(html`
     <sbb-alert
-      disable-animation
       title-content="Interruption"
       href="https://www.sbb.ch"
       accessibility-label="test-a11y-label"

src/components/alert/alert/alert.stories.ts

@@ -66,12 +66,6 @@ const readonly: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const iconName: InputType = {
   control: {
     type: 'text',
@@ -136,27 +130,33 @@ const accessibilityLabel: InputType = {
   },
 };
 
+const animation: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['open', 'none'],
+};
+
 const defaultArgTypes: ArgTypes = {
   'title-content': titleContent,
   'title-level': titleLevel,
   size,
   readonly,
-  'disable-animation': disableAnimation,
   'icon-name': iconName,
   'content-slot-text': contentSlotText,
   'link-content': linkContent,
   href,
   target,
   rel,
   'accessibility-label': accessibilityLabel,
+  animation: animation,
 };
 
 const defaultArgs: Args = {
   'title-content': 'Interruption between Berne and Olten',
   'title-level': 3,
   size: size.options![0],
   readonly: false,
-  'disable-animation': false,
   'icon-name': 'info',
   'content-slot-text':
     "Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections.",
@@ -165,6 +165,7 @@ const defaultArgs: Args = {
   target: undefined,
   rel: undefined,
   'accessibility-label': undefined,
+  animation: animation.options![0],
 };
 
 export const defaultAlert: StoryObj = {
@@ -191,12 +192,6 @@ export const withoutCloseButton: StoryObj = {
   args: { ...defaultArgs, readonly: true },
 };
 
-export const withDisabledAnimation: StoryObj = {
-  render: Default,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
-};
-
 export const withoutLink: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,

src/components/alert/alert/alert.ts

@@ -46,9 +46,6 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   /** You can choose between `m` or `l` size. */
   @property({ reflect: true }) public size: 's' | 'm' | 'l' = 'm';
 
-  /** Whether the fade in animation should be disabled. */
-  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation = false;
-
   /**
    * Name of the icon which will be forward to the nested `sbb-icon`.
    * Choose the icons from https://icons.app.sbb.ch.
@@ -77,6 +74,9 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   /** This will be forwarded as aria-label to the relevant nested element. */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
+  /** The enabled animations. */
+  @property({ reflect: true }) public animation: 'open' | 'none' = 'open';
+
   /** The state of the alert. */
   private get _state(): SbbAlertState {
     return (this.getAttribute('data-state') as SbbAlertState | null) ?? 'closed';

src/components/alert/alert/readme.md

@@ -73,6 +73,11 @@ The description text is wrapped into an `<p>` element to guarantee the semantic
 
 Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and can have negative effects on screen readers.
 
+## Animation
+
+Set the `animation` property to manage which animations are enabled.
+As a base rule, opening animations should be active if an alert arrives after the initial page load.
+
 <!-- Auto Generated Below -->
 
 ## Properties
@@ -81,7 +86,6 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `readonly`           | `readonly`            | public  | `boolean`                               | `false`  | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user.                                                                 |
 | `size`               | `size`                | public  | `'s' \| 'm' \| 'l'`                     | `'m'`    | You can choose between `m` or `l` size.                                                                                                                          |
-| `disableAnimation`   | `disable-animation`   | public  | `boolean`                               | `false`  | Whether the fade in animation should be disabled.                                                                                                                |
 | `iconName`           | `icon-name`           | public  | `string \| undefined`                   | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. |
 | `titleContent`       | `title-content`       | public  | `string \| undefined`                   |          | Content of title.                                                                                                                                                |
 | `titleLevel`         | `title-level`         | public  | `SbbTitleLevel`                         | `'3'`    | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3.                                                                                  |
@@ -90,6 +94,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | `target`             | `target`              | public  | `LinkTargetType \| string \| undefined` |          | Where to display the linked URL.                                                                                                                                 |
 | `rel`                | `rel`                 | public  | `string \| undefined`                   |          | The relationship of the linked URL as space-separated link types.                                                                                                |
 | `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined`                   |          | This will be forwarded as aria-label to the relevant nested element.                                                                                             |
+| `animation`          | `animation`           | public  | `'open' \| 'none'`                      | `'open'` | The enabled animations.                                                                                                                                          |
 
 ## Methods
 

src/components/autocomplete/autocomplete.e2e.ts

@@ -17,7 +17,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
       html`
         <sbb-form-field>
           <input />
-          <sbb-autocomplete id="myAutocomplete" disable-animation>
+          <sbb-autocomplete id="myAutocomplete">
             <sbb-option id="option-1" value="1">1</sbb-option>
             <sbb-option id="option-2" value="2">2</sbb-option>
             <sbb-option id="option-3" value="3">3</sbb-option>

src/components/autocomplete/autocomplete.scss

@@ -56,10 +56,6 @@
   );
 }
 
-:host([disable-animation]) {
-  --sbb-options-panel-animation-duration: 0.1ms;
-}
-
 :host([preserve-icon-space]) {
   --sbb-option-icon-container-display: block;
 }