Skip to content

Commit 194e02d

Browse files
dpkwhanlevithomason
dpkwhan
authored and
levithomason
committed
style(Accordion): update docs to the latest standards (#838)
1 parent b819f24 commit 194e02d

11 files changed

Lines changed: 147 additions & 161 deletions

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

Lines changed: 0 additions & 47 deletions
This file was deleted.

docs/app/Examples/modules/Accordion/Types/ActiveIndex.js renamed to docs/app/Examples/modules/Accordion/Types/AccordionExampleActiveIndex.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const panels = _.times(3, () => ({
88
content: faker.lorem.paragraphs(),
99
}))
1010

11-
export default class AccordionActiveIndexExample extends Component {
11+
class AccordionExampleActiveIndex extends Component {
1212
state = { activeIndex: 0 }
1313

1414
handleSliderChange = (e) => this.setState({
@@ -40,3 +40,5 @@ export default class AccordionActiveIndexExample extends Component {
4040
)
4141
}
4242
}
43+
44+
export default AccordionExampleActiveIndex

docs/app/Examples/modules/Accordion/Types/PanelsProp.js renamed to docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import { Accordion } from 'semantic-ui-react'
33
import faker from 'faker'
44
import _ from 'lodash'
@@ -8,10 +8,8 @@ const panels = _.times(3, () => ({
88
content: faker.lorem.paragraphs(),
99
}))
1010

11-
export default class AccordionPanelsPropExample extends Component {
12-
render() {
13-
return (
14-
<Accordion panels={panels} />
15-
)
16-
}
17-
}
11+
const AccordionExamplePanelsProp = () => (
12+
<Accordion panels={panels} />
13+
)
14+
15+
export default AccordionExamplePanelsProp

‎docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react'
2+
import { Accordion, Icon } from 'semantic-ui-react'
3+
4+
const AccordionExampleStandard = () => (
5+
<Accordion>
6+
<Accordion.Title>
7+
<Icon name='dropdown' />
8+
What is a dog?
9+
</Accordion.Title>
10+
<Accordion.Content>
11+
<p>
12+
A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
13+
{' '}it can be found as a welcome guest in many households across the world.
14+
</p>
15+
</Accordion.Content>
16+
<Accordion.Title>
17+
<Icon name='dropdown' />
18+
What kinds of dogs are there?
19+
</Accordion.Title>
20+
<Accordion.Content>
21+
<p>
22+
There are many breeds of dogs. Each breed varies in size and temperament.
23+
{' '}Owners often select a breed of dog that they find to be compatible
24+
with their own lifestyle and desires from a companion.
25+
</p>
26+
</Accordion.Content>
27+
<Accordion.Title>
28+
<Icon name='dropdown' />
29+
How do you acquire a dog?
30+
</Accordion.Title>
31+
<Accordion.Content>
32+
<p>
33+
Three common ways for a prospective owner to acquire a dog is from pet shops,
34+
{' '}private owners, or shelters.
35+
</p>
36+
<p> A pet shop may be the most convenient way to buy a dog.
37+
{' '}Buying a dog from a private owner allows you to assess the pedigree and
38+
{' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
39+
{' '}from a shelter, helps give a good home to a dog who may not find one so readily.
40+
</p>
41+
</Accordion.Content>
42+
</Accordion>
43+
)
44+
45+
export default AccordionExampleStandard

docs/app/Examples/modules/Accordion/Variations/Fluid.js renamed to docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import _ from 'lodash'
22
import faker from 'faker'
3-
import React, { Component } from 'react'
3+
import React from 'react'
44
import { Accordion } from 'semantic-ui-react'
55

66
const panels = _.times(3, () => ({
77
title: faker.lorem.sentence(),
88
content: faker.lorem.paragraphs(),
99
}))
1010

11-
export default class AccordionFluidExample extends Component {
12-
render() {
13-
return (
14-
<Accordion panels={panels} fluid />
15-
)
16-
}
17-
}
11+
const AccordionExampleStyled = () => (
12+
<Accordion panels={panels} styled />
13+
)
14+
15+
export default AccordionExampleStyled

‎docs/app/Examples/modules/Accordion/Types/index.js‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,43 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
33
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
44

55
import { Message } from 'semantic-ui-react'
66

7-
export default class AccordionTypesExamples extends Component {
8-
render() {
9-
return (
10-
<ExampleSection title='Types'>
11-
<ComponentExample
12-
title='Accordion'
13-
description='A standard Accordion.'
14-
examplePath='modules/Accordion/Types/Accordion'
15-
/>
16-
<ComponentExample
17-
title='Panels Prop'
18-
description='Accordion panels can be define using the `panels` prop.'
19-
examplePath='modules/Accordion/Types/PanelsProp'
20-
>
21-
<Message info>
22-
Panel objects can define an <code>active</code> key to open/close the panel.
23-
{' '}They can also define an <code>onClick</code> key to be applied to the <code>Accordion.Title</code>.
24-
</Message>
25-
</ComponentExample>
26-
<ComponentExample
27-
title='Active Index'
28-
description='The `activeIndex` prop controls which panel is open.'
29-
examplePath='modules/Accordion/Types/ActiveIndex'
30-
>
31-
<Message info>
32-
An <code>active</code> prop on an
33-
{' '}<code>&lt;Accordion.Title&gt;</code> or <code>&lt;Accordion.Content&gt;</code>
34-
{' '}will override the <code>&lt;Accordion&gt;</code> <code>&lt;activeIndex&gt;</code> prop.
35-
</Message>
36-
</ComponentExample>
37-
<ComponentExample
38-
title='Styled'
39-
description='A styled accordion adds basic formatting'
40-
examplePath='modules/Accordion/Types/Styled'
41-
/>
42-
</ExampleSection>
43-
)
44-
}
45-
}
7+
const AccordionTypesExamples = () => (
8+
<ExampleSection title='Types'>
9+
<ComponentExample
10+
title='Accordion'
11+
description='A standard Accordion.'
12+
examplePath='modules/Accordion/Types/AccordionExampleStandard'
13+
/>
14+
<ComponentExample
15+
title='Panels Prop'
16+
description='Accordion panels can be define using the `panels` prop.'
17+
examplePath='modules/Accordion/Types/AccordionExamplePanelsProp'
18+
>
19+
<Message info>
20+
Panel objects can define an <code>active</code> key to open/close the panel.
21+
{' '}They can also define an <code>onClick</code> key to be applied to the <code>Accordion.Title</code>.
22+
</Message>
23+
</ComponentExample>
24+
<ComponentExample
25+
title='Active Index'
26+
description='The `activeIndex` prop controls which panel is open.'
27+
examplePath='modules/Accordion/Types/AccordionExampleActiveIndex'
28+
>
29+
<Message info>
30+
An <code>active</code> prop on an
31+
{' '}<code>&lt;Accordion.Title&gt;</code> or <code>&lt;Accordion.Content&gt;</code>
32+
{' '}will override the <code>&lt;Accordion&gt;</code> <code>&lt;activeIndex&gt;</code> prop.
33+
</Message>
34+
</ComponentExample>
35+
<ComponentExample
36+
title='Styled'
37+
description='A styled accordion adds basic formatting.'
38+
examplePath='modules/Accordion/Types/AccordionExampleStyled'
39+
/>
40+
</ExampleSection>
41+
)
42+
43+
export default AccordionTypesExamples

docs/app/Examples/modules/Accordion/Types/Styled.js renamed to docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import _ from 'lodash'
22
import faker from 'faker'
3-
import React, { Component } from 'react'
3+
import React from 'react'
44
import { Accordion } from 'semantic-ui-react'
55

66
const panels = _.times(3, () => ({
77
title: faker.lorem.sentence(),
88
content: faker.lorem.paragraphs(),
99
}))
1010

11-
export default class AccordionStyledExample extends Component {
12-
render() {
13-
return (
14-
<Accordion panels={panels} styled />
15-
)
16-
}
17-
}
11+
const AccordionExampleFluid = () => (
12+
<Accordion panels={panels} fluid />
13+
)
14+
15+
export default AccordionExampleFluid

‎docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import _ from 'lodash'
2+
import faker from 'faker'
3+
import React from 'react'
4+
import { Accordion, Segment } from 'semantic-ui-react'
5+
6+
const panels = _.times(3, () => ({
7+
title: faker.lorem.sentence(),
8+
content: faker.lorem.paragraphs(),
9+
}))
10+
11+
const AccordionExampleInverted = () => (
12+
<Segment inverted>
13+
<Accordion panels={panels} inverted />
14+
</Segment>
15+
)
16+
17+
export default AccordionExampleInverted

‎docs/app/Examples/modules/Accordion/Variations/Inverted.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs/app/Examples/modules/Accordion/Variations/index.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
33
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
44

5-
export default class AccordionTypesExamples extends Component {
6-
render() {
7-
return (
8-
<ExampleSection title='Variations'>
9-
<ComponentExample
10-
title='Fluid'
11-
description='An accordion can take up the width of its container'
12-
examplePath='modules/Accordion/Variations/Fluid'
13-
/>
14-
<ComponentExample
15-
title='Inverted'
16-
description='An accordion can be formatted to appear on dark backgrounds'
17-
examplePath='modules/Accordion/Variations/Inverted'
18-
/>
19-
</ExampleSection>
20-
)
21-
}
22-
}
5+
const AccordionTypesExamples = () => (
6+
<ExampleSection title='Variations'>
7+
<ComponentExample
8+
title='Fluid'
9+
description='An accordion can take up the width of its container.'
10+
examplePath='modules/Accordion/Variations/AccordionExampleFluid'
11+
/>
12+
<ComponentExample
13+
title='Inverted'
14+
description='An accordion can be formatted to appear on dark backgrounds.'
15+
examplePath='modules/Accordion/Variations/AccordionExampleInverted'
16+
/>
17+
</ExampleSection>
18+
)
19+
20+
export default AccordionTypesExamples

0 commit comments

Comments
 (0)