alert.stories.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import styled from '@emotion/styled';
  2. import Alert from 'sentry/components/alert';
  3. import ExternalLink from 'sentry/components/links/externalLink';
  4. import {IconCheckmark, IconInfo, IconLightning, IconNot, IconWarning} from 'sentry/icons';
  5. import space from 'sentry/styles/space';
  6. export default {
  7. title: 'Components/Alerts/Alert',
  8. component: Alert,
  9. parameters: {
  10. controls: {hideNoControlsWarning: true},
  11. },
  12. };
  13. export const Default = () => (
  14. <Grid>
  15. <Alert type="info">
  16. <ExternalLink href="#">Info message with a url</ExternalLink>
  17. </Alert>
  18. <Alert type="success">Success message without a url</Alert>
  19. <Alert type="warning">Warning message</Alert>
  20. <Alert type="error">
  21. Background workers haven't checked in recently. This can mean an issue with your
  22. configuration or a serious backlog in tasks.
  23. </Alert>
  24. </Grid>
  25. );
  26. Default.parameters = {
  27. docs: {
  28. description: {
  29. story: 'Inline alert messages',
  30. },
  31. },
  32. };
  33. export const WithIcons = () => (
  34. <Grid>
  35. <Alert type="info" icon={<IconInfo size="md" />}>
  36. <ExternalLink href="#">Info message with a url</ExternalLink>
  37. </Alert>
  38. <Alert type="success" icon={<IconCheckmark size="md" />}>
  39. Success message without a url
  40. </Alert>
  41. <Alert type="warning" icon={<IconWarning size="md" />}>
  42. Warning message
  43. </Alert>
  44. <Alert type="error" icon={<IconNot size="md" />}>
  45. Background workers haven't checked in recently. This can mean an issue with your
  46. configuration or a serious backlog in tasks.
  47. </Alert>
  48. </Grid>
  49. );
  50. WithIcons.storyName = 'With Icons';
  51. WithIcons.parameters = {
  52. docs: {
  53. description: {
  54. story: 'Inline alert messages',
  55. },
  56. },
  57. };
  58. export const System = () => (
  59. <Grid>
  60. <Alert type="info" system>
  61. <ExternalLink href="#">Info message with a url</ExternalLink>
  62. </Alert>
  63. <Alert type="success" system>
  64. Success message without a url
  65. </Alert>
  66. <Alert type="warning" system>
  67. Warning message
  68. </Alert>
  69. <Alert type="error" system>
  70. Background workers haven't checked in recently. This can mean an issue with your
  71. configuration or a serious backlog in tasks.
  72. </Alert>
  73. </Grid>
  74. );
  75. System.parameters = {
  76. docs: {
  77. description: {
  78. story:
  79. 'System-level alert messages that appear at the top of the viewport, or embedded in a panel',
  80. },
  81. },
  82. };
  83. export const Expandable = () => {
  84. return (
  85. <Grid>
  86. <Alert
  87. type="info"
  88. icon={<IconInfo size="md" />}
  89. expand={[<div key="1">Here is some details</div>]}
  90. >
  91. Expandable Alert
  92. </Alert>
  93. <Alert
  94. type="success"
  95. icon={<IconCheckmark size="md" />}
  96. expand={[<div key="1">Here is some details</div>]}
  97. expandIcon={<IconLightning size="md" />}
  98. >
  99. Expandable Alert with Custom Expand Icon
  100. </Alert>
  101. <Alert
  102. type="warning"
  103. icon={<IconWarning size="md" />}
  104. expand={[<div key="1">Here is some details</div>]}
  105. expandIcon={<IconCheckmark size="md" />}
  106. onExpandIconClick={() => {}}
  107. >
  108. Expandable Alert with Custom Expand Icon behaviour
  109. </Alert>
  110. </Grid>
  111. );
  112. };
  113. Expandable.storyName = 'Expandable';
  114. Expandable.parameters = {
  115. docs: {
  116. description: {
  117. story: 'Expand with details',
  118. },
  119. },
  120. };
  121. const Grid = styled('div')`
  122. display: grid;
  123. gap: ${space(1)};
  124. `;