@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
133 lines (132 loc) • 6.41 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _iconsReact = require("@carbon/icons-react");
var _addonActions = require("@storybook/addon-actions");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _storybook = require("../../../.storybook");
var _ = _interopRequireDefault(require("."));
var _2 = require("../..");
var _mocks_ = require("./_mocks_");
var _3 = require("../../");
var _carbonComponentsReact = require("carbon-components-react");
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) { (0, _defineProperty2.default)(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 Shell stories.
* @copyright IBM Security 2018 - 2021
*/
var shellProps = {
header: _mocks_.header,
profile: _mocks_.profile,
toolbar: _mocks_.toolbar
};
(0, _storybook.disableCenteredStories)((0, _react.storiesOf)((0, _storybook.patterns)('Shell#legacy'), module)).addDecorator(function (Story) {
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react2.default.createElement(Story, null)), /*#__PURE__*/_react2.default.createElement(_3.InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/_react2.default.createElement(_3.NotificationActionButton, {
href: "https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions",
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
}));
}).add('default', function () {
return /*#__PURE__*/_react2.default.createElement(_.default, shellProps);
}, {
info: {
text: "\n Basic implementation of the shell.\n "
}
}).add('with addon and skip-to-content link', function () {
return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_.default, (0, _extends2.default)({}, shellProps, {
skipToContent: _mocks_.skipToContent,
renderAddons: [{
id: 'example-addon',
tooltip: 'Example Addon Action',
render: function render(_ref) {
var iconClassName = _ref.iconClassName,
className = _ref.className;
return /*#__PURE__*/_react2.default.createElement(_2.IconButton, {
className: className,
iconClassName: iconClassName,
label: "Example Addon",
onClick: (0, _addonActions.action)('addon click'),
onFocus: (0, _addonActions.action)('addon hovered'),
onMouseOver: (0, _addonActions.action)('addon hovered'),
renderIcon: _iconsReact.Camera20,
tooltipDirection: _2.IconButton.TooltipDirection.RIGHT
});
}
}]
})), /*#__PURE__*/_react2.default.createElement("div", {
id: "main",
style: {
paddingLeft: '5rem'
}
}, /*#__PURE__*/_react2.default.createElement("p", null, "Example page content."), /*#__PURE__*/_react2.default.createElement(_2.Button, {
href: "#"
}, "Example button")));
}, {
info: {
text: "\n Shell with an extra icon and a skip-to-content link.\n "
}
}).add('with returnTo banner', function () {
return /*#__PURE__*/_react2.default.createElement(_.default, (0, _extends2.default)({}, shellProps, {
returnToBanner: _mocks_.returnToBanner
}));
}, {
info: {
text: "\n Shell with a return-to banner.\n "
}
}).add('with returnTo banner inc. view', function () {
return /*#__PURE__*/_react2.default.createElement(_.default, (0, _extends2.default)({}, shellProps, {
returnToBanner: _objectSpread(_objectSpread({}, _mocks_.returnToBanner), {}, {
view: 'Preview page title'
})
}));
}, {
info: {
text: "\n Shell with a return-to banner and a rendered addon.\n "
}
}).add('with addon, skip-to-content link and returnToBanner', function () {
return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_.default, (0, _extends2.default)({}, shellProps, {
returnToBanner: _objectSpread(_objectSpread({}, _mocks_.returnToBanner), {}, {
view: 'Preview page title'
}),
skipToContent: _mocks_.skipToContent,
renderAddons: [{
id: 'example-addon',
tooltip: 'Example Addon Action',
render: function render(_ref2) {
var className = _ref2.className,
iconClassName = _ref2.iconClassName;
return /*#__PURE__*/_react2.default.createElement(_2.IconButton, {
className: className,
iconClassName: iconClassName,
label: "Example Addon",
onClick: (0, _addonActions.action)('addon click'),
onFocus: (0, _addonActions.action)('addon hovered'),
onMouseOver: (0, _addonActions.action)('addon hovered'),
renderIcon: _iconsReact.Camera20,
tooltipDirection: _2.IconButton.TooltipDirection.RIGHT
});
}
}]
})), /*#__PURE__*/_react2.default.createElement("div", {
id: "main",
style: {
paddingLeft: '5rem',
paddingTop: '2rem'
}
}, /*#__PURE__*/_react2.default.createElement("p", null, "Example page content."), /*#__PURE__*/_react2.default.createElement(_2.Button, {
href: "#"
}, "Example button")));
}, {
info: {
text: "\n Shell with an extra icon, a return-to banner, and a skip-to-content link.\n "
}
});