Added raw-code for docs site code examples

atroche · Aug 13, 2015 · d9770fe · d9770fe
1 parent 8fb5a7a
commit d9770fe
Show file tree

Hide file tree

Showing 56 changed files with 875 additions and 891 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,7 @@
     "highlight.js": "^8.4.0"
   },
   "devDependencies": {
+    "raw-loader": "^0.5.1",
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   }

diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
@@ -4,23 +4,14 @@ let IconButton = require('icon-button');
 let NavigationClose = require('svg-icons/navigation/close');
 let FlatButton = require('flat-button');
 let ComponentDoc = require('../../component-doc');
+let Code = require('app-bar-code');
 
 
 class AppBarPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.code =
-          '<AppBar\n' +
-          '  title="Title"\n' +
-          '  iconClassNameRight="muidocs-icon-navigation-expand-more" />\n' +
-          '\n' +
-          '<AppBar\n' +
-          '  title="Title"\n' +
-          '  iconElementLeft={<IconButton><NavigationClose /></IconButton>}\n' +
-          '  iconElementRight={<FlatButton label="Save" />} />';
-
     this.desc = 'App bars are a collection of components placed as a static ' +
                 'header for an application. It is used for navigation, search ' +
                 'branding, and actions. An app bar is also referred to as the ' +
