Add support for themes in StaticAddonCard (#10526)

src/blog-utils/StaticAddonCard/index.js

@@ -1,6 +1,8 @@
 /* @flow */
 import * as React from 'react';
+import makeClassName from 'classnames';
 
+import { ADDON_TYPE_STATIC_THEME } from 'amo/constants';
 import { getAddonIconUrl } from 'amo/imageUtils';
 import { nl2br, sanitizeHTML } from 'amo/utils';
 import AddonBadges from 'amo/components/AddonBadges';
@@ -9,6 +11,7 @@ import GetFirefoxButton, {
   GET_FIREFOX_BUTTON_TYPE_ADDON,
 } 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';
@@ -35,18 +38,30 @@ export const StaticAddonCardBase = ({
   const summary = addon.summary ? addon.summary : addon.description;
   const averageRating = addon.ratings ? addon.ratings.average : null;
   const averageDailyUsers = addon.average_daily_users || null;
+  const isTheme = addon.type === ADDON_TYPE_STATIC_THEME;
 
   return (
-    <div className="StaticAddonCard" data-addon-id={addon.id}>
-      <div className="StaticAddonCard-icon">
-        <div className="StaticAddonCard-icon-wrapper">
-          <img
-            className="StaticAddonCard-icon-image"
-            src={getAddonIconUrl(addon)}
-            alt=""
-          />
+    <div
+      className={makeClassName('StaticAddonCard', {
+        'StaticAddonCard--is-theme': isTheme,
+      })}
+      data-addon-id={addon.id}
+    >
+      {isTheme ? (
+        <div className="StaticAddonCard-theme-preview">
+          <ThemeImage addon={addon} roundedCorners />
         </div>
-      </div>
+      ) : (
+        <div className="StaticAddonCard-icon">
+          <div className="StaticAddonCard-icon-wrapper">
+            <img
+              className="StaticAddonCard-icon-image"
+              src={getAddonIconUrl(addon)}
+              alt=""
+            />
+          </div>
+        </div>
+      )}
 
       <AddonTitle addon={addon} />
 

src/blog-utils/StaticAddonCard/styles.scss

@@ -24,6 +24,10 @@ $icon-size: 48px;
   margin-bottom: 10px;
   width: auto;
 
+  .StaticAddonCard--is-theme & {
+    grid-row: 2;
+  }
+
   .PromotedBadge {
     font-size: $font-size-s;
   }
@@ -34,6 +38,12 @@ $icon-size: 48px;
   }
 }
 
+.StaticAddonCard-theme-preview {
+  grid-column: 1 / span 4;
+  grid-row: 1;
+  margin-bottom: 20px;
+}
+
 .StaticAddonCard-icon {
   grid-column: 1;
   grid-row: 2;
@@ -62,6 +72,10 @@ $icon-size: 48px;
   grid-row: 2;
   margin: 0;
 
+  .StaticAddonCard--is-theme & {
+    grid-column: 1 / span 3;
+  }
+
   & .AddonTitle-author,
   & .AddonTitle-author a,
   & .AddonTitle-author a:link {
@@ -72,6 +86,11 @@ $icon-size: 48px;
   @include respond-to(medium) {
     grid-column: 2 / span 2;
     grid-row: 1;
+
+    .StaticAddonCard--is-theme & {
+      grid-column: 1 / span 3;
+      grid-row: 2;
+    }
   }
 }
 
@@ -87,6 +106,10 @@ $icon-size: 48px;
   @include respond-to(medium) {
     grid-row: 2;
   }
+
+  .StaticAddonCard--is-theme & {
+    grid-row: 3;
+  }
 }
 
 .StaticAddonCard-metadata {
@@ -101,6 +124,10 @@ $icon-size: 48px;
 
   @include respond-to(medium) {
     grid-row: 3;
+
+    .StaticAddonCard--is-theme & {
+      grid-row: 4;
+    }
   }
 }
 
@@ -111,6 +138,10 @@ $icon-size: 48px;
   text-align: center;
   width: 100%;
 
+  .StaticAddonCard--is-theme & {
+    grid-row: 5;
+  }
+
   &,
   .GetFirefoxButton-button,
   .GetFirefoxButton-callout {

src/blog-utils/index.html

@@ -41,6 +41,9 @@
 
 			<p>AMO info (not a recommended extension)</p>
 			<div class="addon-card" data-addon-id="1000795"></div>
+
+			<p>A static theme</p>
+			<div class="addon-card" data-addon-id="2597127"></div>
 		</div>
 
 		<footer id="footer"></footer>

tests/unit/blog-utils/TestStaticAddonCard.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { ADDON_TYPE_STATIC_THEME } from 'amo/constants';
 import AddonTitle from 'amo/components/AddonTitle';
 import AddonBadges from 'amo/components/AddonBadges';
 import StaticAddonCard, {
@@ -9,6 +10,7 @@ import GetFirefoxButton, {
   GET_FIREFOX_BUTTON_TYPE_ADDON,
 } from 'amo/components/GetFirefoxButton';
 import Rating from 'amo/components/Rating';
+import ThemeImage from 'amo/components/ThemeImage';
 import {
   fakeAddon,
   fakeI18n,
@@ -145,4 +147,18 @@ describe(__filename, () => {
 
     expect(root.find(Rating)).toHaveLength(0);
   });
+
+  it('renders a theme image preview when add-on is a theme', () => {
+    const addon = createInternalAddonWithLang({
+      ...fakeAddon,
+      type: ADDON_TYPE_STATIC_THEME,
+    });
+
+    const root = render({ addon });
+
+    expect(root).toHaveClassName('StaticAddonCard--is-theme');
+    expect(root.find(ThemeImage)).toHaveLength(1);
+    expect(root.find(ThemeImage)).toHaveProp('addon', addon);
+    expect(root.find('.StaticAddonCard-icon')).toHaveLength(0);
+  });
 });