1566545 - Card UI to support Spoc variants

Status: RESOLVED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Comment 1

[Punam Dahiya [:pdahiya]]

NI Wolasi to attach specs and clarify spoc variants to be supported

Comment 2

[Wolasi :wolasi]

We want to test two variants of our Story Promo Units for testing. The two variants are described in the spec below.
There will be a separate ticket for the experiment. This ticket covers just the UI implementation.

Design Spec
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=77%3A0

Comment 3

[Wolasi :wolasi]

Attachment: CTA Caret.svg

Caret svg for CTA link

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5216

Comment 5

[Punam Dahiya [:pdahiya]]

NI Wolasi to update figma with CTA button and CTA link states in dark theme.

In future release when we support non-paid promo, we should be updating design specs to handle context messaging for variant A with CTA button.

Comment 6

[Wolasi :wolasi]

Dark Theme is at the bottom
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=77%3A0

Comment 7

[Punam Dahiya [:pdahiya]]

As clarified https://bugzilla.mozilla.org/show_bug.cgi?id=1566547#c11, Scope of the bug for CTA excludes Hero component

Comment 8

[Wolasi :wolasi]

Design feedback based on builds…

CTA Link

• Reduce spacing between text and caret in CTA link, give .cta-link padding-right: 9px
• Let's use the following markup instead…
  <p><a href="#" class="cta-link icon icon-arrow" tabindex="0">Learn more</a></p>

CTA Button

• make .ds-card .meta .cta-button margin: 12px 0 4px;
• use this · for the bullet in the source · sponsored lock up
• use spaces not padding in the source · sponsored lock up

Comment 9

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/7d5723904550

Comment 10

[Marius Coman [:mcoman], Ecosystem QA]

Hey Punam, I've run into a bit of a problem when trying to verify this issue.

In order to verify it, I've changed the "browser.newtabpage.activity-stream.discoverystream.endpoints" pref value to "https://spocs.getpocket.com/spocs" and opened a new tab, but the CTA link was not displayed on the "Sponsored" card. Also, I've tried the steps for the "Button CTA" variant, but again the button was not displayed on the available "SPOCS".

I've also seen that this bug is blocked by bug 1566547, are there any server-side changes that still need to land, or was I supposed to be able to verify it without that?

Comment 11

[Punam Dahiya [:pdahiya]]

Hi Marius, That's correct, as commented in PR https://github.com/mozilla/activity-stream/pull/5216#issue-303075244 a pre-requirement of seeing CTA is to have server return spocs with CTA property , this is dependent on fix of bug 1566547.

Comment 12

[Jessilyn Davis]

We're hoping that bug 1566547 is landed by EOD today. Thanks for looking into it Marius! I apologize that this was on your radar to QA without the backend landed! We'll keep you posted.

Comment 13

[Punam Dahiya [:pdahiya]]

With landing of fix of followup https://bugzilla.mozilla.org/show_bug.cgi?id=1575108 in nightly, CardUI will be in synch with "cta_variant" returned from server. Please follow test steps in bug 1575108 to test CTA support in card grid. Thanks!