Restructure addon detail page header

[KevinMind]

Fixes #15626

Description

This PR:

• creates a promoted.js utility file for promoted related utils
• merges PromotedBadge and Badge to have a universal badge component
• adds the RatingBadge component to the addon header
• Restructure and relayout the addon header
• Remove the AddonMeta card
• Move the Rate your experience below addon summary

Context

Given we now have multiple use cases for pilled/linked badges and to make the code more reusable, I've merged the Promotedbadge to the badge component. Now a badge is a badge and you can make it pilled, linkable small/large etc in any context. You can also easily control what UI is renedered due to the compound component API.

Testing

https://github.com/user-attachments/assets/212995c9-e588-47e0-9a5a-bea868d1b291

Badges are rendered in 4 locations. You'll want to test all breakpoints for all 4 locations.

Search Results

Search for "promoted" you will get promoted results for sure on dev.

Addon Header

Click on an addon that is promoted or has reviews. Verify on correct and incorrect and non-android to get all combination of badges.

Bonus points, check an addon that has multiple promoted groups and make sure you still only see one.

More Addons

Addon section suggesting more addons, if promoted should see badge with "small" variant of icon/text

Search Suggest

When typing in the search box on the right you will see the badge icon (only icon)

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 98.29%. Comparing base (28ec69b) to head (2e1267a). Report is 37 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #13638      +/-   ##
==========================================
- Coverage   98.29%   98.29%   -0.01%     
==========================================
  Files         268      266       -2     
  Lines       10663    10646      -17     
  Branches     3280     3251      -29     
==========================================
- Hits        10481    10464      -17     
  Misses        169      169              
  Partials       13       13              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[KevinMind]

@eviljeff PR is stable and ready to verify

[eviljeff]

Comparing the detail page header to figma:

• the Android badge is missing it's border
• users aren't shown next to the rating badge
• at 720, Figma shows the icon still on it's own line, but we're wrapping it around to a left hand column instead
• at 720, the button should be below, but we're placing it on the right hand side instead
• at 900, the icon is correctly at the left, but the button is still on the right, rather than below
• in all sizes, the icon and text in the recommended header badge seem larger than the figma spec

Other places with badges:

• Recommended badge icon seems larger than in Figma in More Add-ons and search results
• (Text seems visually correct in auto-complete, More Add-ons, and search results, but should be checked precisely)
• (Icon seems visually correct in auto-complete, but this should be checked precisely too)

[KevinMind]

We should clear most of the pure style comments as we are not addressing those in phase 1. I'm trying to make the content of the page and the layout match the figma, but the figma cannot directly be used since it is also changing styles. So the following should be excluded as out of scope:

• sizing of badge
• border on android badge (not there on prod)
• etc

Regarding the badges breakpoints and the button breakpoints, I tried my best to follow the figma but after some discussion in slack with @willdurand and aarjav they did not like having the full width button up to 720px as this would lead to very wide buttons on the larger side of 500-720.

users aren't shown next to the rating badge

That's a very good point. Forgot that one 🙃

So please confirm, AFAICT the only thing really to address is the missing badge for user count. I'll add that and we can continue with review, gravy?

[KevinMind]

I've added the missing badge

Also note, the current implementation reverses icons on non linked badges above 720px. We should fix that, but its a phase 2 problem.

Currently using the preexisting i18n formatting for the number of users. Figma has it rounded to nearest thousand but I'm not sure if that is a strict requirement. Will follow up.

[KevinMind]

@eviljeff stable and ready for re-review/verification

[eviljeff]

We should clear most of the pure style comments as we are not addressing those in phase 1. I'm trying to make the content of the page and the layout match the figma, but the figma cannot directly be used since it is also changing styles.

I broke out the differences and left the purely style changes to the badge sizing as something for a follow at some later point. But we're deploying these updates to a production site in the meantime - a change which leads to the styling looking odd should be avoided, and, imo, having the Android badge be the only badge in a sequence of badges without a border is odd.

Regarding the badges breakpoints and the button breakpoints, I tried my best to follow the figma but after some discussion in slack with @willdurand and aarjav they did not like having the full width button up to 720px as this would lead to very wide buttons on the larger side of 500-720.

Hidden Slack discussion is not a source of truth 😜 - the figma doc is. If the figma is no longer accurate someone should change it. I didn't note about the widths of buttons anyway, but that the layout is wrong for the icon and install button (from our breakdown of phase 1 and phase 2, iirc we classified the placement of the install button as phase 1 work).

If you want to get this patch landed with minimal further changes then I guess they could be in a fast follow, but I don't think we want to leave AMO frontend looking "wrong" if we can easily avoid it, so ideally it'd land in the same tag.

[willdurand]

I've added the missing badge

Also note, the current implementation reverses icons on non linked badges above 720px. We should fix that, but its a phase 2 problem.

Currently using the preexisting i18n formatting for the number of users. Figma has it rounded to nearest thousand but I'm not sure if that is a strict requirement. Will follow up.

On these two screenshots, there is a padding difference on the user icon ("No users" looks good but the other one has the text too close to the icon). Why?