Skip to content
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

Formatted code, added documentation, and grouped classes together for pages/switches #207

Merged
merged 3 commits into from
Jan 7, 2015
Merged

Formatted code, added documentation, and grouped classes together for pages/switches #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bdf6917
Formatted code example to pages/switches as well as added documentati…
mmrtnz Jan 7, 2015
9137021
Fixed style issue for mobile, seperated the import var into individua…
mmrtnz Jan 7, 2015
dbfb1fb
Extra fix to switches.less for large devices
mmrtnz Jan 7, 2015
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
255 changes: 188 additions & 67 deletions docs/src/app/components/pages/components/switches.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,222 @@
var React = require('react'),
mui = require('mui'),
Checkbox = mui.Checkbox,
RadioButton = mui.RadioButton,
Toggle = mui.Toggle,
CodeExample = require('../../code-example/code-example.jsx');
var React = require('react');
var mui = require('mui');
var Checkbox = mui.Checkbox;
var RadioButton = mui.RadioButton;
var Toggle = mui.Toggle;
var CodeExample = require('../../code-example/code-example.jsx');
var ComponentDoc = require('../../component-doc.jsx');

var SwitchesPage = React.createClass({

render: function() {

var code =
'//Checkboxes\n' +
'<Checkbox\n' +
' name="checkboxName1"\n' +
' value="checkboxValue1" />\n' +
'<Checkbox\n' +
' name="checkboxName2"\n' +
' value="checkboxValue2" />\n' +
'<Checkbox\n' +
' name="checkboxName3"\n' +
' value="checkboxValue3"\n' +
' checked={true} />\n\n' +
'//Radio Buttons\n' +
'<RadioButton\n' +
' name="shipSpeed1"\n' +
' value="light"\n' +
' label="prepare for light speed" />\n' +
'<RadioButton\n' +
' name="shipSpeed2"\n' +
' value="not_light"\n' +
' label="light speed too slow"\n' +
' defaultChecked={true} />\n' +
'<RadioButton\n' +
' name="shipSpeed3"\n' +
' value="ludicrous"\n' +
' label="go to ludicous speed" />\n\n' +
'//Toggle\n' +
'<Toggle />\n';

var desc = 'This component generates a switches element and all props except for the custom ' +
'props below will be passed down to the switch element.';

var componentInfo = [
{
name: 'Checkbox',
infoArray: [
{
name: 'name',
type: 'string',
header: 'required',
desc: 'This is the name of the checkbox.'
},
{
name: 'value',
type: 'string',
header: 'required',
desc: 'The value of our checkbox component.'
},
{
name: 'checked',
type: 'boolean',
header: 'default:false',
desc: 'The current state of our checkbox component.'
}
]
},
{
name: 'Radio Button',
infoArray: [
{
name: 'name',
type: 'string',
header: 'required',
desc: 'The name of the radio button component.'
},
{
name: 'value',
type: 'string',
header: 'required',
desc: 'The value of our radio button component.'
},
{
name: 'label',
type: 'string',
header: 'optional',
desc: 'The text that is displayed next to the right of the radio button.'
},
{
name: 'defaultChecked',
type: 'boolean',
header: 'default:false',
desc: 'The default value of the radio button when the page finishes loading.'
}
]
},
{
name: 'Toggle',
infoArray: [
{
name: 'onToggle',
type: 'event',
header: 'optional',
desc: 'The function that is called each time the user clicks the toggle button.'
},
{
name: 'toggled',
type: 'boolean',
header: 'default:false',
desc: 'The value of the toggle button. Is true when toggle has been turned on. ' +
'False otherwise.'
}
]
}
];

return (
<div>
<h2 className="mui-font-style-headline">Checkbox</h2>
{this._getCheckboxExample()}
<h2 className="mui-font-style-headline">Radio Button</h2>
{this._getRadioButtonExample()}
<h2 className="mui-font-style-headline">Toggle</h2>
{this._getToggleExample()}
</div>
<ComponentDoc
name="Switches"
code={code}
desc={desc}
componentInfo={componentInfo}>

<div className="switches-examples">
<form>
{this._getCheckboxExample()}
{this._getRadioButtonExample()}
{this._getToggleExample()}
</form>
</div>

</ComponentDoc>
);
},

_getCheckboxExample: function() {
var code =
'<form>\n' +
' <Checkbox name="checkboxName" value="checkboxValue1" />\n' +
' <Checkbox name="checkboxName" value="checkboxValue2" />\n' +
' <Checkbox name="checkboxName" value="checkboxValue3" />\n' +
'</form>';

return (
<CodeExample code={code}>
<form>
<div className="switches-example-group">

<div className="switches-example-container">
<h2 className="mui-font-style-headline">Checkbox</h2>
</div>

<div className="switches-example-container">
<Checkbox
name="checkboxName"
name="checkboxName1"
value="checkboxValue1"
onClick={this._onCheck} />
<br />

</div>
<div className="switches-example-container">
<Checkbox
name="checkboxName"
value="checkboxValue2"
name="checkboxName2"
value="checkboxValue2"
onClick={this._onCheck} />
<br />

</div>
<div className="switches-example-container">
<Checkbox
name="checkboxName"
name="checkboxName3"
value="checkboxValue3"
checked={true}
onClick={this._onCheck} />
</form>
</CodeExample>
</div>

</div>
);
},

_getToggleExample: function() {
var code =
'<Toggle />';

return (
<CodeExample code={code}>
<Toggle onToggle={this._handleToggle} />
</CodeExample>
<div className="switches-example-group">

<div className="switches-example-container">
<h2 className="mui-font-style-headline">Toggle</h2>
</div>

<div className="switches-example-container">
<Toggle onToggle={this._handleToggle} />
</div>

</div>
);
},

_getRadioButtonExample: function() {
var code =
'<form>\n' +
' <RadioButton name="shipSpeed" value="light" label="prepare for light speed"/>\n' +
' <RadioButton name="shipSpeed" value="not_light" label="light speed too slow" defaultChecked={true}/>\n' +
' <RadioButton name="shipSpeed" value="ludicrous" label="go to ludicous speed"/>\n' +
'</form>';

return (
<CodeExample code={code}>
<form>
<RadioButton
name="shipSpeed"
value="light"
label="prepare for light speed"
onClick={this._onRadioButtonClick} />
<br />

<RadioButton
name="shipSpeed"
value="not_light"
label="light speed too slow"
defaultChecked={true}
onClick={this._onRadioButtonClick} />
<br />

<RadioButton
name="shipSpeed"
value="ludicrous"
label="go to ludicrous speed"
onClick={this._onRadioButtonClick} />
</form>
</CodeExample>
<div className="switches-example-group">

<div className="switches-example-container">
<h2 className="mui-font-style-headline">Radio Buttons</h2>
</div>

<div className="switches-example-container">
<RadioButton
name="shipSpeed1"
value="light"
label="prepare for light speed"
onClick={this._onRadioButtonClick} />
</div>
<div className="switches-example-container">
<RadioButton
name="shipSpeed2"
value="not_light"
label="light speed too slow"
defaultChecked={true}
onClick={this._onRadioButtonClick} />
</div>
<div className="switches-example-container">
<RadioButton
name="shipSpeed3"
value="ludicrous"
label="go to ludicrous speed"
onClick={this._onRadioButtonClick} />
</div>

</div>
);
},

Expand Down
1 change: 1 addition & 0 deletions docs/src/less/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
@import "pages/page-with-nav.less";
@import "pages/components/component-doc.less";
@import "pages/components/buttons.less";
@import "pages/components/switches.less";
@import "pages/components/icon.less";
@import "pages/components/paper.less";
@import "pages/components/toolbar.less";
Expand Down
25 changes: 25 additions & 0 deletions docs/src/less/pages/components/switches.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.switches-examples {
.clearfix();

.switches-example-container {
text-align: left;
margin-bottom: 16px;
}

.switches-example-group {
float: left;
width: 100%;
}

@media @device-medium {
.switches-example-group {
width: 50%;
}
}

@media @device-large {
.switches-example-group {
width: 33%;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This file is a clone of buttons.less with line 16 being the only modification. I made this file so that pages/switches had its own css as opposed to sharing buttons.less with pages/button in case we ever wanted to make style changes to one page and not the other.

}
}
}