From a6b7e341877ff9d823089d2c6239b0bb96b824cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= <emilsj@fb.com>
Date: Tue, 13 Feb 2018 11:27:37 -0800
Subject: [PATCH] Go over property descriptions and add documentation links

Reviewed By: danielbuechele

Differential Revision: D6977090

fbshipit-source-id: cc8a6acda8b9b7f007ad0a2f83249d4e6037bb0f
---
 website/src/components/Playground/Editor.js   | 42 ++++++-------------
 .../src/components/Playground/InfoText.css    |  6 +++
 website/src/components/Playground/InfoText.js | 12 +++++-
 3 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/website/src/components/Playground/Editor.js b/website/src/components/Playground/Editor.js
index 56b4cda2..b26b50bc 100644
--- a/website/src/components/Playground/Editor.js
+++ b/website/src/components/Playground/Editor.js
@@ -58,10 +58,7 @@ export default class Editor extends Component<Props> {
           <TabPane tab="Flex" key="1">
             <h2>
               Direction
-              <InfoText>
-                The direction property specifies the text direction/writing
-                direction
-              </InfoText>
+              <InfoText doclink="/docs/layout-direction">Defines the direction of which text and items are laid out</InfoText>
             </h2>
             <EditValue
               property="direction"
@@ -70,7 +67,7 @@ export default class Editor extends Component<Props> {
             />
             <h2>
               Flex direction
-              <InfoText>Defining the direction of the main-axis</InfoText>
+              <InfoText doclink="/docs/flex-direction">Defines the direction of the main-axis</InfoText>
             </h2>
             <EditValue
               disabled={disabled}
@@ -83,10 +80,7 @@ export default class Editor extends Component<Props> {
               <Col span={12}>
                 <h2>
                   Flex grow
-                  <InfoText>
-                    Grow factor defined how much space this element should take
-                    up, relative to it's siblings
-                  </InfoText>
+                  <InfoText doclink="/docs/flex">The factor of remaining space should be given to this node</InfoText>
                 </h2>
                 <EditValue
                   type="text"
@@ -99,10 +93,7 @@ export default class Editor extends Component<Props> {
               <Col span={12}>
                 <h2>
                   Flex shrink
-                  <InfoText>
-                    Shrink factor if elements don't fit into the parent node
-                    anymore.
-                  </InfoText>
+                  <InfoText doclink="/docs/flex">The shrink factor of this element if parent has no space left</InfoText>
                 </h2>
                 <EditValue
                   type="text"
@@ -116,9 +107,7 @@ export default class Editor extends Component<Props> {
 
             <h2>
               Flex wrap
-              <InfoText>
-                Wrapping behaviour when child nodes don't fit into a single line
-              </InfoText>
+              <InfoText doclink="/docs/flex-wrap">Wrapping behaviour when child nodes don't fit into a single line</InfoText>
             </h2>
             <EditValue
               disabled={disabled}
@@ -130,7 +119,7 @@ export default class Editor extends Component<Props> {
           <TabPane tab="Alignment" key="2">
             <h2>
               Justify content
-              <InfoText>Aligns child nodes along the main-axis</InfoText>
+              <InfoText doclink="/docs/justify-content">Aligns child nodes along the main-axis</InfoText>
             </h2>
             <EditValue
               disabled={disabled}
@@ -141,7 +130,7 @@ export default class Editor extends Component<Props> {
 
             <h2>
               Align items
-              <InfoText>Aligns child nodes along the cross-axis</InfoText>
+              <InfoText doclink="/docs/align-items">Aligns child nodes along the cross-axis</InfoText>
             </h2>
             <EditValue
               disabled={disabled}
@@ -152,9 +141,7 @@ export default class Editor extends Component<Props> {
 
             <h2>
               Align self
-              <InfoText>
-                Specifies alignment on the cross-axis for the node itself
-              </InfoText>
+              <InfoText doclink="/docs/align-items">Override align items of parent</InfoText>
             </h2>
             <EditValue
               disabled={disabled || selectedNodeIsRoot}
@@ -165,9 +152,7 @@ export default class Editor extends Component<Props> {
 
             <h2>
               Align content
-              <InfoText>
-                Alignment of lines along the cross-axis when wrapping
-              </InfoText>
+              <InfoText doclink="/docs/align-content">Alignment of lines along the cross-axis when wrapping</InfoText>
             </h2>
             <EditValue
               disabled={disabled}
@@ -179,7 +164,7 @@ export default class Editor extends Component<Props> {
           <TabPane tab="Layout" key="3">
             <h2>
               Width &times; height
-              <InfoText>Dimensions of the node</InfoText>
+              <InfoText doclink="/docs/width-height">Dimensions of the node</InfoText>
             </h2>
             <Row gutter={15}>
               <Col span={12}>
@@ -206,10 +191,7 @@ export default class Editor extends Component<Props> {
 
             <h2>
               Aspect ratio
-              <InfoText>
-                Aspect radio is an additon by Yoga which is handy e.g. for nodes
-                displaying videos
-              </InfoText>
+              <InfoText doclink="/docs/aspect-ratio">Width/Height aspect ratio of node</InfoText>
             </h2>
             <EditValue
               type="text"
@@ -231,7 +213,7 @@ export default class Editor extends Component<Props> {
             ))}
             <h2>
               Position
-              <InfoText>
+              <InfoText doclink="/docs/absolute-position">
                 Relative position offsets the node from it's calculated
                 position. Absolute position removes the node from the flexbox
                 flow and positions it at the given position.
diff --git a/website/src/components/Playground/InfoText.css b/website/src/components/Playground/InfoText.css
index 5629917b..788e4eef 100644
--- a/website/src/components/Playground/InfoText.css
+++ b/website/src/components/Playground/InfoText.css
@@ -12,6 +12,12 @@
   line-height: 130%;
 }
 
+.InfoText .docs-link {
+  margin-top: 0px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
 .InfoTextIcon {
   margin-left: 5px;
   opacity: 0.5;
diff --git a/website/src/components/Playground/InfoText.js b/website/src/components/Playground/InfoText.js
index 6f2aab17..8add2d4b 100644
--- a/website/src/components/Playground/InfoText.js
+++ b/website/src/components/Playground/InfoText.js
@@ -12,17 +12,27 @@
 
 import React, {Component} from 'react';
 import {Popover, Icon} from 'antd';
+import Link from 'gatsby-link';
 import './InfoText.css';
 
 type Props = {
   children: any,
+  doclink: string,
 };
 
 export default class InfoText extends Component<Props> {
   render() {
     return (
       <Popover
-        content={<div className="InfoText">{this.props.children}</div>}
+        content={
+          <div className="InfoText">
+          {
+            [
+            <p>{[...this.props.children]}</p>, 
+            <Link className="docs-link" to={this.props.doclink}>DOCUMENTATION</Link>]
+          }
+          </div>
+        }
         trigger="hover">
         <Icon className="InfoTextIcon" type="info-circle-o" />
       </Popover>