@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
175 lines (172 loc) • 9.12 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 _react = require("@storybook/react");
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _recompose = require("recompose");
var _react2 = _interopRequireDefault(require("react"));
var _storybook = require("../../../.storybook");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Search = _interopRequireDefault(require("../Search"));
var _Accordion = require("../Accordion");
var _mocks_ = require("./_mocks_");
var _ = _interopRequireWildcard(require("."));
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 Filter panel stories.
* @copyright IBM Security 2020 - 2021
*/
// Ensure that passed down props are shown in types table.
_.FilterPanelCheckbox.__docgenInfo = _Checkbox.default.__docgenInfo;
_.FilterPanelAccordion.__docgenInfo = _Accordion.Accordion.__docgenInfo;
_.FilterPanelAccordionItem.__docgenInfo = _Accordion.AccordionItem.__docgenInfo;
_.FilterPanelSearch.__docgenInfo = _Search.default.__docgenInfo;
var LegacyFilterPanelWithState = (0, _recompose.compose)(
// Maintain a state attribute called filterData.
(0, _recompose.withState)('filterData', 'onFilterToggle', function (_ref) {
var filterData = _ref.filterData;
return filterData;
}),
// When value changes update state and call passed in onChange method.
(0, _recompose.withHandlers)({
onChange: function onChange(_ref2) {
var _onChange = _ref2.onChange,
onFilterToggle = _ref2.onFilterToggle,
filterData = _ref2.filterData;
return function (filter) {
_onChange(filter);
// eslint-disable-next-line no-param-reassign
filterData.filters[filter.id].enabled = !filterData.filters[filter.id].enabled;
onFilterToggle(filterData);
};
}
}))(_.default);
var checkboxProps = function checkboxProps() {
return {
count: 10,
onChange: (0, _addonActions.action)('FilterPanelCheckbox onChange'),
title: 'FilterPanelCheckbox title attribute (title)'
};
};
LegacyFilterPanelWithState.displayName = (0, _recompose.getDisplayName)(_.default);
LegacyFilterPanelWithState.__docgenInfo = _.default.__docgenInfo;
(0, _react.storiesOf)((0, _storybook.patterns)('FilterPanel'), module).addDecorator(function (story) {
return /*#__PURE__*/_react2.default.createElement("div", {
style: {
padding: '1rem',
width: '16rem',
margin: '0 auto'
}
}, story());
}).add('default', function () {
return /*#__PURE__*/_react2.default.createElement(_.default, {
title: (0, _addonKnobs.text)('FilterPanel title (title)', _mocks_.title)
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelSearch, {
id: "filter-search",
labelText: (0, _addonKnobs.text)('FilterPanelSearch label text (labelText)', _mocks_.filterSearchLabel),
onChange: (0, _addonActions.action)('FilterPanelSearch onChange'),
placeholder: (0, _addonKnobs.text)('FilterPanelSearch placeholder text (placeholder)', _mocks_.filterSearchLabel)
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelGroup, {
title: "Filter accordion item"
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Filter checkbox",
id: "result-filter-checkbox"
}, checkboxProps())), /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Long filter checkbox label",
id: "result-long-filter-checkbox"
}, checkboxProps())), /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Checked",
id: "result-checked",
defaultChecked: true
}, checkboxProps()))), /*#__PURE__*/_react2.default.createElement(_.FilterPanelGroup, {
title: "Truncated accordion item"
}, new Array(3).fill(null).map(function (value, index) {
return /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox
// eslint-disable-next-line react/no-array-index-key
, (0, _extends2.default)({
key: index,
labelText: "Filter ".concat(index + 1),
id: "result-filter-checkbox-".concat(index + 1)
}, checkboxProps()));
}))), /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordion, {
title: "Filter accordion",
count: 150
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordionItem, {
open: true,
title: "Filter accordion item",
count: 3,
expandLabel: "View more",
collapseLabel: "View less"
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Filter checkbox",
id: "filter-checkbox"
}, checkboxProps())), /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Long filter checkbox label",
id: "long-filter-checkbox"
}, checkboxProps())), /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox, (0, _extends2.default)({
labelText: "Checked",
id: "checked",
defaultChecked: true
}, checkboxProps()))), /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordionItem, {
title: "Truncated accordion item",
count: 12,
expandLabel: "View more",
collapseLabel: "View less"
}, new Array(12).fill(null).map(function (value, index) {
return /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox
// eslint-disable-next-line react/no-array-index-key
, (0, _extends2.default)({
key: index,
labelText: "Filter ".concat(index + 1),
id: "filter-checkbox-".concat(index + 1)
}, checkboxProps()));
}))), /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordion, {
title: "Filter accordion 2",
count: 100
}, /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordionItem, {
heading: /*#__PURE__*/_react2.default.createElement("span", null, "Filter accordion item 1"),
title: "Filter accordion item 1",
count: 4,
expandLabel: "View more",
collapseLabel: "View less"
}, new Array(4).fill(null).map(function (value, index) {
return /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox
// eslint-disable-next-line react/no-array-index-key
, (0, _extends2.default)({
key: index,
labelText: "Filter ".concat(index + 1),
id: "1-filter-".concat(index + 1)
}, checkboxProps()));
})), /*#__PURE__*/_react2.default.createElement(_.FilterPanelAccordionItem, {
title: "Filter accordion item 2",
count: 6,
expandLabel: "View more",
collapseLabel: "View less"
}, new Array(6).fill(null).map(function (value, index) {
return /*#__PURE__*/_react2.default.createElement(_.FilterPanelCheckbox
// eslint-disable-next-line react/no-array-index-key
, (0, _extends2.default)({
key: index,
labelText: "Filter ".concat(index + 1),
id: "2-filter-".concat(index + 1)
}, checkboxProps()));
}))));
}).add('with deprecated FilterData', function () {
return /*#__PURE__*/_react2.default.createElement(LegacyFilterPanelWithState, {
onChange: (0, _addonActions.action)('onChange'),
title: (0, _addonKnobs.text)('title', _mocks_.title),
filtersExpandLabel: (0, _addonKnobs.text)('filtersExpandLabel', _mocks_.filtersExpandLabel),
filtersCollapseLabel: (0, _addonKnobs.text)('filtersCollapseLabel', _mocks_.filtersCollapseLabel),
noFiltersResultsLabel: (0, _addonKnobs.text)('noFiltersResultsLabel', _mocks_.noFiltersResultsLabel),
filterSearchLabel: (0, _addonKnobs.text)('filterSearchLabel', _mocks_.filterSearchLabel),
filterData: (0, _addonKnobs.object)('filterData', _mocks_.filterData),
labels: _mocks_.labels
});
}, {
info: {
text: "## Basic implementation of Filter Panel\n\n The most crucial requirement for this component is the structure of the filter data. Be sure to\n check out type definitions for [filter data](https://github.com/carbon-design-system/ibm-security/blob/master/src/components/FilterPanel/LEGACY_FilterPanel/FilterPanelUtilities.js#L60).\n Using the unique prop for each label will override the version passed in the `labels` prop."
}
});