WIP on extensions modal

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;
+}

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,

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}`}

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"
     }
 ]