You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.9 KiB
60 lines
1.9 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.InfoBox = void 0;
|
||
|
|
const react_1 = __importDefault(require("react"));
|
||
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
||
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
||
|
|
const typography_1 = require("../../atoms/typography");
|
||
|
|
const css_class_1 = require("../../utils/css-class");
|
||
|
|
const StyledInfoBox = styled_components_1.default(box_1.default) `
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: center;
|
||
|
|
`;
|
||
|
|
/**
|
||
|
|
* @classdesc
|
||
|
|
*
|
||
|
|
* <img src="components/info-box.png" />
|
||
|
|
*
|
||
|
|
* Used for all type of information like:
|
||
|
|
*
|
||
|
|
* > you don't have x - please add first one"
|
||
|
|
*
|
||
|
|
* in the system.
|
||
|
|
*
|
||
|
|
* ### Usage
|
||
|
|
*
|
||
|
|
* ```javascript
|
||
|
|
* import { InfoBox, InfoBoxProps } from '@adminjs/design-system'
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @component
|
||
|
|
* @subcategory Molecules
|
||
|
|
* @hideconstructor
|
||
|
|
* @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-infobox--default Storybook}
|
||
|
|
* @see InfoBoxProps
|
||
|
|
* @example
|
||
|
|
* return (
|
||
|
|
* <InfoBox title="There are no cars in the system">
|
||
|
|
* <Text>Currently there are no cars in the system</Text>
|
||
|
|
* <Text>To create first click</Text>
|
||
|
|
* <Button mt="lg"><Icon icon="Add" />Create</Button>
|
||
|
|
* </InfoBox>
|
||
|
|
* )
|
||
|
|
* @section design-system
|
||
|
|
*/
|
||
|
|
const InfoBox = (props) => {
|
||
|
|
const { children, title, testId } = props;
|
||
|
|
return (react_1.default.createElement(StyledInfoBox, { "data-testid": testId, variant: "white", className: css_class_1.cssClass('InfoBox') },
|
||
|
|
react_1.default.createElement(box_1.default, { width: 1 / 2 },
|
||
|
|
react_1.default.createElement(typography_1.H4, { mb: "lg" }, title),
|
||
|
|
children)));
|
||
|
|
};
|
||
|
|
exports.InfoBox = InfoBox;
|
||
|
|
exports.default = InfoBox;
|