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

render() {
        const data = {
            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" } }))));
    }
}

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 }))))))));
    }
}

render() {
        return (React.createElement(Card, { accented: false },
            React.createElement(Card.Heading, null,
                React.createElement(Card.Title, null, "Recent Updates")),
            React.createElement(Card.Body, null, this.props.loading ? (React.createElement(RecentUpdatesSkeleton, null)) : (React.createElement(Grid, { fluid: true }, this.props.recentlyUpdatedIntegrations.map(i => (React.createElement(Grid.Row, { key: i.id },
                React.createElement(Grid.Col, { sm: 5 }, i.name),
                React.createElement(Grid.Col, { sm: 3 },
                    React.createElement(IntegrationStatus, { currentState: i.currentState })),
                React.createElement(Grid.Col, { sm: 4 }, new Date(i.updatedAt || i.createdAt).toLocaleString())))))))));
    }
}