Merge pull request mui#2113 from shaurya947/master

Add import statements to every component's doc page
tyfoo · Nov 9, 2015 · fd088e1 · fd088e1
2 parents d328658 + 4145d8f
commit fd088e1
Show file tree

Hide file tree

Showing 26 changed files with 529 additions and 224 deletions.
diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
@@ -1,11 +1,12 @@
-let React = require('react');
-let { AppBar, DropDownMenu } = require('material-ui');
-let IconButton = require('icon-button');
-let NavigationClose = require('svg-icons/navigation/close');
-let FlatButton = require('flat-button');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
-let Code = require('app-bar-code');
+const React = require('react');
+const { AppBar, DropDownMenu, Paper } = require('material-ui');
+const IconButton = require('icon-button');
+const NavigationClose = require('svg-icons/navigation/close');
+const FlatButton = require('flat-button');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
+const Code = require('app-bar-code');
 const IconMenu = require('menus/icon-menu');
 const MenuItem = require('menus/menu-item');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
@@ -113,6 +114,16 @@ export default class AppBarPage extends React.Component {
         name="AppBar"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <AppBar
             title="Title"

diff --git a/docs/src/app/components/pages/components/avatars.jsx b/docs/src/app/components/pages/components/avatars.jsx
@@ -1,10 +1,11 @@
-let React = require('react');
-let { Avatar, FontIcon, List, ListItem, Styles } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let FileFolder = require('svg-icons/file/folder');
-let { Colors } = Styles;
-let Code = require('avatars-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const FileFolder = require('svg-icons/file/folder');
+const { Colors } = Styles;
+const Code = require('avatars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class AvatarsPage extends React.Component {
@@ -70,6 +71,16 @@ export default class AvatarsPage extends React.Component {
         name="Avatars"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <List>
             <ListItem leftAvatar={imageAvatar} disabled={true}>Image Avatar</ListItem>

diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx
@@ -1,12 +1,13 @@
-let React = require('react');
-let { FontIcon, IconButton, Badge } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('badge-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { FontIcon, IconButton, Badge, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('badge-code');
+const CodeExample = require('../../code-example/code-example');
 const NotificationsIcon = require('svg-icons/social/notifications');
 const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
 const FolderIcon = require('svg-icons/file/folder-open');
 const UploadIcon = require('svg-icons/file/cloud-upload');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class BadgePage extends React.Component {
   constructor(props) {
@@ -59,6 +60,16 @@ export default class BadgePage extends React.Component {
         name="Badge"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
 
           <Badge badgeContent={4} primary={true}>

diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
@@ -1,25 +1,27 @@
-let React = require('react');
-let ComponentDoc = require('../../component-doc');
-let mui = require('material-ui');
-let ToggleStar = require('svg-icons/toggle/star');
+const React = require('react');
+const ComponentDoc = require('../../component-doc');
+const mui = require('material-ui');
+const ToggleStar = require('svg-icons/toggle/star');
 
-let {
+const {
   ClearFix,
   FlatButton,
   FloatingActionButton,
   FontIcon,
   RaisedButton,
+  Paper,
   Styles,
   Tab,
   Tabs,
   Utils,
 } = mui;
-let extend = Utils.Extend;
-let { Colors, Typography } = Styles;
-let RaisedButtonCode = require('raised-button-code');
-let FloatingActionButtonCode = require('floating-action-button-code');
-let FlatButtonCode = require('flat-button-code');
-let CodeExample = require('../../code-example/code-example');
+const extend = Utils.Extend;
+const { Colors, Typography } = Styles;
+const RaisedButtonCode = require('raised-button-code');
+const FloatingActionButtonCode = require('floating-action-button-code');
+const FlatButtonCode = require('flat-button-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class ButtonPage extends React.Component {
@@ -352,12 +354,25 @@ export default class ButtonPage extends React.Component {
     return (
       <div>
         <h2 style={styles.headline}>Buttons</h2>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' +
+            'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' +
+            'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <Tabs>
           <Tab label="Flat Buttons">
             <ComponentDoc
               name=""
               desc={this.desc}
               componentInfo={this.componentInfo.slice(0, 1)}>
+
               <CodeExample code={FlatButtonCode}>
                 <div style={styles.group}>
                   <div style={styles.container}>

diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
 
-let {
+const {
   Avatar,
   Card,
   CardActions,
@@ -13,8 +13,10 @@ let {
   CardText,
   CardTitle,
   FlatButton,
+  Paper,
 } = mui;
-let Code = require('cards-code');
+const Code = require('cards-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class CardPage extends React.Component {
 
@@ -96,6 +98,22 @@ export default class CardPage extends React.Component {
         name="Card"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' +
+            'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' +
+            'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' +
+            'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' +
+            'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' +
+            'const CardText = require(\'material-ui/lib/card/card-text\');\n' +
+            'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Card>
             <CardHeader

diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DatePicker, TextField, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('date-picker-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DatePicker, TextField, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('date-picker-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DatePickerPage extends React.Component {
   constructor(props) {
@@ -196,6 +196,17 @@ export default class DatePickerPage extends React.Component {
       <ComponentDoc
         name="Date Picker"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' +
+            'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DatePicker
             hintText="Portrait Dialog" />

diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('dialog-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { Dialog, FlatButton, RaisedButton, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('dialog-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DialogPage extends React.Component {
 
@@ -190,6 +190,16 @@ export default class DialogPage extends React.Component {
       <ComponentDoc
         name="Dialog"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <RaisedButton label="Standard Actions" onTouchTap={this._handleStandardDialogTouchTap} />
           <br/><br/>

diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DropDownMenu } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('drop-down-menu-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DropDownMenu, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('drop-down-menu-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DropDownMenuPage extends React.Component {
 
@@ -117,6 +117,16 @@ export default class DropDownMenuPage extends React.Component {
       <ComponentDoc
         name="Drop Down Menu"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DropDownMenu menuItems={menuItems} />
         </CodeExample>

diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
@@ -1,12 +1,13 @@
-let React = require('react');
-let { GridList, GridTile } = require('material-ui');
+const React = require('react');
+const { GridList, GridTile, Paper } = require('material-ui');
 
-let StarBorder = require('svg-icons/toggle/star-border');
-let IconButton = require('icon-button');
+const StarBorder = require('svg-icons/toggle/star-border');
+const IconButton = require('icon-button');
 
-let ComponentDoc = require('../../component-doc');
-let Code = require('grid-list-code');
-let CodeExample = require('../../code-example/code-example');
+const ComponentDoc = require('../../component-doc');
+const Code = require('grid-list-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 class GridListPage extends React.Component {
 
@@ -185,6 +186,17 @@ class GridListPage extends React.Component {
         code={this.code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' +
+            'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
             {/* Basic grid list with mostly default options */}