emptyMessage.stories.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import React from 'react';
  2. import styled from '@emotion/styled';
  3. import Button from 'app/components/button';
  4. import {Panel, PanelHeader} from 'app/components/panels';
  5. import {IconTelescope, IconUser} from 'app/icons';
  6. import space from 'app/styles/space';
  7. import EmptyMessage from 'app/views/settings/components/emptyMessage';
  8. export default {
  9. title: 'Layouts/EmptyState/EmptyMessage',
  10. component: EmptyMessage,
  11. };
  12. export const Default = () => (
  13. <div style={{background: '#fff'}}>
  14. <EmptyMessage>Nothing to see here</EmptyMessage>
  15. </div>
  16. );
  17. Default.storyName = 'default';
  18. Default.parameters = {
  19. docs: {
  20. description: {
  21. story: 'Super Generic',
  22. },
  23. },
  24. };
  25. export const InPanel = () => (
  26. <Panel>
  27. <PanelHeader>Audit Log</PanelHeader>
  28. <EmptyMessage>No critical actions taken in this period</EmptyMessage>
  29. </Panel>
  30. );
  31. InPanel.storyName = 'in panel';
  32. export const InPanelWithIcon = () => (
  33. <Panel>
  34. <PanelHeader>Members</PanelHeader>
  35. <EmptyMessage icon={<IconUser size="xl" />} size="large">
  36. Sentry is better with friends
  37. </EmptyMessage>
  38. </Panel>
  39. );
  40. InPanelWithIcon.storyName = 'in panel with icon';
  41. InPanel.parameters = {
  42. docs: {
  43. description: {
  44. story: 'Put this in a panel for maximum effect',
  45. },
  46. },
  47. };
  48. export const InPanelWithIconAndAction = () => (
  49. <Panel>
  50. <PanelHeader>Members</PanelHeader>
  51. <EmptyMessage
  52. icon={<IconUser size="xl" />}
  53. action={<Button priority="primary">Invite Members</Button>}
  54. >
  55. Sentry is better with friends
  56. </EmptyMessage>
  57. </Panel>
  58. );
  59. InPanelWithIconAndAction.storyName = 'in panel with icon and action';
  60. export const InPanelWithTitleAndDescription = () => (
  61. <Panel>
  62. <PanelHeader>Members</PanelHeader>
  63. <EmptyMessage
  64. title="Sentry is better with Friends"
  65. description="When you use sentry with friends, you'll find your world of possibilities expands!"
  66. />
  67. </Panel>
  68. );
  69. InPanelWithTitleAndDescription.storyName = 'in panel with title and description';
  70. export const InPanelWithEverything = () => (
  71. <Panel>
  72. <PanelHeader>Members</PanelHeader>
  73. <EmptyMessage
  74. icon={<IconUser size="xl" />}
  75. title="Sentry is better with friends!"
  76. description="When you use sentry with friends, you'll find your world of possibilities expands!"
  77. action={
  78. <Wrapper>
  79. <ButtonWrapper>
  80. <Button priority="primary">Invite Members</Button>
  81. </ButtonWrapper>
  82. <div>
  83. <Button>Learn More</Button>
  84. </div>
  85. </Wrapper>
  86. }
  87. />
  88. </Panel>
  89. );
  90. InPanelWithEverything.storyName = 'in panel with everything';
  91. export const InOnboardingMissingFunctionalityPanel = () => (
  92. <Panel dashedBorder>
  93. <EmptyMessage
  94. icon={<IconTelescope size="xl" />}
  95. title="You're missing out on crucial functionality!"
  96. description="Enable this feature now to get the most out of Sentry. What are you waiting for? Do it!"
  97. action={
  98. <Wrapper>
  99. <ButtonWrapper>
  100. <Button priority="primary">Enable it!</Button>
  101. </ButtonWrapper>
  102. <div>
  103. <Button>Learn More</Button>
  104. </div>
  105. </Wrapper>
  106. }
  107. />
  108. </Panel>
  109. );
  110. InOnboardingMissingFunctionalityPanel.storyName =
  111. 'in onboarding/missing functionality panel';
  112. const Wrapper = styled('div')`
  113. display: flex;
  114. justify-content: center;
  115. `;
  116. const ButtonWrapper = styled('div')`
  117. margin-right: ${space(1)};
  118. `;