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

Update KtCard component #788

Open
RueRivoli opened this issue Jul 31, 2023 · 0 comments
Open

Update KtCard component #788

RueRivoli opened this issue Jul 31, 2023 · 0 comments
Assignees
@RueRivoli
Labels
priority:4-high ⚠️ Needs to be fixed ASAP, but without HACKs

Comments

@RueRivoli
Copy link
Collaborator

RueRivoli commented Jul 31, 2023 •
edited
Loading

Is your feature request related to a problem? Please describe.
This feature request is necessary to permit the design of Tile (card) view for the catalog. (in addition to the catalog list view)

Describe the solution you'd like

  • Card height depends on content
  • Distinguish 2 type of cards:

only clickable cards: if the card is meant to be only opened
non clickable cards with actions: if the card is meant to contain buttons

  • card images needs to have skeletons when loading

  • card body needs to have skeletons when loading

  • tabulation makes the focus on the card itself or moves forward to the next card or next page component

  • shift + tab moves the focus backward to the previous card

  • enter: open the card if it's a clickable card or perform the action of the focus element if not

Describe alternatives you've considered
/

Additional context
Find more details on B3-13297
@RueRivoli RueRivoli added the priority:4-high ⚠️ Needs to be fixed ASAP, but without HACKs label Jul 31, 2023
@RueRivoli RueRivoli self-assigned this Jul 31, 2023
RueRivoli added a commit that referenced this issue Aug 3, 2023
@RueRivoli
feature(#788) : update KtCard component
b9f4a48 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 3, 2023
@RueRivoli
feature(#788) : update KtCard component
972466f 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 3, 2023
@RueRivoli
feature(#788) : update KtCard component
3038b2f 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 3, 2023
@RueRivoli
feature(#788) : update KtCard component
9002a14 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 3, 2023
@RueRivoli
feature(#788) : update KtCard component
52504e1 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 4, 2023
@RueRivoli
feature(#788) : update KtCard component
ff6b0ce 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 4, 2023
@RueRivoli
feature(#788) : update KtCard component
2dd954e 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
santiagoballadares pushed a commit that referenced this issue Aug 4, 2023
@RueRivoli @santiagoballadares
feature(#788) : update KtCard component
6386f27 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
RueRivoli added a commit that referenced this issue Aug 4, 2023
@RueRivoli
feature(#788) : update KtCard component
b9a6892 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
santiagoballadares pushed a commit that referenced this issue Aug 4, 2023
@RueRivoli @santiagoballadares
feature(#788) : update KtCard component
c03b860 
- added a div for image skeleton, header skeleton, and body skeleton
- added a class --is-clickable for clickable cards with its associated style
- created computed property hasActions that return true if 2 actions props are defined
- removed footer slot as we want only to have buttons in the footer (design is ok)
- added props: isImgLoading, isTextLoading, primaryActionLabel, secondaryActionLabel, dataTests ...
- added a size sm to skeleton size for rectangle
- updated documentation for KtCard
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RueRivoli RueRivoli

Labels
priority:4-high ⚠️ Needs to be fixed ASAP, but without HACKs
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@RueRivoli