1540842 - [Cards] Pocket New Tab should display 'Saved to Pocket' in the UI after a story is saved

Status: VERIFIED FIXED

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

Description

[Punam Dahiya [:pdahiya]]

Add UI feedback on save to maintain parity between Activity Stream and Pocket new Tab

https://github.com/mozilla/activity-stream/pull/4863#issuecomment-478690948

Comment 1

[Punam Dahiya [:pdahiya]]

NI Wolasi as this need design feedback for various components in Discovery Stream

Comment 2

[Jessilyn Davis]

Likely something for 69

Comment 3

[Punam Dahiya [:pdahiya]]

uiwanted keyword is getting removed from keyword list. https://github.com/k88hudson/bugzy/issues/115#issue-437270006 . Using this bug as an example to keep design view in bugzy.

Comment 4

[Wolasi :wolasi]

Scope
Note this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
Note We should be able to support other messaging in the future
Note messaging should not appear on SPOC units. This is in accordance with original New Tab

Messaging covers the following actions

• Saving to Pocket
• Archiving in Pocket
• Deleting from Pocket
• Bookmarking
• Removing from Bookmarks

Implementation Details

• A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
• Footer height should be 24px
• Text and icon should be vertically centered in footer
• Text and icon color should be gray-50
• Icon dimensions height: 16px, width: 16px
• Text properties font-size: 13px, line-height: 24px
• If a message is already visible, it should disappear and the new message shown with the animation described above

Suggested Markup

<footer class="story-footer">
      <div class="view-count">
        9.9m views
      </div>
      <div class="status-message">
        <span class="saved-to-pocket-icon"></span> Saved to Pocket
      </div>
</footer>

The view count referenced above is being implemented in this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1565709

Transition
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.

Updated Codepen
https://codepen.io/otbog/pen/aepXLo

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

Comment 5

[Jessilyn Davis]

Parity with current Activity Stream:

Saving to Pocket
Archiving in Pocket
Deleting from Pocket
Bookmarking
Removing from Bookmarks

Comment 6

[Wolasi :wolasi]

Attachment: Archive - Pocket.svg

Comment 7

[Wolasi :wolasi]

Attachment: Delete - Pocket.svg

Comment 8

[Wolasi :wolasi]

Attachment: Pocket.svg

Comment 9

[Punam Dahiya [:pdahiya]]

Activity Stream context messaging on Card supports below text:
https://github.com/mozilla/activity-stream/blob/master/locales-src/newtab.ftl#L114

with ids referenced here:
https://github.com/mozilla/activity-stream/blob/master/content-src/components/Card/types.js#L5

Comment 10

[Jeane Carlos]

@wolasi Should we change the behavior after a user removes a bookmark? The current behavior is to say "Visited".
https://drive.google.com/file/d/1kNAaX7lB-1sbD8-xvkKAuldOKoYzvltV/view?usp=sharing

New possible behavior. Indicated "Removed Bookmark" and some icon.
https://drive.google.com/file/d/1XnkHEN5lINyHtdzsF8FpuLbnVOfB301_/view?usp=sharing

Comment 11

[Wolasi :wolasi]

Yes, let's make it say "Bookmark removed"

And would you be able to take this bug?
https://bugzilla.mozilla.org/show_bug.cgi?id=1568033

It covers increasing the line-height of the Sponsored by label on sponsored cards so that it matches the status messaging text .

Comment 12

[GitHub Bugzilla PR Linker]

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

Comment 13

[Jeane Carlos]

Can you attach the Bookmark Removed icon here? The other icons are already being used internally, just need to import this one.

Comment 14

[Wolasi :wolasi]

Attachment: Bookmark Remove.svg

Comment 15

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/a28a338396c3

Comment 16

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (70.0a1 Build ID - 20190808214929) installed, on Windows 10 x64, Arch Linux and Mac 10.14.5. Now, the "Saved to Pocket", "Bookmarked" and the "Bookmark removed" messages are displayed for the recommended by Pocket cards excepting the sponsored ones.