emptyMessage.stories.js 3.6 KB

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