Source

adminjs-design-system/src/molecules/info-box.tsx

  1. import React from 'react'
  2. import styled from 'styled-components'
  3. import { Box, BoxProps, H4 } from '..'
  4. import { cssClass } from '../utils/css-class'
  5. const StyledInfoBox = styled(Box)<BoxProps>`
  6. display: flex;
  7. align-items: center;
  8. justify-content: center;
  9. flex-direction: column;
  10. text-align: center;
  11. `
  12. /**
  13. * @memberof InfoBox
  14. * @alias InfoBoxProps
  15. */
  16. export type InfoBoxProps = {
  17. /** Title of an InfoBox */
  18. title: string;
  19. /** Inner content - usually couple of {@link Text} nodes */
  20. children: React.ReactNode;
  21. /** Optional testId */
  22. testId?: string;
  23. }
  24. /**
  25. * @classdesc
  26. *
  27. * <img src="components/info-box.png" />
  28. *
  29. * Used for all type of information like:
  30. *
  31. * > you don't have x - please add first one"
  32. *
  33. * in the system.
  34. *
  35. * ### Usage
  36. *
  37. * ```javascript
  38. * import { InfoBox, InfoBoxProps } from '@adminjs/design-system'
  39. * ```
  40. *
  41. * @component
  42. * @subcategory Molecules
  43. * @hideconstructor
  44. * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-infobox--default Storybook}
  45. * @see InfoBoxProps
  46. * @example
  47. * return (
  48. * <InfoBox title="There are no cars in the system">
  49. * <Text>Currently there are no cars in the system</Text>
  50. * <Text>To create first click</Text>
  51. * <Button mt="lg"><Icon icon="Add" />Create</Button>
  52. * </InfoBox>
  53. * )
  54. * @section design-system
  55. */
  56. const InfoBox: React.FC<InfoBoxProps> = (props) => {
  57. const { children, title, testId } = props
  58. return (
  59. <StyledInfoBox data-testid={testId} variant="white" className={cssClass('InfoBox')}>
  60. <Box width={1 / 2}>
  61. <H4 mb="lg">{title}</H4>
  62. {children}
  63. </Box>
  64. </StyledInfoBox>
  65. )
  66. }
  67. export { InfoBox }
  68. export default InfoBox