Move Showcase comp to website out of lib - fix layout

v1/lib/core/CompLibrary.js

@@ -8,12 +8,10 @@
 const MarkdownBlock = require('./MarkdownBlock.js');
 const Container = require('./Container.js');
 const GridBlock = require('./GridBlock.js');
-const Showcase = require('./Showcase.js');
 
 // A collection of components to provide to users
 module.exports = {
   MarkdownBlock,
   Container,
   GridBlock,
-  Showcase,
 };

v1/lib/static/css/main.css

@@ -2353,4 +2353,4 @@ input::placeholder {
 .nav-footer .social {
   padding: 5px 0;
 }
-/* End of Footer */
+/* End of Footer */

v1/website/core/Showcase.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const PropTypes = require('prop-types');
+
+const UserLink = ({infoLink, image, caption}) => (
+  <a className="link" href={infoLink} key={infoLink}>
+    <img src={image} alt={caption} title={caption} />
+    <span className="caption">{caption}</span>
+  </a>
+);
+
+UserLink.propTypes = {
+  infoLink: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired,
+};
+
+const Showcase = ({users}) => (
+  <div className="showcase">
+    {users.map(user => (
+      <UserLink key={user.infoLink} {...user} />
+    ))}
+  </div>
+);
+
+Showcase.propTypes = {
+  users: PropTypes.array.isRequired,
+};
+
+Showcase.defaultProps = {
+  users: [],
+};
+
+module.exports = Showcase;

v1/website/pages/en/index.js

@@ -6,11 +6,12 @@
  */
 
 const React = require('react');
+
 const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
-const Showcase = CompLibrary.Showcase;
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translate = require('../../server/translate.js').translate;
 

v1/website/pages/en/users.js

@@ -9,27 +9,16 @@ const React = require('react');
 const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
-const Showcase = CompLibrary.Showcase;
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translate = require('../../server/translate.js').translate;
 
 class Users extends React.Component {
-  getUsersToShowcase() {
-    const fbUsersToShowcase = [];
-    const restToShowcase = [];
-    siteConfig.users.forEach(user => {
-      if (user.fbOpenSource) fbUsersToShowcase.push(user);
-      else restToShowcase.push(user);
-    });
-
-    return {
-      fbUsersToShowcase,
-      restToShowcase,
-    };
-  }
-
   render() {
-    const {fbUsersToShowcase, restToShowcase} = this.getUsersToShowcase();
+    const fbUsersToShowcase = siteConfig.users.filter(
+      user => user.fbOpenSource,
+    );
+    const restToShowcase = siteConfig.users.filter(user => !user.fbOpenSource);
 
     return (
       <div className="mainContainer">

v1/website/static/css/custom.css

@@ -25,7 +25,7 @@ table td:first-child > code {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 170px;
+  height: 180px;
   margin: 5px;
   padding: 5px;
 }