add align to PageTitle

Author: Alan

src/components/__tests__/__snapshots__/page.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`The Page component should render 1`] = `
     }
   >
     <PageTitle
+      align="center"
       title="Page title"
     />
   </div>

src/components/__tests__/__snapshots__/page_title.test.tsx.snap

@@ -3,6 +3,11 @@
 exports[`The PageTitle component should render 1`] = `
 <div
   className="page-title"
+  style={
+    Object {
+      "textAlign": "center",
+    }
+  }
 >
   <div
     className="page-title__title-container"

src/components/page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 // components
-import PageTitle from './page_title';
+import { PageTitle, PageTitleAlign } from './page_title';
 
 import classNames = require('classnames');
 
@@ -16,16 +16,18 @@ export interface PageProps {
     id?: string;
     /** Additional classes for styling */
     className?: string;
+    /** How to align the page title */
+    titleAlign?: PageTitleAlign;
     /** The page content */
-    children: any;
+    children?: any;
 }
 
 export const Page: React.StatelessComponent<PageProps> = ({
-    title, isBeta, maxWidth, id, className, children,
+    title, isBeta, maxWidth, id, className, titleAlign, children,
 }): JSX.Element => (
     <div id={id} className={classNames('page', className)}>
         <div className="page__content" style={{ maxWidth }}>
-            {title && <PageTitle title={title} isBeta={isBeta} />}
+            {title && <PageTitle title={title} isBeta={isBeta} align={titleAlign} />}
             {children}
         </div>
     </div>

src/components/page_title.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import BetaPill from './beta_pill';
 
+export type PageTitleAlign = 'left' | 'center' | 'right';
+
 export interface PageTitleProps {
     title: string;
     isBeta?: boolean;
+    align?: PageTitleAlign
 }
 
 export const PageTitle: React.StatelessComponent<PageTitleProps> = (
-    { title, isBeta },
+    { title, isBeta, align },
 ): JSX.Element => (
-    <div className="page-title">
+    <div className="page-title" style={{ textAlign: align }}>
         <div className="page-title__title-container">
             <h2>
                 {title}
@@ -19,6 +22,10 @@ export const PageTitle: React.StatelessComponent<PageTitleProps> = (
     </div>
 );
 
+PageTitle.defaultProps = {
+    align: 'center',
+};
+
 PageTitle.displayName = 'PageTitle';
 
 export default PageTitle;

src/stories/layout.stories.tsx

@@ -23,7 +23,7 @@ import SettingPanel from '../components/setting_panel';
 import Carousel from '../components/carousel';
 import AspectRatioContainer from '../components/aspect_ratio_container';
 import Header from '../components/header';
-import Navigation, { NavRoute } from '../components/navigation';
+import Navigation from '../components/navigation';
 import UserAccountMenu from '../components/user_account_menu';
 import AppSwitcherMenu from '../components/app_switcher_menu';