@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
136 lines (134 loc) • 7.43 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _iconsReact = require("@carbon/icons-react");
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireWildcard(require("react"));
var _storybook = require("../../../.storybook");
var _mocks_ = require("../_mocks_");
var _mocks_2 = require("./_mocks_");
var _ = require("../..");
var _2 = require("../../");
var _carbonComponentsReact = require("carbon-components-react");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* @file Panel stories.
* @copyright IBM Security 2019 - 2021
*/
var closeButtonLabel = 'Close';
var panelProps = {
onClose: (0, _addonActions.action)('onClose'),
onOpen: (0, _addonActions.action)('onOpen')
};
var panelContainerProps = {
title: _mocks_.label,
subtitle: _mocks_.label,
labels: _mocks_2.labels
};
var panelContent = 'Use the `PanelContent` component to have the appropriate formatting applied to content';
var footerLabel = 'Custom footer';
(0, _react.storiesOf)((0, _storybook.patterns)('Panel#legacy'), module).addDecorator(function (Story) {
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_2.InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/_react2.default.createElement(_2.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__*/_react2.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react2.default.createElement(Story, null)));
}).add('Default', function () {
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Panel, (0, _extends2.default)({}, panelProps, {
render: function render(_ref) {
var active = _ref.active,
handleClose = _ref.handleClose,
toggleActive = _ref.toggleActive;
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
onClick: toggleActive
}, "Primary and secondary action"), /*#__PURE__*/_react2.default.createElement(_.PanelController, {
active: active
}, /*#__PURE__*/_react2.default.createElement(_.PanelContainer, (0, _extends2.default)({}, panelContainerProps, {
closeButton: {
onClick: toggleActive,
label: (0, _addonKnobs.text)('closeButton.label', closeButtonLabel)
},
primaryButton: {
icon: _iconsReact.Add16,
iconDescription: (0, _addonKnobs.text)('primaryButton.iconDescription', 'Add'),
isDisabled: (0, _addonKnobs.boolean)('primaryButton.isDisabled', !_mocks_.disabled),
label: (0, _addonKnobs.text)('primaryButton.label', 'Add'),
onClick: handleClose
},
secondaryButton: {
isDisabled: (0, _addonKnobs.boolean)('secondaryButton.isDisabled', !_mocks_.disabled),
label: (0, _addonKnobs.text)('secondaryButton.label', 'Cancel'),
onClick: handleClose
}
}), /*#__PURE__*/_react2.default.createElement(_.PanelContent, null, panelContent))));
}
})), /*#__PURE__*/_react2.default.createElement(_.Panel, (0, _extends2.default)({}, panelProps, {
render: function render(_ref2) {
var active = _ref2.active,
toggleActive = _ref2.toggleActive;
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
onClick: toggleActive
}, "Primary action"), /*#__PURE__*/_react2.default.createElement(_.PanelController, {
active: active
}, /*#__PURE__*/_react2.default.createElement(_.PanelContainer, (0, _extends2.default)({}, panelContainerProps, {
closeButton: {
onClick: toggleActive,
label: (0, _addonKnobs.text)('closeButton.label', closeButtonLabel)
},
primaryButton: {
isDisabled: (0, _addonKnobs.boolean)('primaryButton.isDisabled', !_mocks_.disabled),
label: (0, _addonKnobs.text)('primaryButton.label', 'Submit'),
onClick: toggleActive
}
}))));
}
})), /*#__PURE__*/_react2.default.createElement(_.Panel, (0, _extends2.default)({}, panelProps, {
render: function render(_ref3) {
var active = _ref3.active,
toggleActive = _ref3.toggleActive;
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
onClick: toggleActive
}, "Default"), /*#__PURE__*/_react2.default.createElement(_.PanelController, {
active: active
}, /*#__PURE__*/_react2.default.createElement(_.PanelContainer, (0, _extends2.default)({}, panelContainerProps, {
closeButton: {
onClick: toggleActive,
label: closeButtonLabel
}
}), /*#__PURE__*/_react2.default.createElement(_.PanelContent, null, panelContent))));
}
})), /*#__PURE__*/_react2.default.createElement(_.Panel, (0, _extends2.default)({}, panelProps, {
render: function render(_ref4) {
var active = _ref4.active,
toggleActive = _ref4.toggleActive;
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
onClick: toggleActive
}, footerLabel), /*#__PURE__*/_react2.default.createElement(_.PanelController, {
active: active
}, /*#__PURE__*/_react2.default.createElement(_.PanelContainer, (0, _extends2.default)({}, panelContainerProps, {
closeButton: {
onClick: toggleActive,
label: (0, _addonKnobs.text)('closeButton.label', closeButtonLabel)
},
renderFooter: function renderFooter() {
return /*#__PURE__*/_react2.default.createElement(_.Button, {
size: "xl"
}, footerLabel);
}
}))));
}
})));
}, {
info: "View the 'Story' addon panel for guidance on using the `renderFooter` prop"
});