Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(Spinner): update Spinner docs to follow Bootstrap documentaion
Add new examples Add description to props
- Loading branch information
1 parent
8ac7430
commit b68eedd
Showing
8 changed files
with
154 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from 'react'; | ||
import { Spinner } from 'reactstrap'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<Spinner className="m-5" color="primary" /> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.\ | ||
\n\n\ | ||
Use margin utilities like `.m-5` for easy spacing' | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import { Spinner, Button } from 'reactstrap'; | ||
|
||
const Example = (args) => { | ||
return ( | ||
<> | ||
<Button disabled color="primary"> | ||
<Spinner size="sm" /> | ||
<span> Loading</span> | ||
</Button> | ||
</> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.' | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
|
||
import React from 'react'; | ||
import { Spinner } from 'reactstrap'; | ||
import { colors } from './options'; | ||
|
||
const Example = (args) => { | ||
return ( | ||
<> | ||
{colors.map((color) => ( | ||
<Spinner color={color} key={color} /> | ||
))} | ||
</> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'All standard visual variant colors can be applied for the spinner.' | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import { Spinner } from 'reactstrap'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<> | ||
<Spinner color="primary" style={{ width: '3rem', height: '3rem' }} /> | ||
<Spinner type="grow" color="primary" style={{ width: '3rem', height: '3rem' }} /> | ||
</> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'Or use custom css as needed' | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,23 @@ | ||
import React from 'react'; | ||
import { Spinner } from 'reactstrap'; | ||
import { colors } from './options'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<div> | ||
<Spinner type="grow" color="primary" /> | ||
<Spinner type="grow" color="secondary" /> | ||
<Spinner type="grow" color="success" /> | ||
<Spinner type="grow" color="danger" /> | ||
<Spinner type="grow" color="warning" /> | ||
<Spinner type="grow" color="info" /> | ||
<Spinner type="grow" color="light" /> | ||
<Spinner type="grow" color="dark" /> | ||
</div> | ||
<> | ||
{colors.map((color) => ( | ||
<Spinner type="grow" color={color} key={color} /> | ||
))} | ||
</> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow! Once again you can apply all the colors as above.' | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import { Spinner } from 'reactstrap'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<> | ||
<Spinner color="primary" size="sm" /> | ||
<Spinner type="grow" color="primary" size="sm" /> | ||
</> | ||
); | ||
} | ||
|
||
export default Example; | ||
|
||
Example.parameters = { | ||
docs: { | ||
description: { | ||
story: 'Add `size="sm` to make a smaller spinner that can quickly be used within other components.' | ||
} | ||
} | ||
} |