@carbon/ibm-security/lib/components/Tearsheet/TearsheetSmall/TearsheetSmall-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireWildcard(require("react"));
var _recompose = require("recompose");
var _storybook = require("../../../../.storybook");
var _stories = _interopRequireDefault(require("../stories"));
var _ = require("../../..");
var _mocks_ = require("./_mocks_");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
 * @file Small tearsheet stories.
 * @copyright IBM Security 2019 - 2020
 */
var closeButton = _mocks_.buttons.closeButton,
  primaryButton = _mocks_.buttons.primaryButton,
  secondaryButton = _mocks_.buttons.secondaryButton;
var focusTrap = (0, _addonKnobs.boolean)('focusTrap', false);
(0, _react.storiesOf)((0, _storybook.patterns)('TearsheetSmall#legacy'), module).add('Default', function () {
  return /*#__PURE__*/_react2.default.createElement(_.TearsheetSmall, {
    focusTrap: focusTrap,
    heading: _mocks_.heading,
    description: _mocks_.description,
    closeButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.closeButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.closeButton.label', closeButton.label),
      onClick: (0, _addonActions.action)('buttons.closeButton.onClick')
    },
    primaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.primaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.primaryButton.label', primaryButton.label),
      onClick: (0, _addonActions.action)('buttons.primaryButton.onClick')
    },
    secondaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.secondaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.secondaryButton.label', secondaryButton.label),
      onClick: (0, _addonActions.action)('buttons.secondaryButton.onClick')
    },
    isOpen: true,
    labels: _mocks_.labels
  });
}, (0, _storybook.info)((0, _stories.default)(_.TearsheetSmall))).add('Hidden button', function () {
  return /*#__PURE__*/_react2.default.createElement(_.TearsheetSmall, {
    focusTrap: focusTrap,
    heading: _mocks_.heading,
    description: _mocks_.description,
    closeButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.closeButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.closeButton.label', closeButton.label),
      onClick: (0, _addonActions.action)('buttons.closeButton.onClick')
    },
    primaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.primaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.primaryButton.label', primaryButton.label),
      onClick: (0, _addonActions.action)('buttons.primaryButton.onClick')
    },
    secondaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.secondaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.secondaryButton.label', secondaryButton.label),
      onClick: (0, _addonActions.action)('buttons.secondaryButton.onClick'),
      hide: true
    },
    isOpen: true,
    labels: _mocks_.labels
  });
}, (0, _storybook.info)((0, _stories.default)(_.TearsheetSmall))).add('with body', function () {
  return (0, _addonKnobs.boolean)('isOpen', true) && /*#__PURE__*/_react2.default.createElement(_.TearsheetSmall, {
    flush: (0, _addonKnobs.boolean)('Flush (flush)', _.TearsheetSmall.defaultProps.flush),
    focusTrap: focusTrap,
    heading: _mocks_.heading,
    description: _mocks_.description,
    body: /*#__PURE__*/_react2.default.createElement("section", {
      className: "tearsheet--small__body"
    }, _mocks_.body),
    closeButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.closeButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.closeButton.label', closeButton.label),
      onClick: (0, _addonActions.action)('buttons.closeButton.onClick')
    },
    primaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.primaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.primaryButton.label', primaryButton.label),
      onClick: (0, _addonActions.action)('buttons.primaryButton.onClick')
    },
    secondaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.secondaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.secondaryButton.label', secondaryButton.label),
      onClick: (0, _addonActions.action)('buttons.secondaryButton.onClick')
    },
    isOpen: true,
    labels: _mocks_.labels
  });
}, (0, _storybook.info)((0, _stories.default)(_.TearsheetSmall))).add('with loading', function () {
  var loading = true;
  var loadingMessage = 'Sending request...';
  var TearsheetSmallLoadingStory = (0, _recompose.compose)((0, _recompose.lifecycle)({
    state: {
      loading: loading,
      loadingMessage: loadingMessage
    },
    componentDidMount: function componentDidMount() {
      var _this = this;
      this.startRequest = setTimeout(function () {
        return _this.setState({
          loadingMessage: loadingMessage
        });
      }, 1000);
      this.processResponse = setTimeout(function () {
        return _this.setState({
          loadingMessage: 'Processing request...'
        });
      }, 3000);
      this.complete = setTimeout(function () {
        return _this.setState({
          loading: !loading
        });
      }, 5000);
    },
    componentWillUnmount: function componentWillUnmount() {
      clearTimeout(this.startRequest);
      clearTimeout(this.processResponse);
      clearTimeout(this.complete);
    }
  }))(_.TearsheetSmall);
  TearsheetSmallLoadingStory.displayName = (0, _recompose.getDisplayName)(_.TearsheetSmall);
  TearsheetSmallLoadingStory.__docgenInfo = _.TearsheetSmall.__docgenInfo;
  return /*#__PURE__*/_react2.default.createElement(TearsheetSmallLoadingStory, {
    focusTrap: focusTrap,
    heading: _mocks_.heading,
    loadingMessage: loadingMessage,
    description: _mocks_.description,
    closeButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.closeButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.closeButton.label', closeButton.label),
      onClick: (0, _addonActions.action)('buttons.closeButton.onClick')
    },
    primaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.primaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.primaryButton.label', primaryButton.label),
      onClick: (0, _addonActions.action)('buttons.primaryButton.onClick')
    },
    secondaryButton: {
      isDisabled: (0, _addonKnobs.boolean)('buttons.secondaryButton.isDisabled', _mocks_.isDisabled),
      label: (0, _addonKnobs.text)('buttons.secondaryButton.label', secondaryButton.label),
      onClick: (0, _addonActions.action)('buttons.secondaryButton.onClick')
    },
    isOpen: true,
    loading: loading,
    labels: _mocks_.labels,
    body: function body(_ref) {
      var isLoading = _ref.isLoading;
      return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("p", null, "Whenever the TearsheetSmall is loading, please use", ' ', /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
        type: "inline",
        light: true,
        tabIndex: isLoading ? -1 : 0
      }, "isLoading"), ' ', "via the", ' ', /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
        type: "inline",
        light: true,
        tabIndex: isLoading ? -1 : 0
      }, "renderMain"), ' ', "render prop to prevent users from tabbing through focussable content (such as form inputs, buttons, and links) while the TearsheetSmall is loading. For example, you can selectively load skeleton components, or you can set", /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
        type: "inline",
        light: true,
        tabIndex: isLoading ? -1 : 0
      }, "disabled"), "or", ' ', /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
        type: "inline",
        light: true,
        tabIndex: isLoading ? -1 : 0
      }, "tabIndex=", -1), ' ', "on interactive elements."), /*#__PURE__*/_react2.default.createElement("p", null, "Here are some examples:"), isLoading ? /*#__PURE__*/_react2.default.createElement(_.CodeSnippetSkeleton, {
        type: "multi"
      }) : /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
        light: true,
        type: "multi"
      }, "\n            <TearSheetSmall\n              body={(isLoading) => (\n                <Button disabled={isLoading}>\n                  Example button.\n                </Button>\n                <CodeSnippet tabIndex={isLoading ? -1 : 0}>\n                  Example snippet with no copy button.\n                </CodeSnippet>\n                {isLoading ? (\n                  <CodeSnippetSkeleton type=\"multi\" />\n                ) : (\n                  <CodeSnippet type=\"multi\">\n                    Exampe snippet with a copy button.\n                  </CodeSnippet>\n                )}\n              )}\n            />\n            "), /*#__PURE__*/_react2.default.createElement("br", null), /*#__PURE__*/_react2.default.createElement("p", null, "For more examples, please review the \"Story\" tab in the Storybook panel below to the see this demo' source code."));
    }
  });
}, (0, _storybook.info)((0, _stories.default)(_.TearsheetSmall))).add('With open/close', function () {
  var TearsheetSmallStory = /*#__PURE__*/function (_React$Component) {
    function TearsheetSmallStory() {
      var _this2;
      (0, _classCallCheck2.default)(this, TearsheetSmallStory);
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      _this2 = _callSuper(this, TearsheetSmallStory, [].concat(args));
      (0, _defineProperty2.default)(_this2, "state", {
        open: false
      });
      (0, _defineProperty2.default)(_this2, "close", function () {
        _this2.setState({
          open: false
        });
      });
      (0, _defineProperty2.default)(_this2, "open", function () {
        _this2.setState({
          open: true
        });
      });
      return _this2;
    }
    (0, _inherits2.default)(TearsheetSmallStory, _React$Component);
    return (0, _createClass2.default)(TearsheetSmallStory, [{
      key: "render",
      value: function render() {
        return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
          onClick: this.open,
          kind: "primary"
        }, "Open"), /*#__PURE__*/_react2.default.createElement(_.TearsheetSmall, {
          focusTrap: focusTrap,
          heading: _mocks_.heading,
          description: _mocks_.description,
          closeButton: {
            isDisabled: (0, _addonKnobs.boolean)('buttons.closeButton.isDisabled', _mocks_.isDisabled),
            label: (0, _addonKnobs.text)('buttons.closeButton.label', closeButton.label),
            onClick: this.close
          },
          primaryButton: {
            isDisabled: (0, _addonKnobs.boolean)('buttons.primaryButton.isDisabled', _mocks_.isDisabled),
            label: (0, _addonKnobs.text)('buttons.primaryButton.label', primaryButton.label),
            onClick: (0, _addonActions.action)('buttons.primaryButton.onClick')
          },
          secondaryButton: {
            isDisabled: (0, _addonKnobs.boolean)('buttons.secondaryButton.isDisabled', _mocks_.isDisabled),
            label: (0, _addonKnobs.text)('buttons.secondaryButton.label', secondaryButton.label),
            onClick: this.close
          },
          isOpen: this.state.open,
          labels: _mocks_.labels
        }));
      }
    }]);
  }(_react2.default.Component);
  return /*#__PURE__*/_react2.default.createElement(TearsheetSmallStory, null);
}, (0, _storybook.info)((0, _stories.default)(_.TearsheetSmall)));