[New] - Advertising Card - Canopy / Messaging Framework

[AlexandruHoisan]

Type of request
New or Modification - To be discussed

Component, pattern, template, helper or foundation?
New example for the Card component.
Potentially new components for the Card component.

Nature of request
As part of the new Messaging Framework work that our team is looking at, we would need a Advertising card to be added to Canopy to allow to be easily used throughout all the projects, to fit for purpose.

The first Phase is the 'General Advertising' cards and to see how they look, check out the Design link at the section 'General Advertising'.
The second Phase would be the 'Tailored Advertisings' cards and to see how they look, check out the Design link at the section 'Tailored Advertising' (Ignore the banner component as that will come later).

Designs: https://www.figma.com/file/iYCsbVcJuJxIDkruYvq2i2/SSOPT_Messaging-framework?node-id=459%3A127728&mode=dev

Documentation Confluence Page: https://landg.atlassian.net/wiki/spaces/CAN/pages/5962268957/Promo+cards+documentation

For the moment, those will be used alongside with the already existing 'Promo Cards'(because they are used also by other apps) but will take their place eventually.

We intend to build them as Examples of the already existing Card component and have 2 potential approaches in mind:

1. We build it as an extension to the already existing Card component and create 2 new components(or one that does both with a variant for image or icon) to cater for the Image content and for the Icon content. Example code would be something like:

• New lg-card-hero-image component
  - By default just places an image at the top of the card in a normal img tag, so it can be used just like that.
  - With variant="advertising" :
  - Handles layout on mobile, tablet, desktop as per advertising designs
  - Sets the background image on a div and centres image inside the div using background-size: cover and background-position: center
  - Consider using role="img" and aria-label for a11y

• New lg-card-hero-brand-icon component
  - As per lg-card-hero-image above but for brand icons

Suggested API:

<lg-card roundedCornerSize="md" lgShadow>
   <lg-card-hero-image variant="promo" [src]="imageSrcUrl" />
   <lg-card-hero-brand-icon variant="promo" [name]="brandIconName" />
</lg-card>

General Advertising example with API:

<lg-card roundedCornerSize="lg" lgShadow lgPadding="none">
   <lg-card-hero-image variant="advertising" [src]="imageSrcUrl" />
   <lg-card-hero-brand-icon variant="advertising" [name]="brandIconName" />
   <lg-card-content lgPadding="lg">
     <h1 class="lg-font--expressive">Some Title</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </p>
     <a>Find out more</a>
   </lg-card-content>
</lg-card>

2. We build it as an extension to the already existing Card component, without creating any new components and we would use Css in the apps where we implement them to achieve what we want. This could potentially make inconsistencies apps between other apps and it would not be standardised in Canopy.

The first approach seems more clean and we would standardise the usage of images or Icons on the cards, but up for discussion :)

Other suggestions:

• Create a 'roundedCornerSize' directive:

  • Accepts a range of sizes, perhaps tied to the existing border-radius CSS variables
  • Add a new large size --border-radius-xl (_main.scss)

• Add new options to lgVariant directive - "tailored-green", "tailored-yellow", etc. (will be needed for the Tailored Advertising)

PS: We did think of using the existing Promo cards and maybe add variants to that, but there are quite a few differences(image sizes, layout overlapping, font styles and more) that we would have to take into account and felt like we would constrain ourselves going forward with whatever might be we want to implement in the future. Also I was not sure it was worth it as they might get decommission at some point in the future, when we swap them with those other cards.

[elenagarrone]

@AlexandruHoisan thanks for submitting this discussion 👍

Here are my notes:

New lg-card-hero-image component:

PS: We did think of using the existing Promo cards and maybe add variants to that, but there are quite a few differences(image sizes, layout overlapping, font styles and more) that we would have to take into account and felt like we would constrain ourselves going forward with whatever might be we want to implement in the future. Also I was not sure it was worth it as they might get decommission at some point in the future, when we swap them with those other cards.

I personally would use the Promo card and modify that instead of creating a new component. @alexcanning what do you think?

The New lg-card-hero-brand-icon component could also be a promo card with an input of imgPosition (top-right, bottom-left).

I don’t think it matters if the image is animg or an svg; we could detect that and apply the styles slightly differently if needed.

For the other suggestions:

• Not convinced about the border radius directive as I'm worried we would end up with inconsistent cards but happy for it to be done if the designers agree on having different border radiuses
• Yes to the new variants but we should called them generically - could we have the designers agree on naming? we currently have generic, info, success, error, warning.

@alexcanning any opinion on these last two points?

[alexcanning]

Border radiuses - you'd only want one for all cards, might it be useful to have border radius tokens to be used throughout the system? They could map to our existing sizing (SM, MD, LG etc. ) and be used anywhere we need a consistent scale of radii.

Agree on the colour variant naming. However the variants you mention are there to give specific meaning anywhere they're used - these would probably only need to be something like background green, blue and yellow. However, not a fan of the tailored- prefix. To me that implies the creation of solid background colours that are only ever used for this purpose, where actually it would be useful to reference them elsewhere too.

[owensgit]

@alexcanning the border radius in the designs shows as 8px for the promo cards, but then 4px for all other cards on the page. Is this intentional, or maybe a mistake in the designs?

[AlexandruHoisan]

@elenagarrone If we do use the existing Promo Card, would this be the approach you had in mind?

We would maybe add a class of 'lg-advertising-card' based on a boolean property and just modify the other classes when inside this 'lg-advertising-card' parent class?

Doing it like this we would avoid having any breaking changes, I think :)

