Several concurrent bug fixes related to shipping of AddonHeader changes. (#13655)

* fixes:
- remove number from users badge when no active users
- install button does not shrink in loading state
- add "Experimental" test on experimental badge
- reformat grid names and spacing to make it more clear the structure of the layout
- make layout more consistent with figma

* static addon card

* Fixes

* Stop flipping badge direction and minor style tweak to badge padding, border radius

* Add some tests.

* Add fix for static themes on StaticAddonCard fixing alignment of rpeview image and right aligned badges.

* AddonBadges aligned to start of flex container.

* Add gap instead of margin to Addon-warnings content to prevent shadow margin when empty.

* Use readable grid area names

* Fix icon spacing on RTL using appropriate abstract specifiers.

* Remove GetFirefoxCallout as it totally breaks the layout and is absolutely not worth it.

* Add text wrapping to badge content (for suppppper small screens)

* Prevent laoding button from collapsing to fixed width

* Fix inner gap between theme preview image and addon info (title/description)

* Revert "Remove GetFirefoxCallout as it totally breaks the layout and is absolutely not worth it."

This reverts commit de54aa9.

Author: KevinMind

src/amo/components/AddonBadges/index.js

@@ -8,7 +8,7 @@ import { reviewListURL } from 'amo/reducers/reviews';
 import { CLIENT_APP_FIREFOX } from 'amo/constants';
 import translate from 'amo/i18n/translate';
 import { getPromotedCategory } from 'amo/utils/addons';
-import Badge, { BadgeIcon, BadgePill } from 'amo/components/Badge';
+import Badge from 'amo/components/Badge';
 import type { AppState } from 'amo/store';
 import type { AddonType } from 'amo/types/addons';
 import type { I18nType } from 'amo/types/i18n';
@@ -71,13 +71,7 @@ export class AddonBadgesBase extends React.Component<InternalProps> {
         type="experimental-badge"
         label={i18n.gettext('Experimental')}
         size="large"
-      >
-        {(props) => (
-          <BadgePill {...props}>
-            <BadgeIcon {...props} />
-          </BadgePill>
-        )}
-      </Badge>
+      />
     );
   }
 
@@ -149,13 +143,18 @@ export class AddonBadgesBase extends React.Component<InternalProps> {
 
     const averageDailyUsers = addon.average_daily_users;
 
-    const userCount = i18n.formatNumber(averageDailyUsers);
-    const userTitle =
+    const userLabel =
       averageDailyUsers > 0
-        ? i18n.ngettext('User', 'Users', averageDailyUsers)
+        ? i18n.sprintf(
+            i18n.ngettext(
+              '%(count)s User',
+              '%(count)s Users',
+              averageDailyUsers,
+            ),
+            { count: i18n.formatNumber(averageDailyUsers) },
+          )
         : i18n.gettext('No Users');
 
-    const userLabel = `${userCount} ${userTitle}`;
     return <Badge type="user-fill" label={userLabel} size="large" />;
   }
 

src/amo/components/AddonBadges/styles.scss

