Define component detail page for showcase

[larsrickert]

Why?

Our new showcase should include detail pages for all components. In this POC, we want to technically define and evaluate how we can implement this in the best way.

Design

Figma Documentation

Acceptance criteria

• a POC is implemented that considers:
  • Examples are ideally written in plain .vue files. Should show a preview + code to copy
  • each example should support adding additional markdown
  • properties, events, emits and exposes should be auto-generated
  • the components should be indexed in the global search
  • general component description can be added with markdown
• current pain points with Storybook are collected and considered in the new approach

Implementation details

• Idea: Create a markdown file for each component, e.g. content/en/components/button.md
• use a custom Nuxt layout for those markdown files so they are rendered with the corresponding design

DEV handover checklist

Storybook

DEV handover done with: @ADD_DEV_NAME_HERE

Testing

• covered by visual screenshot tests
• covered by functional tests (Playwright or unit test)

Documentation

• "New" badge in Storybook is added, see storybook-addon-tag-badges
• Storybook code snippets are checked
• component status has been updated in the docs overview

Other

• follow-up tickets were created if necessary (add links below)

UX handover checklist

UX handover done with: @ADD_UX_NAME_HERE

Naming is aligned with Figma

• component name
• which support components are used and how they are named
• all property names and types

Implementation is checked

• all features of Figma are implemented or a follow-up ticket is refined
• skeleton
• densities
• light and dark mode
• truncation
• responsiveness / wrapping behavior
• min / max width

Figma

• Figma component is published

Documentation

• Storybook category is aligned with Figma
• Storybook examples are checked

Other

• follow-up tickets were created if necessary (add links below)