@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
228 lines (227 loc) • 10.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* @file Panel stories.
* @copyright IBM Security 2019 - 2021
*/
import { Add16, ArrowRight20, Filter20 } from '@carbon/icons-react';
import { spacing04, spacing05 } from '@carbon/layout';
import { styles } from '@carbon/type';
import { action } from '@storybook/addon-actions';
import { boolean, radios, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React, { Fragment } from 'react';
import { disableCenteredStories, patterns } from '../../../.storybook';
import { TooltipDirection } from '../IconButton/IconButton';
import { header, profile, toolbar } from '../Shell/_mocks_';
import { Button, ComboButton, ComboButtonItem, CodeSnippet, PanelV2, PanelContent, Shell, theme } from '../..';
import { labels } from './_mocks_';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
var interactive01 = theme.interactive01,
text04 = theme.text04;
var closeButtonLabel = 'Close';
var props = function props() {
return _defineProperty(_defineProperty({
title: text('title', 'Example title'),
subtitle: text('subtitle', 'Example subtitle')
}, 'aria-label', text('aria-label', 'Example aria-label')), "labels", labels);
};
var comboButtonProps = function comboButtonProps() {
return {
direction: radios('Menu direction (direction)', {
top: TooltipDirection.TOP,
bottom: TooltipDirection.BOTTOM
}, TooltipDirection.TOP)
};
};
var content = /*#__PURE__*/React.createElement("p", null, "Use the", ' ', /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "PanelContent"), ' ', "component to apply the appropriate formatting to panel content.");
disableCenteredStories(storiesOf(patterns('PanelV2#legacy'), module)).addDecorator(function (Story) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/React.createElement(NotificationActionButton, {
href: "https://v1-ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-side-panel-sidepanel--slide-over",
rel: "noopener noreferrer",
target: "_blank"
}, "View replacement"),
kind: "info",
subtitle: "Pattern no longer supported. The pattern will remain available, but plan to migrate to the pattern replacement.",
title: "",
hideCloseButton: true
}), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)));
}).addParameters({
info: {
// Reposition info button so that panel footer isn't covered:
styles: {
button: {
base: _objectSpread({
padding: "".concat(spacing04, " ").concat(spacing05),
color: text04,
background: interactive01
}, styles.bodyShort01),
topRight: {
top: 'auto',
left: 0,
bottom: 0,
borderRadius: 0
}
}
}
}
}).add('Default', function () {
var PanelV2Story = /*#__PURE__*/function (_React$Component) {
function PanelV2Story() {
var _this;
_classCallCheck(this, PanelV2Story);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, PanelV2Story, [].concat(args));
_defineProperty(_this, "state", {
firstOpen: false,
secondOpen: false,
thirdOpen: false
});
_defineProperty(_this, "closeFirst", function () {
_this.setState({
firstOpen: false
});
});
_defineProperty(_this, "closeSecond", function () {
_this.setState({
secondOpen: false
});
});
_defineProperty(_this, "closeThird", function () {
_this.setState({
thirdOpen: false
});
});
_defineProperty(_this, "openFirst", function () {
_this.setState({
firstOpen: true
});
});
_defineProperty(_this, "openSecond", function () {
_this.setState({
secondOpen: true
});
});
_defineProperty(_this, "openThird", function () {
_this.setState({
thirdOpen: true
});
});
return _this;
}
_inherits(PanelV2Story, _React$Component);
return _createClass(PanelV2Story, [{
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Shell, {
header: header,
profile: profile,
toolbar: toolbar
}), /*#__PURE__*/React.createElement("div", {
id: "main",
style: {
paddingLeft: '5rem'
}
}, /*#__PURE__*/React.createElement(Button, {
key: "b1",
onClick: this.openFirst
}, "Primary and secondary action"), /*#__PURE__*/React.createElement(Button, {
key: "b2",
onClick: this.openSecond
}, "Primary action"), /*#__PURE__*/React.createElement(Button, {
key: "b3",
onClick: this.openThird
}, "Default")), /*#__PURE__*/React.createElement(PanelV2, _extends({
key: "p1",
isOpen: this.state.firstOpen,
onClose: this.closeFirst
}, props(), {
closeButton: {
label: text('closeButton.label', closeButtonLabel)
},
primaryButton: {
icon: Add16,
iconDescription: text('primaryButton.iconDescription', 'Add'),
isDisabled: boolean('primaryButton.isDisabled', false),
label: text('primaryButton.label', 'Add'),
onClick: this.closeFirst
},
secondaryButton: {
isDisabled: boolean('secondaryButton.isDisabled', false),
label: text('secondaryButton.label', 'Cancel'),
onClick: this.closeFirst
}
}), /*#__PURE__*/React.createElement(PanelContent, null, /*#__PURE__*/React.createElement(Fragment, null, content, /*#__PURE__*/React.createElement("p", null, "This example uses the", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "primaryButton"), "and", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "secondaryButton"), "props to render buttons in the footer.")))), /*#__PURE__*/React.createElement(PanelV2, _extends({
key: "p2",
isOpen: this.state.secondOpen,
onClose: this.closeSecond
}, props(), {
closeButton: {
label: text('closeButton.label', closeButtonLabel)
},
renderFooter: function renderFooter() {
return /*#__PURE__*/React.createElement(ComboButton, comboButtonProps(), /*#__PURE__*/React.createElement(ComboButtonItem, {
onClick: action('onClick (Item 1 - primary button)'),
renderIcon: ArrowRight20
}, "Item 1 (becomes primary button and text will be truncated)"), new Array(5).fill().map(function (item, index) {
var key = "".concat(ComboButtonItem.name, "__").concat(index);
return /*#__PURE__*/React.createElement(ComboButtonItem, {
key: key,
onClick: action("onClick (".concat(text, ")")),
renderIcon: Filter20
}, "Item ".concat(index + 2, " - text may be long and will be truncated"));
}));
}
}), /*#__PURE__*/React.createElement(PanelContent, null, /*#__PURE__*/React.createElement(Fragment, null, content, /*#__PURE__*/React.createElement("p", null, "This example uses the", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "renderFooter"), "prop to render a", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "ComboButton"), "in a custom footer.")))), /*#__PURE__*/React.createElement(PanelV2, _extends({
key: "p3",
isOpen: this.state.thirdOpen,
onClose: this.closeThird
}, props(), {
closeButton: {
label: closeButtonLabel
}
}), /*#__PURE__*/React.createElement(PanelContent, null, /*#__PURE__*/React.createElement(Fragment, null, content, /*#__PURE__*/React.createElement("p", null, "This example intentially does not include the", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "renderFooter"), "or", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true
}, "primaryButton"), "props and therefore does not have a footer.")))));
}
}]);
}(React.Component);
return /*#__PURE__*/React.createElement(PanelV2Story, null);
}, {
info: {
text: "\n The `PanelV2` is an experimental component that is subject to change while it is being tested. If you need a stable component, please use the `Panel` instead.\n "
}
});