@@ -117,7 +108,7 @@ class AppBarPage extends React.Component {
     return (
       <ComponentDoc
         name="AppBar"
-        code={this.code}
+        code={Code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
           <AppBar

diff --git a/docs/src/app/components/pages/components/avatars.jsx b/docs/src/app/components/pages/components/avatars.jsx
@@ -3,47 +3,12 @@ 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');
 
 class AvatarsPage extends React.Component {
 
   render() {
 
-    let code = `
-      //image avatar
-      <Avatar src="images/uxceo-128.jpg" />
-
-      //SvgIcon avatar
-      <Avatar icon={<FileFolder />} />
-
-      //SvgIcon avatar with custom colors
-      <Avatar
-        icon={<FileFolder />}
-        color={Colors.orange200}
-        backgroundColor={Colors.pink400} />
-
-      //FontIcon avatar
-      <Avatar
-        icon={
-          <FontIcon className="muidocs-icon-communication-voicemail" />
-        } />
-
-      //FontIcon avatar with custom colors
-      <Avatar
-        icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
-        color={Colors.blue300}
-        backgroundColor={Colors.indigo900} />
-
-      //Letter avatar
-      <Avatar>A</Avatar>
-
-      //Letter avatar with custom colors
-      <Avatar
-        color={Colors.deepOrange300}
-        backgroundColor={Colors.purple500}>
-        A
-      </Avatar>
-    `;
-
     let desc = null;
 
     let componentInfo = [
@@ -101,7 +66,7 @@ class AvatarsPage extends React.Component {
     return (
       <ComponentDoc
         name="Avatars"
-        code={code}
+        code={Code}
         desc={desc}
         componentInfo={componentInfo}>
 

diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
@@ -16,65 +16,16 @@ let {
 } = 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');
 
 
 class ButtonPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.codeFlatButton =
-      '//Flat Buttons\n' +
-      '<FlatButton label="Default" />\n' +
-      '<FlatButton label="Primary" primary={true} />\n' +
-      '<FlatButton label="Secondary" secondary={true} />\n' +
-      '<div style={styles.container}>\n' +
-      '  <FlatButton primary={true} label="Choose an Image">\n' +
-      '    <input type="file" id="imageButton" style={styles.exampleImageInput}></input>\n' +
-      '  </FlatButton>\n' +
-      '</div>\n' +
-      '<div style={styles.container}>\n' +
-      '  <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">\n' +
-      '    <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>\n' +
-      '  </FlatButton>\n' +
-      '</div>\n' +
-      '<FlatButton label="Disabled" disabled={true} />';
-
-    this.codeRaisedButton =
-      '//Raised Buttons\n' +
-      '<RaisedButton label="Default" />\n' +
-      '<RaisedButton label="Primary" primary={true} />\n' +
-      '<RaisedButton label="Secondary" secondary={true} />\n' +
-      '<div style={styles.container}>\n' +
-      '  <RaisedButton primary={true} label="Choose an Image">\n' +
-      '    <input type="file" style={styles.exampleImageInput}></input>\n' +
-      '  </RaisedButton>\n' +
-      '</div>\n' +
-      '<div style={styles.container}>\n' +
-      '  <RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">\n' +
-      '    <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>\n' +
-      '  </RaisedButton>\n' +
-      '</div>\n' +
-      '<RaisedButton label="Disabled" disabled={true} />';
-
-    this.codeFloatingActionButton =
-      '//Floating Action Buttons\n' +
-      '<FloatingActionButton>\n' +
-      '  <ToggleStar />\n' +
-      '</FloatingActionButton>\n' +
-      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />\n' +
-      '\n' +
-      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true}>\n' +
-      '<FloatingActionButton secondary={true} mini={true} linkButton={true}\n' +
-      '  href="https://github.com/callemall/material-ui" />\n' +
-      '  <ToggleStar />\n' +
-      '</FloatingActionButton>\n' +
-      '\n' +
-      '<FloatingActionButton disabled={true}>\n' +
-      '  <FontIcon className="muidocs-icon-action-grade" />\n' +
-      '</FloatingActionButton>\n' +
-      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} mini={true} />\n';
-
     this.desc = 'This component generates a button element and all props except for ' +
                 'the custom props below will be passed down to the button element. Also, ' +
                 'focus styles will happen on tab but not on click.';
@@ -393,7 +344,7 @@ class ButtonPage extends React.Component {
           <Tab label="Flat Buttons">
             <ComponentDoc
               name=""
-              code={this.codeFlatButton}
+              code={FlatButtonCode}
               desc={this.desc}
               componentInfo={this.componentInfo.slice(0,1)}>
               <div style={styles.group}>
@@ -427,7 +378,7 @@ class ButtonPage extends React.Component {
           <Tab label="Raised Buttons">
             <ComponentDoc
               name=""
-              code={this.codeRaisedButton}
+              code={RaisedButtonCode}
               desc={this.desc}
               componentInfo={this.componentInfo.slice(1,2)}>
               <div style={styles.group}>
@@ -461,7 +412,7 @@ class ButtonPage extends React.Component {
           <Tab label="Floating Action Buttons">
             <ComponentDoc
               name=""
-              code={this.codeFloatingActionButton}
+              code={FloatingActionButtonCode}
               desc={this.desc}
               componentInfo={this.componentInfo.slice(2)}>
               <div style={styles.groupFloatingAction}>

diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
@@ -13,63 +13,13 @@ let {
   CardTitle,
   FlatButton
 } = mui;
-
+let Code = require('cards-code');
 
 class CardPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.code = `
-       <Card>
-          <CardHeader
-            title="Title"
-            subtitle="Subtitle"
-            avatar={<Avatar>A</Avatar>}/>
-          <CardHeader
-            title="Demo Url Based Avatar"
-            subtitle="Subtitle"
-            avatar="http://lorempixel.com/100/100/nature/"/>
-          <CardMedia overlay={<CardTitle title="Title" subtitle="Subtitle"/>}>
-            <img src="http://lorempixel.com/600/337/nature/"/>
-          </CardMedia>
-          <CardTitle title="Title" subtitle="Subtitle"/>
-          <CardActions>
-            <FlatButton label="Action1"/>
-            <FlatButton label="Action2"/>
-          </CardActions>
-          <CardText>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
-            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
-            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-          </CardText>
-        </Card>
-        <Card initiallyExpanded={true}>
-          <CardHeader
-            title="Title"
-            subtitle="Subtitle"
-            avatar={<Avatar style={{color:'red'}}>A</Avatar>}
-            showExpandableButton={true}>
-          </CardHeader>
-          <CardText expandable={true}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
-            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
-            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-          </CardText>
-          <CardActions expandable={true}>
-            <FlatButton label="Action1"/>
-            <FlatButton label="Action2"/>
-          </CardActions>
-          <CardText expandable={true}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
-            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
-            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-          </CardText>
-        </Card>`;
-
     this.desc =
       'A card is a piece of paper with unique related data that serves as an '+
       'entry point to more detailed information. For example, a card could '+
@@ -130,7 +80,7 @@ class CardPage extends React.Component {
     return (
       <ComponentDoc
         name="Card"
-        code={this.code}
+        code={Code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
           <Card>

diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -1,7 +1,7 @@
 let React = require('react');
 let { DatePicker, TextField, Toggle } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
-
+let Code = require('date-picker-code');
 
 class DatePickerPage extends React.Component {
   constructor(props) {
@@ -25,27 +25,6 @@ class DatePickerPage extends React.Component {
 
   render() {
 
-    let code =
-      '//Portrait Dialog\n' +
-      '<DatePicker\n' +
-      '  hintText="Portrait Dialog"\n\n' +
-      '//Landscape Dialog\n' +
-      '<DatePicker\n' +
-      '  hintText="Landscape Dialog"\n' +
-      '  mode="landscape"/>\n\n' +
-      '//Controlled Input\n' +
-      '<DatePicker\n' +
-      '  hintText="Controlled Date Input"\n' +
-      '  value={this.state.controlledDate}\n' +
-      '  onChange={this._handleChange} />\n\n' +
-      '// Ranged Date Picker\n' +
-      '<DatePicker\n' +
-      '  hintText="Ranged Date Picker"\n' +
-      '  autoOk={this.state.autoOk}\n' +
-      '  minDate={this.state.minDate}\n' +
-      '  maxDate={this.state.maxDate}\n' +
-      '  showYearSelector={this.state.showYearSelector} />';
-
     let componentInfo = [
       {
         name: 'Props',
@@ -175,7 +154,7 @@ class DatePickerPage extends React.Component {
     return (
       <ComponentDoc
         name="Date Picker"
-        code={code}
+        code={Code}
         componentInfo={componentInfo}>
 
         <DatePicker

diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
@@ -1,7 +1,7 @@
 let React = require('react');
 let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
-
+let Code = require('dialog-code');
 
 class DialogPage extends React.Component {
 
@@ -21,40 +21,6 @@ class DialogPage extends React.Component {
   }
 
   render() {
-    let code =
-      '//Standard Actions\n' +
-      'let standardActions = [\n' +
-      '  { text: \'Cancel\' },\n' +
-      '  { text: \'Submit\', onTouchTap: this._onDialogSubmit, ref: \'submit\' }\n' +
-      '];\n\n' +
-      '<Dialog\n' +
-      '  title="Dialog With Standard Actions"\n' +
-      '  actions={standardActions}\n' +
-      '  actionFocus="submit"\n' +
-      '  modal={this.state.modal}>\n' +
-      '  The actions in this window are created from the json that\'s passed in. \n' +
-      '</Dialog>\n\n' +
-      '//Custom Actions\n' +
-      'let customActions = [\n' +
-      '  <FlatButton\n' +
-      '    label="Cancel"\n' +
-      '    secondary={true}\n' +
-      '    onTouchTap={this._handleCustomDialogCancel} />,\n' +
-      '  <FlatButton\n' +
-      '    label="Submit"\n' +
-      '    primary={true}\n' +
-      '    onTouchTap={this._handleCustomDialogSubmit} />\n' +
-      '];\n\n' +
-      '<Dialog\n' +
-      '  title="Dialog With Custom Actions"\n' +
-      '  actions={customActions}\n' +
-      '  modal={this.state.modal}>\n' +
-      '  The actions in this window were passed in as an array of react objects.\n' +
-      '</Dialog>\n\n' +
-      '<Dialog title="Dialog With Scrollable Content" actions={customActions}\n' +
-      '  autoDetectWindowHeight={true} autoScrollBodyContent={true}>\n' +
-      '    <div style={{height: \'2000px\'}}>Really long content</div>\n' +
-      '</Dialog>\n';
 
     let componentInfo = [
       {
@@ -189,7 +155,7 @@ class DialogPage extends React.Component {
     return (
       <ComponentDoc
         name="Dialog"
-        code={code}
+        code={Code}
         componentInfo={componentInfo}>
 
         <RaisedButton label="Standard Actions" onTouchTap={this._handleStandardDialogTouchTap} />