@wix/design-system/dist/esm/NestableList/test/NestableList.visual.js

@wix/design-system

import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/NestableList/test/NestableList.visual.jsx",
  _this = this;
import React from 'react';
import { storiesOf } from '@wix/wix-storybook-utils/dynamic-stories';
import NestableList from '../NestableList';
import WixDesignSystemProvider from '../../WixDesignSystemProvider';
var counter = 0;
var getSimpleExampleItems = function getSimpleExampleItems() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var draggable = options.draggable,
    addItemLabel = options.addItemLabel,
    dragDisabled = options.dragDisabled,
    hideDragHandle = options.hideDragHandle;
  return Array.from(new Array(2)).map(function (_, index) {
    return {
      id: counter++,
      options: [{
        value: "Node ".concat(index)
      }],
      draggable: draggable,
      hideDragHandle: hideDragHandle,
      dragDisabled: dragDisabled,
      addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Node ").concat(index) : undefined,
      children: [{
        id: counter++,
        options: [{
          value: "Node ".concat(index, " child")
        }],
        draggable: draggable,
        dragDisabled: dragDisabled,
        hideDragHandle: hideDragHandle
      }]
    };
  });
};
var getNestedExampleItems = function getNestedExampleItems() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var actions = options.actions,
    addItemLabel = options.addItemLabel,
    expandable = options.expandable;
  return [{
    id: 'root-1',
    options: [{
      value: 'Root 1'
    }],
    addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Root 1") : undefined,
    children: [{
      id: 'child-1',
      options: [{
        value: 'Child 1'
      }],
      actions: actions,
      actionsDataHook: actions ? 'child-1-actions' : undefined,
      addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Child 1") : undefined,
      children: [{
        id: 'grandchild-1',
        options: [{
          value: 'Grandchild 1'
        }]
      }]
    }]
  }, {
    id: 'root-2',
    expandable: expandable,
    expanded: expandable,
    isCollapsed: false,
    options: [{
      value: 'Root 2'
    }],
    children: [{
      id: 'child-2',
      options: [{
        value: 'Child 2'
      }]
    }]
  }];
};
var exampleActions = [{
  label: 'Action',
  onClick: function onClick() {}
}];
var containerWrapper = function containerWrapper(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '600px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 3
    }
  }, children);
};
var commonProps = {
  // use for repeated props across the tests (e.g. {buttonText: 'example'})
};
var tests = [{
  describe: 'sanity',
  // prop name (e.g. size)
  its: [{
    it: 'default',
    // prop variation (e.g. small)
    props: {
      items: getSimpleExampleItems()
    }
  }, {
    it: 'With bottom border',
    // prop variation (e.g. small)
    props: {
      items: getSimpleExampleItems(),
      withBottomBorder: true
    }
  }, {
    it: 'With add button',
    // prop variation (e.g. small)
    props: {
      maxDepth: 2,
      items: getSimpleExampleItems(),
      addItemLabel: 'Add item'
    }
  }, {
    it: 'With dragDisable icon',
    // prop variation (e.g. small)
    props: {
      maxDepth: 2,
      items: getSimpleExampleItems({
        draggable: true,
        dragDisabled: true
      })
    }
  }, {
    it: 'Draggable without dragHandle',
    props: {
      maxDepth: 2,
      items: getSimpleExampleItems({
        draggable: true,
        hideDragHandle: true
      })
    }
  }, {
    it: 'Dragging disabled',
    // prop variation (e.g. small)
    props: {
      maxDepth: 2,
      items: getSimpleExampleItems({
        draggable: false
      })
    }
  }, {
    it: 'Static (non-draggable)',
    props: {
      maxDepth: 2,
      items: getSimpleExampleItems({
        draggable: false,
        hideDragHandle: true
      })
    }
  }, {
    it: 'Without dividers',
    props: {
      dividers: false,
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Without dividers, with bottom border',
    props: {
      dividers: false,
      withBottomBorder: true,
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Small indent',
    props: {
      indentSize: 'small',
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Small indent, without dividers',
    props: {
      indentSize: 'small',
      dividers: false,
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Medium indent',
    props: {
      indentSize: 'medium',
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Medium indent, without dividers',
    props: {
      indentSize: 'medium',
      dividers: false,
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Expandable',
    props: {
      items: [{
        id: 'item-1',
        options: [{
          value: 'Item 1'
        }]
      }, {
        id: 'item-2',
        expandable: true,
        expanded: true,
        isCollapsed: false,
        options: [{
          value: 'Show and hide children'
        }],
        children: [{
          id: 'item-2-child-1',
          options: [{
            value: 'Child 1'
          }]
        }, {
          id: 'item-2-child-2',
          expandable: true,
          expanded: true,
          options: [{
            value: 'Child 2'
          }],
          children: [{
            id: 'item-2-child-2-child-1',
            options: [{
              value: 'Child 3'
            }]
          }]
        }]
      }, {
        id: 'item-3',
        options: [{
          value: 'Item 3'
        }]
      }]
    }
  }, {
    it: 'Without dividers, without hierarchy indicator, small indent, small drag handle size',
    props: {
      dividers: false,
      indentSize: 'small',
      dragHandleSize: 'small',
      hierarchyIndicator: false,
      items: getSimpleExampleItems()
    }
  }, {
    it: 'Static and Draggable alignment',
    props: {
      items: [{
        id: 'item-1',
        options: [{
          value: 'Item 1'
        }]
      }, {
        id: 'item-2',
        options: [{
          value: 'Item 2'
        }],
        draggable: false,
        hideDragHandle: true,
        children: [{
          id: 'item-2-child-1',
          options: [{
            value: 'Child 1'
          }],
          draggable: false,
          hideDragHandle: true
        }, {
          id: 'item-2-child-2',
          options: [{
            value: 'Child 2'
          }]
        }]
      }, {
        id: 'item-3',
        options: [{
          value: 'Item 3'
        }]
      }]
    }
  }]
}, {
  describe: 'fullWidthItems',
  its: [{
    it: 'default',
    props: {
      fullWidthItems: true,
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'Small indent',
    props: {
      fullWidthItems: true,
      indentSize: 'small',
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'Medium indent',
    props: {
      fullWidthItems: true,
      indentSize: 'medium',
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'Without dividers',
    props: {
      fullWidthItems: true,
      dividers: false,
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'With bottom border',
    props: {
      fullWidthItems: true,
      withBottomBorder: true,
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'With hierarchy indicator suppressed',
    props: {
      fullWidthItems: true,
      hierarchyIndicator: true,
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'With add buttons',
    props: {
      fullWidthItems: true,
      maxDepth: 3,
      addItemLabel: 'Add item',
      items: getNestedExampleItems({
        addItemLabel: 'Add item'
      })
    },
    wrapper: containerWrapper
  }, {
    it: 'With actions',
    props: {
      fullWidthItems: true,
      actions: exampleActions,
      items: getNestedExampleItems({
        actions: exampleActions
      })
    },
    wrapper: containerWrapper
  }, {
    it: 'Expandable',
    props: {
      fullWidthItems: true,
      items: getNestedExampleItems({
        expandable: true
      })
    },
    wrapper: containerWrapper
  }, {
    it: 'Read only',
    props: {
      fullWidthItems: true,
      readOnly: true,
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'Read only, small indent',
    props: {
      fullWidthItems: true,
      readOnly: true,
      indentSize: 'small',
      items: getNestedExampleItems()
    },
    wrapper: containerWrapper
  }, {
    it: 'Static (non-draggable)',
    props: {
      fullWidthItems: true,
      items: getSimpleExampleItems({
        draggable: false,
        hideDragHandle: true
      })
    },
    wrapper: containerWrapper
  }]
}];
tests.forEach(function (_ref2) {
  var describe = _ref2.describe,
    its = _ref2.its;
  its.forEach(function (_ref3) {
    var it = _ref3.it,
      props = _ref3.props,
      _ref3$wrapper = _ref3.wrapper,
      Wrapper = _ref3$wrapper === void 0 ? React.Fragment : _ref3$wrapper;
    storiesOf("".concat(NestableList.displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement(Wrapper, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 398,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(NestableList, _extends({}, commonProps, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 399,
          columnNumber: 9
        }
      })));
    });
  });
});
storiesOf("".concat(NestableList.displayName, "/mobile"), module).add('drag handle', function () {
  return /*#__PURE__*/React.createElement(WixDesignSystemProvider, {
    mobile: true,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 408,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(NestableList, {
    showDragHandleOnHover: true,
    onChange: function onChange() {},
    items: getSimpleExampleItems(),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 409,
      columnNumber: 7
    }
  }));
});