Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement OnyxHeadline #569

Closed
19 tasks done
mj-hof opened this issue Mar 11, 2024 · 2 comments
Closed
19 tasks done

Implement OnyxHeadline #569

mj-hof opened this issue Mar 11, 2024 · 2 comments
Assignees
@larsrickert
Labels
dev Requires technical expertise
Milestone
Headlines

Comments

@mj-hof
Copy link
Collaborator

mj-hof commented Mar 11, 2024 •
edited by JoCa96
Loading

Depends on

Design

Figma

Acceptance criteria

  • Supports all HTML headline levels
  • Following modes are implemented
    • Default
    • hash
      • complete headline is clickable
      • only shown on hover/focus
      • adds #anchor to the URL and copy it the clipboard
  • Following states are supported
    • hover
    • focus
  • A slot is available to add content behind like an icon button
  • the # of the target mode is ignored for the left-alignment of the headline:
    Image
  • Create Follow-Up tickets for out-of-scope:

out-of-scope:

  • select
    • current selection is the headline text
    • therefore, an initial selection is required
    • conceptual identically to the ScuTabs
  • reveal

Implementation Details

  • target can be implemented without js:
<h2 id="see_also">
  <a href="#see_also">See also</a>
</h2>
  • a default id can be generated based on the text prop. A simple approach to escape special characters would be to replace them with underscores, e.g.props.text.replace(/\W/gi, "_").

Definition of Done

  • The following component requirements are implemented:
    • skeleton
    • 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
@mj-hof mj-hof added this to onyx Mar 11, 2024
@mj-hof mj-hof converted this from a draft issue Mar 11, 2024
@mj-hof mj-hof added the dev Requires technical expertise label Mar 11, 2024
@mj-hof mj-hof added this to the Headlines milestone Mar 11, 2024
@JoCa96 JoCa96 assigned MajaZarkova and unassigned JoCa96 Mar 12, 2024
@JoCa96 JoCa96 self-assigned this Oct 22, 2024
@JoCa96 JoCa96 changed the title Implement headlines Implement OnyxHeadline Oct 28, 2024
@JoCa96
Copy link
Collaborator

JoCa96 commented Oct 28, 2024

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?

@JoCa96 JoCa96 mentioned this issue Oct 28, 2024
Closed
@mj-hof mj-hof moved this from New to Backlog in onyx Nov 27, 2024
@mj-hof mj-hof added the 0-refinement All issues that can or need to be estimated in our next refinement label Nov 27, 2024
@mj-hof mj-hof moved this from Backlog to New in onyx Nov 27, 2024
@mj-hof mj-hof removed the 0-refinement All issues that can or need to be estimated in our next refinement label Nov 27, 2024
@JoCa96 JoCa96 assigned MajaZarkova and unassigned JoCa96 Nov 27, 2024
@MajaZarkova MajaZarkova moved this from New to Backlog in onyx Dec 3, 2024
@MajaZarkova MajaZarkova added the 0-refinement All issues that can or need to be estimated in our next refinement label Dec 3, 2024
@mj-hof mj-hof moved this from Backlog to Ready in onyx Dec 4, 2024
@mj-hof mj-hof removed the 0-refinement All issues that can or need to be estimated in our next refinement label Dec 4, 2024
@larsrickert larsrickert self-assigned this Jan 3, 2025
@larsrickert larsrickert moved this from Ready to In Progress in onyx Jan 3, 2025
@larsrickert larsrickert mentioned this issue Jan 3, 2025
Merged
4 tasks
github-merge-queue bot pushed a commit that referenced this issue Jan 8, 2025
@larsrickert @github-actions
feat(OnyxHeadline): support hash property (#2434)
8beb853 
Relates to #569

<!-- Briefly describe the changes of this PR. -->

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [x] All changes are documented in the documentation app (folder
`apps/docs`)
- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@larsrickert larsrickert mentioned this issue Jan 8, 2025
Merged
3 tasks
github-merge-queue bot pushed a commit that referenced this issue Jan 9, 2025
@larsrickert @github-actions
feat(OnyxHeadline): implement skeleton (#2453)
6a83be5 
Relates to #569

Implement headline skeleton

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@larsrickert larsrickert moved this from In Progress to In Approval in onyx Jan 9, 2025
@JoCa96
Copy link
Collaborator

JoCa96 commented Jan 9, 2025 •
edited
Loading

For a11y

  • we need to hide the "#" for screen-readers

  • and add some label/text to the anchor, so that it says "Copy permalink to "headline text content""

  • Why does the user need to normalize the heading? Preferably, we do it for them.

@larsrickert larsrickert mentioned this issue Jan 9, 2025
Merged
1 task
github-merge-queue bot pushed a commit that referenced this issue Jan 10, 2025
@larsrickert
feat(OnyxHeadline): automatically normalize hash (#2474)
4464ff3 
Relates to
#569 (comment)

- hide `#` for screen readers
- add title and aria description
- automatically normalize hash so the user doesn't have to do this

## Checklist

- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)
@github-project-automation github-project-automation bot moved this from In Approval to Done in onyx Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@larsrickert larsrickert

Labels
dev Requires technical expertise
Projects
onyx
Status: Done
Milestone
Headlines
Development

No branches or pull requests
5 participants
@JoCa96 @MajaZarkova @larsrickert @mj-hof @ChristianBusshoff