@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
172 lines (171 loc) • 10.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithTag = exports.WithStatusIcon = exports.WithProfileImage = exports.WithInProgressIcon = exports.WithComponent = exports.NonInteractive = exports.Default = exports.AsButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _iconsReact = require("@carbon/icons-react");
var _addonActions = require("@storybook/addon-actions");
var _react = _interopRequireDefault(require("react"));
var _storybook = require("../../../../.storybook");
var _decorators = _interopRequireDefault(require("../../../../.storybook/decorators"));
var _ = require("../../..");
var _stories = _interopRequireDefault(require("../stories"));
var _index = _interopRequireDefault(require("./index.mdx"));
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 List item module stories.
* @copyright IBM Security 2021
*/
var _default = exports.default = {
title: (0, _stories.default)(_.ListItemModule.name),
component: _.ListItemModule,
parameters: _objectSpread({
docs: {
page: _index.default
}
}, (0, _storybook.getDocsParameters)()),
decorators: [_decorators.default]
};
var Default = exports.Default = function Default() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref) {
var Column = _ref.Column,
getLayoutProps = _ref.getLayoutProps;
var _getLayoutProps = getLayoutProps(),
avatar = _getLayoutProps.avatar,
component = _getLayoutProps.component,
description = _getLayoutProps.description,
icon = _getLayoutProps.icon,
label = _getLayoutProps.label,
title = _getLayoutProps.title;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement(_iconsReact.Bee16, icon)), /*#__PURE__*/_react.default.createElement(Column, null, console.log(), /*#__PURE__*/_react.default.createElement("h2", title, "List title"), /*#__PURE__*/_react.default.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/_react.default.createElement("section", component, "Nested Component"), /*#__PURE__*/_react.default.createElement("span", label, "Time stamp / label"), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar)), /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null)));
});
};
var NonInteractive = exports.NonInteractive = function NonInteractive() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, null, function (_ref2) {
var Column = _ref2.Column,
getLayoutProps = _ref2.getLayoutProps;
var _getLayoutProps2 = getLayoutProps(),
label = _getLayoutProps2.label,
title = _getLayoutProps2.title;
return /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("h2", title, "List title"), /*#__PURE__*/_react.default.createElement("span", label, "Label"));
});
};
var AsButton = exports.AsButton = function AsButton() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
onClick: (0, _addonActions.action)('onClick')
}, function (_ref3) {
var Column = _ref3.Column,
getLayoutProps = _ref3.getLayoutProps;
var _getLayoutProps3 = getLayoutProps(),
label = _getLayoutProps3.label,
title = _getLayoutProps3.title;
return /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("h2", title, "List title"), /*#__PURE__*/_react.default.createElement("span", label, "Label"));
});
};
var WithProfileImage = exports.WithProfileImage = function WithProfileImage() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref4) {
var Column = _ref4.Column,
getLayoutProps = _ref4.getLayoutProps;
var _getLayoutProps4 = getLayoutProps(),
label = _getLayoutProps4.label,
description = _getLayoutProps4.description,
profileimage = _getLayoutProps4.profileimage;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement(_.ProfileImage, (0, _extends2.default)({}, profileimage, {
profile: {
description: /*#__PURE__*/_react.default.createElement("span", null, "Profile Image"),
image_url: null,
name: {
first_name: 'Sample',
surname: 'User'
}
}
}))), /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/_react.default.createElement("span", label, "Today 11:50 AM")));
});
};
var WithTag = exports.WithTag = function WithTag() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref5) {
var Column = _ref5.Column,
getLayoutProps = _ref5.getLayoutProps;
var _getLayoutProps5 = getLayoutProps(),
title = _getLayoutProps5.title,
farsidecolumn = _getLayoutProps5.farsidecolumn;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("h2", title, "Bill Callahan")), /*#__PURE__*/_react.default.createElement(Column, farsidecolumn, /*#__PURE__*/_react.default.createElement(_.Tag, null, "16")));
});
};
var WithComponent = exports.WithComponent = function WithComponent() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref6) {
var Column = _ref6.Column,
getLayoutProps = _ref6.getLayoutProps;
var _getLayoutProps6 = getLayoutProps(),
component = _getLayoutProps6.component,
description = _getLayoutProps6.description,
icon = _getLayoutProps6.icon,
title = _getLayoutProps6.title;
return /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement(_iconsReact.Bee16, icon), /*#__PURE__*/_react.default.createElement("h2", title, "List title"), /*#__PURE__*/_react.default.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/_react.default.createElement("section", component, /*#__PURE__*/_react.default.createElement(_.ICA, {
label: "Label",
value: 100
})));
});
};
var WithStatusIcon = exports.WithStatusIcon = function WithStatusIcon() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref7) {
var Column = _ref7.Column,
getLayoutProps = _ref7.getLayoutProps;
var _getLayoutProps7 = getLayoutProps(),
farsidecolumn = _getLayoutProps7.farsidecolumn,
label = _getLayoutProps7.label,
title = _getLayoutProps7.title;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("h2", title, "GPON vulnerability exploited"), /*#__PURE__*/_react.default.createElement("span", label, "Threat activity")), /*#__PURE__*/_react.default.createElement(Column, farsidecolumn, /*#__PURE__*/_react.default.createElement(_.StatusIcon, {
iconDescription: "Status Icon",
size: "lg",
status: "info"
})));
});
};
var WithInProgressIcon = exports.WithInProgressIcon = function WithInProgressIcon() {
return /*#__PURE__*/_react.default.createElement(_.ListItemModule, {
href: "#"
}, function (_ref8) {
var Column = _ref8.Column,
getLayoutProps = _ref8.getLayoutProps;
var _getLayoutProps8 = getLayoutProps(),
avatar = _getLayoutProps8.avatar,
icon = _getLayoutProps8.icon,
title = _getLayoutProps8.title;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement(_iconsReact.InProgress16, icon)), /*#__PURE__*/_react.default.createElement(Column, null, /*#__PURE__*/_react.default.createElement("h2", title, "Create new doc types"), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar), /*#__PURE__*/_react.default.createElement(_iconsReact.UserAvatar20, avatar)));
});
};
NonInteractive.parameters = {
viewMode: 'canvas'
};
AsButton.parameters = {
viewMode: 'canvas'
};
WithProfileImage.parameters = {
viewMode: 'canvas'
};
WithTag.parameters = {
viewMode: 'canvas'
};
WithComponent.parameters = {
viewMode: 'canvas'
};
WithStatusIcon.parameters = {
viewMode: 'canvas'
};
WithInProgressIcon.parameters = {
viewMode: 'canvas'
};