@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
152 lines (150 loc) • 10.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "direction", "nested"];
/**
* @file Overview page layout stories.
* @copyright IBM Security 2020 - 2021
*/
import { Activity16, Copy16 } from '@carbon/icons-react';
import classnames from 'classnames';
import { Row, Column, Grid } from 'carbon-components-react';
import React from 'react';
import { pageLayouts } from '../../../.storybook';
import { ActionBarModule, ButtonClusterModule, Button, DataTablePagination, DescriptionListModule, ICA, ICAModule, Tag, TitleBarModule, TypeLayout, TypeLayoutBody, TypeLayoutCell, TypeLayoutRow } from '../..';
import config, { withContainer } from './stories';
var decorators = config.decorators,
parameters = config.parameters;
export default {
title: pageLayouts('Overview'),
parameters: parameters,
decorators: decorators
};
// TODO: Remove workaround for https://github.ibm.com/security/design-core-experience/issues/241
var withBorder = function withBorder(WrappedComponent) {
return function (_ref) {
var className = _ref.className,
direction = _ref.direction,
nested = _ref.nested,
other = _objectWithoutProperties(_ref, _excluded);
var namespace = 'container__border';
return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
className: classnames(namespace, className, _defineProperty(_defineProperty({}, "".concat(namespace, "--").concat(direction), direction), "".concat(namespace, "--nested"), nested))
}, other));
};
};
var RowWithContainer = withContainer(Row);
var RowWithBorderContainer = withBorder(withContainer(Row));
var ColumnWithBorder = withBorder(Column);
var DescriptionListModuleWithBorder = withBorder(DescriptionListModule);
export var Default = function Default() {
return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ActionBarModule, null, /*#__PURE__*/React.createElement(Tag, {
type: "gray"
}, "Closed"), "ID: 12\xA0\xA0|\xA0\xA0Result: Completed"), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
lg: 12
}, /*#__PURE__*/React.createElement(RowWithBorderContainer, {
direction: "bottom",
narrow: true
}, /*#__PURE__*/React.createElement(ColumnWithBorder, {
direction: "right"
}, /*#__PURE__*/React.createElement(DescriptionListModule, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "General settings and scope",
subsection: true
}), /*#__PURE__*/React.createElement(TypeLayout, null, /*#__PURE__*/React.createElement(TypeLayoutBody, null, /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Name"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "ServiceNow entitlements review")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Description"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Sample description of the ServiceNow entitlements review campaign that may need to go to several lines.")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Type"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "User entitlements")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Priority"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Medium")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Applications"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "ServiceNow 1"), /*#__PURE__*/React.createElement("li", null, "ServiceNow 2"), /*#__PURE__*/React.createElement("li", null, "ServiceNow 3")))), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Include only"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "All users and groups included")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Except for"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "No users and groups excluded")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Reviewer"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "User manager")))))), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(DescriptionListModuleWithBorder, {
direction: "bottom",
nested: true
}, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Schedule",
subsection: true
}), /*#__PURE__*/React.createElement(TypeLayout, null, /*#__PURE__*/React.createElement(TypeLayoutBody, null, /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Start date"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Jul 1 2019 at 12:00PM CST")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Duration"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "20 days")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Frequency"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "This campaign repeats every 3 months"))))), /*#__PURE__*/React.createElement(DescriptionListModule, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Campaign end",
subsection: true
}), /*#__PURE__*/React.createElement(TypeLayout, null, /*#__PURE__*/React.createElement(TypeLayoutBody, null, /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Reminders"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Start 10 days before campaign ends")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Campaign end"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Take no action on entitlements not reviewed"))))))), /*#__PURE__*/React.createElement(RowWithContainer, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Campaign results",
subsection: true
}))), /*#__PURE__*/React.createElement(ICAModule, null, function (_ref2) {
var getLayoutProps = _ref2.getLayoutProps;
return /*#__PURE__*/React.createElement(RowWithContainer, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "Reviews complete",
value: 300
})), /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "Approved",
value: 241
})), /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "Rejected",
value: 28
})));
}), /*#__PURE__*/React.createElement(Row, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(DataTablePagination, {
headers: [{
header: 'Reviewer',
key: 'reviewer'
}, {
header: 'Approved',
key: 'approved'
}, {
header: 'Rejected',
key: 'rejected'
}, {
header: 'Not reviewed',
key: 'notReviewed'
}, {
header: 'Completion',
key: 'completion'
}],
pageSize: 5,
pageSizes: [5, 10, 25, 50],
rows: [{
approved: 5,
completion: '10%',
id: '0',
notReviewed: 54,
rejected: 0,
reviewer: 'john@cse-bank.com'
}, {
approved: 64,
completion: '92%',
id: '1',
notReviewed: 6,
rejected: 5,
reviewer: 'maria@cse-bank.com'
}, {
approved: 71,
completion: '100%',
id: '2',
notReviewed: 0,
rejected: 0,
reviewer: 'rogelio@cse-bank.com'
}]
})))), /*#__PURE__*/React.createElement(Column, {
lg: 4
}, /*#__PURE__*/React.createElement(Row, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ButtonClusterModule, null, /*#__PURE__*/React.createElement(Button, {
kind: "ghost",
renderIcon: Copy16
}, "Duplicate campaign"), /*#__PURE__*/React.createElement(Button, {
kind: "ghost",
renderIcon: Activity16
}, "View activity report")))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(DescriptionListModule, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Details",
subsection: true
}), /*#__PURE__*/React.createElement(TypeLayout, null, /*#__PURE__*/React.createElement(TypeLayoutBody, null, /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Created by"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Scott Damon"), /*#__PURE__*/React.createElement("li", null, "scottd@cse-bank.com")))), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Created on"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Jun 21 2018")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Modified on"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "\u2013")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Closed on"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Jul 15 2018"))))))))));
};