Merge pull request #4477 from LLK/people-grid-component

Pull out the credit page's grid of people into a separate component

src/components/people-grid/people-grid.jsx

@@ -0,0 +1,46 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+const Avatar = require('../../components/avatar/avatar.jsx');
+
+require('./people-grid.scss');
+
+const PeopleGrid = props => (
+    <ul className="avatar-grid">
+        {props.people.map((person, index) => (
+            <li
+                className="avatar-item"
+                key={`person-${index}`}
+            >
+                <div>
+                    {person.userName ? (
+                        <a href={`https://scratch.mit.edu/users/${person.userName}/`}>
+                            <Avatar
+                                alt=""
+                                src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
+                            />
+                        </a>
+                    ) : (
+                        /* if userName is not given, there's no chance userId is given */
+                        <Avatar
+                            alt=""
+                            src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
+                        />
+                    )}
+                </div>
+                <span className="avatar-text">
+                    {person.name}
+                </span>
+            </li>
+        ))}
+    </ul>
+);
+
+PeopleGrid.propTypes = {
+    people: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        userId: PropTypes.number,
+        userName: PropTypes.string
+    }))
+};
+
+module.exports = PeopleGrid;

src/components/people-grid/people-grid.scss

@@ -0,0 +1,36 @@
+@import "../../colors";
+@import "../../frameless";
+
+.avatar-grid {
+    display: flex;
+    margin: 0 auto;
+    max-width: 864px;
+    list-style: none;
+    flex-wrap: wrap;
+    flex-flow: row wrap;
+    justify-content: center;
+}
+
+.avatar-item {
+    display: inline-block;
+    margin: 0;
+    padding-bottom: 32px;
+    text-align: center;
+    line-height: 1.25rem;
+
+    img {
+        $img-border: rgba(0, 0, 0, .05);
+        border: 2px solid $img-border;
+        border-radius: 8px;
+        background-color: $ui-white;
+        width: 80px;
+        height: 80px;
+    }
+
+    .avatar-text {
+        display: inline-block;
+        width: 144px;
+        font-size: .875rem;
+        word-wrap: break-word;
+    }
+}

src/views/credits/credits.jsx

@@ -2,9 +2,9 @@ const React = require('react');
 const render = require('../../lib/render.jsx');
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
-const Avatar = require('../../components/avatar/avatar.jsx');
 const Page = require('../../components/page/www/page.jsx');
 const People = require('./people.json');
+const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
 const Supporters = require('./supporters.json');
 const TitleBanner = require('../../components/title-banner/title-banner.jsx');
 
@@ -25,34 +25,7 @@ const Credits = () => (
                         <FormattedMessage id="credits.developers" />
                     </p>
                 </div>
-                <ul className="avatar-grid">
+                <PeopleGrid people={People} />
-                    {People.map((person, index) => (
-                        <li
-                            className="avatar-item"
-                            key={`person-${index}`}
-                        >
-                            <div>
-                                {person.userName ? (
-                                    <a href={`https://scratch.mit.edu/users/${person.userName}/`}>
-                                        <Avatar
-                                            alt=""
-                                            src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
-                                        />
-                                    </a>
-                                ) : (
-                                    /* if userName is not given, there's no chance userId is given */
-                                    <Avatar
-                                        alt=""
-                                        src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
-                                    />
-                                )}
-                            </div>
-                            <span className="avatar-text">
-                                {person.name}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
             </div>
             <div
                 className="supporters"

src/views/credits/credits.scss

@@ -6,46 +6,10 @@
 }
 
 .credits {
-    .avatar-grid {
-        display: flex;
-        margin: 0 auto;
-        padding: 64px 0;
-        max-width: 864px;
-        list-style: none;
-        flex-wrap: wrap;
-        flex-flow: row wrap;
-        justify-content: center;
-    }
-
     .content {
         padding-top: 40px;
     }
 
-    .avatar-item {
-        display: inline-block;
-        margin: 0;
-        padding-bottom: 32px;
-        text-align: center;
-        line-height: 1.25rem;
-
-        img {
-            $img-border: rgba(0, 0, 0, .05);
-            border: 2px solid $img-border;
-            border-radius: 8px;
-            background-color: $ui-white;
-            width: 80px;
-            height: 80px;
-        }
-
-        .avatar-text {
-            display: inline-block;
-            width: 144px;
-            font-size: .875rem;
-            word-wrap: break-word;
-
-        }
-    }
-
     .acknowledge-content {
         margin: 0 176px;
         padding: 2.5rem 0 5.75rem 0;