[elenagarrone]

I would completely change the promo card to make it look like the new one as it looks like an evolution of what's there now.
I'm not too bothered about it being a breaking change to be honest 👍

So we would have:

• General advertising: default look of Promo card component
• Tailored advertising (I assume those are the ones with background colour ?): Promo card with applied lgVariant (this will be a pattern) and an input of imgPosition: 'top-left' | 'bottom-right'

[AlexandruHoisan]

Yea, that was what I wanted to do in the first place, but we still need the old Promo cards as we do not have approvals to fully decommission them yet, as. it's used in other apps. Thats why I wanted to stay away from them for the time being 😆

Yep, the 'Tailored' ones are the ones with the background colour.

In the first Phase we will focus on getting just the General ones done as they need to get used asap :)

[elenagarrone]

It's not decommissioning, it's just updating the look of it. If that's what is agreed by the designer I don't see any problem in bringing those apps inline with your one.

[alexcanning]

@elenagarrone if you think the rebuilding the existing promo cards is the way to go, I'll defer to your wisdom!

[alexcanning]

The naming and the organisation in the library need a bit of work. I've been talking to Lauren and Tom about how they planned to name the component and where it should sit in the library. We think it should live in Patterns - https://octopus.do/isoi50rn4/p/u55sf6xhg4/content

[owensgit]

I agree the new design promo cards should be a pattern - I like the idea of them being a pattern that's composed of existing building blocks. Please see my comment on this below :)

[owensgit]

Thanks for the feedback @elenagarrone and @alexcanning . I’m more inclined to go with the general approach outlined by @AlexandruHoisan, rather than update the existing Promo Cards component, because;

• The existing promo cards originally looked very different from the standard card, which is why we created is a separate component, however the new designs are almost identical to a normal card - the only difference being a larger border radius (which may be removed) and a hero image. For me it makes sense that we make some light modifications and additions for the existing card component.
• The existing promo cards had custom layout and breakpoints across devices, but in the new designs this can just be achieved with lg-grid
• Directly using lg-card along with lg-variant, lg-grid, .lg-font--expressive etc, is more composable than a separate component, it means we can use existing building blocks to create it, making it a pattern as @alexcanning mentioned above.
• Other patterns can be created and benefit from the modifications we make in future - e.g. the addition of a hero image to the card
• The designs also show full width cards, a mixture of two and three columns and on different page backgrounds, creating a kind of magazine style layout - I think this is easier to achieve in a composable way and is more flexible. The API of the original Promo Cards component doesn’t really lend itself to that magazine style layout
• I think this would also play nicely with creating a lib component in the mono repo for all the business logic which would govern how the layout gets generated (e.g. different ads will show based on the user's product mix and/or other data).

Let me know your thoughts, happy to discuss on a call if easier :)

[elenagarrone]

Ok yes, thanks for your input @owensgit. I think I see what you're saying and agree with everything 👍

As you said, we will need to make some modifications to the current card components and actually probably the only input we'll need would be for the border-radius (if it's agreed to be different from all the other cards).

[elenagarrone]

Just had a chat with @alexcanning and we agree on the cards approach @owensgit and @AlexandruHoisan outlined 👍

The cards will be shown as part of the Patterns section within Storybook and their name should be generic.

Things that we need:

• decision on naming of new lg-variants - they need to be generic for branding purposes
• the border radius should be consistent with the current cards (4px)
• a directive to achieve the same height for each card on desktop - generic one that can be used for anything that requires that same functionality.

Similar to what @AlexandruHoisan proposed in the first post, the API could look something like this:

Variant with image at the top:

<lg-card lgShadow lgPadding="none" lgVariant="<if needed>">
   // if it's an img add `src`, if it's an icon add `name` attribute
   <lg-card-hero-img [src]="imageSrcUrl" />
   <lg-card-content lgPadding="lg">
     <h1 class="lg-font--expressive">Some Title</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </p>
     <a>Find out more</a>
   </lg-card-content>
</lg-card>

Variant with image at the bottom:

<lg-card lgShadow lgPadding="none" lgVariant="<if needed>">
   <lg-card-content lgPadding="lg">
     <h1 class="lg-font--expressive">Some Title</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </p>
     <a>Find out more</a>
   </lg-card-content>
   // if it's an img add `src`, if it's an icon add `name` attribute
   <lg-card-hero-img [name]="brandIconName" />
</lg-card>

[AlexandruHoisan]

Seems like we have a good idea on how to approach this and the implementation in Storybook, so I will update my spike with the latest discussions :)
Thanks all for the help 🙇

[owensgit]

Great thanks @elenagarrone and @alexcanning 🙂

decision on naming of new lg-variants - they need to be generic for branding purposes

Some ideas on this one:

• background-blue, background-yellow, background-green
• hero-blue, hero-yellow, hero-green
• brand-blue, brand-yellow, brand-green

a directive to achieve the same height for each card on desktop - generic one that can be used for anything that requires that same functionality.

Great idea 👍

[elenagarrone]

@owensgit the naming for the variants should be more generic than that because some brands might not have those colours 🤔 it's a tricky one 😄

[elenagarrone]

The new promotional cards are available as part of v10.13.0.

There are still a couple of things that need to be done:

• add the new lg-variants
• add a new generic directive to achieve the same height for each card on desktop

[elenagarrone]

We've been working on creating a card group component that delivers the capability of cards having the same height in #1289. This is now available as part of v11.6.0.

Left to do:

• add the new lg-variants -> we have a separate discussion specific to variants here: Modification - lgVariant directive #1276