@@ -4,8 +4,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  justify-items: start;
-  align-items: center;
+  align-items: flex-start;
+  align-content: flex-start;
 
   .Addon-theme & {
     display: flex;

src/amo/components/Badge/styles.scss

@@ -11,7 +11,7 @@ $badge-size-small: 16px;
   gap: 6px;
   align-items: center;
   white-space: nowrap;
-  padding: 4px 6px;
+  padding: 3px 6px 3px 3px;
 
   .Badge-link {
     color: inherit;
@@ -40,7 +40,7 @@ $badge-size-small: 16px;
 
   &.Badge-border {
     border: 1px solid $color-light-gray-40;
-    border-radius: 20px;
+    border-radius: 22px;
     display: inline-flex;
     gap: 6px;
     box-sizing: border-box;
@@ -54,7 +54,6 @@ $badge-size-small: 16px;
 
   @include respond-to(large) {
     display: flex;
-    flex-direction: row-reverse;
 
     .Addon-theme & {
       flex-direction: row;
@@ -66,6 +65,10 @@ $badge-size-small: 16px;
   }
 }
 
+.Badge-content {
+  text-wrap: wrap;
+}
+
 .Badge-content--small {
   font-size: 12px;
 }

src/amo/pages/Addon/index.js

@@ -490,26 +490,28 @@ export class AddonBase extends React.Component {
 
           <div>
             <Card className="Addon-header-info-card" photonStyle>
-              <AddonInstallError error={this.props.installError} />
-
-              <AddonCompatibilityError addon={addon} />
-
-              {addon &&
-              (addon.status !== STATUS_PUBLIC || addon.is_disabled) ? (
-                <Notice type="error" className="Addon-non-public-notice">
-                  {i18n.gettext(
-                    'This is not a public listing. You are only seeing it because of elevated permissions.',
-                  )}
-                </Notice>
-              ) : null}
-
-              {addon && <InstallWarning addon={addon} />}
-              {addon ? (
-                <WrongPlatformWarning
-                  addon={addon}
-                  className="Addon-WrongPlatformWarning"
-                />
-              ) : null}
+              <div className="Addon-warnings">
+                <AddonInstallError error={this.props.installError} />
+
+                <AddonCompatibilityError addon={addon} />
+
+                {addon &&
+                (addon.status !== STATUS_PUBLIC || addon.is_disabled) ? (
+                  <Notice type="error" className="Addon-non-public-notice">
+                    {i18n.gettext(
+                      'This is not a public listing. You are only seeing it because of elevated permissions.',
+                    )}
+                  </Notice>
+                ) : null}
+
+                {addon && <InstallWarning addon={addon} />}
+                {addon ? (
+                  <WrongPlatformWarning
+                    addon={addon}
+                    className="Addon-WrongPlatformWarning"
+                  />
+                ) : null}
+              </div>
 
               <header className="Addon-header">
                 {this.headerImage()}

src/amo/pages/Addon/styles.scss

@@ -35,69 +35,75 @@
     margin: 0;
     margin-bottom: 12px;
   }
+
+  .Card-contents {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
 }
 
 .Addon-header {
   display: flex;
   flex-direction: column;
   row-gap: 14px;
+  column-gap: 0;
 
   @include respond-to(medium) {
     display: grid;
+
+    // stylelint-disable-next-line named-grid-areas-no-invalid
     grid-template:
-      'preview preview' auto
-      'icon icon' auto
-      'info info' auto
-      'badges badges' auto
-      '. button' auto / 1fr 1fr;
+      'theme theme theme' auto
+      'icon info info' auto
+      'badge badge badge' auto
+      '.   .   install' auto / auto 1fr 1fr;
   }
 
   @include respond-to(large) {
-    column-gap: 14px;
     grid-template:
-      'preview preview preview preview preview' auto
-      'icon info info button button' auto
-      'badges badges badges badges badges' auto / min-content 1fr 1fr 1fr auto;
+      'theme theme theme theme theme' auto
+      'icon info info info info' auto
+      'badge badge badge  .   . ' auto
+      'badge badge badge  .  install' auto / min-content 1fr 1fr 1fr 1fr;
   }
 
   @include respond-to(extraLarge) {
     grid-template:
-      'icon info button' auto
-      'preview preview preview' auto
-      'badges badges badges' auto / min-content 1fr auto;
+      'theme theme theme theme theme  .  install' auto
+      'icon info info info info  .  install' auto
+      'badge badge badge badge badge badge badge' auto / min-content 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 
   @include respond-to(extraExtraLarge) {
+    column-gap: 0;
+    // stylelint-disable named-grid-areas-no-invalid
     grid-template:
-      'preview preview preview preview . button' auto
-      'icon info info info . button' auto
-      'badges badges badges badges badges badges' auto / min-content 1fr 1fr 1fr auto;
+      'theme theme theme theme install install' auto
+      'icon info info info  .  install' auto
+      'badge badge badge badge badge badge' auto / min-content 1fr 1fr 1fr 1fr 1fr;
+    // stylelint-enable named-grid-areas-no-invalid
   }
 
   & .Addon-theme-thumbnail {
-    grid-area: preview;
+    grid-area: theme;
   }
 
   & .Addon-icon-wrapper {
     grid-area: icon;
+    @include margin-end(16px);
   }
 
   & .Addon-info {
     grid-area: info;
   }
 
   & .AddonBadges {
-    grid-area: badges;
+    grid-area: badge;
   }
 
   & .Addon-install {
-    grid-area: button;
-    @include respond-to(large) {
-      min-width: 180px;
-    }
-    @include respond-to(extraLarge) {
-      min-width: 200px;
-    }
+    grid-area: install;
   }
 }
 
@@ -111,12 +117,6 @@
   width: 100%;
 }
 
-.Addon .AMInstallButton-loading-button {
-  @include respond-to(medium) {
-    width: 48px;
-  }
-}
-
 // Details section with lots of grid stuff, on larger displays.
 @include respond-to(large) {
   .Addon-screenshots {

src/blog-utils/StaticAddonCard/index.js

@@ -7,27 +7,16 @@ import { getAddonIconUrl } from 'amo/imageUtils';
 import AddonBadges from 'amo/components/AddonBadges';
 import AddonTitle from 'amo/components/AddonTitle';
 import GetFirefoxButton from 'amo/components/GetFirefoxButton';
-import Rating from 'amo/components/Rating';
 import ThemeImage from 'amo/components/ThemeImage';
-import translate from 'amo/i18n/translate';
 import type { AddonType } from 'amo/types/addons';
-import type { I18nType } from 'amo/types/i18n';
 
 import './styles.scss';
 
 type Props = {|
   addon: AddonType,
 |};
 
-type InternalProps = {|
-  ...Props,
-  i18n: I18nType,
-|};
-
-export const StaticAddonCardBase = ({
-  addon,
-  i18n,
-}: InternalProps): React.Node => {
+export const StaticAddonCardBase = ({ addon }: Props): React.Node => {
   if (!addon) {
     return null;
   }
@@ -65,14 +54,6 @@ export const StaticAddonCardBase = ({
         <p>{addon.summary}</p>
       </div>
 
-      <div className="StaticAddonCard-metadata">
-        <Rating rating={addon.ratings.average} readOnly styleSize="small" />
-
-        <p className="StaticAddonCard-metadata-adu">
-          Users: {i18n.formatNumber(addon.average_daily_users)}
-        </p>
-      </div>
-
       <div className="StaticAddonCard-firefox-button">
         <GetFirefoxButton
           addon={addon}
@@ -91,7 +72,5 @@ export const StaticAddonCardBase = ({
   );
 };
 
-const StaticAddonCard: React.ComponentType<Props> =
-  translate()(StaticAddonCardBase);
-
+const StaticAddonCard: React.ComponentType<Props> = StaticAddonCardBase;
 export default StaticAddonCard;