Skip to content

Add import statements to every component's doc page #2113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 9, 2015
Merged

Add import statements to every component's doc page #2113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions docs/src/app/components/pages/components/app-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we make a component for this? (To follow the don't repeat yourself principle)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course, we could. But it just seemed like a small piece of code that I could easily add to each page. Also, if I were to create a component for this, passing in data for the import statements as props might end up being more lines of code than this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps a better thing to do would be to integrate this with the CodeExample component, but let's keep that for the future (after this release)..

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps a better thing to do would be to integrate this with the CodeExample component, but let's keep that for the future (after this release)..

I agree. Sure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK to merge (and release)?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's release, and wait feedbacks to see If I didn't screw up by merging a lot of stuff 🍻!
It should be fine.

}
</CodeBlock>
</Paper>

<CodeExample code={Code}>
<AppBar
title="Title"
Expand Down
25 changes: 18 additions & 7 deletions docs/src/app/components/pages/components/avatars.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
21 changes: 16 additions & 5 deletions docs/src/app/components/pages/components/badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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}>
Expand Down
37 changes: 26 additions & 11 deletions docs/src/app/components/pages/components/buttons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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}>
Expand Down
30 changes: 24 additions & 6 deletions docs/src/app/components/pages/components/cards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 {

Expand Down Expand Up @@ -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
Expand Down
23 changes: 17 additions & 6 deletions docs/src/app/components/pages/components/date-picker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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" />
Expand Down
22 changes: 16 additions & 6 deletions docs/src/app/components/pages/components/dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down Expand Up @@ -170,6 +170,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/>
Expand Down
22 changes: 16 additions & 6 deletions docs/src/app/components/pages/components/drop-down-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down Expand Up @@ -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>
Expand Down
26 changes: 19 additions & 7 deletions docs/src/app/components/pages/components/grid-list.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down Expand Up @@ -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 */}
Expand Down
Loading