refactoring: change title and subtitle to independent components

scm-ui/src/components/layout/Page.js

@@ -2,9 +2,11 @@
 import * as React from "react";
 import Loading from "./../Loading";
 import ErrorNotification from "./../ErrorNotification";
+import Title from "./Title";
+import Subtitle from "./Subtitle";
 
 type Props = {
-  title: string,
+  title?: string,
   subtitle?: string,
   loading?: boolean,
   error?: Error,
@@ -14,12 +16,12 @@ type Props = {
 
 class Page extends React.Component<Props> {
   render() {
-    const { title, error } = this.props;
+    const { title, error, subtitle } = this.props;
     return (
       <section className="section">
         <div className="container">
-          <h1 className="title">{title}</h1>
+          <Title title={title} />
-          {this.renderSubtitle()}
+          <Subtitle subtitle={subtitle} />
           <ErrorNotification error={error} />
           {this.renderContent()}
         </div>
@@ -27,14 +29,6 @@ class Page extends React.Component<Props> {
     );
   }
 
-  renderSubtitle() {
-    const { subtitle } = this.props;
-    if (subtitle) {
-      return <h2 className="subtitle">{subtitle}</h2>;
-    }
-    return null;
-  }
-
   renderContent() {
     const { loading, children, showContentOnError, error } = this.props;
     if (error && !showContentOnError) {

scm-ui/src/components/layout/Subtitle.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+type Props = {
+  subtitle?: string
+};
+
+class Subtitle extends React.Component<Props> {
+  render() {
+    const { subtitle } = this.props;
+    if (subtitle) {
+      return <h1 className="subtitle">{subtitle}</h1>;
+    }
+    return null;
+  }
+}
+
+export default Subtitle;

scm-ui/src/components/layout/Title.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+type Props = {
+  title?: string
+};
+
+class Title extends React.Component<Props> {
+  render() {
+    const { title } = this.props;
+    if (title) {
+      return <h1 className="title">{title}</h1>;
+    }
+    return null;
+  }
+}
+
+export default Title;