More card variants with different media options - image icon, video, embed #451

yvonnetangsu · 2019-06-14T06:37:57Z

READY FOR REVIEW

Summary

Create variants of cards that work with these new media types - videos, embeds, icons (image).
Media portion of card now uses the Decanter Media component.
New variants should work with existing card variants (horizontal, minimal, link).
Card content and button should be left aligned except for the icon variant.
Use @small-paragraph for the card body content.
When the button is the last element in the card, add extra margin at the bottom for optical balance.

Needed By (Date)

Whenever

Urgency

Not urgent

Steps to Test

Pull this branch and compile styleguide.
Look at the new variants - su-card--icon, su-card--video, su-card--embed and see if they behave as intended.
Check that the new variants works with the --minimal, --horizontal, --link card variant classes.
Note: The icon variants shows the icon at xs breakpoints since they have small file size.
Check that the Hero component has the same new style tweaks as Cards but otherwise behave the same (it has a nested Card component).

Affected Projects or Products

Decanter

Associated Issues and/or People

…tons except for icon variants

…t takes either custom file path or iframe and emit different markup

* master: Create Masthead component (#439) Link variants (#450) Create TERMSOFUSE.txt (#441)

yvonnetangsu · 2019-06-19T17:56:39Z

@sherakama @JBCSU , I still need to merge master (will have some conflicts since there were so many card branches) but please feel free to leave any comments.

* master: (28 commits) Updated packages and configuration files. (#527) Use rem instead of em for big button font size so it doesn't blow up in sections if we set a large base font size; finetune big button padding for smaller breakpoints (#522) Change sizes of link icons to use px instead of em to prevent occasional clipping (#523) D8CORE-628: Add caption option to hero banner. (#517) Use percentage for html root font size instead of px so people can scale up using browser font size preferences (#526) Mixins documention update — @centered-column (#448) Adds Tugboat and fixes npm dependencies. (#518) Update _hero.scss (#513) Create Aspect Ratio Mixin (#445) Adding global footer variants and link tweaks for legibility, change layout at MD breakpoint to match Figma (#500) Updated package and lock files. Add parameter to @link-icon to adjust vertical position of icon and different options for $animate parameter (#504) Delete card-2019-08-28.twig (#506) Update _input.scss (#507) Scale down type-a and type-b font size at xs and sm breakpoints, repurpose splash font and minor typography tweaks (#498) Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) (#503) add su- prefix to Decanter core and component variables, deprecate old names (#452) Includevar (#496) Put appearance back for select dropdowns (#479) Split input.scss into several files and add new input-base placeholder (#476) ... # Conflicts (resolved manually) # core/dist/css/decanter.css # core/src/scss/components/card/_card.scss # core/src/scss/components/card/index.scss # core/src/scss/utilities/placeholders/components/_card.scss # core/src/templates/components/card/card.twig

* master: 508: Create media component (#509) Update CHANGELOG.md (#533) Global footer font-weight and spacing tweak (#531) 5.1.0 (#530) # Conflicts (resolved manually): # core/src/templates/components/card/card.json

…f card when button is last element in card body for visual balance

yvonnetangsu · 2019-11-01T19:57:26Z

@sherakama , do you see any problems with me pulling in your FontAwesome changes from the v6 local footer into this branch? I could use that for the .su-card--icon-font variant.

…su-card--link variant

…con-card * '435-icon-card' of github.com:SU-SWS/decanter: Update core/src/scss/components/card/_card--icon.scss

…for image links in mixin @card

… link/button in block_card_cta so the whole section can be replaced

…l and change max-width of icon; make placeholder %card-base call mixin @card

yvonnetangsu · 2019-11-26T19:28:57Z

@sherakama , I think I made all the changes you requested. I created the mixin @card, and have the placeholder call the mixin with a deprecation notice. Please take another look when you have time.

sherakama · 2019-12-04T18:18:18Z

core/src/scss/components/card/_card.scss

 //
 // Markup: ../templates/components/card/card.twig
 //
 // Style guide: Components.Card
 //

 .su-card {
-  @extend %card-base;
+  @include card;


sherakama · 2019-12-04T18:19:06Z

core/src/scss/utilities/placeholders/components/_card.scss

@@ -1,98 +1,14 @@
 @charset "UTF-8";

 //
-// %card-base
+// <del>%card-base</del>


sherakama · 2019-12-04T18:27:52Z

core/src/scss/components/card/_card--icon.scss

+      @include modular-spacing('padding', 0 null null);
+    }
+
+    &.su-card--minimal {


I see you are allowing for multiple variants on this card. With our current variant approach, we do not allow for this as these combinators create exponential complexity. I have found myself wanting these combinators in work that I have done as well but it will be a change to our approach. As we are changing to the v6 branch soon and we have a palooza sprint we should take this chance to talk about the variant vs decorator models.

Yeah, I did write the code to allow for combinations of e.g. su-card-minimal and su-card-horizontal with the media variants. I can see how this might make things harder to maintain. Let's talk more about this next week.

First pass card variants - icon, icon-font, youtube; left-aligned but…

19962b8

…tons except for icon variants

yvonnetangsu self-assigned this Jun 14, 2019

yvonnetangsu added the enhancement label Jun 14, 2019

Add horizontal versions of new card variants

2ff0336

yvonnetangsu changed the title ~~More card variants - icons, maybe youtube~~ More card variants - icons, video Jun 14, 2019

yvonnetangsu changed the title ~~More card variants - icons, video~~ More card variants with different media options - image icon, icon font, video Jun 14, 2019

yvonnetangsu added 8 commits June 14, 2019 09:57

Don't render <figure> field if there's no image provided

8ec92c1

Show icons for card icon variants at XS breakpoint; card video varian…

1e7d4fc

…t takes either custom file path or iframe and emit different markup

Fixup

4fb22c5

Twig doc

ed32d27

fixup

33d1af3

Merge branch 'master' into 435-icon-card

663f081

* master: Create Masthead component (#439) Link variants (#450) Create TERMSOFUSE.txt (#441)

fixup

3535320

fixup

0bdcc50

yvonnetangsu requested review from sherakama and JBCSU June 19, 2019 17:55

sherakama added this to the Version 5.2.0 milestone Jul 31, 2019

This was referenced Oct 9, 2019

Create new "media" component for images, videos etc #508

Closed

508: Create media component #509

Merged

sherakama temporarily deployed to Tugboat October 29, 2019 22:31 Destroyed

Merge branch 'master' into 435-icon-card

d4b9504

* master: 508: Create media component (#509) Update CHANGELOG.md (#533) Global footer font-weight and spacing tweak (#531) 5.1.0 (#530) # Conflicts (resolved manually): # core/src/templates/components/card/card.json

sherakama temporarily deployed to Tugboat October 31, 2019 23:17 Destroyed

First pass using media component in card

a0ece0b

sherakama temporarily deployed to Tugboat November 1, 2019 17:11 Destroyed

Make card paragraph use @small-paragraph; Add spacing at the bottom o…

340b04b

…f card when button is last element in card body for visual balance

sherakama temporarily deployed to Tugboat November 1, 2019 18:10 Destroyed

Design tweaks per Kerri's request and make media component work with …

6fe3250

…su-card--link variant

yvonnetangsu added 2 commits November 25, 2019 15:55

Deprecate placeholder %card-base and add mixin @card instead

ed852ee

Merge branch '435-icon-card' of github.com:SU-SWS/decanter into 435-i…

d228585

…con-card * '435-icon-card' of github.com:SU-SWS/decanter: Update core/src/scss/components/card/_card--icon.scss

sherakama temporarily deployed to Tugboat November 25, 2019 23:56 Destroyed

Handle deprecated variables in hero component; add animation options …

bdf804c

…for image links in mixin @card

sherakama temporarily deployed to Tugboat November 26, 2019 01:23 Destroyed

Remove _card--video.scss file - no need

8da8a45

sherakama temporarily deployed to Tugboat November 26, 2019 01:27 Destroyed

yvonnetangsu changed the title ~~More card variants with different media options - image icon, icon font, video~~ More card variants with different media options - image icon, video Nov 26, 2019

Remove doc about Card component only supports a single link; wrap cta…

88b588e

… link/button in block_card_cta so the whole section can be replaced

sherakama temporarily deployed to Tugboat November 26, 2019 18:22 Destroyed

Deprecation doc

b225dc4

sherakama temporarily deployed to Tugboat November 26, 2019 18:28 Destroyed

Hide icon for .su-card--icon at xs breakpoint for .su-card--horizonta…

93cafd2

…l and change max-width of icon; make placeholder %card-base call mixin @card

sherakama temporarily deployed to Tugboat November 26, 2019 19:23 Destroyed

yvonnetangsu requested a review from sherakama November 26, 2019 19:26

sherakama temporarily deployed to Tugboat December 1, 2019 00:17 Destroyed

yvonnetangsu changed the title ~~More card variants with different media options - image icon, video~~ More card variants with different media options - image icon, video, embed Dec 2, 2019

sherakama reviewed Dec 4, 2019

View reviewed changes

sherakama temporarily deployed to Tugboat December 8, 2019 00:16 Destroyed

sherakama approved these changes Dec 12, 2019

View reviewed changes

sherakama merged commit 7645a99 into master Dec 12, 2019

sherakama deleted the 435-icon-card branch December 12, 2019 18:07

sherakama restored the 435-icon-card branch December 12, 2019 18:08

sherakama temporarily deployed to Tugboat December 12, 2019 18:08 Destroyed

sherakama deleted the 435-icon-card branch December 12, 2019 18:08

sherakama restored the 435-icon-card branch December 12, 2019 18:10

sherakama temporarily deployed to Tugboat December 12, 2019 18:10 Destroyed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More card variants with different media options - image icon, video, embed #451

More card variants with different media options - image icon, video, embed #451

yvonnetangsu commented Jun 14, 2019 •

edited

Loading

yvonnetangsu commented Jun 19, 2019

yvonnetangsu commented Nov 1, 2019

yvonnetangsu commented Nov 26, 2019

sherakama Dec 4, 2019

sherakama Dec 4, 2019

sherakama Dec 4, 2019

yvonnetangsu Dec 4, 2019

More card variants with different media options - image icon, video, embed #451

More card variants with different media options - image icon, video, embed #451

Conversation

yvonnetangsu commented Jun 14, 2019 • edited Loading

READY FOR REVIEW

Summary

Needed By (Date)

Urgency

Steps to Test

Affected Projects or Products

Associated Issues and/or People

yvonnetangsu commented Jun 19, 2019

yvonnetangsu commented Nov 1, 2019

yvonnetangsu commented Nov 26, 2019

sherakama Dec 4, 2019

Choose a reason for hiding this comment

sherakama Dec 4, 2019

Choose a reason for hiding this comment

sherakama Dec 4, 2019

Choose a reason for hiding this comment

yvonnetangsu Dec 4, 2019

Choose a reason for hiding this comment

yvonnetangsu commented Jun 14, 2019 •

edited

Loading