@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
114 lines (113 loc) • 4.74 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @file Important content area stories.
* @copyright IBM Security 2019 - 2021
*/
import { boolean, select, number, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { Edit16 } from '@carbon/icons-react';
import { components } from '../../../.storybook';
import { carbonPrefix } from '../../globals/namespace';
import IconButton from '../IconButton/IconButton';
import { ICA } from '../..';
import { Locales } from './ICA';
import props from './_mocks_';
var label = props.label,
total = props.total,
icaValue = props.value;
var sizes = {
Default: 'default',
Large: 'lg',
XLarge: 'xl'
};
var storyProps = function storyProps() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$value = _ref.value,
value = _ref$value === void 0 ? icaValue : _ref$value,
total = _ref.total;
return {
label: text('Label (label)', label),
value: number('Value (value)', value),
total: number('Total (total)', total),
percentage: boolean('Percentage (percentage)', false),
size: select('ICA size (size)', sizes, 'default'),
forceShowTotal: boolean('Show total (forceShowTotal)', false),
trending: boolean('Show trending arrow (trending)', false),
truncate: boolean('Truncate (truncate)', ICA.defaultProps.truncate),
locale: select('Locale (locale)', Locales, Locales[0])
};
};
storiesOf(components('ICA'), module).add('default', function () {
return /*#__PURE__*/React.createElement(ICA, storyProps());
}).add('with null value', function () {
return /*#__PURE__*/React.createElement(ICA, storyProps({
value: null
}));
}).add('with 1000 value', function () {
return /*#__PURE__*/React.createElement(ICA, storyProps({
value: icaValue * 100
}));
}).add('with 1000000 value', function () {
return /*#__PURE__*/React.createElement(ICA, storyProps({
value: icaValue * 100000
}));
}).add('with total', function () {
return /*#__PURE__*/React.createElement(ICA, storyProps({
total: total
}));
}).add('with edit button', function () {
return /*#__PURE__*/React.createElement(ICA, _extends({}, storyProps({
value: 350,
total: 450
}), {
iconButton: /*#__PURE__*/React.createElement(IconButton, {
onClick: console.log('click event'),
renderIcon: Edit16,
tooltip: true,
label: 'Edit label',
tooltipDirection: "bottom"
})
}));
}).add('with information icon', function () {
return /*#__PURE__*/React.createElement(ICA, _extends({}, storyProps({
value: 350,
total: 450
}), {
information: 'Information label'
}));
}).add('in an ICA wall', function () {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--grid ").concat(carbonPrefix, "--grid--full-width")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--row")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--col")
}, /*#__PURE__*/React.createElement("h4", null, "4 spaced"))), /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--row")
}, Array(4).fill(0).map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: item.id,
className: "".concat(carbonPrefix, "--col-sm-4 ").concat(carbonPrefix, "--col-md-2 ").concat(carbonPrefix, "--col-lg-4")
}, /*#__PURE__*/React.createElement(ICA, storyProps({
total: total
})));
})), /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--row")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--col")
}, /*#__PURE__*/React.createElement("h4", null, "8 condensed"))), /*#__PURE__*/React.createElement("div", {
className: "".concat(carbonPrefix, "--row")
}, Array(8).fill(0).map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: item.id,
className: "".concat(carbonPrefix, "--col-sm-2 ").concat(carbonPrefix, "--col-md-2 ").concat(carbonPrefix, "--col-lg-2")
}, /*#__PURE__*/React.createElement(ICA, storyProps({
total: total
})));
})));
}, {
info: {
text: "\n Multiple `ICA` components (i.e., an \"ICA Wall\") should be presented in a grid using the correct class names.\n\n These two row examples show different combinations of breakpoints and spans set per column with specific class names.\n\n For more information the 16 column IBM grid, please review the [`@carbon/grid` package documentation](https://github.com/carbon-design-system/carbon/tree/main/packages/grid).\n "
}
});