DS-529: Pega.com: Add 'Download slides' CTA to PW Replays "Best Of" cards

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-529

Summary

Download slides CTA was added. All phases from the Best-of-content were removed and only one final version was kept.

Details

Download slides CTA was added to the bolt-teaser component and to the best-of-content pages in relation to the proposed wireframe.

How to test

Pull the branch. Check out the bolt-teaser component and best-of-content pages where the new Download slides CTA was added. Make sure the new CTA is correct in terms of semantics and accessibility.

Release notes

• Added new CTA to the Listing Teaser actions list on the bolt-teaser component and the best-of-content page.

Visual Changes

Teaser component

• Action list is now aligned to the left.

[colbytcook]

@MarcinMr we need to make like, share, download row left aligned. See the "New, clickable 'Download slides' CTA added to PW Replays cards added to the right of existing "Like" and "Share" CTAs (now aligned left)" definition of done.

[mikemai2awesome]

@MarcinMr @colbytcook I think the Best-of demos under Pages should be updated as well. Additionally, remove all the phases and keep just one final version.

[mikemai2awesome]

This is not needed. The visible text is already descriptive enough. Also, I do not see in the ticket's Definition of Done that says include (PDF, 3 pages, 2.3mb). Is the ticket out of date?

[MarcinMr]

I've read that it's a good practice to add a file name, number of pages, and weight of o file for screen readers to announce details of a downloading resource. But if it is not necessary I've already deleted those labels.

[mikemai2awesome]

If the data exists, they can create a tooltip with the info. I'll leave that for them to decide.

[mikemai2awesome]

I asked Ross in the ticket. Will wait for his reply. https://pegadigitalit.atlassian.net/browse/WWW-858?focusedCommentId=37360

[MarcinMr]

@MarcinMr we need to make like, share, download row left aligned. See the "New, clickable 'Download slides' CTA added to PW Replays cards added to the right of existing "Like" and "Share" CTAs (now aligned left)" definition of done.

@colbytcook changed to aligned left

[mikemai2awesome]

Excellent job! @MarcinMr

[danielamorse]

Looks good from a code standpoint. Nice cleanup of our old demos.

@mikemai2awesome I noticed the Listing Teaser actions can get pretty cramped, and the ones using the Icon Component vs Element wrap differently. Maybe we at least want to convert "Views" to Element for consistent wrapping?

@MarcinMr since this includes a visual change to the alignment of the Listing Teaser actions, would you please add that to the PR Release Notes? See this PR for reference on formatting.

[mikemai2awesome]

@danielamorse Good catch. We should fix that.

[mikemai2awesome]

I pushed a fix for it. The icon alignment was off. @colbytcook

[danielamorse]

Alignment is fixed, code looks good 👍

1. Updated the Teaser Jest snapshots, waiting for those to pass on Travis.
2. Updated the Teaser Status and Actions demo to use the Twig version of Tooltip instead of the web component. We use <bolt-tooltip> internally in some templates because it's convenient, but for demo code that devs will reference I think we want Twig.

@colbytcook @mikemai2awesome let me know if I'm missing something regarding the second note. If not, and you approve, ship this thing!

[MarcinMr]

@MarcinMr since this includes a visual change to the alignment of the Listing Teaser actions, would you please add that to the PR Release Notes? See this PR for reference on formatting.

@danielamorse Updated PR with release notes and visual changes

[MarcinMr]

@mikemai2awesome I noticed the Listing Teaser actions can get pretty cramped, and the ones using the Icon Component vs Element wrap differently. Maybe we at least want to convert "Views" to Element for consistent wrapping?

@danielamorse @mikemai2awesome

There is also a small issue with the horizontal teaser on a small screen. Newly added CTA overflows the viewport.

Perhaps we should wrap the list or entire block on the really small screens like on the shots below: