Add stubbed out details page components

src/amo/components/AddonDetail.js

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import AddonMeta from 'amo/components/AddonMeta';
+import InstallButton from 'disco/components/InstallButton';
+import LikeButton from 'amo/components/LikeButton';
+import ScreenShots from 'amo/components/ScreenShots';
+import SearchBox from 'amo/components/SearchBox';
+
+
+import 'amo/css/AddonDetail.scss';
+
+export class AddonDetail extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    return (
+      <div className="AddonDetail">
+        <header>
+          <SearchBox />
+          <div className="icon">
+            <img alt="" />
+            <LikeButton />
+          </div>
+          <div className="title">
+            <h1>Placeholder Add-on Title
+              <span className="author">by <a href="#">AwesomeAddons</a></span></h1>
+            <InstallButton slug="placeholder" />
+          </div>
+          <div className="description">
+            <p>Lorem ipsum dolor sit amet, dicat graece partiendo cu usu.
+            Vis recusabo accusamus et.</p>
+          </div>
+        </header>
+
+        <section className="addon-metadata">
+          <h2 className="visually-hidden">{i18n.gettext('Extension Metadata')}</h2>
+          <AddonMeta />
+        </section>
+
+        <hr />
+
+        <section className="screenshots">
+          <h2>{i18n.gettext('Screenshots')}</h2>
+          <ScreenShots />
+        </section>
+
+        <hr />
+
+        <section className="about">
+          <h2>{i18n.gettext('About this extension')}</h2>
+          <p>Lorem ipsum dolor sit amet, dicat graece partiendo cu usu. Vis
+          recusabo accusamus et, vitae scriptorem in vel. Sed ei eleifend
+          molestiae deseruisse, sit mucius noster mentitum ex. Eu pro illum
+          iusto nemore, te legere antiopam sit. Suas simul ad usu, ex putent
+          timeam fierent eum. Dicam equidem cum cu. Vel ea vidit timeam.</p>
+
+          <p>Eu nam dicant oportere, et per habeo euismod denique, te appetere
+          temporibus mea. Ad solum reprehendunt vis, sea eros accusata senserit
+          an, eam utinam theophrastus in. Debet consul vis ex. Mei an iusto
+          delicatissimi, ut timeam electram maiestatis nam, te petentium
+          intellegebat ius. Ei legere everti.</p>
+        </section>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(AddonDetail);

src/amo/components/AddonMeta.js

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/AddonMeta.scss';
+
+export class AddonMeta extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <div className="AddonMeta">
+        <div className="category security">
+          <h3 className="visually-hidden">{i18n.gettext('Category')}</h3>
+          <p>Security &amp; Privacy</p>
+        </div>
+
+        <div className="users">
+          <h3 className="visually-hidden">{i18n.gettext('Used by')}</h3>
+          <p>1,342 users</p>
+        </div>
+
+        <div className="sentiment love-it">
+          <h3 className="visually-hidden">{i18n.gettext('Sentiment')}</h3>
+          <p>89% love it!</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(AddonMeta);

src/amo/components/LikeButton.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/LikeButton.scss';
+
+export class LikeButton extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <button className="LikeButton">
+        <span className="visually-hidden">{i18n.gettext('Mark as liked')}</span>
+      </button>
+    );
+  }
+}
+
+export default translate({ withRef: true })(LikeButton);

src/amo/components/ScreenShots.js

@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/ScreenShots.scss';
+
+
+export class ScreenShots extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+    const totalImages = 5;
+
+    // This is just a placeholder.
+    return (
+      <div className="ScreenShots">
+        <img alt="" />
+        <ol>
+          {[...Array(totalImages)].map((x, i) =>
+            (<li>
+              <a href="#" className={i + 1 === 2 ? 'active' : null}>
+                <span className="visually-hidden">
+                  {i18n.sprintf(i18n.gettext(
+                    'screenshot %(imageNumber)s of %(totalImages)s'
+                  ), { imageNumber: i + 1, totalImages })}
+                </span>
+              </a>
+            </li>)
+          )}
+        </ol>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(ScreenShots);

src/amo/components/SearchBox.js

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/SearchBox.scss';
+
+
+export class SearchBox extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <div className="SearchBox">
+        <span className="visually-hidden">{i18n.gettext('Search')}</span>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(SearchBox);

src/amo/containers/DetailPage.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import AddonDetail from 'amo/components/AddonDetail';
+
 export default class DetailPage extends React.Component {
   render() {
     return (
       <div>
-        <h1>Detail Page</h1>
+        <AddonDetail />
       </div>
     );
   }

src/amo/css/AddonDetail.scss

@@ -0,0 +1,74 @@
+@import "~amo/css/inc/vars";
+
+.AddonDetail {
+  header {
+    background: $header-background;
+    color: $header-font-color;
+  }
+
+  hr {
+    margin: 0 20px;
+  }
+
+  .icon,
+  .title,
+  .description,
+  .screenshots {
+    overflow: hidden;
+    padding: 20px;
+  }
+
+  .icon {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    img {
+      background: #fff;
+      border-radius: 5px;
+      display: inline-block;
+      height: 64px;
+      width: 64px;
+    }
+
+    .LikeButton {
+      margin-left: auto;
+    }
+  }
+
+  .title {
+    background: darken($header-background, 3%);
+
+    h1 {
+      margin-top: 0;
+      color: $header-font-color;
+    }
+  }
+
+  .author {
+    display: block;
+    font-size: 20px;
+
+    a {
+      color: $header-font-color;
+      font-size: 20px;
+    }
+  }
+
+  .switch {
+    float: right;
+  }
+
+  .description {
+    background: darken($header-background, 5.5%);
+    font-size: 18px;
+
+    p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .about {
+    padding: 20px;
+  }
+}

src/amo/css/AddonMeta.scss

@@ -0,0 +1,34 @@
+.AddonMeta {
+  font-size: 10px;
+  padding: 20px;
+
+  .category,
+  .sentiment,
+  .users {
+    display: inline-block;
+    margin: 5px;
+    padding-top: 40px;
+    text-align: center;
+    vertical-align: top;
+    width: 60px;
+  }
+
+  p {
+    display: inline-block;
+    line-height: 14px;
+    max-width: 45px;
+    text-align: center;
+  }
+
+  .category.security {
+    background: url(../img/categories/security.svg) no-repeat 50% 5px;
+  }
+
+  .users {
+    background: url(../img/icons/users.svg) no-repeat 50% 5px;
+  }
+
+  .sentiment.love-it {
+    background: url(../img/ratings/love-it-mono.svg) no-repeat 50% 5px;
+  }
+}