loadingIndicator.stories.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import React from 'react';
  2. import LoadingIndicator from 'app/components/loadingIndicator';
  3. export default {
  4. title: 'UI/Loaders/LoadingIndicator',
  5. component: LoadingIndicator,
  6. };
  7. export const All = () => (
  8. <div>
  9. <div>
  10. Default
  11. <LoadingIndicator />
  12. </div>
  13. <div style={{marginBottom: 240}}>
  14. Mini
  15. <LoadingIndicator mini />
  16. </div>
  17. <div style={{position: 'relative'}}>
  18. Triangle
  19. <LoadingIndicator triangle />
  20. </div>
  21. <div style={{position: 'relative'}}>
  22. Finished
  23. <LoadingIndicator finished />
  24. </div>
  25. </div>
  26. );
  27. All.storyName = 'all';
  28. All.parameters = {
  29. docs: {
  30. description: {
  31. story: 'Loading indicators. Triangle has negative margins.',
  32. },
  33. },
  34. };
  35. export const Default = () => <LoadingIndicator>Loading message</LoadingIndicator>;
  36. Default.storyName = 'default';
  37. export const Mini = () => <LoadingIndicator mini>Loading message</LoadingIndicator>;
  38. Mini.storyName = 'mini';
  39. Mini.parameters = {
  40. docs: {
  41. description: {
  42. story: 'Small loading indicator',
  43. },
  44. },
  45. };
  46. export const Triangle = () => (
  47. <div style={{paddingBottom: 300}}>
  48. <LoadingIndicator triangle>Loading message</LoadingIndicator>
  49. </div>
  50. );
  51. Triangle.storyName = 'triangle';
  52. Triangle.parameters = {
  53. docs: {
  54. description: {
  55. story: 'Triangle loading indicator. Be aware it has negative margins.',
  56. },
  57. },
  58. };
  59. export const Finished = () => (
  60. <div style={{paddingBottom: 300}}>
  61. <LoadingIndicator finished>Finished message</LoadingIndicator>
  62. </div>
  63. );
  64. Finished.storyName = 'finished';
  65. Finished.parameters = {
  66. docs: {
  67. description: {
  68. story: 'Add finished loading',
  69. },
  70. },
  71. };