Merge branch 'master' of github.com:HubSpot/react-experiments

Guy · Guy · commit a44448016a78 · 2015-09-27T20:52:58.000-04:00
diff --git a/examples/index.html b/examples/index.html
@@ -2,10 +2,11 @@
 <head>
   <meta charset="UTF-8">
   <title>react-experiments example</title>
+  <link rel="stylesheet" type="text/css" href="./styles.css" />
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
 </head>
 <body>
   <div class="examples-container"></div>
-
   <script src="http://cdn.jsdelivr.net/react/0.13.3/react-with-addons.js"></script>
   <script src="http://cdn.jsdelivr.net/react/0.13.3/JSXTransformer.js"></script>
   <script src="../node_modules/planout/dist/planout.js"></script>
@@ -88,17 +89,20 @@
     var VariationExperiment = React.createClass({
       render: function() {
         return (
+          <div className="card">
+            <span>A single branch is rendered conditionally: </span>
             <ReactExperiments.ABTest experiment={window.demo} experimentName='SampleExperiment' on='foo'>
               <ReactExperiments.When value='Variation A'>
-                Variation A
+                <strong>Variation A Component</strong>
               </ReactExperiments.When>
               <ReactExperiments.When value='Variation B'>
-                Variation B
+                <strong>Variation B Component</strong>
               </ReactExperiments.When>
               <ReactExperiments.Default>
-                test
+                <strong>Default Component</strong>
               </ReactExperiments.Default>
             </ReactExperiments.ABTest>
+          </div>
         );
       }
     });
@@ -110,22 +114,19 @@
 
       render: function() {
         return (
-          <span>
-            This is passed down by context:
-            {this.context.experimentParameters.foo}
-          </span>
+          <div className="card">
+            Experiment param value passed down via context: <strong>{this.context.experimentParameters.foo}</strong>
+          </div>
         );
       }
     });
 
     var TextComponent = React.createClass({ 
       render: function() {
         return (
-          <span>
-            This is passed down by props: {this.props.foo}
-            <br />
-            <FooComponent />
-          </span>
+          <div className="card">
+            Experiment param value passed down via props: <strong>{this.props.foo}</strong>
+          </div>
         );
       }
     });
@@ -137,6 +138,7 @@
         return (
           <ReactExperiments.Parametrize experiment={window.demo}>
             <TextComponent />
+            <FooComponent />
           </ReactExperiments.Parametrize>
         );
       }
@@ -145,15 +147,18 @@
     var ExperimentExamples = React.createClass({
       render: function() {
         return (
-          <div>
-            <span>Your user id is {window.userid}</span>
-            <br />
-            <span>This is an experiment just using the parametrize component</span>
-            <br />
-            <ParametrizeExperiment />
-            <br />
-            <span>This is an experiment using the ABTest component</span>
-            <VariationExperiment />
+          <div className="wrap">
+            <div className="logo text-center">
+              <img src="./react-experiments.jpg" width="400" />
+            </div>
+            <div className="example">
+              <h3>Parametrize Component:</h3>
+              <ParametrizeExperiment />
+            </div>
+            <div className="example">
+              <h3>ABTest Component:</h3>
+              <VariationExperiment />
+            </div>
           </div>
         );
       }
diff --git a/examples/react-experiments.jpg b/examples/react-experiments.jpg
diff --git a/examples/styles.css b/examples/styles.css
@@ -0,0 +1,13 @@
+body {background: whitesmoke;color: #282828;font-family: 'Roboto', sans-serif;font-weight: 400;}
+img {max-width: 100%;}
+.wrap {width: 100%;max-width: 600px;margin: 0 auto;}
+.clearfix {clear: both;}
+.text-center {text-align: center;}
+.text-left {text-align: left;}
+.text-right {text-align: right;}
+.margin-top {margin-top: 20px;}
+.margin-bottom {margin-bottom: 20px;}
+.card {margin: 0 0 10px 0;padding: 20px;background: white;border: 1px solid gainsboro;border-radius: 4px;}
+.example {margin: 20px 0;}
+.logo {margin: 20px 0;padding-bottom: 40px;border-bottom: 1px solid gainsboro;}
+.user-id {color: #999;font-size: 13px;}
