Different size addon cards

src/amo/components/AddonsCard/index.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import SearchResult from 'amo/components/SearchResult';
 import CardList from 'ui/components/CardList';
@@ -12,14 +13,19 @@ export default class AddonsCard extends React.Component {
     addons: PropTypes.array.isRequired,
     children: PropTypes.node,
     className: PropTypes.string,
+    type: PropTypes.string,
+  }
+
+  static defaultProps = {
+    type: 'list',
   }
 
   render() {
-    const { addons, children, className, ...otherProps } = this.props;
+    const { addons, children, className, type, ...otherProps } = this.props;
 
     return (
       <CardList {...otherProps}
-        className={className}
+        className={classNames('AddonsCard', `AddonsCard--${type}`, className)}
         ref={(ref) => { this.cardContainer = ref; }}>
         {children}
         {addons && addons.length ? (

src/amo/components/AddonsCard/styles.scss

@@ -2,17 +2,88 @@
 @import "~core/css/inc/mixins";
 @import "~ui/css/vars";
 
-ul.AddonsCard-list {
+.AddonsCard--horizontal {
   @include respond-to(large) {
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-template-columns: 50% 50%;
-  }
+    position: relative;
 
-  .SearchResult {
-    @include respond-to(large) {
+    .Card-contents {
       background: $white;
-      grid-column: 1 / -1;
+      border-bottom-left-radius: $border-radius-default;
+      border-bottom-right-radius: $border-radius-default;
+      padding: 0 20px;
+    }
+
+    .Card-footer,
+    .Card-footer-link {
+      @include end(20px);
+      @include text-align-end();
+
+      background: none;
+      border: 0;
+      position: absolute;
+      top: 0;
+    }
+
+    ul.AddonsCard-list {
+      display: grid;
+      grid-auto-flow: column dense;
+      grid-template-columns: repeat(4, 25%);
+
+      .SearchResult {
+        grid-column: auto;
+        margin-bottom: 0;
+        padding-left: 0;
+      }
+
+      .SearchResult-link {
+        display: grid;
+        grid-column-gap: 8px;
+        grid-template-columns: 32px auto;
+      }
+
+      .SearchResult-icon-wrapper {
+        grid-column: 1 / 2;
+        grid-row: 1 / 3;
+      }
+
+      .SearchResult-contents {
+        grid-column: 2 / 2;
+        grid-row: 1 / 2;
+        margin: 0;
+        width: auto;
+      }
+
+      .SearchResult-name {
+        font-size: $font-size-s;
+      }
+
+      .SearchResult-metadata,
+      .SearchResult-summary {
+        display: none;
+      }
+
+      .SearchResult-users {
+        @include margin-start(-3.5px);
+
+        grid-column: 2 / 2;
+        grid-row: 2 / 2;
+      }
+
+      .SearchResult--theme {
+        @include margin-end(25px);
+
+        padding: 10px 0;
+
+        // stylelint-disable max-nesting-depth
+        .SearchResult-link {
+          display: block;
+        }
+
+        .SearchResult-icon-wrapper {
+          margin: 0;
+        }
+        // stylelint-enable max-nesting-depth
+      }
     }
   }
 }

src/amo/components/FeaturedAddons/FeaturedAddons.scss

@@ -1,5 +1,9 @@
 @import "~core/css/inc/vars";
 
+.FeaturedAddons .SearchResults {
+  margin: 0 10px;
+}
+
 .FeaturedAddons-header {
   font-size: $font-size-m;
   text-align: center;

src/amo/components/LandingAddonsCard/index.js

@@ -24,8 +24,13 @@ export default class LandingAddonsCard extends React.Component {
     const footerLinkHtml = <Link to={linkSearchURL}>{footerText}</Link>;
 
     return (
-      <AddonsCard className={classNames('LandingAddonsCard', className)}
-        addons={addons} footerLink={footerLinkHtml} header={header} />
+      <AddonsCard
+        addons={addons}
+        className={classNames('LandingAddonsCard', className)}
+        footerLink={footerLinkHtml}
+        header={header}
+        type="horizontal"
+      />
     );
   }
 }

src/amo/components/SearchForm.scss

@@ -10,6 +10,6 @@
 .SearchInput-input,
 .SearchForm-form {
   color: $base-color;
-  font-size: $font-size-search;
+  font-size: $font-size-m-smaller;
   white-space: nowrap;
 }

src/core/css/inc/mixins.scss

@@ -280,6 +280,14 @@ $default-arrow-margin: 3px;
   }
 }
 
+@mixin text-align-end() {
+  text-align: right;
+
+  [dir=rtl] & {
+    text-align: left;
+  }
+}
+
 @mixin start($pos) {
   left: $pos;
   right: auto;

src/ui/components/Card/Card.scss

@@ -3,13 +3,13 @@
 
 .Card-header {
   @include addonSection();
+  @include text-align-start();
 
   border-top-left-radius: $border-radius-default;
   border-top-right-radius: $border-radius-default;
   font-size: $font-size-default;
   margin-top: 0;
   margin-bottom: 1px;
-  text-align: left;
 }
 
 .Card-contents {

src/ui/components/CardList/index.js

@@ -17,8 +17,11 @@ export default class CardList extends React.Component {
     const { children, className, ...cardProps } = this.props;
 
     return (
-      <Card {...cardProps}
-        className={classNames('CardList', className)}>
+      <Card
+        {...cardProps}
+        className={classNames('CardList', className)}
+        photonStyle
+      >
         {/* Children in this case is expected to be an unordered list, */}
         {/* which will be styled correctly. */}
         {children}

src/ui/components/CardList/styles.scss

@@ -15,7 +15,7 @@
 
     > li {
       background: $white;
-      padding: 10px $padding-page;
+      padding: $padding-page;
       margin-bottom: 1px;
 
       &:last-of-type {

src/ui/css/vars.scss

@@ -47,7 +47,7 @@ $header-text-not-active-color: transparentize($white, 0.5);
 
 // Fonts
 $font-size-s: 12px;
-$font-size-search: 14px;
+$font-size-m-smaller: 14px;
 $font-size-m: 18px;
 $font-size-l: 24px;
 $font-size-xl: 36px;

tests/unit/amo/components/TestSearchResult.js

@@ -86,7 +86,7 @@ describe('<SearchResult />', () => {
   it('renders the star ratings', () => {
     const root = render();
 
-    expect(root.find('.SearchResult-rating').length).toEqual(1);
+    expect(root.find('.SearchResult-rating')).toHaveLength(1);
   });
 
   it('displays a placeholder if the icon is malformed', () => {