Playground and ComponentPage styles.

Author: arielger

packages/react-components/src/Select/examples.js

@@ -16,18 +16,12 @@ const examples = [
       />
     ),
     code: (
-`
-<Select
-  options={[
-    'Zoey Andrews',
-    'Jerry Woods',
-    'Marion Garza'
-  ]}
+`<Select
+  options={['Zoey Andrews', 'Jerry Woods', 'Marion Garza']}
   selected={2}
   handleChange={(e) => { console.log(e.target.value); }}
   label="Select user"
-/>
-`
+/>`
     )
   }
 ];

packages/website/src/components/Playground/index.js

@@ -1,3 +1,4 @@
+/* global hljs */
 import React, { PropTypes } from 'react';
 import './index.styl';
 
@@ -14,14 +15,22 @@ class Playground extends React.Component {
   render() {
     const { component, code, title } = this.props;
     return (
-      <div className="react-component-playground">
-        {title}
-        {component}
-        <pre>
-          <code className="javascript" ref={node => this.codeBlock = node}>
-            {code}
-          </code>
-        </pre>
+      <div className="react-playground">
+        { title && <h3 className="react-playground-title">{title}</h3> }
+        <div className="react-playground-component">
+          <div className="component-links">
+            <a href="#">Open in stage</a>
+          </div>
+          {component}
+        </div>
+        <div className="react-playground-code">
+          <button className="copy-code-btn btn btn-sm btn-success">Copy code</button>
+          <pre>
+            <code className="javascript" ref={node => this.codeBlock = node}>
+              {code}
+            </code>
+          </pre>
+        </div>
       </div>
     );
   }

packages/website/src/components/Playground/index.styl

@@ -1,5 +1,37 @@
-.react-component-playground
-  width 100%
-  min-height 200px
-  background-color white
-  border-radius 3px
+.react-playground
+  margin-bottom 60px
+
+  .react-playground-title
+    font-size 22px
+
+  .react-playground-component
+    width 100%
+    min-height 140px
+    position relative
+    background-color white
+    border 1px solid #EDEDED
+    border-bottom 0
+    border-top-left-radius 3px
+    border-top-right-radius 3px
+
+    .component-links
+      position absolute
+      top -40px
+      right 0
+
+  .react-playground-code
+    position relative
+
+    .copy-code-btn
+      position absolute
+      top 20px
+      right 20px
+      
+    code
+      padding 24px
+      border-radius 0
+      border-bottom-left-radius 3px
+      border-bottom-right-radius 3px
+
+    pre
+      margin-bottom 0

packages/website/src/components/Sidebar/index.styl

@@ -38,7 +38,7 @@
   .sidebar-item-link
     display block
     color black
-    padding 12px 16px
+    padding 12px 24px
     font-size 14px
 
     &.active

packages/website/src/containers/ComponentPage/index.js

@@ -4,9 +4,10 @@ import './index.styl';
 
 const ComponentPage = ({ title, description, props, examples }) =>
   <section className="react-component-page">
-    <h1 className="component-title">{title}</h1>
-    <p className="component-description">{description}</p>
-
+    <div className="component-information">
+      <h1 className="component-title">{title}</h1>
+      <p className="component-description">{description}</p>
+    </div>
     {examples.map((example, index) =>
       <Playground
         key={index}
@@ -15,13 +16,7 @@ const ComponentPage = ({ title, description, props, examples }) =>
         title={example.title}
       />
     )}
-
-    { props ? (
-      <PropertiesTable props={props} />
-    ) : (
-      <h4>No component propTypes defined.</h4>
-    )}
-
+    { props && <PropertiesTable props={props} />}
   </section>;
 
 ComponentPage.propTypes = {

packages/website/src/containers/ComponentPage/index.styl

@@ -1,8 +1,13 @@
 .react-component-page
   padding 60px
 
+  .component-information
+    margin-bottom 30px
+
   .component-title
-    font-size 24px
+    font-size 28px
 
   .component-description
     color grey
+    font-size 16px
+    margin-bottom 0