From b2a0cb4c8739e2504598fdca30257de5c0538bb0 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 11 Oct 2017 12:04:31 -0400
Subject: [PATCH] WIP on extensions modal

---
 src/components/library-item/library-item.css | 24 ++++++++++++++++++++
 src/components/library-item/library-item.jsx | 24 +++++++++++++++++++-
 src/components/library/library.jsx           |  3 +++
 src/lib/libraries/extensions.json            | 24 +++++++++++++++-----
 4 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index 067b2c1af..ba90b07fb 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -58,3 +58,27 @@
     white-space: nowrap;
     min-width: 0;
 }
+
+.featured-item {
+    flex-basis: 300px;
+    max-width: 300px;
+    height: 320px;
+}
+
+.featured-image {
+    height: 160px;
+    margin: 20px;
+}
+
+.featured-text {
+    border-top: 1px solid #e9eef2;
+    font-weight: bold;
+    padding: 10px;
+    height: 140px;
+    width: 300px;
+}
+
+.featured-description {
+    font-weight: normal;
+    line-height: 2;
+}
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 5e0fa5edc..0f1443e36 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import Box from '../box/box.jsx';
 import styles from './library-item.css';
+import classNames from 'classnames';
 
 class LibraryItem extends React.PureComponent {
     constructor (props) {
@@ -25,7 +26,26 @@ class LibraryItem extends React.PureComponent {
         this.props.onMouseLeave(this.props.id);
     }
     render () {
-        return (
+        return this.props.featured ? (
+            <div
+                className={classNames(styles.libraryItem, styles.featuredItem)}
+                onClick={this.handleClick}
+            >
+                <div>
+                    <img
+                        className={styles.featuredImage}
+                        src={this.props.iconURL}
+                    />
+                </div>
+                <div
+                    className={styles.featuredText}
+                >
+                    <span className={styles.libraryItemName}>{this.props.name}</span>
+                    <br />
+                    <span className={styles.featuredDescription}>{this.props.description}</span>
+                </div>
+            </div>
+        ) : (
             <Box
                 className={styles.libraryItem}
                 onClick={this.handleClick}
@@ -48,6 +68,8 @@ class LibraryItem extends React.PureComponent {
 }
 
 LibraryItem.propTypes = {
+    description: PropTypes.string,
+    featured: PropTypes.bool,
     iconURL: PropTypes.string.isRequired,
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 165716e5b..faed615af 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -57,8 +57,11 @@ class LibraryComponent extends React.Component {
                         const scratchURL = dataItem.md5 ?
                             `https://cdn.assets.scratch.mit.edu/internalapi/asset/${dataItem.md5}/get/` :
                             dataItem.rawURL;
+                        const isFeatured = dataItem.featured === 'true';
                         return (
                             <LibraryItem
+                                description={dataItem.description}
+                                featured={isFeatured}
                                 iconURL={scratchURL}
                                 id={index}
                                 key={`item_${index}`}
diff --git a/src/lib/libraries/extensions.json b/src/lib/libraries/extensions.json
index 91868acd3..997f476d0 100644
--- a/src/lib/libraries/extensions.json
+++ b/src/lib/libraries/extensions.json
@@ -1,12 +1,24 @@
 [
-    {
-        "name": "Some Blocks",
-        "extensionURL": "static/extensions/example-extension.js",
-        "md5": "76f99773dd4eb59f86cd11bba6ad3cb9.svg"
+        {
+        "name": "Lego WeDo 2.0",
+        "extensionURL": "wedo2",
+        "md5": "17813b4f018e831a9c64d32c37a30914.png",
+        "description": "Build with motors and sensors.",
+        "featured": "true"
+
     },
     {
         "name": "Pen",
-        "extensionURL": "",
-        "md5": "76f99773dd4eb59f86cd11bba6ad3cb9.svg"
+        "extensionURL": "pen",
+        "md5": "fb280e60e152cfe11ff4c3331fb2c495.svg",
+        "description": "Draw with your sprites.",
+        "featured": "true"
+    },
+    {
+        "name": "Pitch",
+        "extensionURL": "pitch",
+        "description": "Interact by singing.",
+        "md5": "777d79979182fa22b27fbc10f40c42af.svg",
+	    "featured": "true"
     }
 ]