feat/tup 637: Migrate c-card support list to core-styles

[R-Tomas-Gonzalez]

Overview

Migrate c-card list support to core-styles

Outdated Notices

Warning
Should not be merged until the code is adapted to not conflict with Bootstrap .card in any Portal (both TUP and Core Portal).

Related

• TUP-637
• Migrate from c-card

Changes

Importing c-card list support from tup-ui to core-styles

Testing

Verify Card styles here

UI

Before	After

[R-Tomas-Gonzalez]

Note:

• Once all card items have been merged in, we should remove the import of c-card.css in tup.cms.for-core-styles.css
• And c-card.css should also be deleted

[wesleyboar]

Functionally, works. Architecturally, off. But we'll get there.

Blame my haphazard use of Fractal naming (to understand, see "Fractal vs. BEM").

Please add the new styles to c-card.css, not c-card-list.css. You may continue to use _c-card--list.hbs for the name of the reusable demo template.¹

Why?

These styles are for any list in a card (any card), not a list-specific "modifier"* of a card.

* A "modifier", as in the "M" of BEM. CSS Style Guide - Naming Conventions - BEM.

Fractal vs. BEM

In Fractal, to create a "variant" (a.k.a. BEM class modifier), one writes c-card--var-aka-mod. I used that same syntax for creating Handlebar templates to be included into a demo template i.e. _c-card--one-plain.hbs (the underscore hides the template from the demo navigation). Should I? Must I? I don't know. Feedback welcome.

Footnotes

1. If feedback and discussion lead to new standard, we can update after these after this PR. ↩

[wesleyboar]

I'm taking a little more liberty on this one, to get it done sooner, so we can test in bulk this week on dev. But I let you review the change.

[R-Tomas-Gonzalez]

Lines 184-187:
This has popped up twice (once in this branch, and second in another: 254)
I'm not sure how to handle this, and I'm not sure deleting it is the right choice. In 254, I did delete, but here, I just moved it to it's original spot. Let me know what you think @wesleyboar when you review this.

[wesleyboar]

Yes. Delete please.

• The effect of the style is negligible.
• The <h4> is demo'd by c-card--image-top for contact card.

[wesleyboar]

I fixed a bug (92057e0). I also moved list to a card that has negative space (13ff9a0), so there are an even number of cards, thus less vertical scrolling.

wide, 4 per row	medium, 3 per row	narrow, 2 per row