@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
167 lines (166 loc) • 8.64 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 List item module stories.
* @copyright IBM Security 2021
*/
import { Bee16, InProgress16, Locked16, UserAvatar20 } from '@carbon/icons-react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { getDocsParameters } from '../../../../.storybook';
import withResponsive from '../../../../.storybook/decorators';
import { ICA, ListItemModule, ProfileImage, StatusIcon, Tag } from '../../..';
import getTitle from '../stories';
import page from './index.mdx';
export default {
title: getTitle(ListItemModule.name),
component: ListItemModule,
parameters: _objectSpread({
docs: {
page: page
}
}, getDocsParameters()),
decorators: [withResponsive]
};
export var Default = function Default() {
return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Bee16, icon)), /*#__PURE__*/React.createElement(Column, null, console.log(), /*#__PURE__*/React.createElement("h2", title, "List title"), /*#__PURE__*/React.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/React.createElement("section", component, "Nested Component"), /*#__PURE__*/React.createElement("span", label, "Time stamp / label"), /*#__PURE__*/React.createElement(UserAvatar20, avatar), /*#__PURE__*/React.createElement(UserAvatar20, avatar), /*#__PURE__*/React.createElement(UserAvatar20, avatar)), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Locked16, null)));
});
};
export var NonInteractive = function NonInteractive() {
return /*#__PURE__*/React.createElement(ListItemModule, null, function (_ref2) {
var Column = _ref2.Column,
getLayoutProps = _ref2.getLayoutProps;
var _getLayoutProps2 = getLayoutProps(),
label = _getLayoutProps2.label,
title = _getLayoutProps2.title;
return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("h2", title, "List title"), /*#__PURE__*/React.createElement("span", label, "Label"));
});
};
export var AsButton = function AsButton() {
return /*#__PURE__*/React.createElement(ListItemModule, {
onClick: action('onClick')
}, function (_ref3) {
var Column = _ref3.Column,
getLayoutProps = _ref3.getLayoutProps;
var _getLayoutProps3 = getLayoutProps(),
label = _getLayoutProps3.label,
title = _getLayoutProps3.title;
return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("h2", title, "List title"), /*#__PURE__*/React.createElement("span", label, "Label"));
});
};
export var WithProfileImage = function WithProfileImage() {
return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ProfileImage, _extends({}, profileimage, {
profile: {
description: /*#__PURE__*/React.createElement("span", null, "Profile Image"),
image_url: null,
name: {
first_name: 'Sample',
surname: 'User'
}
}
}))), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/React.createElement("span", label, "Today 11:50 AM")));
});
};
export var WithTag = function WithTag() {
return /*#__PURE__*/React.createElement(ListItemModule, {
href: "#"
}, function (_ref5) {
var Column = _ref5.Column,
getLayoutProps = _ref5.getLayoutProps;
var _getLayoutProps5 = getLayoutProps(),
title = _getLayoutProps5.title,
farsidecolumn = _getLayoutProps5.farsidecolumn;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("h2", title, "Bill Callahan")), /*#__PURE__*/React.createElement(Column, farsidecolumn, /*#__PURE__*/React.createElement(Tag, null, "16")));
});
};
export var WithComponent = function WithComponent() {
return /*#__PURE__*/React.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.createElement(Column, null, /*#__PURE__*/React.createElement(Bee16, icon), /*#__PURE__*/React.createElement("h2", title, "List title"), /*#__PURE__*/React.createElement("p", description, "Description here. It can go up to three lines before truncating."), /*#__PURE__*/React.createElement("section", component, /*#__PURE__*/React.createElement(ICA, {
label: "Label",
value: 100
})));
});
};
export var WithStatusIcon = function WithStatusIcon() {
return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("h2", title, "GPON vulnerability exploited"), /*#__PURE__*/React.createElement("span", label, "Threat activity")), /*#__PURE__*/React.createElement(Column, farsidecolumn, /*#__PURE__*/React.createElement(StatusIcon, {
iconDescription: "Status Icon",
size: "lg",
status: "info"
})));
});
};
export var WithInProgressIcon = function WithInProgressIcon() {
return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(InProgress16, icon)), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("h2", title, "Create new doc types"), /*#__PURE__*/React.createElement(UserAvatar20, avatar), /*#__PURE__*/React.createElement(UserAvatar20, avatar), /*#__PURE__*/React.createElement(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'
};