@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
102 lines (100 loc) • 4.75 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _iconsReact = require("@carbon/icons-react");
var _placeholder = _interopRequireDefault(require("../GettingStartedLayout/images/placeholder.svg"));
var _aurora_full_width = _interopRequireDefault(require("../../images/aurora_full_width.png"));
var _colors = require("@carbon/colors");
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _PageHeader = require("../../../../ibm-products/src/components/PageHeader/PageHeader");
var _stories = _interopRequireDefault(require("./stories"));
/**
* @file Getting Started page layout stories.
* @copyright IBM Security 2020 - 2021
*/
var decorators = _stories.default.decorators,
parameters = _stories.default.parameters;
var _default = exports.default = {
title: (0, _storybook.pageLayouts)('Getting Started'),
parameters: parameters,
decorators: decorators
};
var backgroundStyle = {
position: 'relative',
backgroundColor: _colors.colors.coolGray['100']
};
var imageStyle = {
bottom: 0,
left: 0,
position: 'absolute',
width: '100%',
zIndex: 0
};
var Default = exports.Default = function Default() {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PageHeader.PageHeader, {
breadcrumbOverflowAriaLabel: "breadcrumb",
breadcrumbs: [{
label: 'Homepage',
key: 'Homepage'
}],
navigation: /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
label: "Tab 1"
}), /*#__PURE__*/_react.default.createElement(_.Tab, {
label: "Tab 2"
})),
title: "Playbooks"
}), /*#__PURE__*/_react.default.createElement(_.Grid, {
className: "security--theme--cg10",
style: backgroundStyle
}, /*#__PURE__*/_react.default.createElement(_.Row, null, /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Column, {
lg: 6
}, /*#__PURE__*/_react.default.createElement(_.DescriptionModule, description, function (_ref2) {
var getLayoutProps = _ref2.getLayoutProps;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.TitleBarModule, {
title: "Learn to build your first playbook"
}), /*#__PURE__*/_react.default.createElement("p", getLayoutProps(), "Build your security process from beginning to end, all in one place. Learn to build a playbook today."));
}), /*#__PURE__*/_react.default.createElement(_.Row, {
style: {
marginBottom: '345px'
}
}, /*#__PURE__*/_react.default.createElement(_.Column, null, /*#__PURE__*/_react.default.createElement(_.Button, (0, _extends2.default)({}, primaryButton, {
kind: "primary"
}), "Learn to build a playbook")), /*#__PURE__*/_react.default.createElement(_.Column, null, /*#__PURE__*/_react.default.createElement(_.Button, (0, _extends2.default)({}, secondaryButton, {
kind: "ghost",
renderIcon: _iconsReact.Add16,
style: {
marginLeft: '-16px'
}
}), "Create playbook"))), /*#__PURE__*/_react.default.createElement("p", additionalInfo, "To learn more about building a playbook, visit the Knowledge Center."), /*#__PURE__*/_react.default.createElement(_.Button, (0, _extends2.default)({}, tertiaryButton, {
kind: "ghost",
renderIcon: _iconsReact.Launch16
}), "Knowledge Center")), /*#__PURE__*/_react.default.createElement(_.Column, {
lg: {
span: 8,
offset: 1
}
}, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, illustration, {
src: _placeholder.default,
alt: "Getting started illustration"
}))));
})), /*#__PURE__*/_react.default.createElement("img", {
src: _aurora_full_width.default,
alt: "Aurora background",
style: imageStyle
})));
};