This is a mess

Author: KevinMind

src/amo/components/AddonBadges/index.js

@@ -1,16 +1,23 @@
 /* @flow */
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
 
+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 from 'amo/components/Badge';
+import Badge, {
+  BadgeContent,
+  BadgeIcon,
+} from 'amo/components/Badge';
+import Link from 'amo/components/Link';
 import PromotedBadge from 'amo/components/PromotedBadge';
 import type { AppState } from 'amo/store';
 import type { AddonType } from 'amo/types/addons';
 import type { I18nType } from 'amo/types/i18n';
+import type { ReactRouterLocationType } from 'amo/types/router';
 
 import './styles.scss';
 
@@ -31,13 +38,40 @@ type InternalProps = {|
   ...DefaultProps,
   ...PropsFromState,
   i18n: I18nType,
+  location: ReactRouterLocationType,
 |};
 
+export const roundToOneDigit = (value: number | null): number => {
+  return value ? Math.round(value * 10) / 10 : 0;
+};
+
 export class AddonBadgesBase extends React.Component<InternalProps> {
   static defaultProps: DefaultProps = {
     _getPromotedCategory: getPromotedCategory,
   };
 
+  renderRatingMeta(): React.Node {
+    const { addon, i18n, location } = this.props;
+
+    if (!addon?.ratings) return null;
+
+    const addonRatingCount: number = addon.ratings.count;
+    const averageRating: number = addon.ratings.average;
+    const roundedAverage = roundToOneDigit(averageRating || null);
+
+    const reviewCount = i18n.formatNumber(addonRatingCount);
+    const reviewsLink = reviewListURL({ addonSlug: addon.slug, location });
+
+    return (
+      <Badge link={reviewsLink || undefined} type="rating">
+        <BadgeIcon name="star-full" alt="" />
+        <BadgeContent>
+          {`${roundedAverage} (${reviewCount || 0} reviews)`}
+        </BadgeContent>
+      </Badge>
+    );
+  }
+
   render(): null | React.Node {
     const { _getPromotedCategory, addon, clientApp, i18n } = this.props;
 
@@ -57,20 +91,27 @@ export class AddonBadgesBase extends React.Component<InternalProps> {
           <PromotedBadge category={promotedCategory} size="large" />
         ) : null}
         {addon.is_experimental ? (
-          <Badge type="experimental" label={i18n.gettext('Experimental')} />
+          <Badge type="experimental">
+            <BadgeIcon name="experimental-badge" alt="" />
+            <BadgeContent>{i18n.gettext('Experimental')}</BadgeContent>
+          </Badge>
         ) : null}
         {addon.requires_payment ? (
-          <Badge
-            type="requires-payment"
-            label={i18n.gettext('Some features may require payment')}
-          />
+          <Badge type="requires-payment">
+            <BadgeContent>
+              {i18n.gettext('Some features may require payment')}
+            </BadgeContent>
+          </Badge>
         ) : null}
         {clientApp === CLIENT_APP_FIREFOX && addon.isAndroidCompatible && (
-          <Badge
-            type="android-compatible"
-            label={i18n.gettext('Available on Firefox for Android™')}
-          />
+          <Badge type="android-compatible">
+            <BadgeIcon name="android" alt="" />
+            <BadgeContent>
+              {i18n.gettext('Available on Firefox for Android™')}
+            </BadgeContent>
+          </Badge>
         )}
+        {this.renderRatingMeta()}
       </div>
     );
   }
@@ -83,6 +124,7 @@ const mapStateToProps = (state: AppState): PropsFromState => {
 };
 
 const AddonBadges: React.ComponentType<Props> = compose(
+  withRouter,
   connect(mapStateToProps),
   translate(),
 )(AddonBadgesBase);

src/amo/components/AddonBadges/styles.scss

