@helpscout/hsds-react/components/Accordion/Accordion.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AccordionWithCustomIds = exports.onSortEnd = exports.onClose = exports.onOpen = exports.createSections = exports.dataWithIds = exports.data = void 0;

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _index = require("../index");

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

var _helix = require("@helpscout/helix");

var _jsxRuntime = require("react/jsx-runtime");

var body = _helix.faker.lorem.paragraph()();

var form = /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Input, {
    label: "Enter some text",
    style: {
      marginBottom: '7px'
    }
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
    primary: true,
    children: "Save"
  })]
});
var data = [{
  title: 'Section 1',
  body: body
}, {
  title: 'Section 2',
  body: form
}, {
  title: 'Section 3',
  body: body
}, {
  title: 'Section 4',
  body: body
}];
exports.data = data;
var dataWithIds = data.map(function (item, index) {
  return (0, _extends2.default)({}, item, {
    id: index + 1
  });
});
exports.dataWithIds = dataWithIds;

var createSections = function createSections(data) {
  return data.map(function (datum, index) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Accordion.Section, {
      id: datum.id,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Accordion.Title, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
          truncate: true,
          weight: 500,
          children: datum.title
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Accordion.Body, {
        children: datum.body
      })]
    }, index);
  });
};

exports.createSections = createSections;

var onOpen = function onOpen(id) {
  return console.log('Open', id);
};

exports.onOpen = onOpen;

var onClose = function onClose(id) {
  return console.log('Close', id);
};

exports.onClose = onClose;

var onSortEnd = function onSortEnd() {
  var _console;

  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  return (_console = console).log.apply(_console, ['Sorted'].concat(args));
};

exports.onSortEnd = onSortEnd;

var AccordionWithCustomIds = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(AccordionWithCustomIds, _React$Component);

  function AccordionWithCustomIds() {
    var _this;

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      value: 3
    };

    _this.handleChange = function (e) {
      _this.updateSectionId(e.target.value);
    };

    _this.updateSectionId = function (value) {
      _this.setState({
        value: parseInt(value, 10)
      });
    };

    return _this;
  }

  var _proto = AccordionWithCustomIds.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var value = this.state.value;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
        onSubmit: function onSubmit(e) {
          return e.preventDefault();
        },
        style: {
          marginBottom: '10px'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          interval: "1",
          min: "1",
          max: "4",
          onChange: this.handleChange,
          type: "number",
          value: value,
          style: {
            width: '100px'
          }
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Accordion, {
        distance: (0, _addonKnobs.number)('distance', 5),
        isSortable: (0, _addonKnobs.boolean)('isSortable', true),
        pressDelay: (0, _addonKnobs.number)('pressDelay', 300),
        onSortEnd: onSortEnd,
        openSectionIds: [value],
        setSectionState: function setSectionState(uuid) {
          _this2.updateSectionId(uuid);
        },
        children: dataWithIds.map(function (datum, index) {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Accordion.Section, {
            id: datum.id,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Accordion.Title, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
                truncate: true,
                weight: 500,
                children: datum.title
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Accordion.Body, {
              children: datum.body
            })]
          }, index);
        })
      })]
    });
  };

  return AccordionWithCustomIds;
}(_react.default.Component);

exports.AccordionWithCustomIds = AccordionWithCustomIds;