Implement OnyxImage component

[larsrickert]

Why?

We want to offer a custom image component that can/should be used by projects to support the following benefits:

• we can make accessibility attributes required, e.g. alt text
• we can handle image load errors and e.g. display a fallback state/image
• loading behaviour (by default, an empty space is displayed while the image is loading. We can improve the UX by e.g. displaying a skeleton or grey background instead so the user knows there something is loading)
• lazy loading

Depends on

No response

Design

To be concepted by UX as part of this ticket

Acceptance criteria

• a dummy option which shows a basic, default image
• lazy loading can be configured and defaults to lazy
• has a required image src and alt text (also allows setting multiple images and sources, see picture element)
• displays a fallback state/image if the image could not be loaded
• emits and event when
  • the image is loaded
  • the image could not be loaded
• has a visual loading state (depends on the design, e.g., skeleton or background color)
• supports lazy loading
• enforces a static size, so that there is no layout shifting
• the image card example is updated to use the new image component
• optionally supports setting different images for light and dark mode
• supports passing additional <img /> attributes, e.g., using fall-through attributes
• support different shapes/cut-outs
  • rounded corners
  • clipped corners
  • circle
  • default

Implementation details

• for different light and dark mode images, we could either use two regular images and hide one via CSS, or use the <picture> tag

Reference implementations

• Element plus
• Nuxt image

Applicable ARIA Pattern

No response

Definition of Done

• The following component requirements are implemented:

  • skeleton
  • 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

Approval

Storybook
Documentation

• Checked and approved by
  • designer
  • dev