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 OnyxCard component #2383

Open
15 of 17 tasks
larsrickert opened this issue Dec 19, 2024 · 1 comment
Open
15 of 17 tasks

Implement OnyxCard component #2383

larsrickert opened this issue Dec 19, 2024 · 1 comment
Assignees
@larsrickert
Labels
dev Requires technical expertise
Milestone
Cards & tiles

Comments

@larsrickert
Copy link
Collaborator

larsrickert commented Dec 19, 2024 •
edited
Loading

Why?

We want to offer a card component.

Depends on

Design

Figma

Acceptance criteria

  • the whole card content is provided by the user via the default slot
  • the card has a pre-defined padding which can optionally be overridden/removed by the user via custom CSS
  • Storybook examples are implemented for the following content (see Figma):
    • Headline + text
    • Small image/icon + headline + text
    • large/full-width image + headline + text
    • Headline with right aligned content (e.g. a system button or badge/tag) + text
    • Headline + KPI (e.g. "5.00%)
  • optionally, the card can be made clickable. It is documented for the property that clickable cards must not contain any interactive content

Implementation details

  • if the card is clickable, we should use a <button> tag for the card
  • the card does not have a skeleton on its own, only the content can have skeleton (e.g. buttons)

Definition of Done

  • The following component requirements are implemented:

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

  • Should be covered by tests:

    • visual tests (Playwright screenshots)

  • Make sure, that

    • 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

  • Checked and approved by
    • designer
    • dev
@larsrickert larsrickert added 0-refinement All issues that can or need to be estimated in our next refinement dev Requires technical expertise labels Dec 19, 2024
@larsrickert larsrickert self-assigned this Dec 19, 2024
@larsrickert larsrickert added this to onyx Dec 19, 2024
@github-project-automation github-project-automation bot moved this to New in onyx Dec 19, 2024
@larsrickert larsrickert moved this from New to Backlog in onyx Dec 19, 2024
@larsrickert larsrickert mentioned this issue Dec 19, 2024
Open
14 tasks
@mj-hof mj-hof added this to the Cards & tiles milestone Jan 8, 2025
@larsrickert larsrickert moved this from Backlog to In Progress in onyx Jan 13, 2025
@larsrickert larsrickert removed the 0-refinement All issues that can or need to be estimated in our next refinement label Jan 13, 2025
@larsrickert larsrickert mentioned this issue Jan 13, 2025
Merged
4 tasks
github-merge-queue bot pushed a commit that referenced this issue Jan 13, 2025
@larsrickert @github-actions
feat: implement OnyxCard component (#2491)
9ddcd26 
Relates to #2383

Implement basic card component and examples

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [ ] 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 moved this from In Progress to In Approval in onyx Jan 15, 2025
@jannick-ux
Copy link
Collaborator

please make the "more flyout" appear on click instead of hover. And decrease the gap between flyout and systembutton to 0.5 rem

@larsrickert larsrickert mentioned this issue Jan 15, 2025
Merged
github-merge-queue bot pushed a commit that referenced this issue Jan 16, 2025
@larsrickert
docs(OnyxCard): update flyout menu examples to open on click instead …
99d4762 
…of hover (#2520)

#2383 (comment)
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: In Approval
Milestone
Cards & tiles
Development

No branches or pull requests
3 participants
@larsrickert @mj-hof @jannick-ux