@flexis/ui/components/Dropdown/Dropdown.stories.js

Styleless React Components

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = exports.stylableApi = void 0;

var _react = _interopRequireDefault(require("react"));

var _addonActions = require("@storybook/addon-actions");

var _react2 = require("@storybook/addon-knobs/react");

var _stories = require("../../helpers/stories");

var _types = require("../common/types");

var _ = _interopRequireWildcard(require("./"));

var _createElement = _react.default.createElement;
var stylableApi = "\nStylable API\n---\n- :active\n- :disable\n- ::content\n\t- :active\n\t- :offset\n".concat((0, _stories.buildInfo)([{
  values: _types.AlignValues,
  prefix: ':',
  postfix: 'align',
  indent: 1
}]), "\n");
exports.stylableApi = stylableApi;

var _ref = /*#__PURE__*/_createElement("button", {
  id: "dropdownToggleButton"
}, "Click me!");

var _ref2 = /*#__PURE__*/_createElement("br", null);

var _ref3 = /*#__PURE__*/_createElement("button", null, "text");

var _ref4 = /*#__PURE__*/_createElement("button", null, "Click me!");

var _ref5 = /*#__PURE__*/_createElement("button", null, "Click me!");

var _ref6 = /*#__PURE__*/_createElement("button", null, "Click me!");

var _ref7 = /*#__PURE__*/_createElement("button", null, "Click me!");

var _ref8 = /*#__PURE__*/_createElement("button", null, "Click me!");

var _ref9 = /*#__PURE__*/_createElement("button", {
  id: "dropdownToggleButton"
}, "Click me!");

var _ref10 = /*#__PURE__*/_createElement(_.DropdownContent, null, "Dropdown content.");

var _ref11 = /*#__PURE__*/_createElement("button", {
  id: "dropdownToggleButton2"
}, "Click me!");

var _ref12 = /*#__PURE__*/_createElement(_.DropdownContent, null, "Dropdown content.");

var _default = (0, _stories.storiesOf)('Dropdown', module).addParameters({
  info: stylableApi
}).add('with simple content', function () {
  return _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', false),
    blockScroll: (0, _react2.boolean)('Block scroll', true),
    hideOnClick: (0, _react2.boolean)('Hide on click', false)
  }, _ref, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content.", _ref2, _ref3));
}).add('with default active', function () {
  return _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', false),
    blockScroll: (0, _react2.boolean)('Block scroll', true),
    hideOnClick: (0, _react2.boolean)('Hide on click', false),
    defaultActive: true
  }, _ref4, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content."));
}).add('with disabled state', function () {
  return _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', true),
    blockScroll: (0, _react2.boolean)('Block scroll', true),
    hideOnClick: (0, _react2.boolean)('Hide on click', false)
  }, _ref5, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content."));
}).add('with active state', function () {
  return _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', false),
    active: (0, _react2.boolean)('Active', true),
    blockScroll: (0, _react2.boolean)('Block scroll', true),
    hideOnClick: (0, _react2.boolean)('Hide on click', false)
  }, _ref6, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content."));
}).add('with scroll', function () {
  return _createElement("div", {
    style: {
      padding: '100px 0 1200px'
    }
  }, _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', false),
    blockScroll: (0, _react2.boolean)('Block scroll', true)
  }, _ref7, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content.")));
}).add('with fixed block', function () {
  return _createElement("div", {
    style: {
      padding: '100px 0 1200px'
    }
  }, _createElement("div", {
    style: {
      position: 'fixed',
      top: '30px',
      left: '100px',
      border: '1px solid black',
      width: '300px',
      height: '200px',
      overflow: 'auto'
    }
  }, _createElement("div", {
    style: {
      padding: '100px 0 1200px'
    }
  }, _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle'),
    align: (0, _react2.select)('Align', _types.AlignValues, 'start'),
    disabled: (0, _react2.boolean)('Disabled', false),
    blockScroll: (0, _react2.boolean)('Block scroll', true)
  }, _ref8, _createElement(_.DropdownContent, {
    style: {
      padding: '1rem',
      width: '12rem',
      textAlign: 'center'
    }
  }, "Dropdown content.")))));
}).add('with two dropdowns', function () {
  return _createElement(_react.default.Fragment, null, _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle')
  }, _ref9, _ref10), _createElement(_.default, {
    onToggle: (0, _addonActions.action)('toggle')
  }, _ref11, _ref12));
});

exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Ryb3Bkb3duL0Ryb3Bkb3duLnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBR0E7O0FBSUE7O0FBSUE7O0FBR0E7OztBQUlPLElBQU0sV0FBVyxnR0FRdEIsd0JBQVUsQ0FDWDtBQUNDLEVBQUEsTUFBTSxFQUFHLGtCQURWO0FBRUMsRUFBQSxNQUFNLEVBQUcsR0FGVjtBQUdDLEVBQUEsT0FBTyxFQUFFLE9BSFY7QUFJQyxFQUFBLE1BQU0sRUFBRztBQUpWLENBRFcsQ0FBVixDQVJzQixPQUFqQjs7O3dCQWdDSDtBQUFRLEVBQUEsRUFBRSxFQUFDO0FBQVgsZTs7eUJBVWtCLDBCOzt5QkFDakIsc0M7O3lCQWdCRCwyQzs7eUJBeUJBLDJDOzt5QkEwQkEsMkM7O3lCQTZCQywyQzs7eUJBOENFLDJDOzt5QkF5QkY7QUFBUSxFQUFBLEVBQUUsRUFBQztBQUFYLGU7OzBCQUdBLGVBQUMsaUJBQUQsNEI7OzBCQU9BO0FBQVEsRUFBQSxFQUFFLEVBQUM7QUFBWCxlOzswQkFHQSxlQUFDLGlCQUFELDRCOztlQTdNVSx3QkFBVSxVQUFWLEVBQXNCLE1BQXRCLEVBQ2IsYUFEYSxDQUNDO0FBQ2QsRUFBQSxJQUFJLEVBQUU7QUFEUSxDQURELEVBSWIsR0FKYSxDQUtiLHFCQUxhLEVBTWI7QUFBQSxTQUNDLGVBQUMsU0FBRDtBQUNDLElBQUEsUUFBUSxFQUFFLDBCQUFPLFFBQVAsQ0FEWDtBQUVDLElBQUEsS0FBSyxFQUFFLG9CQUFPLE9BQVAsRUFBZ0Isa0JBQWhCLEVBQTZCLE9BQTdCLENBRlI7QUFHQyxJQUFBLFFBQVEsRUFBRSxxQkFBUSxVQUFSLEVBQW9CLEtBQXBCLENBSFg7QUFJQyxJQUFBLFdBQVcsRUFBRSxxQkFBUSxjQUFSLEVBQXdCLElBQXhCLENBSmQ7QUFLQyxJQUFBLFdBQVcsRUFBRSxxQkFBUSxlQUFSLEVBQXlCLEtBQXpCO0FBTGQsV0FV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