Skip to content

Commit 655bbdc

Browse files
author
Josh Habdas
committed
Merge pull request #113 from TechnologyAdvice/segment-examples
Segment Examples
2 parents d2f047f + bdf9e19 commit 655bbdc

42 files changed

Lines changed: 848 additions & 31 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import _ from 'lodash';
22
import React, {Component, PropTypes} from 'react';
3-
import {Segment, Table, TableColumn} from 'stardust';
3+
import {Header, Segment, Table, TableColumn} from 'stardust';
4+
5+
const DOCBLOCK_DESCRIPTION_DEFAULTS = {
6+
children: 'Body of the component.',
7+
className: 'Class names for custom styling.',
8+
};
49

510
/**
611
* Displays a table of a Component's PropTypes.
@@ -34,7 +39,7 @@ export default class ComponentProps extends Component {
3439
const propsDefinition = this.props.props;
3540
const content = _.map(propsDefinition, (propConfig, propName) => {
3641
const name = propName;
37-
const description = _.get(propConfig, 'docBlock.description');
42+
const description = _.get(propConfig, 'docBlock.description') || DOCBLOCK_DESCRIPTION_DEFAULTS[name];
3843

3944
const value = _.get(propConfig, 'type.value');
4045
let type = _.get(propConfig, 'type.name');
@@ -58,7 +63,7 @@ export default class ComponentProps extends Component {
5863

5964
return (
6065
<Segment className='basic vertical'>
61-
<h2 className='ui header'>Props</h2>
66+
<Header.H2 className='ui header'>Props</Header.H2>
6267
<Table data={content} className='very basic'>
6368
<TableColumn dataKey='name' cellRenderer={this.nameRenderer} />
6469
<TableColumn dataKey='type' />

‎docs/app/Examples/elements/Segment/Groups/SegmentGroupsExamples.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, {Component} from 'react';
2+
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
3+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
4+
5+
export default class SegmentGroupsExamples extends Component {
6+
render() {
7+
return (
8+
<ExampleSection title='Groups'>
9+
<ComponentExample
10+
title='Segments'
11+
description='A group of segments can be formatted to appear together.'
12+
examplePath='elements/Segment/Groups/SegmentSegmentsExample'
13+
/>
14+
<ComponentExample
15+
title='Nested Segments'
16+
description='A group of segments can be nested in another group of segments.'
17+
examplePath='elements/Segment/Groups/SegmentNestedSegmentsExample'
18+
/>
19+
<ComponentExample
20+
title='Horizontal Segments'
21+
description='A segment group can appear horizontally.'
22+
examplePath='elements/Segment/Groups/SegmentHorizontalSegmentsExample'
23+
/>
24+
<ComponentExample
25+
title='Raised Segments'
26+
description='A segment group can be raised.'
27+
examplePath='elements/Segment/Groups/SegmentRaisedSegmentsExample'
28+
/>
29+
<ComponentExample
30+
title='Stacked Segments'
31+
description='A segment group can be stacked.'
32+
examplePath='elements/Segment/Groups/SegmentStackedSegmentsExample'
33+
/>
34+
<ComponentExample
35+
title='Piled Segments'
36+
description='A segment group can be piled.'
37+
examplePath='elements/Segment/Groups/SegmentPiledSegmentsExample'
38+
/>
39+
</ExampleSection>
40+
);
41+
}
42+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentHorizontalSegmentsExample.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentHorizontalSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments className='horizontal'>
8+
<Segment>Left</Segment>
9+
<Segment>Middle</Segment>
10+
<Segment>Right</Segment>
11+
</Segment.Segments>
12+
);
13+
}
14+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentNestedSegmentsExample.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentNestedSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments>
8+
<Segment>Top</Segment>
9+
<Segment.Segments>
10+
<Segment>Nested Top</Segment>
11+
<Segment>Nested Middle</Segment>
12+
<Segment>Nested Bottom</Segment>
13+
</Segment.Segments>
14+
<Segment.Segments className='horizontal'>
15+
<Segment>Top</Segment>
16+
<Segment>Middle</Segment>
17+
<Segment>Bottom</Segment>
18+
</Segment.Segments>
19+
<Segment>Bottom</Segment>
20+
</Segment.Segments>
21+
);
22+
}
23+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentPiledSegmentsExample.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentPiledSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments className='piled'>
8+
<Segment>Top</Segment>
9+
<Segment>Middle</Segment>
10+
<Segment>Bottom</Segment>
11+
</Segment.Segments>
12+
);
13+
}
14+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentRaisedSegmentsExample.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentRaisedSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments className='raised'>
8+
<Segment>Left</Segment>
9+
<Segment>Middle</Segment>
10+
<Segment>Right</Segment>
11+
</Segment.Segments>
12+
);
13+
}
14+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentSegmentsExample.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments>
8+
<Segment>Top</Segment>
9+
<Segment>Middle</Segment>
10+
<Segment>Middle</Segment>
11+
<Segment>Middle</Segment>
12+
<Segment>Bottom</Segment>
13+
</Segment.Segments>
14+
);
15+
}
16+
}

‎docs/app/Examples/elements/Segment/Groups/SegmentStackedSegmentsExample.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentStackedSegmentsExample extends Component {
5+
render() {
6+
return (
7+
<Segment.Segments className='stacked'>
8+
<Segment>Top</Segment>
9+
<Segment>Middle</Segment>
10+
<Segment>Bottom</Segment>
11+
</Segment.Segments>
12+
);
13+
}
14+
}

‎docs/app/Examples/elements/Segment/SegmentExamples.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, {Component} from 'react';
2+
import SegmentTypesExamples from './Types/SegmentTypesExamples';
3+
import SegmentGroupsExamples from './Groups/SegmentGroupsExamples';
4+
import SegmentStatesExamples from './States/SegmentStatesExamples';
5+
import SegmentVariationsExamples from './Variations/SegmentVariationsExamples';
6+
7+
export default class SegmentExamples extends Component {
8+
render() {
9+
return (
10+
<div>
11+
<SegmentTypesExamples />
12+
<SegmentGroupsExamples />
13+
<SegmentStatesExamples />
14+
<SegmentVariationsExamples />
15+
</div>
16+
);
17+
}
18+
}

‎docs/app/Examples/elements/Segment/States/SegmentDisabledExample.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, {Component} from 'react';
2+
import {Segment} from 'stardust';
3+
4+
export default class SegmentDisabledExample extends Component {
5+
render() {
6+
return (
7+
<Segment className='disabled'>
8+
Disabled content
9+
</Segment>
10+
);
11+
}
12+
}

0 commit comments

Comments
 (0)