[Docs] Add page title

mui · Feb 8, 2016 · 646f790 · 646f790
1 parent 484f038
commit 646f790
Show file tree

Hide file tree

Showing 51 changed files with 179 additions and 17 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -18,7 +18,9 @@
     "native:development": "node_modules/react-native/packager/packager.sh --reset-cache",
     "android:setup-port": "adb reverse tcp:8081 tcp:8081"
   },
-  "dependencies": {},
+  "dependencies": {
+    "react-title-component": "^1.0.1"
+  },
   "devDependencies": {
     "babel-eslint": "^4.1.6",
     "babel-plugin-transform-react-constant-elements": "^6.3.13",

diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
@@ -1,16 +1,12 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import AppBar from 'material-ui/lib/app-bar';
 import IconButton from 'material-ui/lib/icon-button';
 import {Spacing} from 'material-ui/lib/styles';
-import {
-  StylePropable,
-  StyleResizable,
-} from 'material-ui/lib/mixins';
+import {StylePropable, StyleResizable} from 'material-ui/lib/mixins';
 
-import {
-  Colors,
-  getMuiTheme,
-} from 'material-ui/lib/styles';
+import {Colors, getMuiTheme} from 'material-ui/lib/styles';
 
 import AppLeftNav from './app-left-nav';
 import FullWidthSection from './full-width-section';
@@ -172,6 +168,7 @@ const Master = React.createClass({
 
     return (
       <div>
+        <Title render="Material-UI" />
         <AppBar
           onLeftIconButtonTouchTap={this.handleTouchTapLeftIconButton}
           title={title}

diff --git a/docs/src/app/components/pages/components/AppBar/Page.jsx b/docs/src/app/components/pages/components/AppBar/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -22,6 +24,7 @@ const descriptions = {
 
 const AppBarPage = () => (
   <div>
+    <Title render={(previousTitle) => `App Bar - ${previousTitle}`} />
     <MarkdownElement text={appBarReadmeText} />
     <CodeExample
       code={appBarExampleIconCode}

diff --git a/docs/src/app/components/pages/components/AutoComplete/Page.jsx b/docs/src/app/components/pages/components/AutoComplete/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -22,6 +24,7 @@ const descriptions = {
 
 const AutoCompletesPage = () => (
   <div>
+    <Title render={(previousTitle) => `Auto Complete - ${previousTitle}`} />
     <MarkdownElement text={autoCompleteReadmeText} />
     <CodeExample
       code={autoCompleteExampleSimpleCode}

diff --git a/docs/src/app/components/pages/components/Avatar/Page.jsx b/docs/src/app/components/pages/components/Avatar/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -13,6 +15,7 @@ const description = 'Examples of `Avatar` using an image, [Font Icon](/#/compone
 
 const AvatarsPage = () => (
   <div>
+    <Title render={(previousTitle) => `Avatar - ${previousTitle}`} />
     <MarkdownElement text={avatarReadmeText} />
     <CodeExample
       code={avatarExampleSimpleCode}

diff --git a/docs/src/app/components/pages/components/Badge/Page.jsx b/docs/src/app/components/pages/components/Badge/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -21,6 +23,7 @@ const descriptions = {
 
 const BadgePage = () => (
   <div>
+    <Title render={(previousTitle) => `Badge - ${previousTitle}`} />
     <MarkdownElement text={badgeReadmeText} />
     <CodeExample
       title="Simple examples"

diff --git a/docs/src/app/components/pages/components/Card/Page.jsx b/docs/src/app/components/pages/components/Card/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -26,6 +28,7 @@ const descriptions = {
 
 const CardPage = () => (
   <div>
+    <Title render={(previousTitle) => `Card - ${previousTitle}`} />
     <MarkdownElement text={cardReadmeText} />
     <CodeExample
       title="Card components example"

diff --git a/docs/src/app/components/pages/components/Checkbox/Page.jsx b/docs/src/app/components/pages/components/Checkbox/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -15,6 +17,7 @@ const description = 'The second example is selected by default using the `defaul
 
 const CheckboxPage = () => (
   <div>
+    <Title render={(previousTitle) => `Checkbox - ${previousTitle}`} />
     <MarkdownElement text={checkboxReadmeText} />
     <CodeExample
       title="Examples"

diff --git a/docs/src/app/components/pages/components/CircularProgress/Page.jsx b/docs/src/app/components/pages/components/CircularProgress/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -18,6 +20,7 @@ const descriptions = {
 
 const CircleProgressPage = () => (
   <div>
+    <Title render={(previousTitle) => `Circular Progress - ${previousTitle}`} />
     <MarkdownElement text={circleProgressReadmeText} />
     <CodeExample
       title="Indeterminate progress"

diff --git a/docs/src/app/components/pages/components/DatePicker/Page.jsx b/docs/src/app/components/pages/components/DatePicker/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -29,6 +31,7 @@ const descriptions = {
 
 const DatePickerPage = () => (
   <div>
+    <Title render={(previousTitle) => `Date Picker - ${previousTitle}`} />
     <MarkdownElement text={datePickerReadmeText} />
     <CodeExample
       title="Simple examples"

diff --git a/docs/src/app/components/pages/components/Dialog/Page.jsx b/docs/src/app/components/pages/components/Dialog/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -25,6 +27,7 @@ const descriptions = {
 
 const DialogPage = () => (
   <div>
+    <Title render={(previousTitle) => `Dialog - ${previousTitle}`} />
     <MarkdownElement text={dialogReadmeText} />
     <CodeExample
       title="Simple dialog"

diff --git a/docs/src/app/components/pages/components/Divider/Page.jsx b/docs/src/app/components/pages/components/Divider/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -23,6 +25,7 @@ const descriptions = {
 const DividerPage = () => {
   return (
     <div>
+      <Title render={(previousTitle) => `Divider - ${previousTitle}`} />
       <MarkdownElement text={dividerReadmeText} />
       <CodeExample
         title="Form divider"

diff --git a/docs/src/app/components/pages/components/DropDownMenu/Page.jsx b/docs/src/app/components/pages/components/DropDownMenu/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -23,6 +25,7 @@ const descriptions = {
 
 const DropDownMenuPage = () => (
   <div>
+    <Title render={(previousTitle) => `Drop Down Menu - ${previousTitle}`} />
     <MarkdownElement text={dropDownMenuReadmeText} />
     <CodeExample
       title="Simple example"

diff --git a/docs/src/app/components/pages/components/FlatButton/Page.jsx b/docs/src/app/components/pages/components/FlatButton/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -19,6 +21,7 @@ const descriptions = {
 
 const FlatButtonPage = () => (
   <div>
+    <Title render={(previousTitle) => `Flat Button - ${previousTitle}`} />
     <MarkdownElement text={flatButtonReadmeText} />
     <CodeExample
       title="Simple examples"

diff --git a/docs/src/app/components/pages/components/FloatingActionButton/Page.jsx b/docs/src/app/components/pages/components/FloatingActionButton/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -15,6 +17,7 @@ const descriptions = {
 
 const FloatingActionButtonPage = () => (
   <div>
+    <Title render={(previousTitle) => `Floating Action Button - ${previousTitle}`} />
     <MarkdownElement text={floatingButtonReadmeText} />
     <CodeExample description={descriptions.simple} code={floatingButtonExampleSimpleCode}>
       <FloatingButtonExampleSimple />

diff --git a/docs/src/app/components/pages/components/FontIcon/Page.jsx b/docs/src/app/components/pages/components/FontIcon/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -20,6 +22,7 @@ const descriptions = {
 
 const FontIconPage = () => (
   <div>
+    <Title render={(previousTitle) => `Font Icon - ${previousTitle}`} />
     <MarkdownElement text={iconReadmeText} />
     <CodeExample
       title="Custom icon font"

diff --git a/docs/src/app/components/pages/components/GridList/Page.jsx b/docs/src/app/components/pages/components/GridList/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -19,6 +21,7 @@ const descriptions = {
 
 const GridListPage = () => (
   <div>
+    <Title render={(previousTitle) => `Grid List - ${previousTitle}`} />
     <MarkdownElement text={gridListReadmeText} />
     <CodeExample
       title="Simple example"

diff --git a/docs/src/app/components/pages/components/IconButton/Page.jsx b/docs/src/app/components/pages/components/IconButton/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -24,6 +26,7 @@ const descriptions = {
 
 const IconButtonPage = () => (
   <div>
+    <Title render={(previousTitle) => `Icon Button - ${previousTitle}`} />
     <MarkdownElement text={iconButtonReadmeText} />
     <CodeExample
       title="Simple example"

diff --git a/docs/src/app/components/pages/components/IconMenu/Page.jsx b/docs/src/app/components/pages/components/IconMenu/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -21,6 +23,7 @@ const descriptions = {
 
 const IconMenusPage = () => (
   <div>
+    <Title render={(previousTitle) => `Icon Menu - ${previousTitle}`} />
     <MarkdownElement text={iconMenuReadmeText} />
     <CodeExample
       title="Icon Menu positioning"

diff --git a/docs/src/app/components/pages/components/LeftNav/Page.jsx b/docs/src/app/components/pages/components/LeftNav/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -23,6 +25,7 @@ const descriptions = {
 
 const LeftNavPage = () => (
   <div>
+    <Title render={(previousTitle) => `Left Nav - ${previousTitle}`} />
     <MarkdownElement text={leftNavReadmeText} />
     <CodeExample
       title="Docked example"

diff --git a/docs/src/app/components/pages/components/LinearProgress/Page.jsx b/docs/src/app/components/pages/components/LinearProgress/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -18,6 +20,7 @@ const descriptions = {
 
 const LinearProgressPage = () => (
   <div>
+    <Title render={(previousTitle) => `Linear Progress - ${previousTitle}`} />
     <MarkdownElement text={linearProgressReadmeText} />
     <CodeExample
       title="Indeterminate progress"

diff --git a/docs/src/app/components/pages/components/List/Page.jsx b/docs/src/app/components/pages/components/List/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -42,6 +44,7 @@ const descriptions = {
 
 const ListPage = () => (
   <div>
+    <Title render={(previousTitle) => `List - ${previousTitle}`} />
     <MarkdownElement text={listReadmeText} />
     <CodeExample
       title="Simple list"

diff --git a/docs/src/app/components/pages/components/Menu/Page.jsx b/docs/src/app/components/pages/components/Menu/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -29,6 +31,7 @@ const descriptions = {
 
 const MenuPage = () => (
   <div>
+    <Title render={(previousTitle) => `Menu - ${previousTitle}`} />
     <MarkdownElement text={menuReadmeText} />
     <CodeExample
       title="Simple examples"

diff --git a/docs/src/app/components/pages/components/Paper/Page.jsx b/docs/src/app/components/pages/components/Paper/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -20,6 +22,7 @@ const descriptions = {
 
 const PaperPage = () => (
   <div>
+    <Title render={(previousTitle) => `Paper - ${previousTitle}`} />
     <MarkdownElement text={paperReadmeText} />
     <CodeExample
       title="Simple example"

diff --git a/docs/src/app/components/pages/components/Popover/Page.jsx b/docs/src/app/components/pages/components/Popover/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -22,6 +24,7 @@ const descriptions = {
 
 const PopoverPage = () => (
   <div>
+    <Title render={(previousTitle) => `Popover - ${previousTitle}`} />
     <MarkdownElement text={popoverReadmeText} />
     <CodeExample
       title="Simple example"

diff --git a/docs/src/app/components/pages/components/RadioButton/Page.jsx b/docs/src/app/components/pages/components/RadioButton/Page.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Title from 'react-title-component';
+
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
@@ -15,6 +17,7 @@ const description = 'The second button is selected by default using the `default
 
 const RadioButtonPage = () => (
   <div>
+    <Title render={(previousTitle) => `Radio Button - ${previousTitle}`} />
     <MarkdownElement text={radioButtonReadmeText} />
     <CodeExample
       title="Examples"