@oiz/stzh-components 4.6.0 → 4.7.0

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

@@ -1,17 +1,14 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
-import { userEvent, fireEvent, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 import {
+  clickAndWait,
+  expectIsVisible,
   getComponentByTestId,
-  setAttributeAndWait,
   removeAttributeAndWait,
-  expectIsVisible,
-  sleep,
-  clickAndWait
+  setAttributeAndWait
 } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-radio';
@@ -28,8 +25,8 @@ export default {
   title: 'Components/Radio',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhChange', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {
@@ -41,8 +38,7 @@ export default {
       url: getFigmaLink('radio'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

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

@@ -1,15 +1,13 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 import {
+  clickAndWait,
   expectIsVisible,
   getComponentByTestId,
-  setAttributeAndWait,
-  clickAndWait,
-  sleep
+  setAttributeAndWait
 } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-radiogroup';
@@ -30,8 +28,8 @@ export default {
   title: 'Components/Radiogroup',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhChange', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {
@@ -43,8 +41,7 @@ export default {
       url: getFigmaLink('radiogroup'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

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

@@ -1,14 +1,9 @@
 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 {
-  getComponentByTestId,
-  expectIsVisible,
-} from '../../../.storybook/utils/component-test-utils';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { expectIsVisible, getComponentByTestId } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-rating';
 const story = createComponentStory(COMPONENT_NAME);
@@ -38,22 +33,22 @@ export default {
   title: 'Components/Rating',
   component: COMPONENT_NAME,
   parameters: {
-    actions: { handles: ['stzhChange', 'stzhFocus', 'stzhBlur'] },
+    stzhActions: { events: ['stzhChange', 'stzhFocus', 'stzhBlur'] },
     docs: { description: { component: readme } },
     design: {
       type: 'figma',
       url: getFigmaLink('rating'),
-      allowFullscreen: true,
-    },
+      allowFullscreen: true
+    }
   },
-  decorators: [withActions, fullwidthCentered],
+  decorators: [fullwidthCentered]
 };
 
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     value: 3,
-    label: 'Label',
+    label: 'Label'
   },
   play: async ({ canvasElement, step }) => {
     stzhRatingEl = await getComponentByTestId(canvasElement, RATING_TEST_ID);
@@ -108,7 +103,7 @@ export const Default = {
         items[0].blur();
       }
     });
-  },
+  }
 };
 
 export const Readonly = {
@@ -127,7 +122,7 @@ export const Readonly = {
       expect(stzhRatingEl).toHaveAttribute('value', '5');
       expect(third).toHaveAttribute('disabled');
     });
-  },
+  }
 };
 
 export const Disabled = {
@@ -146,7 +141,7 @@ export const Disabled = {
       await userEvent.click(items[4]);
       expect(stzhRatingEl).toHaveAttribute('value', '2');
     });
-  },
+  }
 };
 
 export const ErrorMessage = {
@@ -165,7 +160,7 @@ export const ErrorMessage = {
       expect(errItem).toHaveTextContent('Please rate this item');
       expect(stzhRatingEl).toHaveAttribute('is-invalid');
     });
