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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AvatarRowPlayground = void 0;

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

var _AvatarRow = _interopRequireDefault(require("./AvatarRow"));

var _avatar = require("../../utilities/specs/avatar.specs");

var _reResizable = require("re-resizable");

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

var AvatarRowPlayground = function AvatarRowPlayground() {
  var _React$useState = _react.default.useState((0, _avatar.generateAvatarList)(3, true)),
      avatars = _React$useState[0],
      setAvatars = _React$useState[1];

  var handleClick = function handleClick(action) {
    if (action === 'add') {
      setAvatars([].concat(avatars, (0, _avatar.generateAvatarList)(1, true)));
    } else {
      setAvatars(avatars.slice(0, avatars.length - 1));
    }
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reResizable.Resizable, {
      style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        outline: 'solid 1px #444cf770',
        backgroundColor: '#e5e5f730',
        backgroundImage: 'radial-gradient(#444cf770 0.5px, #e5e5f730 0.5px)',
        backgroundSize: '10px 10px'
      },
      defaultSize: {
        width: '50%',
        height: 200
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarRow.default, {
        size: "lg",
        gap: 10,
        avatars: avatars
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      onClick: function onClick() {
        return handleClick('add');
      },
      children: "increase avatar count"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      onClick: function onClick() {
        return handleClick('remove');
      },
      children: "decrease avatar count"
    })]
  });
};

exports.AvatarRowPlayground = AvatarRowPlayground;