Cards: Add content variants and Improve Hitboxs

[tmcconechy]

Is your feature request related to a problem or use case? Please describe.

We want to add some examples to cards for a WFM demo and also improve the hit boxes.

Describe the solution you'd like

• Add a status card with an actions menu (to card examples - can start with https://main-enterprise.demo.design.infor.com/components/cards/example-auto-size.html)
• Add an example with busy status
• Add an example with hyperlink
• Add an example with photo card
• Improve the hit box size for tapping

Design

Additional context
See these sections on the figma sketch if needed https://www.figma.com/file/ri2Knf3KchdfdzRAeds0Ab/IDS-Mobility-v4.6?node-id=1%3A5740

And also this section:

[janahintal]

All examples were working as expected. However, no single action section found in the example page.

[tjamesallen15]

All examples were working as expected. However, no single action section found in the example page.

Hello. Will work on this one tonight.

[CindyMercadoReyes]

BDD added to this new enhancement.
story_github5250.docx

[janahintal]

Hi @tmcconechy, I've notice a difference in tab focus of '...' button when in Classic Theme. The focus in New version looks centered but not in classic version.

New Version

Classic Version

[tmcconechy]

@tjamesallen15 can you look for a follow up fix? thanks!

[ghost]

Design QA Feedback:

Card Component QA

Jira Ticket: https://jira.infor.com/browse/UXD-2718

QA Demo Link: https://main-enterprise.demo.design.infor.com/components/cards/example-variations-hitboxes.html

Figma File: https://www.figma.com/file/ri2Knf3KchdfdzRAeds0Ab/IDS-Mobility-v4.6?node-id=285%3A0

Feedback for Dev:

These are all the modifications that need to be made to align with the Figma file. We will start sending specific handoff links to dev so no new changes will accidentally occur on designs side.

• First-line Body 16 Regular instead of 16 bold

• Slate 06 instead of 03 (3rd line in item, and 2nd line in Account, Hyperlink, photocard, and single action)

• “May, 2nd" should be “May 2nd" (Completely my mistake, not devs fault)

• On the screenshot below, the side that contains the ellipsis/icon contains more white space than the left side. Can we get the same spacing visually?

• On the screenshot below, can we get the icons to line up on the side?

• On icons focus state should be circular when possible.

[tmcconechy]

@katieinfor two questions on this design feedback.

1. Is this correct? I see in the screen shots the second text is a lighter color. And i think it looks better not slate06 as it has no hierarchy. So i would question this point.
   

2. How big is the button touch point supposed to be? Isnt 50x50 too big? I feel like the old size didnt have a problem

OLD

NEW

[kevinwhitedesign]

@tmcconechy yeah slate 6 for accessibility was the reasoning.
and 44px hitbox minimum should be standard. cc @katieinfor @laurensteiger

[janahintal]

This is now working as expected.

However, some texts are not readable in Dark mode.
https://main-enterprise.demo.design.infor.com/components/cards/example-variations-hitboxes.html?theme=new&mode=dark&colors=0066D4

https://main-enterprise.demo.design.infor.com/components/cards/example-variations-hitboxes.html?theme=classic&mode=dark&colors=2578a9

Also, there is a scroll bar when in responsive web view.

[tjamesallen15]

Hello @tmcconechy ,
As the previous comment of Janah above, what would be the color schemes for the dark version for this one? I didn't handle this one because I didn't know the requirements.

cc @janahintal @ericangeles

[tmcconechy]

@tjamesallen15 for that just use the same colors as in the listview examples when using themes.

https://main-enterprise.demo.design.infor.com/components/listview/example-index.html?theme=new&mode=dark&colors=0066D4

You can copy them over from there but design didnt give an exact design but this will be correct. Should we make a new issue or will you just do a follow up PR?

[ericangeles]

@tmcconechy I have the same thing with James' issue, so I probably create a follow-up PR on expandable cards.

[tjamesallen15]

@tmcconechy I'll make a follow up PR for this one.