1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import React from 'react';
- import LoadingIndicator from 'app/components/loadingIndicator';
- export default {
- title: 'UI/Loaders/LoadingIndicator',
- component: LoadingIndicator,
- };
- export const All = () => (
- <div>
- <div>
- Default
- <LoadingIndicator />
- </div>
- <div style={{marginBottom: 240}}>
- Mini
- <LoadingIndicator mini />
- </div>
- <div style={{position: 'relative'}}>
- Triangle
- <LoadingIndicator triangle />
- </div>
- <div style={{position: 'relative'}}>
- Finished
- <LoadingIndicator finished />
- </div>
- </div>
- );
- All.storyName = 'all';
- All.parameters = {
- docs: {
- description: {
- story: 'Loading indicators. Triangle has negative margins.',
- },
- },
- };
- export const Default = () => <LoadingIndicator>Loading message</LoadingIndicator>;
- Default.storyName = 'default';
- export const Mini = () => <LoadingIndicator mini>Loading message</LoadingIndicator>;
- Mini.storyName = 'mini';
- Mini.parameters = {
- docs: {
- description: {
- story: 'Small loading indicator',
- },
- },
- };
- export const Triangle = () => (
- <div style={{paddingBottom: 300}}>
- <LoadingIndicator triangle>Loading message</LoadingIndicator>
- </div>
- );
- Triangle.storyName = 'triangle';
- Triangle.parameters = {
- docs: {
- description: {
- story: 'Triangle loading indicator. Be aware it has negative margins.',
- },
- },
- };
- export const Finished = () => (
- <div style={{paddingBottom: 300}}>
- <LoadingIndicator finished>Finished message</LoadingIndicator>
- </div>
- );
- Finished.storyName = 'finished';
- Finished.parameters = {
- docs: {
- description: {
- story: 'Add finished loading',
- },
- },
- };
|