Skip to content

style(Image): update docs to the latest standards #726

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

Merged
levithomason merged 2 commits into from
Oct 24, 2016
Merged

style(Image): update docs to the latest standards #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d40332e
style(Image): update docs to the latest standards
dpkwhan Oct 23, 2016
f3f914f
style(Image): update docs to the latest standards
dpkwhan Oct 23, 2016
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
4 changes: 2 additions & 2 deletions ...nts/Image/Groups/ImageGroupSizeExample.js → ...nts/Image/Groups/ImageExampleGroupSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageImageExample = () => (
const ImageExampleGroupSize = () => (
<div>
<Image.Group size='tiny'>
<Image src={src} />
Expand All @@ -21,4 +21,4 @@ const ImageImageExample = () => (
</div>
)

export default ImageImageExample
export default ImageExampleGroupSize
4 changes: 2 additions & 2 deletions docs/app/Examples/elements/Image/Groups/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ const ImageTypesExamples = () => (
<ExampleSection title='Groups'>
<ComponentExample
title='Size'
description='A group of images can be formatted to have the same size'
examplePath='elements/Image/Groups/ImageGroupSizeExample'
description='A group of images can be formatted to have the same size.'
examplePath='elements/Image/Groups/ImageExampleGroupSize'
/>
</ExampleSection>
)
Expand Down
4 changes: 2 additions & 2 deletions ...ents/Image/States/ImageDisabledExample.js → ...ents/Image/States/ImageExampleDisabled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageDisabledExample = () => (
const ImageExampleDisabled = () => (
<Image src={src} size='small' disabled />
)

export default ImageDisabledExample
export default ImageExampleDisabled
4 changes: 2 additions & 2 deletions ...ements/Image/States/ImageHiddenExample.js → ...ements/Image/States/ImageExampleHidden.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageHiddenExample = () => (
const ImageExampleHidden = () => (
<Image src={src} size='small' hidden />
)

export default ImageHiddenExample
export default ImageExampleHidden
8 changes: 4 additions & 4 deletions docs/app/Examples/elements/Image/States/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const ImageStatesExamples = () => (
<ExampleSection title='States'>
<ComponentExample
title='Hidden'
description='An image can be hidden'
examplePath='elements/Image/States/ImageHiddenExample'
description='An image can be hidden.'
examplePath='elements/Image/States/ImageExampleHidden'
/>
<ComponentExample
title='Disabled'
description='An image can show that it is disabled and cannot be selected'
examplePath='elements/Image/States/ImageDisabledExample'
description='An image can show that it is disabled and cannot be selected.'
examplePath='elements/Image/States/ImageExampleDisabled'
/>
</ExampleSection>
)
Expand Down
4 changes: 2 additions & 2 deletions .../elements/Image/Types/ImageHrefExample.js → .../elements/Image/Types/ImageExampleHref.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image-text.png'

const ImageHrefExample = () => (
const ImageExampleHref = () => (
<Image src={src} size='small' href='http://google.com' target='_blank' />
)

export default ImageHrefExample
export default ImageExampleHref
4 changes: 2 additions & 2 deletions ...elements/Image/Types/ImageImageExample.js → ...elements/Image/Types/ImageExampleImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageImageExample = () => (
const ImageExampleImage = () => (
<Image src={src} size='small' />
)

export default ImageImageExample
export default ImageExampleImage
4 changes: 2 additions & 2 deletions ...ements/Image/Types/ImageWrappedExample.js → ...ements/Image/Types/ImageExampleWrapped.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageImageExample = () => (
const ImageExampleWrapped = () => (
<Image src={src} size='small' wrapped />
)

export default ImageImageExample
export default ImageExampleWrapped
15 changes: 7 additions & 8 deletions docs/app/Examples/elements/Image/Types/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,31 @@
import React from 'react'
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

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

const ImageTypesExamples = () => (
<ExampleSection title='Types'>
<ComponentExample
title='Image'
description='A standard image'
examplePath='elements/Image/Types/ImageImageExample'
description='A standard image.'
examplePath='elements/Image/Types/ImageExampleImage'
>
<Message>
Unless a size is specified,
images will use the original dimensions of the image up to the size of its container.
</Message>
</ComponentExample>
<ComponentExample
description='An image can render wrapped in a div.ui.image as alternative HTML markup'
examplePath='elements/Image/Types/ImageWrappedExample'
description='An image can render wrapped in a div.ui.image as alternative HTML markup.'
examplePath='elements/Image/Types/ImageExampleWrapped'
/>
<ComponentExample
title='Link'
description='An image can be formatted to link to other content'
examplePath='elements/Image/Types/ImageHrefExample'
description='An image can be formatted to link to other content.'
examplePath='elements/Image/Types/ImageExampleHref'
>
<Message info>
An Image automatically renders as a <code>{'<a />'}</code> if it has an <code>href</code>
An Image automatically renders as a <code>{'<a />'}</code> if it has an <code>href</code>.
</Message>
</ComponentExample>
</ExampleSection>
Expand Down
4 changes: 2 additions & 2 deletions ...ts/Image/Variations/ImageAvatarExample.js → ...ts/Image/Variations/ImageExampleAvatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/square-image.png'

const ImageAvatarExample = () => (
const ImageExampleAvatar = () => (
<div>
<Image src={src} avatar />
<span>Username</span>
</div>
)

export default ImageAvatarExample
export default ImageExampleAvatar
4 changes: 2 additions & 2 deletions .../Image/Variations/ImageBorderedExample.js → .../Image/Variations/ImageExampleBordered.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/white-image.png'

const ImageBorderedExample = () => (
const ImageExampleBordered = () => (
<Image src={src} size='medium' bordered />
)

export default ImageBorderedExample
export default ImageExampleBordered
4 changes: 2 additions & 2 deletions .../Image/Variations/ImageCenteredExample.js → .../Image/Variations/ImageExampleCentered.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Segment, Image } from 'semantic-ui-react'
const src1 = 'http://semantic-ui.com/images/wireframe/image.png'
const src2 = 'http://semantic-ui.com/images/wireframe/image-text.png'

const ImageCenteredExample = () => (
const ImageExampleCentered = () => (
<Segment>
<Image src={src1} size='medium' centered />
<p>
Expand All @@ -26,4 +26,4 @@ const ImageCenteredExample = () => (
</Segment>
)

export default ImageCenteredExample
export default ImageExampleCentered
4 changes: 2 additions & 2 deletions .../Image/Variations/ImageCircularExample.js → .../Image/Variations/ImageExampleCircular.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/square-image.png'

const ImageCircularExample = () => (
const ImageExampleCircular = () => (
<Image src={src} size='medium' shape='circular' />
)

export default ImageCircularExample
export default ImageExampleCircular
4 changes: 2 additions & 2 deletions ...s/Image/Variations/ImageFloatedExample.js → ...s/Image/Variations/ImageExampleFloated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Segment, Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image-text.png'

const ImageFloatedExample = () => (
const ImageExampleFloated = () => (
<Segment>
<Image src={src} size='small' floated='left' />
<p>
Expand All @@ -25,4 +25,4 @@ const ImageFloatedExample = () => (
</Segment>
)

export default ImageFloatedExample
export default ImageExampleFloated
4 changes: 2 additions & 2 deletions ...nts/Image/Variations/ImageFluidExample.js → ...nts/Image/Variations/ImageExampleFluid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageFluidExample = () => (
const ImageExampleFluid = () => (
<Image src={src} fluid />
)

export default ImageFluidExample
export default ImageExampleFluid
4 changes: 2 additions & 2 deletions ...s/Image/Variations/ImageRoundedExample.js → ...s/Image/Variations/ImageExampleRounded.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/square-image.png'

const ImageRoudedExample = () => (
const ImageExampleRounded = () => (
<Image src={src} size='medium' shape='rounded' />
)

export default ImageRoudedExample
export default ImageExampleRounded
4 changes: 2 additions & 2 deletions ...ents/Image/Variations/ImageSizeExample.js → ...ents/Image/Variations/ImageExampleSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageSizeExample = () => (
const ImageExampleSize = () => (
<div>
<Image src={src} size='mini' />
<br />
Expand All @@ -23,4 +23,4 @@ const ImageSizeExample = () => (
</div>
)

export default ImageSizeExample
export default ImageExampleSize
4 changes: 2 additions & 2 deletions ...ts/Image/Variations/ImageSpacedExample.js → ...ts/Image/Variations/ImageExampleSpaced.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Segment, Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageSpacedExample = () => (
const ImageExampleSpaced = () => (
<div>
<Segment>
<p>
Expand All @@ -27,4 +27,4 @@ const ImageSpacedExample = () => (
</div>
)

export default ImageSpacedExample
export default ImageExampleSpaced
4 changes: 2 additions & 2 deletions ...riations/ImageVerticallyAlignedExample.js → ...riations/ImageExampleVerticallyAligned.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Divider, Image } from 'semantic-ui-react'

const src = 'http://semantic-ui.com/images/wireframe/image.png'

const ImageVerticallyAlignedExample = () => (
const ImageExampleVerticallyAligned = () => (
<div>
<Image src={src} size='tiny' verticalAlign='top' /> <span>Top Aligned</span>

Expand All @@ -17,4 +17,4 @@ const ImageVerticallyAlignedExample = () => (
</div>
)

export default ImageVerticallyAlignedExample
export default ImageExampleVerticallyAligned
36 changes: 18 additions & 18 deletions docs/app/Examples/elements/Image/Variations/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,53 @@ const ImageVariationsExamples = () => (
<ExampleSection title='Variations'>
<ComponentExample
title='Avatar'
description='An image can appear as an Avatar'
examplePath='elements/Image/Variations/ImageAvatarExample'
description='An image can appear as an Avatar.'
examplePath='elements/Image/Variations/ImageExampleAvatar'
/>
<ComponentExample
title='Bordered'
description='An image can be bordered'
examplePath='elements/Image/Variations/ImageBorderedExample'
description='An image can be bordered.'
examplePath='elements/Image/Variations/ImageExampleBordered'
/>
<ComponentExample
title='Fluid'
description='A fluid image has no maximum width'
examplePath='elements/Image/Variations/ImageFluidExample'
description='A fluid image has no maximum width.'
examplePath='elements/Image/Variations/ImageExampleFluid'
/>
<ComponentExample
title='Shapes'
description='An image can have different shapes'
examplePath='elements/Image/Variations/ImageRoundedExample'
description='An image can have different shapes.'
examplePath='elements/Image/Variations/ImageExampleRounded'
/>
<ComponentExample examplePath='elements/Image/Variations/ImageCircularExample'>
<ComponentExample examplePath='elements/Image/Variations/ImageExampleCircular'>
<Message warning>
Perfectly circular images require a perfectly square image file.
</Message>
</ComponentExample>
<ComponentExample
title='Vertically Aligned'
description='An image can specify its vertical alignment'
examplePath='elements/Image/Variations/ImageVerticallyAlignedExample'
description='An image can specify its vertical alignment.'
examplePath='elements/Image/Variations/ImageExampleVerticallyAligned'
/>
<ComponentExample
title='Centered'
description='An image can be centrally aligned'
examplePath='elements/Image/Variations/ImageCenteredExample'
description='An image can be centrally aligned.'
examplePath='elements/Image/Variations/ImageExampleCentered'
/>
<ComponentExample
title='Spaced'
description='An image can specify that it needs an additional spacing to separate it from nearby content'
examplePath='elements/Image/Variations/ImageSpacedExample'
description='An image can specify that it needs an additional spacing to separate it from nearby content.'
examplePath='elements/Image/Variations/ImageExampleSpaced'
/>
<ComponentExample
title='Floated'
description='An image can appear to the left or right of other content.'
examplePath='elements/Image/Variations/ImageFloatedExample'
examplePath='elements/Image/Variations/ImageExampleFloated'
/>
<ComponentExample
title='Size'
description='An image may appear at different sizes'
examplePath='elements/Image/Variations/ImageSizeExample'
description='An image may appear at different sizes.'
examplePath='elements/Image/Variations/ImageExampleSize'
/>
</ExampleSection>
)
Expand Down