Create a RecommendedBadge component by bobsilverberg · Pull Request #7958 · mozilla/addons-frontend · GitHub

Fixes mozilla/addons#13153

Note that I am using the existing "trophy" icon that is used for "Staff Pick", but this will be replaced by a newer icon. I am waiting to acquire that from @brassy-. Note also that the color of the text is from the InVision mockup at https://mozilla.invisionapp.com/share/BXQTIIC86ZN.

Note also that we do not have a SUMO article to link to yet, so currently the link just points to SUMO. I have opened mozilla/addons#13155 as a follow-up to update the link once it is available.

Here's a screenshot of the component in storybook:

Codecov Report

Merging #7958 into master will increase coverage by 0.05%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    mozilla/addons-frontend#7958      +/-   ##
==========================================
+ Coverage   98.04%   98.09%   +0.05%     
==========================================
  Files         258      259       +1     
  Lines        7152     7349     +197     
  Branches     1325     1325              
==========================================
+ Hits         7012     7209     +197     
  Misses        126      126              
  Partials       14       14

Impacted Files	Coverage Δ
src/ui/components/RecommendedBadge/index.js	100% <100%> (ø)
src/disco/pages/DiscoPane/index.js	100% <0%> (ø)	⬆️
src/ui/components/DropdownMenu/index.js	100% <0%> (ø)	⬆️
src/ui/components/LoadingText/index.js	100% <0%> (ø)	⬆️
src/amo/components/SectionLinks/index.js	100% <0%> (ø)	⬆️
src/amo/components/RatingManager/index.js	100% <0%> (ø)	⬆️
src/ui/components/HeroSection/index.js	100% <0%> (ø)	⬆️
src/ui/components/ConfirmButton/index.js	100% <0%> (ø)	⬆️
src/core/components/SurveyNotice/index.js	100% <0%> (ø)	⬆️
src/ui/components/DismissibleTextForm/index.js	100% <0%> (ø)	⬆️
... and 74 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8a6b23b...103376f. Read the comment docs.

Oops, somehow the test didn't get added. Let me try to find it!

After working on integrating this into the details page, I made a few tweaks to the styles. Here's a new screenshot of storybook at large screen size:

and one at less than large screen size:

Note also that we do not have a SUMO article to link to yet, so currently the link just points to SUMO. I have opened mozilla/addons#13155 as a follow-up to update the link once it is available.

Do we want to add _target=blank?

Thanks for the review @willdurand. I have addressed your comments about the storybook story, but for all of the other ones we are awaiting more information.

Note also that we do not have a SUMO article to link to yet, so currently the link just points to SUMO. I have opened mozilla/addons#13155 as a follow-up to update the link once it is available.

Do we want to add _target=blank?

Yes, I think so. I've added it.

I received the proper icon, and I have attempted to style it according to the latest prototype. I have not been entirely successful, but it's a start and maybe someone can help me improve it.

Here's what it currently looks like in storybook:

@MeridelW Can you confirm what the text should be when hovering over the recommended badge? I've looked through some of the docs about this, but I'm not sure of the final decision. I currently have "Recommended extensions are safe, high-quality extensions."

Oops, I really should have added this to the issue, not to the PR. I'll repeat it there. Sorry for the noise.

Nice! I played with the CSS and here is a patch: https://gist.github.com/willdurand/15fe2ddba5aaec10198d0fd634a41584
It's not perfect but it goes in the direction that I'd like to take in order to merge this patch :)

Is this the final copy? (it looks like but if not, let's create a new issue)

I asked @MeridelW in the issue to confirm whether that is the final text or not. I will open up and issue to track that question, as I gather we might land this before we have a final answer.

I am pretty sure it's done automatically but we should double-check that rel="noopener noreferrer" is added.

I'm not sure I understand. Do you mean add a test to assert that the prop is there?

No sorry, I meant manually looking at the generated HTML :p

Looking at it in Storybook, I see rel="noopener noreferrer" on the a tag.

Nice! I played with the CSS and here is a patch: gist.github.com/willdurand/15fe2ddba5aaec10198d0fd634a41584
It's not perfect but it goes in the direction that I'd like to take in order to merge this patch :)

