[Docs] DatePicker, Dialog - Add title & description to examples

docs/src/app/components/pages/components/DatePicker/Page.jsx

@@ -16,6 +16,16 @@ import DatePickerExampleInternational from './ExampleInternational';
 import datePickerExampleInternationalCode from '!raw!./ExampleInternational';
 import datePickerReadmeText from './README';
 
+const descriptions = {
+  simple: 'Basic examples showing the default portrait and alternative landscape `DatePicker`.',
+  inline: 'Inline `DatePicker`\'s are displayed below the input, rather than as a modal dialog. ' +
+  'The `AutoOk` example closes when a date is selected.',
+  ranged: 'This example allows you to set a date range, and to toggle `AutoOk`, and `disableYearSelection`.',
+  controlled: 'Implements a controlled input, where the value is handled by state in the parent (example) component.',
+  localised: 'Demonstrates a localised `DatePicker`, in this case in French. ' +
+  'Note that the buttons must be localised using the `wordings` property.',
+};
+
 if (!window.Intl) {
   require('intl');
   require('intl/locale-data/jsonp/fr');
@@ -24,19 +34,39 @@ if (!window.Intl) {
 const DatePickerPage = () => (
   <div>
     <MarkdownElement text={datePickerReadmeText} />
-    <CodeExample code={datePickerExampleSimpleCode}>
+    <CodeExample
+      title="Simple examples"
+      description={descriptions.simple}
+      code={datePickerExampleSimpleCode}
+    >
       <DatePickerExampleSimple/>
     </CodeExample>
-    <CodeExample code={datePickerExampleInlineCode}>
+    <CodeExample
+      title="Inline examples"
+      description={descriptions.inline}
+      code={datePickerExampleInlineCode}
+    >
       <DatePickerExampleInline/>
     </CodeExample>
-    <CodeExample code={datePickerExampleToggleCode}>
+    <CodeExample
+      title="Ranged example"
+      description={descriptions.ranged}
+      code={datePickerExampleToggleCode}
+    >
       <DatePickerExampleToggle/>
     </CodeExample>
-    <CodeExample code={datePickerExampleControlledCode}>
+    <CodeExample
+      title="Controlled example"
+      description={descriptions.controlled}
+      code={datePickerExampleControlledCode}
+    >
       <DatePickerExampleControlled/>
     </CodeExample>
-    <CodeExample code={datePickerExampleInternationalCode}>
+    <CodeExample
+      title="Localised example"
+      description={descriptions.localised}
+      code={datePickerExampleInternationalCode}
+    >
       <DatePickerExampleInternational/>
     </CodeExample>
     <PropTypeDescription code={datePickerCode} />

docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx

@@ -34,14 +34,14 @@ export default class DialogExampleSimple extends React.Component {
 
     return (
       <div>
-        <RaisedButton label="Dialog With Actions" onTouchTap={this.handleOpen} />
+        <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
         <Dialog
           title="Dialog With Actions"
           actions={actions}
           modal={false}
           open={this.state.open}
           onRequestClose={this.handleClose}>
-          The actions in this window were passed in as an array of react objects.
+          The actions in this window were passed in as an array of React objects.
         </Dialog>
       </div>
     );

docs/src/app/components/pages/components/Dialog/Page.jsx

@@ -12,19 +12,40 @@ import DialogExampleCustomWidth from './ExampleCustomWidth';
 import dialogExampleCustomWidthCode from '!raw!./ExampleCustomWidth';
 import dialogCode from '!raw!material-ui/lib/dialog';
 
+const descriptions = {
+  simple: 'Dialog with action buttons. The actions are passed in as an array of React objects, ' +
+  'in this example [FlatButtons](http://localhost:3000/#/components/flat-button). \n\n' +
+  'You can also close this dialog by clicking outside the dialog, or with the \'Esc\' key.',
+  modal: 'A modal dialog can only be closed by selecting one of the actions.',
+  styled: 'The dialog width has been set to occupy the full width of browser through the `contentStyle` property.',
+
+};
+
 const DialogPage = () => (
   <div>
     <MarkdownElement text={dialogReadmeText} />
-    <CodeExample code={dialogExampleSimpleCode}>
+    <CodeExample
+      title="Simple dialog"
+      description={descriptions.simple}
+      code={dialogExampleSimpleCode}
+    >
       <DialogExampleSimple />
     </CodeExample>
-    <CodeExample code={dialogExampleModalCode}>
+    <CodeExample
+      title="Modal dialog"
+      description={descriptions.modal}
+      code={dialogExampleModalCode}
+    >
       <DialogExampleModal />
     </CodeExample>
-    <CodeExample code={dialogExampleCustomWidthCode}>
+    <CodeExample
+      title="Styled dialog"
+      description={descriptions.styled}
+      code={dialogExampleCustomWidthCode}
+    >
       <DialogExampleCustomWidth />
     </CodeExample>
-    <PropTypeDescription code={dialogCode}/>
+    <PropTypeDescription code={dialogCode} />
   </div>
 );