Implement OnyxHeadline

[mj-hof]

Open Questions/To-dos

Depends on

• 94

Why?

Design

Acceptance criteria

Implementation details

Reference implementations

Applicable ARIA Pattern

Definition of Done

• The following component requirements are implemented:
  • [ ] skeleton
  • [ ] density
  • [ ] example usage added to apps/demo-app/src/views/HomeView.vue
• covered by tests
  • [ ] functional tests (Playwright or unit test)
  • [ ] visual tests (Playwright screenshots)
• [ ] 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
• Deployed Docs
• [ ] approved by designer @jannick-ux
• [ ] approved by dev

[JoCa96]

Result of presentation from @jannick-ux:

• Select Headline:

  • selection overwrites headline
  • must always have initial value
  • equivalent to ScuTabs

• Target Headline:

  • complete headline is clickable/interactive
  • Hashtag aligned with first line
  • Hashtag only shows on hover?

• info label text

  • (different) static gap sizes between headline and info text per level

• pre-headline icons have 24px container before text

• reveal headline, select headline

  • same focus and hover behavior

• icon-button after headline

  • specifies height of line or the other way around?