optimizely-oui/dist/js/components/DockedFooter/DockedFooter.story.js

Optimizely's Component Library.

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _lodash = _interopRequireDefault(require("lodash.noop"));

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

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

var _Button = _interopRequireDefault(require("../Button"));

var _index2 = _interopRequireDefault(require("../PaginationControls/index.js"));

var _index3 = _interopRequireDefault(require("../Code/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/**
 * The DockedFooter has a unique relationship with a parent container component
 * When implementing the DockedFooter, select the parent component or
 * element where you would like the DockedFooter to set its event listeners.
 * Once selected, set a reference on the component or element using
 * React.creatRef() https://reactjs.org/docs/refs-and-the-dom.html
 *
 * After creating and setting a reference on the parent component,
 * pass the reference to the DockedFooter as a prop. See implementation
 * of the ScrollContainer component below.
 */
var ScrollContainer = function ScrollContainer(_ref) {
  var children = _ref.children,
      hasCenterGroup = _ref.hasCenterGroup;

  // 1.) Setup a state to hold the parent ref
  var _useState = (0, _react.useState)(null),
      _useState2 = _slicedToArray(_useState, 2),
      parentRef = _useState2[0],
      setParentRef = _useState2[1];

  return _react["default"].createElement("div", {
    // 2.) Use a ref callback to set the parent ref
    //     in state once rendered, which triggers an update
    //     to DockedFooter, so that it can adjust its placement
    ref: function ref(newRef) {
      return setParentRef(newRef);
    },
    "data-test-section": "scroll container",
    className: "height--300 overflow-y--auto"
  }, children, _react["default"].createElement(_index["default"] // 3.) Pass the parent ref to the DockedFooter as a prop
  , {
    scrollRef: parentRef,
    testSection: "docked-footer-more-content",
    includesMargin: true,
    rightGroup: !hasCenterGroup && [_react["default"].createElement(_Button["default"], {
      style: "plain",
      key: 0,
      onClick: _lodash["default"]
    }, "Cancel"), _react["default"].createElement(_Button["default"], {
      style: "highlight",
      key: 1,
      onClick: _lodash["default"]
    }, "Confirm")],
    centerGroup: hasCenterGroup && [_react["default"].createElement(_index2["default"], {
      key: 0,
      currentPage: 2,
      totalPages: 10,
      goToPage: (0, _addonActions.action)("page changed")
    })]
  }));
};

ScrollContainer.propTypes = {
  children: _propTypes["default"].node,
  hasCenterGroup: _propTypes["default"].bool
};
var stories = (0, _react2.storiesOf)("Forms|DockedFooter", module);
stories.addDecorator(function (story) {
  return _react["default"].createElement("div", {
    className: "soft-quad--sides"
  }, story());
});
stories.add("With Less Content", function () {
  return _react["default"].createElement(ScrollContainer, null, _react["default"].createElement("h2", {
    className: "push-double--top"
  }, "Test"), _react["default"].createElement("p", null, "If the content doesn't overflow the container, the footer has no shadow"));
}).add("With More Content", function () {
  return _react["default"].createElement(ScrollContainer, null, _react["default"].createElement("div", null, _react["default"].createElement("h2", {
    className: "push-double--top"
  }, "Test"), _react["default"].createElement("p", null, "Usage of this DockedFooter component looks like:"), _react["default"].createElement(_index3["default"], {
    hasCopyButton: true,
    testSection: "my-code-box",
    type: "block",
    language: "js"
  }, "<DockedFooter \n\t" + "// Pass the node to the DockedFooter as a prop" + "\n\tscrollRef={ this.state.scrollable }" + "\n\ttestSection=`docked-footer-more-content` }" + "\n\tincludesMargin={ true }" + '\n\trightGroup={[ \n\t\t<Button style="plain" key={ 0 }' + "onClick={ noop }> \n\t\t\tCancel\n\t\t</Button>," + '\n\t\t<Button style="highlight" key={ 1 }' + "onClick={ noop }>\n\t\t\tConfirm" + "\n\t\t</Button>,\n\t ]} \n />"), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Keep scrolling..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Almost there..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content...")));
}).add("With Different Button Row Content", function () {
  return _react["default"].createElement(ScrollContainer, {
    hasCenterGroup: true
  }, _react["default"].createElement("div", null, _react["default"].createElement("h2", {
    className: "push-double--top"
  }, "Test"), _react["default"].createElement("p", null, "Usage of this DockedFooter component looks like:"), _react["default"].createElement(_index3["default"], {
    hasCopyButton: true,
    testSection: "my-code-box",
    type: "block",
    language: "js"
  }, "<DockedFooter \n\t" + "// Pass the node to the DockedFooter as a prop" + "\n\tscrollRef={ this.state.scrollable }" + "\n\ttestSection=`docked-footer-more-content` }" + "\n\tincludesMargin={ true }" + "\n\tcenterGroup={[ \n\t\t<PaginationControls" + "\n\t\t\tkey={ 0 }" + "\n\t\t\tcurrentPage={ 2 }" + "\n\t\t\ttotalPages={ 10 }" + "\n\t\t\tgoToPage={ noop }" + "\n\t\t/>" + "\n\t ]} \n />"), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content..."), _react["default"].createElement("p", null, "Test content...")));
});