Thanks @willdurand, that is much better indeed. I noticed that it kind of breaks in rtl mode though:

But I think I fixed that by using padding-end and padding-start.

This is ready for another look.

r+wc, thanks!

bobsilverberg requested review from kumar303 and willdurand May 2, 2019 17:58

bobsilverberg force-pushed the recommended-badge-7957 branch from 88c60dd to 253ac6f Compare May 2, 2019 18:12

bobsilverberg force-pushed the recommended-badge-7957 branch 2 times, most recently from bd823e9 to a57c691 Compare May 2, 2019 18:40

Create a RecommendedBadge component

c7f5fbc

bobsilverberg force-pushed the recommended-badge-7957 branch from a57c691 to c7f5fbc Compare May 2, 2019 19:38

This was referenced May 2, 2019

Show recommended badge on details page #7959

Merged

Update link from Recommended Badge to point to correct SUMO article mozilla/addons#13155

Closed

willdurand self-assigned this May 3, 2019

willdurand reviewed May 3, 2019

View reviewed changes

willdurand removed the request for review from kumar303 May 3, 2019 08:15

Update story and add RTL support

5269827

bobsilverberg requested a review from willdurand May 3, 2019 14:40

Add target="_blank"

b7285fe

Add icon and attempt to style

fed4292

bobsilverberg added 3 commits May 3, 2019 17:04

Fix version of storybook-addon-rtl

007fb04

fix lint

2447337

Fix test

b35bb59

willdurand reviewed May 6, 2019

View reviewed changes

Address review comments

9205e0b

bobsilverberg requested a review from willdurand May 6, 2019 18:14

bobsilverberg added 2 commits May 6, 2019 14:18

Update hover text

c6ac670

fix lint

9af41de

willdurand reviewed May 7, 2019

View reviewed changes

Comment thread src/ui/components/RecommendedBadge/styles.scss

willdurand approved these changes May 7, 2019

View reviewed changes

Make normal and hover colors more different from one another

103376f

bobsilverberg merged commit 81bb3c9 into mozilla:master May 7, 2019

bobsilverberg mentioned this pull request May 5, 2024

Change colors of recommended badge mozilla/addons#13172

Closed

+                      rel="noopener noreferrer"
+                      target="_blank"
+                      title={i18n.gettext(
+                        'Recommended extensions are safe, high-quality extensions.',

Create a RecommendedBadge component by bobsilverberg · Pull Request #7958 · mozilla/addons-frontend · GitHub

Create a RecommendedBadge component - #7958

Create a RecommendedBadge component#7958bobsilverberg merged 11 commits intomozilla:mastermozilla/addons-frontend:masterfrom bobsilverberg:recommended-badge-7957bobsilverberg/addons-frontend:recommended-badge-7957Copy head branch name to clipboard

Conversation

bobsilverberg commented May 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-io commented May 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

bobsilverberg commented May 2, 2019

Uh oh!

bobsilverberg commented May 2, 2019

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

willdurand commented May 3, 2019

Uh oh!

bobsilverberg commented May 3, 2019

Uh oh!

bobsilverberg commented May 3, 2019

Uh oh!

bobsilverberg commented May 3, 2019

Uh oh!

bobsilverberg commented May 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

willdurand left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

willdurand May 6, 2019

Choose a reason for hiding this comment

Uh oh!

bobsilverberg May 6, 2019

Choose a reason for hiding this comment

Uh oh!

willdurand May 6, 2019

Choose a reason for hiding this comment

Uh oh!

bobsilverberg May 6, 2019

Choose a reason for hiding this comment

Uh oh!

willdurand May 6, 2019

Choose a reason for hiding this comment

Uh oh!

bobsilverberg May 6, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bobsilverberg commented May 6, 2019

Uh oh!

willdurand left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Create a RecommendedBadge component#7958
bobsilverberg merged 11 commits into
mozilla:masterfrom
bobsilverberg:recommended-badge-7957

bobsilverberg commented May 2, 2019 •
edited
Loading

codecov-io commented May 2, 2019 •
edited
Loading

bobsilverberg commented May 6, 2019 •
edited
Loading

willdurand left a comment •
edited
Loading