How to use the patternfly-react.Card.Body function in patternfly-react

export const ConnectionSkeleton = (props) => (React.createElement(Card, { matchHeight: true },
    React.createElement(Card.Body, null,
        React.createElement(EmptyState, null,
            React.createElement(ContentLoader, Object.assign({ height: 300, width: 200, speed: 2, primaryColor: "#f3f3f3", secondaryColor: "#ecebeb" }, props),
                React.createElement("circle", { cx: "100", cy: "50", r: "40" }),
                React.createElement("rect", { x: "5", y: "125", rx: "5", ry: "5", width: "190", height: "30" }),
                React.createElement("rect", { x: "25", y: "180", rx: "5", ry: "5", width: "150", height: "15" }),
                React.createElement("rect", { x: "40", y: "205", rx: "5", ry: "5", width: "120", height: "15" }))))));
//# sourceMappingURL=ConnectionSkeleton.js.map

render() {
        return (React.createElement(Card, { matchHeight: true },
            React.createElement(Card.Body, null,
                React.createElement(EmptyState, null,
                    React.createElement("div", { className: "blank-slate-pf-icon" },
                        React.createElement("img", { src: this.props.icon, alt: this.props.name, width: 46 })),
                    React.createElement(EmptyState.Title, null, this.props.name),
                    React.createElement(EmptyState.Info, null, this.props.description)))));
    }
}

render() {
        const startAsDate = new Date(this.props.start);
        const startAsHuman = startAsDate.toLocaleString();
        return (React.createElement(Card, { accented: true, aggregated: true, matchHeight: true },
            React.createElement(Card.Title, { className: 'text-left' },
                React.createElement("small", { className: 'pull-right' },
                    "since ",
                    startAsHuman),
                React.createElement("div", null, "Uptime")),
            React.createElement(Card.Body, null, "TODO")));
    }
}

render() {
        return (React.createElement(Card, { accented: true, aggregated: true, matchHeight: true },
            React.createElement(Card.Title, null,
                React.createElement(AggregateStatusCount, null,
                    React.createElement("span", { "data-test-aggregate-title": true }, this.props.title))),
            React.createElement(Card.Body, null,
                React.createElement(AggregateStatusNotifications, null,
                    React.createElement(AggregateStatusNotification, null,
                        React.createElement(Icon, { type: "pf", name: "ok" }),
                        React.createElement("span", { "data-test-aggregate-ok-count": true }, this.props.ok),
                        " "),
                    React.createElement(AggregateStatusNotification, null,
                        React.createElement(Icon, { type: "pf", name: "error-circle-o" }),
                        React.createElement("span", { "data-test-aggregate-error-count": true }, this.props.error))))));
    }
}

render() {
        return (React.createElement(Card, { accented: false, className: 'TopIntegrations' },
            React.createElement(Card.Heading, null,
                React.createElement(Card.DropdownButton, { id: "cardDropdownButton1", title: "Last 30 Days" },
                    React.createElement(MenuItem, { eventKey: "1", active: true }, "Last 30 Days"),
                    React.createElement(MenuItem, { eventKey: "2" }, "Last 60 Days"),
                    React.createElement(MenuItem, { eventKey: "3" }, "Last 90 Days")),
                React.createElement(Card.Title, null, "Top 5 Integrations")),
            React.createElement(Card.Body, null, this.props.loading ? (React.createElement(IntegrationsListSkeleton, { width: 500 })) : (React.createElement(IntegrationsList, null, this.props.topIntegrations.map((mi, index) => (React.createElement(IntegrationsListItem, { integrationId: mi.integration.id, integrationName: mi.integration.name, currentState: mi.integration.currentState, targetState: mi.integration.targetState, isConfigurationRequired: !!(mi.integration.board.warnings ||
                    mi.integration.board.errors ||
                    mi.integration.board.notices), monitoringValue: mi.monitoring && mi.monitoring.detailedState.value, monitoringCurrentStep: mi.monitoring && mi.monitoring.detailedState.currentStep, monitoringTotalSteps: mi.monitoring && mi.monitoring.detailedState.totalSteps, key: index }))))))));
    }
}

colors: {
                Pending: patternfly.pfPaletteColors.black200,
                Published: patternfly.pfPaletteColors.blue400,
                Stopped: patternfly.pfPaletteColors.black300
            },
            columns: [
                ["Running", this.props.runningIntegrations],
                ["Stopped", this.props.stoppedIntegrations],
                ["Pending", this.props.pendingIntegrations]
            ],
            type: "donut"
        };
        return (React.createElement(Card, null,
            React.createElement(Card.Heading, null,
                React.createElement(Card.Title, null, "Integration Board")),
            React.createElement(Card.Body, null,
                React.createElement(DonutChart, { id: "integration-board", size: { height: 120 }, data: data, tooltip: {
                        contents: patternfly.pfDonutTooltipContents,
                        show: true
                    }, title: { type: "total", secondary: "Integrations" }, legend: { show: true, position: "right" } }))));
    }
}