Skip to content

Commit b7ff64e

Browse files
kyleturcokyleturco
committed
add header variations examples
1 parent 3e8a02a commit b7ff64e

11 files changed

Lines changed: 215 additions & 2 deletions

‎docs/app/Examples/elements/Header/HeaderExamples.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, {Component} from 'react';
22
import HeaderTypesExamples from './Types/HeaderTypesExamples';
33
import HeaderContentExamples from './Content/HeaderContentExamples';
4-
// import HeaderStatesExamples from './States/HeaderStatesExamples';
5-
// import HeaderVariationsExamples from './Variations/HeaderVariationsExamples';
4+
import HeaderStatesExamples from './States/HeaderStatesExamples';
5+
import HeaderVariationsExamples from './Variations/HeaderVariationsExamples';
66

77
export default class HeaderExamples extends Component {
88
render() {
@@ -11,6 +11,8 @@ export default class HeaderExamples extends Component {
1111
TODO: explain semantic uses divs and h* tags and how we accomplish that with Header and HEader.H*
1212
<HeaderTypesExamples />
1313
<HeaderContentExamples />
14+
<HeaderStatesExamples />
15+
<HeaderVariationsExamples />
1416
</div>
1517
);
1618
}

‎docs/app/Examples/elements/Header/States/HeaderDisabledExample.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 {Header} from 'stardust';
3+
4+
export default class HeaderImageExample extends Component {
5+
render() {
6+
return (
7+
<Header.H2 className='disabled'>
8+
Disabled Header
9+
</Header.H2>
10+
);
11+
}
12+
}

‎docs/app/Examples/elements/Header/States/HeaderStatesExamples.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 ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
3+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
4+
5+
export default class HeaderTypesExamples extends Component {
6+
render() {
7+
return (
8+
<ExampleSection title='States'>
9+
<ComponentExample
10+
title='Disabled'
11+
description='A header can show that it is inactive'
12+
examplePath='elements/Header/States/HeaderDisabledExample'
13+
/>
14+
</ExampleSection>
15+
);
16+
}
17+
}

‎docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, {Component} from 'react';
2+
import {Header, Segment} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Header.H2 className='top attached'>
9+
Attached Header
10+
</Header.H2>
11+
<Segment className='attached'>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
13+
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
14+
laboris nisi ut aliquip ex ea commodo consequat.
15+
</Segment>
16+
</div>
17+
);
18+
}
19+
}

‎docs/app/Examples/elements/Header/Variations/HeaderBlockExample.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 {Header} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<Header.H3 className='block'>
8+
Block Header
9+
</Header.H3>
10+
);
11+
}
12+
}

‎docs/app/Examples/elements/Header/Variations/HeaderColoredExample.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 {Header} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Header.H4 className='red'>Red</Header.H4>
9+
<Header.H4 className='orange'>Orange</Header.H4>
10+
<Header.H4 className='yellow'>Yellow</Header.H4>
11+
<Header.H4 className='olive'>Olive</Header.H4>
12+
<Header.H4 className='green'>Green</Header.H4>
13+
<Header.H4 className='teal'>Teal</Header.H4>
14+
<Header.H4 className='blue'>Blue</Header.H4>
15+
<Header.H4 className='purple'>Purple</Header.H4>
16+
<Header.H4 className='violent'>Violent</Header.H4>
17+
<Header.H4 className='pink'>Pink</Header.H4>
18+
<Header.H4 className='brown'>Brown</Header.H4>
19+
<Header.H4 className='grey'>Grey</Header.H4>
20+
</div>
21+
);
22+
}
23+
}

‎docs/app/Examples/elements/Header/Variations/HeaderDividingExample.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 {Header} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<Header.H3 className='dividing'>
8+
Dividing Header
9+
</Header.H3>
10+
);
11+
}
12+
}

‎docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.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 {Header, Segment} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<Segment className='clearing'>
8+
<Header.H2 className='right floated'>
9+
Float Right
10+
</Header.H2>
11+
<Header.H2 className='left floated'>
12+
Float Left
13+
</Header.H2>
14+
</Segment>
15+
);
16+
}
17+
}

‎docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.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 {Header, Segment} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<Segment className='inverted'>
8+
<Header.H4 className='red inverted'>Red</Header.H4>
9+
<Header.H4 className='orange inverted'>Orange</Header.H4>
10+
<Header.H4 className='yellow inverted'>Yellow</Header.H4>
11+
<Header.H4 className='olive inverted'>Olive</Header.H4>
12+
<Header.H4 className='green inverted'>Green</Header.H4>
13+
<Header.H4 className='teal inverted'>Teal</Header.H4>
14+
<Header.H4 className='blue inverted'>Blue</Header.H4>
15+
<Header.H4 className='purple inverted'>Purple</Header.H4>
16+
<Header.H4 className='violent inverted'>Violent</Header.H4>
17+
<Header.H4 className='pink inverted'>Pink</Header.H4>
18+
<Header.H4 className='brown inverted'>Brown</Header.H4>
19+
<Header.H4 className='grey inverted'>Grey</Header.H4>
20+
</Segment>
21+
);
22+
}
23+
}

‎docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.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 {Header, Segment} from 'stardust';
3+
4+
export default class HeaderPageHeadersExample extends Component {
5+
render() {
6+
return (
7+
<Segment>
8+
<Header.H3 className='right aligned'>
9+
Float Right
10+
</Header.H3>
11+
<Header.H3 className='left aligned'>
12+
Float Left
13+
</Header.H3>
14+
<Header.H3 className='justified'>
15+
This text takes up the full width of the container
16+
</Header.H3>
17+
<Header.H3 className='center aligned'>
18+
Centered
19+
</Header.H3>
20+
</Segment>
21+
);
22+
}
23+
}

0 commit comments

Comments
 (0)