-  },
+  }
 };
 
 const TEMPLATE_ERROR_SLOT = `
@@ -200,7 +195,7 @@ export const ErrorMessageInSlot = {
       expect(errorDivs[1]).toHaveTextContent('Error 2');
       expect(stzhRatingEl).toHaveAttribute('is-invalid');
     });
-  },
+  }
 };
 
 export const LongDescription = {
@@ -209,8 +204,7 @@ export const LongDescription = {
     value: 3,
     label: 'Label',
     description: 'Lorem ipsum dolor sit amet',
-    'description-long':
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
+    'description-long': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.'
   },
 
   play: async ({ canvasElement, step }) => {
@@ -226,11 +220,10 @@ export const LongDescription = {
       await userEvent.click(infoButton);
 
       const longDescInner =
-        stzhRatingEl.querySelector(
-          '.stzh-rating__description-long-popover .stzh-text__text-inner'
-        ) || stzhRatingEl.querySelector('.stzh-text__text-inner');
+        stzhRatingEl.querySelector('.stzh-rating__description-long-popover .stzh-text__text-inner') ||
+        stzhRatingEl.querySelector('.stzh-text__text-inner');
 
       expectIsVisible(longDescInner);
     });
-  },
+  }
 };

package/dist/collection/components/stzh-ratio/stzh-ratio.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';
@@ -28,8 +27,7 @@ export default {
       url: getFigmaLink('ratio'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-readspeaker/stzh-readspeaker.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';
@@ -39,8 +38,7 @@ export default {
       url: getFigmaLink('readspeaker'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const ContactPage = {

package/dist/collection/components/stzh-richtext/stzh-richtext.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';
@@ -105,9 +104,6 @@ export default {
   title: 'Components/Richtext',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -118,8 +114,7 @@ export default {
       url: getFigmaLink('richtext'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-row/stzh-row.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 { fullwidthCentered } from '../../utils/decorators';
 
@@ -50,9 +49,6 @@ export default {
   title: 'Components/Row',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -64,7 +60,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [withActions, fullwidthCentered]
+  decorators: [fullwidthCentered]
 };
 
 export const Default = {

package/dist/collection/components/stzh-saptcha/stzh-saptcha.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';
@@ -21,16 +20,15 @@ export default {
         component: readme
       }
     },
-    actions: {
-      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhChange', 'stzhFocus', 'stzhBlur']
     },
     design: {
       type: 'figma',
       url: getFigmaLink('saptcha'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-scrollup/stzh-scrollup.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';
@@ -55,20 +54,6 @@ const TEMPLATE = `
 </div>
 `;
 
-// const TEMPLATE_WITH_LINK_TO_HEADING = `
-// <div>
-//   ${SUBTEMPLATE_DUMMY_TEXT}
-
-//   <stzh-vspace></stzh-vspace>
-
-//   <stzh-scrollup>
-//     <stzh-link href="#mainPageHeading">
-//       Scroll up
-//     </stzh-link>
-//   </stzh-scrollup>
-// </div>
-// `;
-
 export default {
   title: 'Components/Scrollup',
   component: COMPONENT_NAME,
@@ -83,8 +68,7 @@ export default {
       url: getFigmaLink('scrollup'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-section/stzh-section.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';
@@ -115,8 +114,7 @@ export default {
       url: getFigmaLink('section'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-share/stzh-share.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';
@@ -25,8 +24,7 @@ export default {
       url: getFigmaLink('share'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-show/stzh-show.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';
@@ -31,8 +30,7 @@ export default {
       url: getFigmaLink('show'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const ShowOnlyMikro = {

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.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';
 
 const COMPONENT_NAME = 'stzh-skin-portal-mitwirken';
@@ -14,16 +13,12 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
       }
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.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';
 
 const COMPONENT_NAME = 'stzh-skin-storybook-preview';
@@ -14,16 +13,12 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
       }
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-skiplink/stzh-skiplink.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';
@@ -25,9 +24,6 @@ export default {
   title: 'Components/Skiplink',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -38,8 +34,7 @@ export default {
       url: getFigmaLink('skiplink'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-sortable/stzh-sortable.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';
 
 const COMPONENT_NAME = 'stzh-sortable';
@@ -21,8 +20,8 @@ export default {
   title: 'Components/Sortable',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhUpdate', 'stzhDisabled']
+    stzhActions: {
+      events: ['stzhUpdate', 'stzhDisabled']
     },
     layout: 'padded',
     docs: {
@@ -30,8 +29,7 @@ export default {
         component: readme
       }
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-space/stzh-space.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';
@@ -49,9 +48,6 @@ export default {
   title: 'Components/Space',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -62,8 +58,7 @@ export default {
       url: getFigmaLink('space'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-status/stzh-status.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';
@@ -25,8 +24,7 @@ export default {
       url: getFigmaLink('status'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

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

@@ -1,11 +1,9 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
 import { getComponentByTestId } from '../../../.storybook/utils/component-test-utils';
-import { expect } from '@storybook/jest';
-import { userEvent } from '@storybook/testing-library';
+import { expect, userEvent } from 'storybook/test';
 
 const COMPONENT_NAME = 'stzh-stepper';
 const story = createComponentStory(COMPONENT_NAME);
@@ -21,8 +19,8 @@ export default {
   title: 'Components/Stepper',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClick', 'stzhDottedClick']
+    stzhActions: {
+      events: ['stzhClick', 'stzhDottedClick']
     },
     docs: {
       description: {
@@ -34,8 +32,7 @@ export default {
       url: getFigmaLink('stepper'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 const oversixStepsData = [

package/dist/collection/components/stzh-stepper-item/stzh-stepper-item.stories.js

@@ -1,11 +1,9 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
 import { getComponentByTestId } from '../../../.storybook/utils/component-test-utils';
-import { expect } from '@storybook/jest';
-import { userEvent } from '@storybook/testing-library';
+import { expect, userEvent } from 'storybook/test';
 
 const COMPONENT_NAME = 'stzh-stepper-item';
 const story = createComponentStory(COMPONENT_NAME);
@@ -21,8 +19,8 @@ export default {
   title: 'Components/StepperItem',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClick', 'stzhDottedClick']
+    stzhActions: {
+      events: ['stzhClick', 'stzhDottedClick']
     },
     docs: {
       description: {
@@ -34,8 +32,7 @@ export default {
       url: getFigmaLink('stepper'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-sticky/stzh-sticky.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 { CTA as Button_CTA } from '../stzh-button/stzh-button.stories';
@@ -121,16 +120,15 @@ export default {
   title: 'Components/Sticky',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhStuckTop', 'stzhStuckBottom']
+    stzhActions: {
+      events: ['stzhStuckTop', 'stzhStuckBottom']
     },
     docs: {
       description: {
         component: readme
       }
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.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';
@@ -70,8 +69,7 @@ export default {
       url: getFigmaLink('sticky-actions'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-table/stzh-table.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';
@@ -336,8 +335,7 @@ export default {
       url: getFigmaLink('table'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {