Skip to content

Commit 3c44170

Browse files
levithomasonlevithomason
committed
Merge pull request #80 from TechnologyAdvice/feature/checkbox-plugin
Checkbox plugin
2 parents 4525968 + b2b347e commit 3c44170

16 files changed

Lines changed: 170 additions & 71 deletions

File tree

‎.eslintrc‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
{
22
"extends": "ta-webapp",
3-
"env": {
4-
"node": true
5-
}
63
}

‎docs/app/Component Guidelines.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
Every component in Stardust must conform to these guidelines.
44
They ensure consistency and optimal development experience for Stardust users.
55

6+
1. Semantic UI
7+
- [Modules](#Modules)
68
1. [Classes](#Classes)
79
- [Extend React.Component](#Extend React.Component)
810
- [Identical class and component names](#Identical class and component names)
@@ -11,6 +13,43 @@ They ensure consistency and optimal development experience for Stardust users.
1113
1. [Props](#Props)
1214
- [className](#className)
1315

16+
## Semantic UI
17+
18+
### Modules
19+
20+
Semantic UI [Modules](http://semantic-ui.com/introduction/glossary.html) are components that define appearance and behavior.
21+
These are things that have state, like a [Dropdown](http://semantic-ui.com/modules/dropdown.html).
22+
They usually require a Semantic UI jQuery plugin.
23+
24+
All the appropriate lifecycle work is handled. You can just use the module.
25+
26+
**Settings**
27+
Semantic UI's jQuery plugin settings are exposed as props:
28+
29+
```jsx
30+
<Checkbox onChange={this.handleChange} />; // the Semantic UI change callback
31+
```
32+
>Settings are applied on componentDidMount.
33+
34+
**Plugin**
35+
Stardust exposes the Semantic UI jQuery plugin as `plugin`. Use it to trigger behaviors:
36+
37+
```jsx
38+
<Checkbox ref='checkbox' />;
39+
// ...
40+
this.refs.checkbox.plugin('toggle'); // toggles the checkbox
41+
this.refs.checkbox.plugin('is checked'); // get the state
42+
```
43+
44+
**Element**
45+
Stardust components expose the jQuery element as `element`:
46+
47+
```jsx
48+
<Checkbox ref='checkbox' ref='checkbox' />;
49+
// then
50+
this.refs.checkbox.element; // the jQuery element
51+
```
52+
1453
## Classes
1554

1655
### Extend React.Component
@@ -137,6 +176,11 @@ Stardust components construct the `className` prop in this order.
137176
1. `this.props.className`
138177
1. `<component>` (Semantic UI class)
139178

179+
Where it makes sense, some optional classes are automatically applied.
180+
For instance, the [`fitted`](http://semantic-ui.com/modules/checkbox.html#fitted)
181+
class on checkboxes with no labels (as prescribed by the checkbox docs).
182+
All magic is noted in the documentation examples.
183+
140184
#### Inherits `props.className` after `sd-<component>`
141185

142186
**Always**

‎docs/app/Components/ComponentDoc/ComponentExample.js‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import exampleContext from 'docs/app/utils/ExampleContext';
99
*/
1010
export default class ComponentExample extends Component {
1111
static propTypes = {
12+
children: PropTypes.node,
1213
description: PropTypes.string,
1314
examplePath: PropTypes.string.isRequired,
1415
title: PropTypes.string,
@@ -17,11 +18,21 @@ export default class ComponentExample extends Component {
1718
state = {showCode: false};
1819
fileContents = require(`!raw!docs/app/Examples/${this.props.examplePath}`);
1920
component = exampleContext(`./${this.props.examplePath}.js`);
21+
// 'elements/Button/Types/Button' => #Button-Types-Button
22+
anchor = this.props.examplePath.split('/').slice(1).join('-');
2023

2124
toggleShowCode = () => {
2225
this.setState({showCode: !this.state.showCode});
2326
};
2427

28+
handleMouseEnter = () => {
29+
this.setState({showLink: true});
30+
};
31+
32+
handleMouseLeave = () => {
33+
this.setState({showLink: false});
34+
};
35+
2536
render() {
2637
const code = (
2738
<Column>
@@ -31,13 +42,28 @@ export default class ComponentExample extends Component {
3142
</Column>
3243
);
3344

45+
const linkIconStyle = {
46+
display: this.state.showLink ? 'inline-block' : 'none',
47+
marginLeft: '0.25em',
48+
};
49+
50+
const children = <Column>{this.props.children}</Column>;
51+
3452
return (
35-
<Grid className='one column' style={{marginBottom: '4em'}}>
53+
<Grid className='one column' style={{marginBottom: '4em'}} id={this.anchor}>
3654
<Column>
3755
<Grid>
3856
<Column width={12}>
39-
<h3 className='ui header' style={{marginBottom: 0}}>
57+
<h3
58+
className='ui header'
59+
style={{marginBottom: 0}}
60+
onMouseEnter={this.handleMouseEnter}
61+
onMouseLeave={this.handleMouseLeave}
62+
>
4063
{this.props.title}
64+
<a href={`#${this.anchor}`}>
65+
<i className='linkify icon' style={linkIconStyle} />
66+
</a>
4167
</h3>
4268
<p>{this.props.description}</p>
4369
</Column>
@@ -49,7 +75,7 @@ export default class ComponentExample extends Component {
4975
</Column>
5076
</Grid>
5177
</Column>
52-
78+
{this.props.children && children}
5379
<Column>
5480
{createElement(this.component)}
5581
</Column>

‎docs/app/Examples/modules/Checkbox/States/CheckboxRemoteControlExample.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, {Component} from 'react';
2+
import {Button, Checkbox} from 'stardust';
3+
4+
export default class CheckboxRemoteControlExample extends Component {
5+
toggle = () => {
6+
this.refs.checkbox.plugin('toggle');
7+
};
8+
9+
render() {
10+
return (
11+
<div>
12+
<Button onClick={this.toggle}>Toggle it</Button>
13+
<Checkbox label='Check this box' ref='checkbox' />
14+
</div>
15+
);
16+
}
17+
}

‎docs/app/Examples/modules/Checkbox/States/Checked.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import React, {Component} from 'react';
1+
import React from 'react';
22
import {Checkbox} from 'stardust';
33

4-
export default class CheckboxCheckedExample extends Component {
5-
state = {isChecked: true};
6-
7-
handleChange = e => {
8-
this.setState({
9-
isChecked: !this.state.isChecked
10-
});
11-
};
12-
13-
render() {
14-
return (
15-
<Checkbox label='This checkbox comes prechecked' checked={this.state.isChecked} onChange={this.handleChange} />
16-
);
17-
}
18-
}
4+
export default CheckboxCheckedExample => {
5+
return (
6+
<Checkbox defaultChecked label='This checkbox comes prechecked' />
7+
);
8+
};

‎docs/app/Examples/modules/Checkbox/States/States.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {Component} from 'react';
22
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
33
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
4+
import {Message} from 'stardust';
45

56
export default class CheckboxStatesExamples extends Component {
67
render() {
@@ -10,7 +11,17 @@ export default class CheckboxStatesExamples extends Component {
1011
title='Checked'
1112
description='A checkbox can come pre-checked'
1213
examplePath='modules/Checkbox/States/Checked'
13-
/>
14+
>
15+
<Message>
16+
Use
17+
&nbsp;
18+
<a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
19+
<code>defaultChecked</code>
20+
</a>
21+
&nbsp;
22+
as you normally would to set default form values.
23+
</Message>
24+
</ComponentExample>
1425
<ComponentExample
1526
title='Disabled'
1627
description='Checkboxes can be disabled'
@@ -21,6 +32,11 @@ export default class CheckboxStatesExamples extends Component {
2132
description='Make the checkbox unable to be edited by the user'
2233
examplePath='modules/Checkbox/States/ReadOnly'
2334
/>
35+
<ComponentExample
36+
title='Remote Control'
37+
description='You can trigger events remotely.'
38+
examplePath='modules/Checkbox/States/CheckboxRemoteControlExample'
39+
/>
2440
</ExampleSection>
2541
);
2642
}

‎docs/app/Examples/modules/Checkbox/Types/Checkbox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Checkbox} from 'stardust';
44
export default class CheckboxCheckboxExample extends Component {
55
render() {
66
return (
7-
<Checkbox label='Make my profile visible'/>
7+
<Checkbox label='Make my profile visible' />
88
);
99
}
1010
}

‎docs/app/Examples/modules/Checkbox/Variations/Fitted.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ export default class CheckboxFittedExample extends Component {
66
return (
77
<div>
88
<Segment className='compact'>
9-
<Checkbox className='fitted' />
9+
<Checkbox />
1010
</Segment>
1111
<Segment className='compact'>
12-
<Checkbox className='fitted slider' />
12+
<Checkbox className='slider' />
1313
</Segment>
1414
<Segment className='compact'>
15-
<Checkbox className='fitted toggle' />
15+
<Checkbox className='toggle' />
1616
</Segment>
1717
</div>
1818
);

‎docs/app/Examples/modules/Checkbox/Variations/Variations.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {Component} from 'react';
22
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
33
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
4+
import {Message} from 'stardust';
45

56
export default class CheckboxVariationsExamples extends Component {
67
render() {
@@ -10,7 +11,15 @@ export default class CheckboxVariationsExamples extends Component {
1011
title='Fitted'
1112
description='A fitted checkbox does not leave padding for a label'
1213
examplePath='modules/Checkbox/Variations/Fitted'
13-
/>
14+
>
15+
<Message>
16+
The&nbsp;
17+
<a href='http://semantic-ui.com/modules/checkbox.html#fitted' target='_blank'>
18+
<code>fitted</code>
19+
</a>
20+
&nbsp;class is automatically applied if there is no <code>label</code> prop.
21+
</Message>
22+
</ComponentExample>
1423
</ExampleSection>
1524
);
1625
}

‎gulp/tasks/docs.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ gulp.task('generate-docs-json', cb => {
3939
paths.srcViews + '/**/*.js',
4040
'!' + paths.src + '/**/Style.js'
4141
])
42-
.pipe(g.plumber(err => {
42+
// do not remove the function keyword
43+
// we need 'this' scope here
44+
.pipe(g.plumber(function(err) {
4345
g.util.log(err);
4446
this.emit('end');
4547
}))

0 commit comments

Comments
 (0)