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

Optimizely's Component Library.

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; }

import React, { useState } from "react";
import PropTypes from "prop-types";
import { storiesOf } from "@storybook/react";
import noop from "lodash.noop";
import { action } from "@storybook/addon-actions";
import DockedFooter from "./index.js";
import Button from "../Button";
import PaginationControls from "../PaginationControls/index.js";
import Code from "../Code/index.js";
/**
 * 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 = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      parentRef = _useState2[0],
      setParentRef = _useState2[1];

  return React.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.createElement(DockedFooter // 3.) Pass the parent ref to the DockedFooter as a prop
  , {
    scrollRef: parentRef,
    testSection: "docked-footer-more-content",
    includesMargin: true,
    rightGroup: !hasCenterGroup && [React.createElement(Button, {
      style: "plain",
      key: 0,
      onClick: noop
    }, "Cancel"), React.createElement(Button, {
      style: "highlight",
      key: 1,
      onClick: noop
    }, "Confirm")],
    centerGroup: hasCenterGroup && [React.createElement(PaginationControls, {
      key: 0,
      currentPage: 2,
      totalPages: 10,
      goToPage: action("page changed")
    })]
  }));
};

ScrollContainer.propTypes = {
  children: PropTypes.node,
  hasCenterGroup: PropTypes.bool
};
var stories = storiesOf("Forms|DockedFooter", module);
stories.addDecorator(function (story) {
  return React.createElement("div", {
    className: "soft-quad--sides"
  }, story());
});
stories.add("With Less Content", function () {
  return React.createElement(ScrollContainer, null, React.createElement("h2", {
    className: "push-double--top"
  }, "Test"), React.createElement("p", null, "If the content doesn't overflow the container, the footer has no shadow"));
}).add("With More Content", function () {
  return React.createElement(ScrollContainer, null, React.createElement("div", null, React.createElement("h2", {
    className: "push-double--top"
  }, "Test"), React.createElement("p", null, "Usage of this DockedFooter component looks like:"), React.createElement(Code, {
    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.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Keep scrolling..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Almost there..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content...")));
}).add("With Different Button Row Content", function () {
  return React.createElement(ScrollContainer, {
    hasCenterGroup: true
  }, React.createElement("div", null, React.createElement("h2", {
    className: "push-double--top"
  }, "Test"), React.createElement("p", null, "Usage of this DockedFooter component looks like:"), React.createElement(Code, {
    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.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content..."), React.createElement("p", null, "Test content...")));
});