Make gradients for Primary Hero Shelf dynamic (#8615)

* Make gradients for Primary Hero Shelf dynamic

* Address review comments

* Fix lint issue

* Address review comments

* Address final review comments

package.json

@@ -213,6 +213,7 @@
   "dependencies": {
     "@loadable/component": "5.10.2",
     "@loadable/server": "5.10.2",
+    "@mozilla-protocol/tokens": "4.0.0",
     "@willdurand/isomorphic-formdata": "1.2.0",
     "base62": "2.0.1",
     "base64url": "3.0.1",
@@ -394,4 +395,4 @@
     }
   ],
   "snyk": true
-}
+}

src/amo/components/HeroRecommendation/index.js

@@ -1,4 +1,5 @@
 /* @flow */
+import makeClassName from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import { compose } from 'redux';
@@ -6,6 +7,7 @@ import { compose } from 'redux';
 import Link from 'amo/components/Link';
 import { addParamsToHeroURL, checkInternalURL, getAddonURL } from 'amo/utils';
 import translate from 'core/i18n/translate';
+import log from 'core/logger';
 import tracking from 'core/tracking';
 import { sanitizeUserHTML } from 'core/utils';
 import type { PrimaryHeroShelfType } from 'amo/reducers/home';
@@ -64,7 +66,7 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
 
   render() {
     const { _checkInternalURL, i18n, shelfData } = this.props;
-    const { addon, description, external, featuredImage } = shelfData;
+    const { addon, description, external, gradient, featuredImage } = shelfData;
 
     const linkInsides = <span> {i18n.gettext('Get the extension')} </span>;
 
@@ -105,9 +107,15 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
     // translators: If uppercase does not work in your locale, change it to lowercase.
     // This is used as a secondary heading.
     const recommended = i18n.gettext('RECOMMENDED');
+    const gradientsClassName = `HeroRecommendation-${gradient.start}-${gradient.end}`;
+    log.info(
+      `className ${gradientsClassName} generated from the API response. This should match a selector in styles.scss`,
+    );
 
     return (
-      <section className="HeroRecommendation HeroRecommendation-purple">
+      <section
+        className={makeClassName('HeroRecommendation', gradientsClassName)}
+      >
         <div>
           <img
             className="HeroRecommendation-image"

src/amo/components/HeroRecommendation/styles.scss

@@ -1,7 +1,6 @@
 @import '~amo/css/styles';
 
 .HeroRecommendation {
-  background-image: linear-gradient(#20123a, #712290);
   color: $white;
   display: flex;
   padding: 24px;
@@ -86,6 +85,7 @@
 }
 
 .HeroRecommendation-link {
+  background-color: transparent;
   border: 4px solid $white;
   display: inline-block;
   font-size: $font-size-m;
@@ -104,3 +104,35 @@
     text-decoration: none;
   }
 }
+
+@mixin gradientStyle($startColor, $stopColor) {
+  background-image: linear-gradient($startColor, $stopColor);
+
+  .HeroRecommendation-link {
+    &:hover,
+    &:active {
+      background-color: $stopColor;
+    }
+  }
+}
+
+// Styles that correspond to gradients returned by the hero API
+.HeroRecommendation-color-ink-80-color-blue-70 {
+  @include gradientStyle($color-ink-80, $color-blue-70);
+}
+
+.HeroRecommendation-color-ink-80-color-green-70 {
+  @include gradientStyle($color-ink-80, $color-green-70);
+}
+
+.HeroRecommendation-color-ink-80-color-pink-70 {
+  @include gradientStyle($color-ink-80, $color-pink-70);
+}
+
+.HeroRecommendation-color-ink-80-color-purple-70 {
+  @include gradientStyle($color-ink-80, $color-purple-70);
+}
+
+.HeroRecommendation-color-ink-80-color-violet-70 {
+  @include gradientStyle($color-ink-80, $color-violet-70);
+}

src/core/css/inc/vars.scss

@@ -1,4 +1,5 @@
 @import '~photon-colors/photon-colors';
+@import '~@mozilla-protocol/tokens/dist/index';
 
 // Add-on details
 $primary-font-color: #000;

tests/unit/amo/components/TestHeroRecommendation.js

@@ -129,6 +129,18 @@ describe(__filename, () => {
     );
   });
 
+  it('assigns a className based on the gradient', () => {
+    const gradient = { start: 'start-color', end: 'stop-color' };
+    const shelfData = createShelfData({ addon: fakeAddon, gradient });
+
+    const root = render({ shelfData });
+
+    expect(root).toHaveClassName('HeroRecommendation');
+    expect(root).toHaveClassName(
+      `HeroRecommendation-${gradient.start}-${gradient.end}`,
+    );
+  });
+
   it('renders a body', () => {
     const description = 'some body text';
     const shelfData = createShelfData({ addon: fakeAddon, description });

yarn.lock

@@ -1225,6 +1225,11 @@
   dependencies:
     mkdirp "^0.5.1"
 
+"@mozilla-protocol/tokens@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@mozilla-protocol/tokens/-/tokens-4.0.0.tgz#5fa859f5e8ba5476a8182ad4fbb4fcca292d16de"
+  integrity sha512-n62nDBRVcX4zHOM8ZYOecMocLs0gG9MYE9XMEtJGYA9Sw+3W9z5gZ05VRgCFd4BhUVIcRG+M+i26zmH2pJ2UJg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"