@oiz/stzh-components 4.6.0 → 4.7.0

package/dist/collection/components/stzh-appointments/stzh-appointments.js

@@ -251,7 +251,7 @@ export class StzhAppointments {
             "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
             "stzh-appointments--has-sort": this.showSort,
         };
-        return (h(Host, { key: '5047a8b34d1d9b1cc0019f617bdb65e370829dfe', "has-heading": headingUsed }, h("div", { key: '5ff934ffa9f5152d86e0b8684f8efca1ca30538a', class: classes }, h("div", { key: 'bd74515020eb2953b9d18e398ff2d036b0a13be1', class: "stzh-appointments__heading" }, h("slot", { key: '98ca7d2c91adcb08d808f5ecfdea2128b66e3084', name: "heading" })), h("div", { key: '5c42d5c742084fdd8d7cc5b0a60353c1dd7b525e', class: "stzh-appointments__wrapper" }, this.showCalendar && (h("div", { key: 'ac52f511b40b90c53c844154c09b789e4158e8f5', class: "stzh-appointments__calendar-wrapper" }, h("div", { key: 'd6cc5ef7fe65de66aa7231f58ed0c72f726fc9e2', class: "stzh-appointments__calendar-title-wrapper" }, h("div", { key: 'e6b059853b1699c05f2c576daee4af9724183a48', class: "stzh-appointments__calendar-title" }, h("stzh-icon", { key: '1517008cdfffcfdbe55621ce8b5562571cfb5ac2', class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { key: '89c7df8d3d8fd0d5fe0750c2b128f189305d3bf0', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { key: '9a0a82a30f7563852c5d3abc1ecfcf9eccf60931', class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { key: '448007c90836937a5b27d24e71b81c99789485cd', "hide-optional": true, ref: el => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { key: '2b1bdc25171b55bf1b5c9e9731412d4107ed59aa', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { key: '15d930cdae9a17bff15f19de06eb164c2ec01e4c', class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { key: 'f0ff51cf025de4cbb0b53b508999645e62120704', "hide-optional": true, ref: el => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate && (h("stzh-link", { key: 'a8e7367160d14f811804c2835044da49ad0825d5', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))))), h("div", { key: '27eae77bde74e137ab830312d585852baa9e0da6', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle && (h("div", { key: '5cd7dcca6c0c6386d2ae6bba23c58247cbfdc3bb', class: "stzh-appointments__appointments-title-wrapper" }, h("div", { key: 'a9d444ddb2b4e5d5f29c886a6f29b951dee46123', class: "stzh-appointments__appointments-title" }, h("stzh-icon", { key: 'f31f07f669a8eedbdf33695137673256f24fa87c', class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { key: 'b5990b6cd7255c02b008499fc717e2e4b29e2bb4', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort && (h("div", { key: 'a790e0fe7160bc14a81508ac8a3fb11dd7566649', class: "stzh-appointments__sort" }, h("stzh-dropdown", { key: '4cc29bfb7e1eacd24b738e8d8e152b61bee719ac', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))))), h("div", { key: '8108658e43aaaa0fc65944bd3cdf91e4519aa170', class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { key: '868392f929e999a31e26f920fe7c52799572ae15', class: "stzh-appointments__appointments-radiogroup", ref: el => (this.inputElement = el), legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map(appointment => (h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && (h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0")), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption))))), this.showMoreLink && (h("stzh-link", { key: '6840c224cc1572a1132a2ab63f85bde1fe352d1e', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems ? this.stepItems : this.moreItemsLeft)))))))));
+        return (h(Host, { key: 'f8b508a5a7ae9a34ea251303bc9ff3ac6f0d3d5e', "has-heading": headingUsed }, h("div", { key: 'c9dd2f36055a1938bdf2dd91d00906e953227d87', class: classes }, h("div", { key: '7c20767305d09a735c5d1369b619ad353588e2db', class: "stzh-appointments__heading" }, h("slot", { key: '423165796c578202b805f64fb2609dded2334360', name: "heading" })), h("div", { key: 'f12d802502964f7b9d4e980106021c39a1d6dcf1', class: "stzh-appointments__wrapper" }, this.showCalendar && (h("div", { key: '2872cdf5d6c9d021910973d404ca7011e5101365', class: "stzh-appointments__calendar-wrapper" }, h("div", { key: '339445c3230edede656a0b1013002ed8b69710e7', class: "stzh-appointments__calendar-title-wrapper" }, h("div", { key: '5b05d9f1f43455f6ad98eacfaea2ba647a6a766e', class: "stzh-appointments__calendar-title" }, h("stzh-icon", { key: '4c17bae9a582ddded29757d2bc8200da12e05d74', class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { key: '4b9062002ed551cf0291e7bc44e38a6430bdac57', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { key: '89e8a1739a7a7030f13b5601b7461983545a8c0a', class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { key: '62d966aa36fb2adf073b00fa2efb875a72e27e9a', "hide-optional": true, ref: el => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { key: 'a3166a599363463361e88b74a53acebaf3cf1588', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { key: '4de0cc47b30b6f60bd4f45fa5532628bcda8489c', class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { key: '217e85e4453e1ea215b198fae02e6eb027c200df', "hide-optional": true, ref: el => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate && (h("stzh-link", { key: 'fdcb194ac85ef791223eb9198a7f92ce43ef3bbb', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))))), h("div", { key: '26b25d12346f0380224639f3cde67e7decd86ada', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle && (h("div", { key: '077a5b4642a5f81fabb5a8260427b04533f58857', class: "stzh-appointments__appointments-title-wrapper" }, h("div", { key: 'b3e297ddac8ca11dbf834508236ec4c6b1736417', class: "stzh-appointments__appointments-title" }, h("stzh-icon", { key: '06e4f5ad42be3be6f199ac33a76870ba1cd665ef', class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { key: '03fd212c2bfb1744d22dda2b14645e97bc06f516', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort && (h("div", { key: '9f88214aa4910eff055b681ca8f60d2a4d4773f8', class: "stzh-appointments__sort" }, h("stzh-dropdown", { key: '88bbcb6b38b6e1f72def8771c2ce09044a58528e', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))))), h("div", { key: '600a9251421f315e7ea639915ce4e5aefe8bffcb', class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { key: 'db216986e1bac232e155fc4cf948252dcde7376e', class: "stzh-appointments__appointments-radiogroup", ref: el => (this.inputElement = el), legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map(appointment => (h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && (h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0")), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption))))), this.showMoreLink && (h("stzh-link", { key: 'd787a30578bc16c02b74d4fb5d50799f46041546', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems ? this.stepItems : this.moreItemsLeft)))))))));
     }
     static get is() { return "stzh-appointments"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-appointments/stzh-appointments.stories.js

@@ -1,6 +1,5 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 
 import readme from './readme.md?raw';
 
@@ -24,8 +23,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhChange']
+    stzhActions: {
+      events: ['stzhChange', 'stzhClick']
     },
     docs: {
       description: {
@@ -36,9 +35,6 @@ export default {
       type: 'figma',
       url: getFigmaLink('appointments'),
       allowFullscreen: true
-    },
-    viewport: {
-      defaultViewport: 'reset'
     }
   },
   argTypes: {
@@ -48,7 +44,12 @@ export default {
       }
     }
   },
-  decorators: [withActions]
+  globals: {
+    viewport: {
+      value: 'reset',
+      isRotated: false
+    }
+  }
 };
 
 const appointments = [
@@ -252,12 +253,8 @@ export const SmallScreen = {
     appointments,
     name: 'appointments_story_6'
   },
-  parameters: {
-    viewport: {
-      defaultViewport: 'small'
-    }
-  },
-  tags: ['!test'], // ToDo in PDESI-1521 (make defaultViewport work for test execution in CLI)
+  // ToDo in PDESI-1521 (make defaultViewport work for test execution in CLI)
+  tags: ['!test'],
   play: async ({ canvasElement, step }) => {
     stzhAppointmentsEl = await getComponentByTestId(canvasElement, APPOINTMENTS_TEST_ID);
 
@@ -268,5 +265,11 @@ export const SmallScreen = {
       const stzhDatepickerNotInlineEl = datepickerParentEl.querySelector('stzh-datepicker:not([inline])');
       expect(stzhDatepickerNotInlineEl).not.toBeNull();
     });
+  },
+  globals: {
+    viewport: {
+      value: 'small',
+      isRotated: false
+    }
   }
 };

package/dist/collection/components/stzh-audio/stzh-audio.js

@@ -38,7 +38,7 @@ export class StzhAudio {
         const classes = {
             "stzh-audio": true,
         };
-        return (h(Host, { key: '3d40486913fd3db68cdaae0a44ac3897ad0c1860' }, h("vds-media", { key: 'ec112a23ebed3ad1e4a421dd2af7becc7369a1c4', class: classes }, h("vds-audio", { key: '54668d3a8ffd91d8b95e75d37972ad5bbe4b8a59', class: "stzh-audio__audio", ref: el => (this.vsdAudioElement = el), "onVds-play": () => {
+        return (h(Host, { key: '885601f7a8fe5c0014037fa56a05489c2dbeb75c' }, h("vds-media", { key: '21155299364b2c673cdda4f789ad610010b6973b', class: classes }, h("vds-audio", { key: 'd212afbaaa75a4c55052fbd978c864ce736420f1', class: "stzh-audio__audio", ref: el => (this.vsdAudioElement = el), "onVds-play": () => {
                 this.stzhPlay.emit({ component: "stzh-audio" });
             }, "onVds-playing": () => {
                 this.stzhPlaying.emit({ component: "stzh-audio" });
@@ -50,11 +50,11 @@ export class StzhAudio {
                 this.stzhReplay.emit({ component: "stzh-audio" });
             }, "onVds-error": (e) => {
                 this.stzhError.emit({ component: "stzh-audio", originalEvent: e });
-            } }, h("audio", { key: 'c94636199a8211ff5bd75bb496e68031aeeb10c4', preload: this.preload, src: this.src }, h("slot", { key: '86fc4510fa916bf2aec88426b66f2ba0f2df3243' }))), h("div", { key: 'c1fdd5c1bf08adc5a456324acd1f0b0c520d0ab2', class: "stzh-audio__controls" }, h("div", { key: '68835b5ea7ccfeaf7e2721b319dc666a2eab9776', class: "stzh-audio__loader-overlay" }, h("stzh-loader", { key: '6a5bcb4b1dc3ed89eb79a45cd27383a3589a2ca1', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { key: '36068388a784a44ee0f078d4c2b2e7aec7fe9ec6', class: "stzh-audio__controls-top" }, h("vds-time-slider", { key: 'eec8665ca50864323657e2374f48d187ea0b18d6', class: "stzh-audio__slider is-time" }, h("div", { key: '130c8ec09f559a204ee96cfd71eccb7d7c3b2395', class: "stzh-audio__slider-track" }), h("div", { key: '3ac50a1ca64ec490fb4bfb7c211acd664caf606e', class: "stzh-audio__slider-track is-fill" }), h("div", { key: '2a23e42979ef03f05bb214f5a743e96a165bd627', class: "stzh-audio__slider-thumb-container" }, h("div", { key: 'c91ef0e535b6865136dd102fa561a1021c75fb54', class: "stzh-audio__slider-thumb" })), h("div", { key: '50616eb7ff226e5e29949aafad71942b763f7f47', class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { key: '050222b05c938f4be7a68d7dbd93c014314af5eb', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { key: 'cd6dae954f1ce7558ed18f13bf59cc4967cceb03', class: "stzh-audio__controls-bottom" }, h("div", { key: '1c2d78dd7981a8c335249208ff6c881d4ef10a98', class: "stzh-audio__controls-bottom-left" }, h("stzh-tooltip", { key: 'cbe5972295cc149c143b2001dccc6e195b67f712' }, h("vds-play-button", { key: '695ef0d7b6df092013c0b7db0e451ae444a6cc8b', class: "stzh-audio__button is-play" }, h("stzh-icon", { key: 'f00ff99cf2db18f35d36e37663ce863ce7d62d44', class: "stzh-audio__played", name: "play" }), h("stzh-icon", { key: 'e6f4ca3cf3cf4380c83c111a345253f109416c4e', class: "stzh-audio__paused", name: "pause" })), h("span", { key: '84dffcda489971f55818055bfdd5f467159a3421', slot: "content" }, h("span", { key: '85df5a2af24e8a0746a776593d251d08ac393cd9', class: "stzh-audio__played" }, this.localization.play), h("span", { key: '20e71be05fd9edee13ef0da3941ba6838ebb97c5', class: "stzh-audio__paused" }, this.localization.pause))), h("div", { key: 'ace4a4b0bafc60984388e357dd1e508dd43ca1c2', class: "stzh-audio__time" }, h("vds-time", { key: 'fa24daf3af3862b0067ae72749042dc125ca61bf', type: "current" }), h("span", { key: 'dad9106498b30ccfe851f250d75d0e138b439f02', class: "stzh-audio__time-separator" }, "/"), h("vds-time", { key: '2f5733ad580c78a1985483125d3254f430356cb0', type: "duration" })), h("stzh-tooltip", { key: 'd7aee440b11568d42c2e03ad8312056a606d45d8' }, h("vds-mute-button", { key: '7c842413fba97a286989d662fedfe43777d5401b', class: "stzh-audio__button is-mute" }, h("stzh-icon", { key: 'eb4b593b06d85a7bb2334625d1d7258651b1af94', class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { key: '41238af0eeb3148416561efa0823d091a0169dc9', class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { key: '92c79322db2691e45dc28ed0c2b7a00768655936', slot: "content" }, h("span", { key: '31f89ac113c48f7e3904121b1cf8fbce001cf1b2', class: "stzh-audio__muted" }, this.localization.mute), h("span", { key: 'feb640737ef68e5997095eb8f9ba077e7e9aa1e5', class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { key: 'fae7ee452e0ac5bc24865460014a5a1380015822', class: "stzh-audio__slider is-volume" }, h("div", { key: '54399b7b75930da1323dbf2fa5922974edaa0287', class: "stzh-audio__slider-track" }), h("div", { key: 'fa45a8c1a853a53191367d88081e82d6b96feb74', class: "stzh-audio__slider-track is-fill" }), h("div", { key: '377958d28409aa8dd324e077346c54a5b574c704', class: "stzh-audio__slider-thumb-container is-shown" }, h("div", { key: '0899b146ebed8f9424ab60663dd3f443ffd2a66a', class: "stzh-audio__slider-thumb" })), h("div", { key: 'fed9fbe923795d5fd9a1568dad6bf7acd5bf02cf', class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { key: '7f2245dd71fe904a31901bc5c9d6f39d64e63464', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), h("div", { key: 'e79b2e14c9843b7d58b0e00ef417e0f16107a97d', class: "stzh-audio__controls-bottom-right" }, hasTranscript && (h("stzh-tooltip", { key: 'f8b9f8e104204f35a15d4a8d3928b959f253b99f', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h("button", { key: '5b406fa80c75f55973356a720dd25e6d38856cbe', class: {
+            } }, h("audio", { key: '6ba0e5c27dee2af99d6a9d7a2acbd817167772b6', preload: this.preload, src: this.src }, h("slot", { key: '9f51c9d5930d17a2f0835e48167e00e1626fd894' }))), h("div", { key: '86f222f220eb660d181303fc6872b4d258ea7028', class: "stzh-audio__controls" }, h("div", { key: '5b79cbf64d8a15e9980490d81b69421b612327a0', class: "stzh-audio__loader-overlay" }, h("stzh-loader", { key: '6dea41eb0698c6b1edc60d67a045e9ebbf0bbab7', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { key: 'd291e01f791acdaed41e27f4a59a30672b8046ba', class: "stzh-audio__controls-top" }, h("vds-time-slider", { key: '7be7204516cafb8a4ddf579c5d675f595911d4c7', class: "stzh-audio__slider is-time" }, h("div", { key: 'ef739a8b0cc62feec421833c5054f79ff69383ec', class: "stzh-audio__slider-track" }), h("div", { key: 'c18f7787faa1877c0dd25e7969186a6dbc735fbb', class: "stzh-audio__slider-track is-fill" }), h("div", { key: '1ae54ecda3d2515aad18a2b30e7863c9a21019ad', class: "stzh-audio__slider-thumb-container" }, h("div", { key: '86d0ca6e05599b0baaaf45277607804f97973d04', class: "stzh-audio__slider-thumb" })), h("div", { key: '414d6d8429c32ec610d7ca59d85118420404a26e', class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { key: 'ae5d5e00e19012c00f96803041e0d87172aae077', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { key: '8603fe1bb540db44f6cb3ce07943dbcd7610a2de', class: "stzh-audio__controls-bottom" }, h("div", { key: '1cfadf63f9d64a5d98580915cb166af5ef12629b', class: "stzh-audio__controls-bottom-left" }, h("stzh-tooltip", { key: '94f069444bdfa306743c522d0d579e5c59268303' }, h("vds-play-button", { key: 'e586ca819ea459b38d571e15e6c5b103f93e9cc4', class: "stzh-audio__button is-play" }, h("stzh-icon", { key: '19968ceae2d711d290fbb579f5212819b920eba3', class: "stzh-audio__played", name: "play" }), h("stzh-icon", { key: '79d25bec9a3a8793a67a7511ef72f01d946d087b', class: "stzh-audio__paused", name: "pause" })), h("span", { key: '498e1f86053b7349286f907948efb6d74c2a2f69', slot: "content" }, h("span", { key: '84a11708bca1e42bc94a40b8b6e1de790b92f847', class: "stzh-audio__played" }, this.localization.play), h("span", { key: '4d525f0932de2970c5a3d3d007ad037aaab621ce', class: "stzh-audio__paused" }, this.localization.pause))), h("div", { key: '113ab6048ba941159cd26da369871599a75c3f9f', class: "stzh-audio__time" }, h("vds-time", { key: '4f8087b94faac1275b7c38540a9533c777a6a97f', type: "current" }), h("span", { key: '1fea6f1af049bb9b3ea86f1ec594881c73054e11', class: "stzh-audio__time-separator" }, "/"), h("vds-time", { key: 'b15bc25b86646998a3fd3fabae0684667a9d34bc', type: "duration" })), h("stzh-tooltip", { key: '36db03b3ad70da9be228fdca7a1445702818c0e9' }, h("vds-mute-button", { key: 'e311bf1642bfcc4ee56cd8762973ce11bfe75214', class: "stzh-audio__button is-mute" }, h("stzh-icon", { key: 'b945d3d036f5c564320720fc4773cf091aa84d7a', class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { key: '71ff72dba183189562ae30d6c7b8e5e10da4742b', class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { key: 'e513cb9be4e3f9ecbff108e2fc73df939c6c095c', slot: "content" }, h("span", { key: 'e6426812d304c9ecb236c1d6b6a73bd33faeeccc', class: "stzh-audio__muted" }, this.localization.mute), h("span", { key: '6a0b710d2806c6ff042ceb005e34ce676bc07fc3', class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { key: '7b9f1c591bba9013cfdebbb03f5d7819017885c2', class: "stzh-audio__slider is-volume" }, h("div", { key: '002c239c73bd2bcad2c5b24db187ee3ef7a8e8a0', class: "stzh-audio__slider-track" }), h("div", { key: '3b22febc2dd9326f97088920173a7b8b3441ba60', class: "stzh-audio__slider-track is-fill" }), h("div", { key: 'eaa4d21360febabd5de2583c5a663e7b3dc0ac4c', class: "stzh-audio__slider-thumb-container is-shown" }, h("div", { key: '9247ee52c0b9094c18a798b92485bed4d02890d3', class: "stzh-audio__slider-thumb" })), h("div", { key: 'a5d1519e92341eb5e7428cb27e66701ec1f1733a', class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { key: 'aed7660cfee52e443c1dd7735475035facb46074', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), h("div", { key: 'ef2a9db0e0b826b99488f28b63f12b8c3eea6362', class: "stzh-audio__controls-bottom-right" }, hasTranscript && (h("stzh-tooltip", { key: '30f6b75c9bdbd8e009871a3ad74911d46bdc7373', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h("button", { key: '983c80c814e7caa781e0edeaef1d86cc4349a585', class: {
                 "stzh-audio__button is-transcript": true,
                 "is-active": this.transcriptShown,
             }, onClick: () => (this.transcriptShown = !this.transcriptShown), "s-object-id": this.transcriptAnalyticsId ||
-                (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, h("stzh-icon", { key: '3f80795cdca511dc2d138f56976e8fca30e4f98e', name: "transcript" })))), h("stzh-tooltip", { key: '45478cb8b2e8ce687844587c796f688245d5319e', content: this.localization.download }, h("a", { key: 'b32dc022b0bee1522cb9e32842fbeb1ab998ecdb', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, h("stzh-icon", { key: '102db5b5548d554b8353cecc84fafd2dc4e255e8', name: "download" })))))), h("div", { key: '8b5b5ca69143473f56051ad54c064fa1e0c3d718', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : h("slot", { name: "transcript" })))));
+                (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, h("stzh-icon", { key: '60be245e803b80cffdf03e8186c9b95481afbbb3', name: "transcript" })))), h("stzh-tooltip", { key: 'aac897b3d58480c8b95e9d509e3731498427095a', content: this.localization.download }, h("a", { key: 'e75602c34aafcd32bf863c4fdbf4f739e368755c', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, h("stzh-icon", { key: '405c2106e7b5c629ec995fd78b305a197087ab97', name: "download" })))))), h("div", { key: '27076f38abf5de874b540d557eebc354c0bc9927', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : h("slot", { name: "transcript" })))));
     }
     static get is() { return "stzh-audio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-audio/stzh-audio.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -37,8 +36,8 @@ export default {
   title: 'Components/Audio',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
+    stzhActions: {
+      events: []
     },
     layout: 'padded',
     docs: {
@@ -51,8 +50,7 @@ export default {
       url: getFigmaLink('audio'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-badge/stzh-badge.js

@@ -12,7 +12,7 @@ export class StzhBadge {
             "stzh-badge": true,
             [`stzh-badge--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'd9a44111a97f8f9b6a6fb3f8654850b8c6944df3', filled: !!this.label }, h("div", { key: 'bd1060b98f860ba77f52c0aaa1bc64c2b30193fa', class: classes }, this.label || h("slot", { key: '3a3cd91f00ba58027dc1a75ed750e0c96cbfb400' }))));
+        return (h(Host, { key: 'c27b1adf4ebf337e0b983225379f40c33aeda889', filled: !!this.label }, h("div", { key: '36682a4aab72ede0a8445085c49c5c2659e3fce1', class: classes }, this.label || h("slot", { key: '4cd0a2632d298f2f9bbff5af704d45e6f7e4a1a5' }))));
     }
     static get is() { return "stzh-badge"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-badge/stzh-badge.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -15,8 +14,8 @@ export default {
   title: 'Components/Badge',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
+    stzhActions: {
+      events: []
     },
     docs: {
       description: {
@@ -28,8 +27,7 @@ export default {
       url: getFigmaLink('badge'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/{CMS/stzh-banner → stzh-banner}/stzh-banner.css

@@ -189,7 +189,7 @@
   --stzh-button-active-background-color: var(--stzh-color-white80op);
   --stzh-button-active-hover-color: var(--stzh-color-primary);
   --stzh-button-active-hover-background-color: var(--stzh-color-white80op);
-  --background-color: var(--stzh-color-error60);
+  --background-color: var(--stzh-color-coral60);
   --icon-color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
   --label-color: var(--stzh-base-invert-color);

package/dist/collection/components/{CMS/stzh-banner → stzh-banner}/stzh-banner.e2e.js

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test";
-import { visualDiff } from "../../../../.build/test/utils";
-const URL = "components-cms-banner";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-banner";
 const STORIES = ["default"];
 test.describe("banner", () => {
     STORIES.forEach((storyId) => {

package/dist/collection/components/stzh-banner/stzh-banner.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-banner.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-banner/stzh-banner.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,mBAAmB,CAAC;AAEhC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IAC3B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-banner\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"banner\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/{CMS/stzh-banner → stzh-banner}/stzh-banner.js

@@ -38,7 +38,7 @@ export class StzhBanner {
             "stzh-banner--has-close-hidden": this.hideClose,
             [`stzh-banner--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '8cb4fb29a87a6cc740839076609e1cd30bbf91ab', hidden: !this.open }, h("div", { key: '21715a3b9d51917b75bb36d6ed5a107320a5a4c0', class: classes }, h("div", { key: '349607e440408e85ce251d8c0459d818e7beb95a', class: "stzh-banner__container" }, h("div", { key: '366f09535fdc87950f4b0098338e6fcdc9aa40ab', class: "stzh-banner__content" }, h("div", { key: 'c30a14f288e77dc103b86c6ecba2cd0d18ded4ae', class: "stzh-banner__icon-wrapper" }, h("stzh-icon", { key: '10652097a0d07d919497a5c4f0d8863f7c35427a', class: "stzh-banner__icon", name: "warning-filled" })), h("div", { key: 'dd902cb8e78cc34dc3466a06ad53cd7805e49532', class: "stzh-banner__text-wrapper" }, h("div", { key: 'cdfddda4f2886702cfe7aa2310688089bab17a51', class: "stzh-banner__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '88251ec034b429ce01ed53f46f897832c01d6b8f', class: "stzh-banner__link" }, h("slot", { key: '595bafedaa93d1fe423bec5eed590a78a4c5fca4', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '6ecf4af64757d5a5135d8d2c21bc4f3ec9d44eb7', class: "stzh-banner__close", onClick: this.onCloseButtonClick, a11yLabel: (_a = this.localization) === null || _a === void 0 ? void 0 : _a.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
+        return (h(Host, { key: '31d5770c6c5885f755cf86a93fad2d622897333a', hidden: !this.open }, h("div", { key: '7f77ea7f33c94b3fafb49eace374d3696e3039d9', class: classes }, h("div", { key: '412a0aad01f585460f51558f7cf77292fac6d2d3', class: "stzh-banner__container" }, h("div", { key: '85c06961b7e07c2ae3e21466cdb18b5de3b2a94a', class: "stzh-banner__content" }, h("div", { key: '57154ef4056f84fce091c8d04298e24eb0f99aa0', class: "stzh-banner__icon-wrapper" }, h("stzh-icon", { key: '3697fb976e8c6f44a11feb54417d834700f1b88e', class: "stzh-banner__icon", name: "warning-filled" })), h("div", { key: '6e359aec2b3032b46cccde0c6857e921a6dded07', class: "stzh-banner__text-wrapper" }, h("div", { key: 'dfcbf94a7e128d6f88f373c1fd12049f2193ea3d', class: "stzh-banner__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '73a0f38e0b596318a2b216dae0f1aefe5ebb5d68', class: "stzh-banner__link" }, h("slot", { key: '442b511202f6248d411ecc9902b8d94ce91d9989', name: "link" })))), !this.hideClose && (h("stzh-button", { key: 'a3f456b30cc5ee5beed3d51bd0d910028a56277d', class: "stzh-banner__close", onClick: this.onCloseButtonClick, a11yLabel: (_a = this.localization) === null || _a === void 0 ? void 0 : _a.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
     }
     static get is() { return "stzh-banner"; }
     static get encapsulation() { return "scoped"; }
@@ -100,7 +100,7 @@ export class StzhBanner {
                         "StzhBannerLocalizedText": {
                             "location": "import",
                             "path": "./stzh-banner.localization",
-                            "id": "src/components/CMS/stzh-banner/stzh-banner.localization.ts::StzhBannerLocalizedText"
+                            "id": "src/components/stzh-banner/stzh-banner.localization.ts::StzhBannerLocalizedText"
                         }
                     }
                 },
@@ -153,7 +153,7 @@ export class StzhBanner {
                     "references": {
                         "StzhBannerOpenEvent": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhBannerOpenEvent"
                         }
                     }
@@ -174,7 +174,7 @@ export class StzhBanner {
                     "references": {
                         "StzhBannerCloseEvent": {
                             "location": "import",
-                            "path": "../../../index",
+                            "path": "../../index",
                             "id": "src/index.ts::StzhBannerCloseEvent"
                         }
                     }

package/dist/collection/components/stzh-banner/stzh-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-banner.js","sourceRoot":"","sources":["../../../../src/components/stzh-banner/stzh-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMtG;;;GAGG;AAMH,MAAM,OAAO,UAAU;;QAwCb,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;qBAxCsB,EAAE;yBAGG,KAAK;;oBAMgB,OAAO;oBAWhC,IAAI;;IAG7B,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,SAAS,EAAE,aAAa;SACzB,CAAC,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,SAAS,EAAE,aAAa;SACzB,CAAC,CAAC;IACL,CAAC;IAMD,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAClG,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,+BAA+B,EAAE,IAAI,CAAC,SAAS;YAC/C,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;YACtB,4DAAK,KAAK,EAAE,OAAO;gBACjB,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,sBAAsB;wBAC/B,4DAAK,KAAK,EAAC,2BAA2B;4BACpC,kEAAW,KAAK,EAAC,mBAAmB,EAClC,IAAI,EACF,gBAAgB,GAMP,CACT;wBACN,4DAAK,KAAK,EAAC,2BAA2B;4BACpC,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD;4BACN,4DAAK,KAAK,EAAC,mBAAmB;gCAC5B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF;oBAEL,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,oEACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,IAAI,EAAC,WAAW,GACH,CAChB,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, State } from \"@stencil/core\";\n\nimport { StzhBannerOpenEvent, StzhBannerCloseEvent } from \"../../index\";\n\nimport { StzhBannerLocalizedText } from \"./stzh-banner.localization\";\n\n/**\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-banner\",\n  styleUrl: \"stzh-banner.scss\",\n  scoped: true,\n})\nexport class StzhBanner {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhBannerLocalizedText;\n  \n  /** Type */\n  @Prop({ reflect: true }) type: \"error\" | \"info\" = \"error\";\n\n  /** Banner open event */\n  @Event() stzhOpen: EventEmitter<StzhBannerOpenEvent>;\n\n  /** Banner close event */\n  @Event() stzhClose: EventEmitter<StzhBannerCloseEvent>;\n\n  @Element() element: HTMLStzhBannerElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-banner\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-banner\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"banner\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-banner\": true,\n      \"stzh-banner--has-close-hidden\": this.hideClose,\n      [`stzh-banner--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-banner__container\">\n            <div class=\"stzh-banner__content\">\n              <div class=\"stzh-banner__icon-wrapper\">\n                <stzh-icon class=\"stzh-banner__icon\" \n                  name={\n                    \"warning-filled\"\n                    // this.type === 'info' && \"info-help-filled\"\n                    // || this.type === 'success' && \"checkmark-circle-filled\"\n                    // || this.type === 'warning' && \"important-warning-filled\"\n                    // || this.type === 'error' && \"warning-filled\"\n                  }\n                ></stzh-icon>\n              </div>\n              <div class=\"stzh-banner__text-wrapper\">\n                <div class=\"stzh-banner__label\">\n                  {this.label ? this.label : <slot name=\"label\"></slot>}\n                </div>\n                <div class=\"stzh-banner__link\">\n                  <slot name=\"link\"></slot>\n                </div>\n              </div>\n            </div>\n\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-banner__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization?.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-banner/stzh-banner.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-banner.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-banner/stzh-banner.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../index\";\n\nexport type StzhBannerLocalizedText = StzhLocaleComponent & {\n  close: string;\n};\n"]}

package/dist/collection/components/{CMS/stzh-banner → stzh-banner}/stzh-banner.stories.js

@@ -1,8 +1,7 @@
-import { createComponentStory } from '../../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
+import { createComponentStory } from '../../utils/story-utils';
 import readme from './readme.md?raw';
 
-import { getFigmaLink } from '../../../../figma';
+import { getFigmaLink } from '../../../figma';
 
 const COMPONENT_NAME = 'stzh-banner';
 const story = createComponentStory(COMPONENT_NAME);
@@ -14,12 +13,12 @@ const TEMPLATE = `
 `;
 
 export default {
-  title: 'Components/CMS/Banner',
+  title: 'Components/Banner',
   component: COMPONENT_NAME,
   parameters: {
     layout: 'fullscreen',
-    actions: {
-      handles: ['stzhOpen', 'stzhClose']
+    stzhActions: {
+      events: ['stzhOpen', 'stzhClose']
     },
     docs: {
       description: {
@@ -31,8 +30,7 @@ export default {
       url: getFigmaLink('banner'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-breadcrumb/stzh-breadcrumb.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -16,8 +15,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhItemClick']
+    stzhActions: {
+      events: ['stzhItemClick']
     },
     docs: {
       description: {
@@ -29,8 +28,7 @@ export default {
       url: getFigmaLink('breadcrumb'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 const items = [

package/dist/collection/components/stzh-button/stzh-button.stories.js

@@ -1,10 +1,8 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 import { getFigmaLink } from '../../../figma';
 import { fullwidthCentered } from '../../utils/decorators';
-import { userEvent, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, waitFor, expect, fn } from 'storybook/test';
 import { getComponentByTestId, expectIsVisuallyHidden } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-button';
@@ -21,8 +19,8 @@ export default {
   title: 'Components/Button',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClick', 'click', 'stzhFocus', 'stzhBlur', 'stzhChange']
+    stzhActions: {
+      events: ['stzhClick', 'stzhFocus', 'stzhBlur', 'stzhChange'],
     },
     docs: {
       description: {
@@ -35,7 +33,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [withActions, fullwidthCentered]
+  decorators: [fullwidthCentered]
 };
 
 export const Default = {

package/dist/collection/components/stzh-buttongroup/stzh-buttongroup.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -32,6 +31,9 @@ export default {
   title: 'Components/Buttongroup',
   component: COMPONENT_NAME,
   parameters: {
+    stzhActions: {
+      events: ['stzhClick']
+    },
     docs: {
       description: {
         component: readme
@@ -42,8 +44,7 @@ export default {
       url: getFigmaLink('buttongroup'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-calendar/stzh-calendar.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -15,8 +14,8 @@ export default {
   title: 'Components/Calendar',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange']
+    stzhActions: {
+      events: ['stzhChange', 'stzhClick']
     },
     docs: {
       description: {
@@ -28,8 +27,7 @@ export default {
       url: getFigmaLink('calendar'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-card/stzh-card.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -8,13 +7,11 @@ import {
   expectCssVarColor,
   expectIsVisible,
   getComponentByTestId,
-  sleep,
   waitForAnimations,
   waitForElement,
   waitForWithTimeout
 } from '../../../.storybook/utils/component-test-utils';
-import { expect } from '@storybook/jest';
-import { userEvent, waitFor } from '@storybook/testing-library';
+import { expect, userEvent } from 'storybook/test';
 
 const COMPONENT_NAME = 'stzh-card';
 const story = createComponentStory(COMPONENT_NAME);
@@ -40,8 +37,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: [
+    stzhActions: {
+      events: [
         'stzhCollapse',
         'stzhClick',
         'stzhChange',
@@ -61,8 +58,7 @@ export default {
       url: getFigmaLink('card'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 const headerActions = [
@@ -471,7 +467,7 @@ export const Starrable = {
   }
 };
 
-  export const WithBadge = {
+export const WithBadge = {
   render: (args) => story(args, TEMPLATE),
   args: {
     heading: 'Heading with badge',
@@ -489,7 +485,7 @@ export const Starrable = {
 
     await step('Badge is positionen in the left upper corner', async () => {
       const header = card.querySelector('.stzh-card__header');
-      const badge  = card.querySelector('.stzh-card__badge');
+      const badge = card.querySelector('.stzh-card__badge');
       expect(header).toBeTruthy();
       expect(badge).toBeTruthy();
       const headerRect = header.getBoundingClientRect();
@@ -514,12 +510,8 @@ export const SmallScreen = {
     subtitle: 'Subtitle',
     headerActions: headerActions
   },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mikro'
-    }
-  },
-  tags: ['!test'], // ToDo in PDESI-1521 (make defaultViewport work for test execution in CLI)
+  // ToDo in PDESI-1521 (make defaultViewport work for test execution in CLI)
+  tags: ['!test'],
   play: async ({ canvasElement, step }) => {
     stzhCardEl = await getComponentByTestId(canvasElement, CARD_TEST_ID);
 
@@ -585,6 +577,11 @@ export const SmallScreen = {
         expect(stzhClickEventDetail).toHaveProperty('component', 'stzh-card');
       });
     });
+  },
+  globals: {
+    viewport: {
+      value: 'mikro',
+      isRotated: false
+    }
   }
 };
-

package/dist/collection/components/stzh-card-navigation/stzh-card-navigation.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -16,8 +15,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhClick']
+    stzhActions: {
+      events: ['stzhClick']
     },
     docs: {
       description: {
@@ -29,8 +28,7 @@ export default {
       url: getFigmaLink('card-navigation'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const ContentNavigation = {

package/dist/collection/components/stzh-card-searchresult/stzh-card-searchresult.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -30,8 +29,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhClick']
+    stzhActions: {
+      events: ['stzhClick']
     },
     docs: {
       description: {
@@ -43,8 +42,7 @@ export default {
       url: getFigmaLink('card-searchresult'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Media = {

package/dist/collection/components/stzh-cardlist/stzh-cardlist.css

@@ -387,12 +387,13 @@
 .stzh-cardlist--layout-pi-teasers {
   background-color: var(--background-color);
   position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);
-  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);
-  width: calc(100vw - var(--stzh-scrollbar-width));
-  max-width: calc(100vw - var(--stzh-scrollbar-width));
+  --slotted: var(--stzh-cardlist-pi-content, 0);
+  left: calc(50% * (1 - var(--slotted)));
+  right: calc(50% * (1 - var(--slotted)));
+  margin-left: calc((-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted)));
+  margin-right: calc((-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted)));
+  width: calc((100vw - var(--stzh-scrollbar-width)) * (1 - var(--slotted)) + 100% * var(--slotted));
+  max-width: 100%;
   padding-top: var(--stzh-space-xxlarge);
   padding-bottom: var(--stzh-space-xxlarge);
 }