@@ -1,7 +1,15 @@
 @import '~amo/css/styles';
 
 .AddonBadges {
-  width: 100%;
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+
+  @include respond-to(medium) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
   .Addon-theme & {
     display: flex;
@@ -27,7 +35,6 @@
   }
 
   @include respond-to(large) {
-    @include margin-start(12px);
     @include text-align-end;
 
     .Addon-theme & {

src/amo/components/AddonTitle/styles.scss

@@ -6,7 +6,7 @@
   color: $black;
   font-size: $font-size-heading-s;
   grid-column: 1 / span 2;
-  margin: 0 0 $padding-page-l;
+  margin: 0;
   width: 100%;
 
   @include respond-to(medium) {

src/amo/components/AddonVersionCard/styles.scss

@@ -7,7 +7,6 @@
   .InstallButtonWrapper {
     grid-column: 1;
     grid-row: 3;
-    width: 100%;
 
     .Button {
       width: 100%;

src/amo/components/Badge/index.js

@@ -1,39 +1,74 @@
 /* @flow */
 import * as React from 'react';
+import makeClassName from 'classnames';
 
 import Icon from 'amo/components/Icon';
 
 import './styles.scss';
 
-export type Props = {|
-  label: string,
-  type?: 'experimental' | 'requires-payment' | 'android-compatible',
-|};
+export const BadgeIcon = ({
+  name,
+  alt,
+  className,
+  size = 'large',
+}: {|
+  name: string,
+  alt: string,
+  className?: string,
+  size?: 'large' | 'small',
+|}): React.Node => (
+  <Icon
+    name={name}
+    alt={alt}
+    className={makeClassName(
+      'Badge-icon',
+      size ? `Badge-icon--${size}` : null,
+      className,
+    )}
+  />
+);
 
-const getIconNameForType = (type) => {
-  switch (type) {
-    case 'experimental':
-      return 'experimental-badge';
-    case 'android-compatible':
-      return 'android';
-    default:
-  }
+export const BadgeContent = ({ children }: {| children: React.Node |}): React.Node => (
+  <span className="Badge-content">{children}</span>
+);
 
-  return type;
-};
+export type BadgeType =
+  | 'experimental'
+  | 'requires-payment'
+  | 'android-compatible'
+  | 'rating';
 
-const Badge = ({ label, type }: Props): React.Node => {
-  if (
-    type &&
-    !['experimental', 'requires-payment', 'android-compatible'].includes(type)
-  ) {
-    throw new Error(`Invalid badge type given: "${type}"`);
-  }
+export type Props = {|
+  children: React.Node,
+  type?: BadgeType,
+  link?: string,
+  className?: string,
+|};
 
+const Badge = ({ children, type, link, className }: Props): React.Node => {
   return (
-    <div className={type ? `Badge Badge-${type}` : 'Badge'}>
-      {type && <Icon alt={label} name={getIconNameForType(type)} />}
-      {label}
+    <div
+      className={makeClassName(
+        'Badge',
+        type ? `Badge-${type}` : null,
+        {
+          'Badge-border': !!link,
+        },
+        className,
+      )}
+    >
+      {link ? (
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="Badge-link"
+        >
+          {children}
+        </a>
+      ) : (
+        children
+      )}
     </div>
   );
 };

src/amo/components/Badge/styles.scss

@@ -1,28 +1,88 @@
 @import '~amo/css/styles';
 
 .Badge {
-  color: $grey-90;
-  font-size: $font-size-default;
+  color: $color-dark-gray-05;
   line-height: $line-height-compressed;
-  margin: 0 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin-top: 6px;
+  padding: 3px 8px;
+
+  &.PromotedBadge--recommended {
+    color: $orange-50;
+  }
+
+  .Badge-link {
+    align-items: center;
+    color: inherit;
+    display: flex;
+    text-decoration: none;
+  }
+
+  &.Badge-border {
+    border: 1px solid $color-light-gray-40;
+    border-radius: 20px;
+
+    display: inline-flex;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: $color-light-gray-90;
+    }
+  }
 
   @include respond-to(large) {
     display: flex;
     flex-direction: row-reverse;
-    margin: 0 0 6px;
 
     .Addon-theme & {
       flex-direction: row;
     }
   }
 
   .Icon {
-    @include margin(2px, 6px, 0, 0);
+    vertical-align: top;
+  }
+}
 
-    @include respond-to(large) {
-      @include margin(2px, 0, 0, 6px);
-    }
+.Badge-icon + .Badge-content {
+  @include margin-start(6px);
+}
 
-    vertical-align: top;
+// This is for `BadgeIcon`
+.Badge-icon {
+  // From legacy `IconPromotedBadge` component
+  box-sizing: border-box;
+  display: flex;
+  height: auto;
+  width: auto;
+}
+
+$badge-icon-large-size: 24px;
+$badge-icon-small-size: 16px;
+
+.Badge-icon--large {
+  background-size: $badge-icon-large-size;
+  height: $badge-icon-large-size;
+  width: $badge-icon-large-size;
+
+  &.Icon-line {
+    transform: scale(0.9);
   }
+
+  &.Icon-recommended {
+    // Nudge the trophy into the center of the circle.
+    transform: translate(2px, 0) scale(0.8);
+
+    [dir='rtl'] & {
+      transform: translate(-2px, 0) scale(0.8);
+    }
+  }
+}
+
+.Badge-icon--small {
+  background-size: $badge-icon-small-size;
+  height: $badge-icon-small-size;
+  width: $badge-icon-small-size;
 }

src/amo/components/Icon/img/star-full.svg

@@ -180,6 +180,10 @@
   @include icon($name: 'recommended');
 }
 
+.Icon-star-full {
+  @include icon($name: 'star-full');
+}
+
 .Icon-android {
   @include icon($name: 'android');
 }

src/amo/components/Icon/styles.scss

@@ -1,13 +1,11 @@
 /* @flow */
-import makeClassName from 'classnames';
 import * as React from 'react';
 import { compose } from 'redux';
 
 import { LINE, RECOMMENDED } from 'amo/constants';
 import translate from 'amo/i18n/translate';
-import Icon from 'amo/components/Icon';
+import { BadgeIcon } from 'amo/components/Badge';
 import type { I18nType } from 'amo/types/i18n';
-import './styles.scss';
 
 export type PromotedBadgeCategory = typeof LINE | typeof RECOMMENDED;
 
@@ -39,13 +37,11 @@ export const IconPromotedBadgeBase = ({
   const alt = altTexts[category];
 
   return (
-    <Icon
-      alt={showAlt && alt ? alt : undefined}
-      className={makeClassName('IconPromotedBadge', className, {
-        'IconPromotedBadge-large': size === 'large',
-        'IconPromotedBadge-small': size === 'small',
-      })}
+    <BadgeIcon
+      alt={showAlt && alt ? alt : ''}
+      className={className}
       name={category}
+      size={size}
     />
   );
 };