4.x - Finish card component

[bspeare]

After the work in https://github.com/uiowa/uids/pull/698, a few items remain to be done.

Proposed Solution

• Set up the media component sizes to work with the card component.
  • Create and integrate media--small ,media--medium , and media--large into card component: https://github.com/uiowa/uids/blob/3.x/src/components/card/_card-mixins.scss#L135-L154.
• Integrate media--circle ,media--border , and media--cover into card component.
• Set up stories for a few card variations represented in SiteNow:
  • Vertical
  • Vertical with small circular image with image border
  • Horizontal
  • Horizontal with small circular image with image border (People list)
• Resolve issues noted in https://github.com/uiowa/uids/issues/696#issuecomment-1158135821.

[briand44]

need to scope out variations here

[joewhitsitt]

we pivoted from yesterday’s media component to handling media similar to borderless and background. media classes are now accounted for in the card component

[joewhitsitt]

it is my understanding this changes how the stories would work for this. also outstanding are the fixes from https://github.com/uiowa/uids/issues/696#issuecomment-1158135821

[joewhitsitt]

People list teaser (story) should be added (media left/right)

[bspeare]

Clean up sass file notes

• Review scss code changes:
  • Are BEM modifier and elements used in the right way? https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
  • We are moving towards not nesting BEM for readability: You will notice we are not nesting modifer elements in https://github.com/uiowa/uids/blob/4.x/src/components/card/card.scss.
  • Is the component named correctly? Does the name of the component correctly describe the design semantics?
  • Do the class names make sense? Could they be expanded/shortened? Are there any namespace collisions with other components?
  • Do there need to be more/less comments?
  • Remove unused code
  • Check the variables.scss and utilities.scss files to reuse common variables and mixins
  • Is there any redundant code? Is there code that could be abstracted out into a common reusable class?
  • Use logical properties like text-align: start instead of text-align: left
  • Review how px, em, rem, %, vh, vw are used.
  • Use rem for font size, padding, and margin and have a few defined in [variables.scss](https://github.com/uiowa/uids/blob/main/src/assets/scss/_variables.scss)
  • Use % when specifying grid columns, flex layouts, and anything else necessary to define a size as relative to an element's parent object
  • Use em mostly when defining the browser breakpoint size
  • Use px for values like border
  • Use vw on an item that needs to be styled relative to the viewport’s width
  • Use vh on an item that needs to be styled relative to the viewport’s height
  • And finally, could the Sass formatting be improved? Look for examples at https://github.com/airbnb/css for possible formatting suggestions.

[joewhitsitt]

Added a story to represent person teaser cards.

[joewhitsitt]

Did a pass at cleaning up the card and media styles. Ideally another set of eyes would be good.

When I clicked basic-card--borderless-card (mobile sized), I didn't notice a change in media padding. This was discussed in the huddle I was in earlier, but I am foggy about what was decided here. - https://github.com/uiowa/uids/pull/698

I was foggy then and now about what the ideal should be for the following:

Collision for media padded and borderless, used in combo media padding doesn’t do anything.
Media padded on L/R align is not working.

[bspeare]

We've got the card_details in the 4.x branch, do we want get card_subtitle and card_meta represented here as well?

https://github.com/uiowa/uiowa/blob/main/docroot/themes/custom/uids_base/templates/uids/card.html.twig#L76-L93

[bspeare]

Just a few notes after our Slack huddle and looking at this today:

• Media size and shape seem to be applying media--medium media--widescreen as the defaults and we just need the media class applied as the default.
• Media align has an empty option that sets the card default, but we can't set a label there otherwise it will add an unneeded class name to the card.
• To @pyrello's point, I think we do probably want to remove the media_cover options and have the media--cover class applied only if the media_padded is set to false.

[joewhitsitt]

Thanks for the comment @bspeare. I think I have resolved the media--medium media--widescreen defaults and the media--cover issue.

I feel like basic-card--person-card is almost there but the image seems to overflow without padded applied. My flex overflow knowledge is as dated as the IE11 fixes I copied pasted way back when.

[bspeare]

@joewhitsitt are you talking about the image stretching or is there another overflow you could screenshot?

[joewhitsitt]

Sorry, this was what I was trying to describe:

UIDS

Sandbox People v3

[pyrello]

Notes from our huddle this afternoon:

• We determined that the media mixin doesn’t really have any overlap with the banner at the moment, so we don’t need to worry about incorporating it there. It will be used again for the blockquote component.
• We made an attempt at allowing for responsive embeds in the card, but the existing styles from UIDS 3 we were working with were incompatible with our new card/media padding strategy.
• We determined that all outstanding tasks at #785 are necessary to consider this done.
• We resolved the issues related to the click-a11y script and logic for determining the linking element.