Extend Portal component with title, buttons & steps (as per Modal) (#4392)

* Allow Portal to take title & buttons props

* Fix tests

* Portal consistent in screen center

* Allow hiding of Close (e.g. FirstRun usage)

* Set overflow style on body based on open

* Don't lock scroll for child popups (overlaps)

* Override buttons to be white

* Expose ~/ui/Modal/Title as re-usable component

* Use ~/ui/Title to render the Title

* Update tests

* Added a portal example with buttons and steps

* Address PR comments

* Fix AddressSelect with new container withing container

* Move legend to "buttons"

* AddressSelect extra padding

js/src/ui/Container/Title/title.css

@@ -14,30 +14,36 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-.byline, .description {
+
+$bylineColor: #aaa;
+$bylineLineHeight: 1.2rem;
+$bylineMaxHeight: 2.4rem;
+$titleLineHeight: 2rem;
+$smallFontSize: 0.75rem;
+
+.byline,
+.description {
+  color: $bylineColor;
+  display: -webkit-box;
+  line-height: $bylineLineHeight;
+  max-height: $bylineMaxHeight;
   overflow: hidden;
   position: relative;
-  line-height: 1.2em;
-  max-height: 2.4em;
-
-  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
-  color: #aaa;
-
   * {
-    color: #aaa !important;
+    color: $bylineColor !important;
   }
 }
 
 .description {
-  font-size: 0.75em;
+  font-size: $smallFontSize;
   margin: 0.5em 0 0;
 }
 
 .title {
-  text-transform: uppercase;
+  line-height: $titleLineHeight;
   margin: 0;
-  line-height: 34px;
+  text-transform: uppercase;
 }

js/src/ui/Container/Title/title.js

@@ -29,29 +29,41 @@ export default class Title extends Component {
   }
 
   render () {
-    const { byline, className, title } = this.props;
-
-    const byLine = typeof byline === 'string'
-      ? (
-        <span title={ byline }>
-          { byline }
-        </span>
-      )
-      : byline;
+    const { className, title } = this.props;
 
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
           { title }
         </h3>
-        <div className={ styles.byline }>
-          { byLine }
-        </div>
+        { this.renderByline() }
         { this.renderDescription() }
       </div>
     );
   }
 
+  renderByline () {
+    const { byline } = this.props;
+
+    if (!byline) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.byline }>
+        {
+          typeof byline === 'string'
+            ? (
+              <span title={ byline }>
+                { byline }
+              </span>
+            )
+            : byline
+        }
+      </div>
+    );
+  }
+
   renderDescription () {
     const { description } = this.props;
 
@@ -59,17 +71,17 @@ export default class Title extends Component {
       return null;
     }
 
-    const desc = typeof description === 'string'
-      ? (
-        <span title={ description }>
-          { description }
-        </span>
-      )
-      : description;
-
     return (
       <div className={ styles.description }>
-        { desc }
+        {
+          typeof description === 'string'
+            ? (
+              <span title={ description }>
+                { description }
+              </span>
+            )
+            : description
+        }
       </div>
     );
   }