@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
95 lines (94 loc) • 4.02 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @file Getting Started page layout stories.
* @copyright IBM Security 2020 - 2021
*/
import React from 'react';
import { Add16, Launch16 } from '@carbon/icons-react';
import placeholder from '../GettingStartedLayout/images/placeholder.svg';
import aurora from '../../images/aurora_full_width.png';
import { colors } from '@carbon/colors';
import { pageLayouts } from '../../../.storybook';
import { Button, Column, DescriptionModule, GettingStartedLayout, Grid, Row, Tab, Tabs, TitleBarModule } from '../..';
import { PageHeader } from '../../../../ibm-products/src/components/PageHeader/PageHeader';
import config from './stories';
var decorators = config.decorators,
parameters = config.parameters;
export default {
title: pageLayouts('Getting Started'),
parameters: parameters,
decorators: decorators
};
var backgroundStyle = {
position: 'relative',
backgroundColor: colors.coolGray['100']
};
var imageStyle = {
bottom: 0,
left: 0,
position: 'absolute',
width: '100%',
zIndex: 0
};
export var Default = function Default() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageHeader, {
breadcrumbOverflowAriaLabel: "breadcrumb",
breadcrumbs: [{
label: 'Homepage',
key: 'Homepage'
}],
navigation: /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
label: "Tab 1"
}), /*#__PURE__*/React.createElement(Tab, {
label: "Tab 2"
})),
title: "Playbooks"
}), /*#__PURE__*/React.createElement(Grid, {
className: "security--theme--cg10",
style: backgroundStyle
}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(GettingStartedLayout, null, function (_ref) {
var getLayoutProps = _ref.getLayoutProps;
var _getLayoutProps = getLayoutProps(),
description = _getLayoutProps.description,
primaryButton = _getLayoutProps.primaryButton,
secondaryButton = _getLayoutProps.secondaryButton,
tertiaryButton = _getLayoutProps.tertiaryButton,
illustration = _getLayoutProps.illustration,
additionalInfo = _getLayoutProps.additionalInfo;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, {
lg: 6
}, /*#__PURE__*/React.createElement(DescriptionModule, description, function (_ref2) {
var getLayoutProps = _ref2.getLayoutProps;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Learn to build your first playbook"
}), /*#__PURE__*/React.createElement("p", getLayoutProps(), "Build your security process from beginning to end, all in one place. Learn to build a playbook today."));
}), /*#__PURE__*/React.createElement(Row, {
style: {
marginBottom: '345px'
}
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Button, _extends({}, primaryButton, {
kind: "primary"
}), "Learn to build a playbook")), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Button, _extends({}, secondaryButton, {
kind: "ghost",
renderIcon: Add16,
style: {
marginLeft: '-16px'
}
}), "Create playbook"))), /*#__PURE__*/React.createElement("p", additionalInfo, "To learn more about building a playbook, visit the Knowledge Center."), /*#__PURE__*/React.createElement(Button, _extends({}, tertiaryButton, {
kind: "ghost",
renderIcon: Launch16
}), "Knowledge Center")), /*#__PURE__*/React.createElement(Column, {
lg: {
span: 8,
offset: 1
}
}, /*#__PURE__*/React.createElement("img", _extends({}, illustration, {
src: placeholder,
alt: "Getting started illustration"
}))));
})), /*#__PURE__*/React.createElement("img", {
src: aurora,
alt: "Aurora background",
style: imageStyle
})));
};