@carbon/ibm-security/es/components/FilterPanel/FilterPanel-story.js

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
/**
 * @file Filter panel stories.
 * @copyright IBM Security 2020 - 2021
 */

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text, object } from '@storybook/addon-knobs';
import { compose, withState, withHandlers, getDisplayName } from 'recompose';
import React from 'react';
import { patterns } from '../../../.storybook';
import Checkbox from '../Checkbox';
import Search from '../Search';
import { AccordionItem, Accordion } from '../Accordion';
import { filterData, title, filtersExpandLabel, filtersCollapseLabel, noFiltersResultsLabel, filterSearchLabel, labels } from './_mocks_';
import FilterPanel, { FilterPanelSearch, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelGroup } from '.';

// Ensure that passed down props are shown in types table.
FilterPanelCheckbox.__docgenInfo = Checkbox.__docgenInfo;
FilterPanelAccordion.__docgenInfo = Accordion.__docgenInfo;
FilterPanelAccordionItem.__docgenInfo = AccordionItem.__docgenInfo;
FilterPanelSearch.__docgenInfo = Search.__docgenInfo;
var LegacyFilterPanelWithState = compose(
// Maintain a state attribute called filterData.
withState('filterData', 'onFilterToggle', function (_ref) {
  var filterData = _ref.filterData;
  return filterData;
}),
// When value changes update state and call passed in onChange method.
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);
    };
  }
}))(FilterPanel);
var checkboxProps = function checkboxProps() {
  return {
    count: 10,
    onChange: action('FilterPanelCheckbox onChange'),
    title: 'FilterPanelCheckbox title attribute (title)'
  };
};
LegacyFilterPanelWithState.displayName = getDisplayName(FilterPanel);
LegacyFilterPanelWithState.__docgenInfo = FilterPanel.__docgenInfo;
storiesOf(patterns('FilterPanel'), module).addDecorator(function (story) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem',
      width: '16rem',
      margin: '0 auto'
    }
  }, story());
}).add('default', function () {
  return /*#__PURE__*/React.createElement(FilterPanel, {
    title: text('FilterPanel title (title)', title)
  }, /*#__PURE__*/React.createElement(FilterPanelSearch, {
    id: "filter-search",
    labelText: text('FilterPanelSearch label text (labelText)', filterSearchLabel),
    onChange: action('FilterPanelSearch onChange'),
    placeholder: text('FilterPanelSearch placeholder text (placeholder)', filterSearchLabel)
  }, /*#__PURE__*/React.createElement(FilterPanelGroup, {
    title: "Filter accordion item"
  }, /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Filter checkbox",
    id: "result-filter-checkbox"
  }, checkboxProps())), /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Long filter checkbox label",
    id: "result-long-filter-checkbox"
  }, checkboxProps())), /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Checked",
    id: "result-checked",
    defaultChecked: true
  }, checkboxProps()))), /*#__PURE__*/React.createElement(FilterPanelGroup, {
    title: "Truncated accordion item"
  }, new Array(3).fill(null).map(function (value, index) {
    return /*#__PURE__*/React.createElement(FilterPanelCheckbox
    // eslint-disable-next-line react/no-array-index-key
    , _extends({
      key: index,
      labelText: "Filter ".concat(index + 1),
      id: "result-filter-checkbox-".concat(index + 1)
    }, checkboxProps()));
  }))), /*#__PURE__*/React.createElement(FilterPanelAccordion, {
    title: "Filter accordion",
    count: 150
  }, /*#__PURE__*/React.createElement(FilterPanelAccordionItem, {
    open: true,
    title: "Filter accordion item",
    count: 3,
    expandLabel: "View more",
    collapseLabel: "View less"
  }, /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Filter checkbox",
    id: "filter-checkbox"
  }, checkboxProps())), /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Long filter checkbox  label",
    id: "long-filter-checkbox"
  }, checkboxProps())), /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
    labelText: "Checked",
    id: "checked",
    defaultChecked: true
  }, checkboxProps()))), /*#__PURE__*/React.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__*/React.createElement(FilterPanelCheckbox
    // eslint-disable-next-line react/no-array-index-key
    , _extends({
      key: index,
      labelText: "Filter ".concat(index + 1),
      id: "filter-checkbox-".concat(index + 1)
    }, checkboxProps()));
  }))), /*#__PURE__*/React.createElement(FilterPanelAccordion, {
    title: "Filter accordion 2",
    count: 100
  }, /*#__PURE__*/React.createElement(FilterPanelAccordionItem, {
    heading: /*#__PURE__*/React.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__*/React.createElement(FilterPanelCheckbox
    // eslint-disable-next-line react/no-array-index-key
    , _extends({
      key: index,
      labelText: "Filter ".concat(index + 1),
      id: "1-filter-".concat(index + 1)
    }, checkboxProps()));
  })), /*#__PURE__*/React.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__*/React.createElement(FilterPanelCheckbox
    // eslint-disable-next-line react/no-array-index-key
    , _extends({
      key: index,
      labelText: "Filter ".concat(index + 1),
      id: "2-filter-".concat(index + 1)
    }, checkboxProps()));
  }))));
}).add('with deprecated FilterData', function () {
  return /*#__PURE__*/React.createElement(LegacyFilterPanelWithState, {
    onChange: action('onChange'),
    title: text('title', title),
    filtersExpandLabel: text('filtersExpandLabel', filtersExpandLabel),
    filtersCollapseLabel: text('filtersCollapseLabel', filtersCollapseLabel),
    noFiltersResultsLabel: text('noFiltersResultsLabel', noFiltersResultsLabel),
    filterSearchLabel: text('filterSearchLabel', filterSearchLabel),
    filterData: object('filterData', filterData),
    labels: 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."
  }
});