Implement calculated size of clipped corners of OnyxImage

[larsrickert]

Why?

Currently the clipped corners of the OnyxImage have a static size.

To align with the design requirements, they should be dynamic depending on the image height/width.

Acceptance criteria

• the clipped corner size is changed to be 15% of the smaller side of the image (width or height, whatever is smaller)

Implementation details

• we can use the current static clipped corner size as default and after mount, get the actual size with a resize observer and calculate the correct value

Definition of Done

• The following component requirements are implemented:

  • skeleton
  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma
  • Storybook sidebar badge for "New" is added on component or story level if needed. See: https://github.com/Sidnioulz/storybook-addon-tag-badges/?tab=readme-ov-file

Approval

Storybook

• Checked and approved by
  • designer
  • dev