Refactoring to support downstream work in UIDS Base card updates

[pyrello]

• card__body line-height set to 1.7
• Card image sizes s, m, large are different than currently in uids_base Refactoring to support downstream work in UIDS Base card updates #847 (comment)
• Cards are not extending full-width of card stacked container.
  • Consider adjusting .card .media {margin-left: auto;margin-right: auto;} which is causing this.
• Gold and white backgrounds do not properly display arrow icon for circle buttons
• Adjust card header margin to margin: 0 0 0.525rem;, this will help make card fields appear a little closer together and is useful for card lists.
• Media.scss styles need to be rescoped to card only Refactoring to support downstream work in UIDS Base card updates #847 (comment)
• Set default headline style to serif.

Example here:

[pyrello]

When testing these updates in SiteNow, we noticed there seems to be an issue with precedence where the media shape classes get precedence over the media size classes and affect whether the sizes actually get rendered correctly.

Behavior can be seen here: http://localhost:6006/?path=/story/components-card--default&args=orientation:left;media_size:small

[pyrello]

We just discussed the issue in #847 (comment). It seems that we are running into issues with our media--small, etc. classes having a flex property built into them. After talking it through the media size property doesn't really seem to make a lot of sense. It should really be a property of the component that is implementing a media element. Therefore, we are going to refactor to move this from media into the card. When we eventually want to do the same thing with block quotes, we can abstract it out.

[bspeare]

If we go with the changes in b5849be, In SiteNow we would not want to render a media--large class on stacked widescreen cards. If that's not desirable, then we could add a line in for media--large.media--widescreen {width: 100%;} to allow the media--large class to work with stacked cards.

[bspeare]

Since our "small" image size is our default in SiteNow and used in layout columns as lists do we want to set a fixed pixel value for the small size and leave medium and large as percentages? As you can see in these screenshots, small can get very small.

[pyrello]

Since our "small" image size is our default in SiteNow and used in layout columns as lists do we want to set a fixed pixel value for the small size and leave medium and large as percentages? As you can see in these screenshots, small can get very small.

Maybe we set a min-width for the small size? I'd like to take a look at this using the new grid tool to understand it a bit better. I think we probably need some rules similar to what we developed for inline sizing, but specifically for card images.

[bspeare]

@pyrello that's a good idea!