@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
141 lines (139 loc) • 9.18 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 _react = require("@storybook/react");
var _react2 = _interopRequireWildcard(require("react"));
var _storybook = require("../../../.storybook");
var _namespace = require("../../globals/namespace");
var _ = require("../..");
var _mocks_ = require("../_mocks_");
var _mocks_2 = _interopRequireDefault(require("./SummaryCardContainer/_mocks_"));
var _mocks_3 = _interopRequireDefault(require("./SummaryCardSelect/_mocks_"));
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 Summary card stories.
* @copyright IBM Security 2019 - 2021
*/
(0, _react.storiesOf)((0, _storybook.patterns)('SummaryCard#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-cards-productivecard--default",
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)));
}).addDecorator(function (story) {
return /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--grid ").concat(_namespace.carbonPrefix, "--grid--full-width")
}, /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--row")
}, story()));
}).add('with primary label', function () {
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--col-md-4 ").concat(_namespace.carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/_react2.default.createElement(_.SummaryCard, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardHeader, {
title: "Summary card that is super long and will wrap the next line. Therefore it needs to be truncated with a tooltip for accessibility.",
status: /*#__PURE__*/_react2.default.createElement(_.Tooltip, {
showIcon: true,
iconDescription: "Status"
}, "Tooltip content"),
truncate: true
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardBody, null, _mocks_.lorem), /*#__PURE__*/_react2.default.createElement(_.SummaryCardFooter, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
expandedContent: _mocks_.lorem,
renderIcon: _iconsReact.Folder20
}, "Button label that is long and will be truncated"), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
iconDescription: "Icon description",
renderIcon: _iconsReact.Folder20,
hasIconOnly: true,
onClick: (0, _addonActions.action)('onClick'),
tooltipPosition: "bottom",
tooltipAlignment: "center"
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
iconDescription: "Icon description",
renderIcon: _iconsReact.Folder20,
hasIconOnly: true,
onClick: (0, _addonActions.action)('onClick'),
tooltipPosition: "bottom",
tooltipAlignment: "center"
})))), /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--col-sm-4 ").concat(_namespace.carbonPrefix, "--col-md-4 ").concat(_namespace.carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/_react2.default.createElement(_.SummaryCard, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardHeader, {
title: "Summary card with no footer",
status: /*#__PURE__*/_react2.default.createElement(_.Tooltip, {
showIcon: true,
iconDescription: "Status"
}, "Tooltip content")
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardBody, null, _mocks_.lorem.repeat(5)))), /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--col-sm-4 ").concat(_namespace.carbonPrefix, "--col-md-4 ").concat(_namespace.carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/_react2.default.createElement(_.SummaryCard, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardHeader, {
title: "Summary card with no status"
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardBody, null, _mocks_.lorem.repeat(3)), /*#__PURE__*/_react2.default.createElement(_.SummaryCardFooter, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
loading: true,
expandedContent: _mocks_.lorem.repeat(5)
}, "Button label"), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
iconDescription: "Icon description",
renderIcon: _iconsReact.Folder20,
hasIconOnly: true,
onClick: (0, _addonActions.action)('onClick'),
tooltipPosition: "bottom",
tooltipAlignment: "center"
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
iconDescription: "Icon description",
renderIcon: _iconsReact.Folder20,
hasIconOnly: true,
onClick: (0, _addonActions.action)('onClick'),
tooltipPosition: "bottom",
tooltipAlignment: "center"
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, {
iconDescription: "Icon description",
renderIcon: _iconsReact.Folder20,
hasIconOnly: true,
onClick: (0, _addonActions.action)('onClick'),
tooltipPosition: "bottom",
tooltipAlignment: "center"
})))));
}).add('Multiselect', function () {
return /*#__PURE__*/_react2.default.createElement(_.SummaryCardContainer, {
render: function render(_ref) {
var getBatchActionProps = _ref.getBatchActionProps,
getSelectionProps = _ref.getSelectionProps,
selectedSummaryCards = _ref.selectedSummaryCards,
summaryCards = _ref.summaryCards;
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardBatchActions, getBatchActionProps(), /*#__PURE__*/_react2.default.createElement(_.SummaryCardBatchAction, {
onClick: function onClick() {
return (0, _addonActions.action)('SummaryCardBatchAction onClick')(selectedSummaryCards);
},
renderIcon: _iconsReact.Delete16,
tabIndex: getBatchActionProps().shouldShowBatchActions ? 0 : -1
}, "Action")), /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--row")
}, summaryCards.map(function (_ref2) {
var id = _ref2.id;
return /*#__PURE__*/_react2.default.createElement("div", {
key: id,
className: "".concat(_namespace.carbonPrefix, "--col-md-4 ").concat(_namespace.carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/_react2.default.createElement(_.SummaryCard, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardHeader, {
title: id
}), /*#__PURE__*/_react2.default.createElement(_.SummaryCardBody, null, "SummaryCardBody"), /*#__PURE__*/_react2.default.createElement(_.SummaryCardFooter, null, /*#__PURE__*/_react2.default.createElement(_.SummaryCardSelect, (0, _extends2.default)({}, _mocks_3.default, getSelectionProps({
id: id
}))), /*#__PURE__*/_react2.default.createElement(_.SummaryCardAction, null, "SummaryCardAction"))));
})));
},
summaryCards: _mocks_2.default.summaryCards
});
}).add('with skeleton', function () {
return /*#__PURE__*/_react2.default.createElement("div", {
className: "".concat(_namespace.carbonPrefix, "--col-sm-1 ").concat(_namespace.carbonPrefix, "--col-md-2 ").concat(_namespace.carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/_react2.default.createElement(_.SummaryCardSkeleton, null));
});