@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Message/Message.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Message = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var Message = function Message(props) {
+  var children = props.children,
+      className = props.className,
+      from = props.from,
+      dateSent = props.dateSent,
+      replies = props.replies,
+      attachments = props.attachments,
+      detail = props.detail,
+      primaryAction = props.primaryAction,
+      isFromSprucebot = props.isFromSprucebot;
+
+  if (typeof from === 'undefined') {
+    return null;
+  }
+
+  var fromName = from.name,
+      fromImage = from.image,
+      fromAlt = from.alt;
+
+  var renderReply = function renderReply(reply) {
+    var type = reply.type,
+        children = reply.children;
+    var icon = null;
+    var iconClass = null;
+
+    if (type) {
+      switch (type) {
+        case 'success':
+          icon = 'complete';
+          iconClass = 'message__reply-icon-success';
+          break;
+
+        case 'warn':
+          icon = 'caution';
+          iconClass = 'message__reply-icon-warn';
+          break;
+
+        case 'critical':
+          icon = 'caution_solid';
+          iconClass = 'message__reply-icon-critical';
+          break;
+
+        default:
+          return null;
+      }
+    } else {
+      return null;
+    }
+
+    return _react["default"].createElement("p", {
+      className: "message__reply"
+    }, icon && _react["default"].createElement(_Icon["default"], {
+      icon: icon,
+      className: (0, _classnames["default"])('message__reply-icon', iconClass)
+    }), _react["default"].createElement("span", {
+      className: "message__reply-text"
+    }, children));
+  };
+
+  var renderAttachment = function renderAttachment(attachment) {
+    return _react["default"].createElement("div", {
+      className: "message__attachment"
+    }, attachment);
+  };
+
+  var renderImage = function renderImage(_ref) {
+    var image = _ref.image,
+        alt = _ref.alt,
+        isFromSprucebot = _ref.isFromSprucebot;
+
+    if (isFromSprucebot) {
+      return _react["default"].createElement("img", {
+        className: "message__from-image message__from-sprucebot-image",
+        src: image || null,
+        alt: alt || '',
+        width: "40",
+        height: "40"
+      });
+    }
+
+    return _react["default"].createElement(_Avatar["default"], {
+      image: image || '',
+      alt: alt || ''
+    });
+  };
+
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('message', className)
+  }, _react["default"].createElement("span", {
+    className: "message__pre"
+  }, fromImage ? renderImage({
+    image: fromImage,
+    alt: fromAlt || fromName || '',
+    isFromSprucebot: isFromSprucebot
+  }) : _react["default"].createElement("span", {
+    className: "message__original-timestamp"
+  }, ' ', dateSent.format('hh:mma'))), _react["default"].createElement("span", {
+    className: "message__main"
+  }, fromImage && _react["default"].createElement("p", {
+    className: "message__from-text"
+  }, fromName && _react["default"].createElement("span", {
+    className: "message__from-name"
+  }, fromName), dateSent && _react["default"].createElement("span", {
+    className: "message__original-timestamp"
+  }, ' ', dateSent.format('hh:mma'))), _react["default"].createElement("p", {
+    className: "message__body"
+  }, children), detail && _react["default"].createElement("p", {
+    className: "message__detail"
+  }, detail), primaryAction && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    className: "btn-small message__primary-action-btn"
+  }, primaryAction)), replies && replies.length > 0 && _react["default"].createElement("div", {
+    className: "message__replies"
+  }, replies.map(renderReply)), attachments && attachments.length > 0 && _react["default"].createElement("div", {
+    className: "message__attachments"
+  }, attachments.map(renderAttachment))));
+};
+
+exports.Message = Message;
+Message.defaultProps = {
+  isFromSprucebot: false
+};
+var _default = Message;
+exports["default"] = _default;
+//# sourceMappingURL=Message.js.map

package/lib/components/Message/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Message/Message.js"],"names":["Message","props","children","className","from","dateSent","replies","attachments","detail","primaryAction","isFromSprucebot","fromName","name","fromImage","image","fromAlt","alt","renderReply","reply","type","icon","iconClass","renderAttachment","attachment","renderImage","format","length","map","defaultProps"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport moment from 'moment-timezone'\nimport cx from 'classnames'\n\nimport Avatar from '../Avatar/Avatar'\nimport Button from '../Button/Button'\nimport Icon from '../Icon/Icon'\n\nimport type { Props as ButtonProps } from '../Button/Button'\n\ntype FromProps = {\n\t/** Unique id of the sender */\n\tid: string,\n\n\t/** Image associated with message sender */\n\timage?: string,\n\n\t/** Name associated with message sender */\n\tname?: string,\n\n\t/** Alt description with message sender */\n\talt?: string\n}\n\ntype MessageProps = {\n\t/** Message children. */\n\tchildren: Node,\n\n\t/** Information about the sender */\n\tfrom: FromProps,\n\n\t/** Date the message was sent */\n\tdateSent?: moment,\n\n\t/** Informative replies to the message */\n\treplies?: Array,\n\n\t/** Additional content related to the message */\n\tattachments?: Array,\n\n\t/** Gives additional context for the message */\n\tdetail?: string,\n\n\t/** An action related to this message */\n\tprimaryAction?: ButtonProps,\n\n\t/** Optional classname */\n\tclassName?: string,\n\n\t/** Set true if the message is from Sprucebot */\n\tisFromSprucebot?: boolean\n}\n\nexport const Message = (props: MessageProps) => {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tfrom,\n\t\tdateSent,\n\t\treplies,\n\t\tattachments,\n\t\tdetail,\n\t\tprimaryAction,\n\t\tisFromSprucebot\n\t} = props\n\n\tif (typeof from === 'undefined') {\n\t\treturn null\n\t}\n\n\tconst { name: fromName, image: fromImage, alt: fromAlt } = from\n\n\tconst renderReply = reply => {\n\t\tconst { type, children } = reply\n\t\tlet icon = null\n\t\tlet iconClass = null\n\n\t\tif (type) {\n\t\t\tswitch (type) {\n\t\t\t\tcase 'success':\n\t\t\t\t\ticon = 'complete'\n\t\t\t\t\ticonClass = 'message__reply-icon-success'\n\t\t\t\t\tbreak\n\t\t\t\tcase 'warn':\n\t\t\t\t\ticon = 'caution'\n\t\t\t\t\ticonClass = 'message__reply-icon-warn'\n\t\t\t\t\tbreak\n\t\t\t\tcase 'critical':\n\t\t\t\t\ticon = 'caution_solid'\n\t\t\t\t\ticonClass = 'message__reply-icon-critical'\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\treturn null\n\t\t\t}\n\t\t} else {\n\t\t\treturn null\n\t\t}\n\n\t\treturn (\n\t\t\t<p className=\"message__reply\">\n\t\t\t\t{icon && (\n\t\t\t\t\t<Icon icon={icon} className={cx('message__reply-icon', iconClass)} />\n\t\t\t\t)}\n\t\t\t\t<span className=\"message__reply-text\">{children}</span>\n\t\t\t</p>\n\t\t)\n\t}\n\n\tconst renderAttachment = attachment => {\n\t\treturn <div className=\"message__attachment\">{attachment}</div>\n\t}\n\n\tconst renderImage = ({ image, alt, isFromSprucebot }) => {\n\t\tif (isFromSprucebot) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName=\"message__from-image message__from-sprucebot-image\"\n\t\t\t\t\tsrc={image || null}\n\t\t\t\t\talt={alt || ''}\n\t\t\t\t\twidth=\"40\"\n\t\t\t\t\theight=\"40\"\n\t\t\t\t/>\n\t\t\t)\n\t\t}\n\t\treturn <Avatar image={image || ''} alt={alt || ''} />\n\t}\n\n\treturn (\n\t\t<div className={cx('message', className)}>\n\t\t\t<span className=\"message__pre\">\n\t\t\t\t{fromImage ? (\n\t\t\t\t\trenderImage({\n\t\t\t\t\t\timage: fromImage,\n\t\t\t\t\t\talt: fromAlt || fromName || '',\n\t\t\t\t\t\tisFromSprucebot\n\t\t\t\t\t})\n\t\t\t\t) : (\n\t\t\t\t\t<span className=\"message__original-timestamp\">\n\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t{dateSent.format('hh:mma')}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<span className=\"message__main\">\n\t\t\t\t{fromImage && (\n\t\t\t\t\t<p className=\"message__from-text\">\n\t\t\t\t\t\t{fromName && <span className=\"message__from-name\">{fromName}</span>}\n\t\t\t\t\t\t{dateSent && (\n\t\t\t\t\t\t\t<span className=\"message__original-timestamp\">\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{dateSent.format('hh:mma')}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t<p className=\"message__body\">{children}</p>\n\t\t\t\t{detail && <p className=\"message__detail\">{detail}</p>}\n\t\t\t\t{primaryAction && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"btn-small message__primary-action-btn\"\n\t\t\t\t\t\t{...primaryAction}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{replies && replies.length > 0 && (\n\t\t\t\t\t<div className=\"message__replies\">{replies.map(renderReply)}</div>\n\t\t\t\t)}\n\t\t\t\t{attachments && attachments.length > 0 && (\n\t\t\t\t\t<div className=\"message__attachments\">\n\t\t\t\t\t\t{attachments.map(renderAttachment)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n\nMessage.defaultProps = {\n\tisFromSprucebot: false\n}\n\nexport default Message\n"],"file":"Message.js"}

package/lib/components/Message/components/MessageBuilder.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Message = _interopRequireDefault(require("../Message"));
+
+var _Text = _interopRequireDefault(require("../../Text/Text"));
+
+var _TextStyle = _interopRequireDefault(require("../../TextStyle/TextStyle"));
+
+var _Button = _interopRequireDefault(require("../../Button/Button"));
+
+var _Image = _interopRequireDefault(require("../../Image/Image"));
+
+// COMPONENTS THAT CAN GO INTO THIS COMPONENT, KEEP MINIMAL
+var MessageBuilderKey = {
+  text: _Text["default"],
+  textStyle: _TextStyle["default"],
+  button: _Button["default"]
+};
+var MessageAttachmentKey = {
+  image: _Image["default"]
+};
+
+var renderMessageChild = function renderMessageChild(child) {
+  var Handler = child && child.type && MessageBuilderKey[child.type] || _react.Fragment;
+  return typeof Handler === 'function' ? Handler((0, _objectSpread2["default"])({}, child.props)) : _react["default"].createElement(Handler, child.props);
+};
+
+var renderAttachmentChild = function renderAttachmentChild(child) {
+  var Handler = child && child.type && MessageAttachmentKey[child.type] || _react.Fragment;
+  var className = (0, _classnames["default"])(child.props.className, {
+    'message__attachment-image': child.type === 'image'
+  });
+  return typeof Handler === 'function' ? Handler((0, _objectSpread2["default"])({
+    className: className
+  }, child.props)) : _react["default"].createElement(Handler, (0, _extends2["default"])({
+    className: className
+  }, child.props));
+};
+
+var TemplateEngine = function TemplateEngine() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var re = /{{([^}}]+)?}}/g,
+      children = [],
+      cursor = 0,
+      match;
+
+  var add = function add(line, js) {
+    if (line !== '') {
+      children.push({
+        props: {
+          element: 'span',
+          children: line.replace(/"/g, '\\"')
+        }
+      });
+    }
+
+    if (context[js]) {
+      children.push(context[js]);
+    }
+  };
+
+  while (match = re.exec(text)) {
+    add(text.slice(cursor, match.index), match[1]);
+    cursor = match.index + match[0].length;
+  }
+
+  add(text.substr(cursor, text.length - cursor));
+  return children.map(renderMessageChild);
+};
+
+var MessageBuilder = function MessageBuilder(props) {
+  var from = props.from,
+      dateSent = props.dateSent,
+      message = props.message,
+      detail = props.detail,
+      primaryAction = props.primaryAction,
+      replies = props.replies,
+      attachments = props.attachments,
+      isFromSprucebot = props.isFromSprucebot;
+
+  var _ref = message || {},
+      messageText = _ref.text,
+      messageContext = _ref.context;
+
+  var messageReplies = [];
+  var messageAttachments = [];
+
+  if (replies) {
+    messageReplies = replies.map(function (reply) {
+      return {
+        type: reply.type,
+        children: TemplateEngine(reply.text, reply.context)
+      };
+    });
+  }
+
+  if (attachments) {
+    messageAttachments = attachments.map(renderAttachmentChild);
+  }
+
+  return _react["default"].createElement(_Message["default"], {
+    from: from,
+    dateSent: dateSent,
+    detail: detail,
+    primaryAction: primaryAction,
+    replies: messageReplies,
+    attachments: messageAttachments,
+    isFromSprucebot: isFromSprucebot
+  }, messageText && messageContext && TemplateEngine(messageText, messageContext));
+};
+
+var _default = MessageBuilder;
+exports["default"] = _default;
+//# sourceMappingURL=MessageBuilder.js.map

package/lib/components/Message/components/MessageBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Message/components/MessageBuilder.js"],"names":["MessageBuilderKey","text","Text","textStyle","TextStyle","button","Button","MessageAttachmentKey","image","Image","renderMessageChild","child","Handler","type","Fragment","props","renderAttachmentChild","className","TemplateEngine","context","re","children","cursor","match","add","line","js","push","element","replace","exec","slice","index","length","substr","map","MessageBuilder","from","dateSent","message","detail","primaryAction","replies","attachments","isFromSprucebot","messageText","messageContext","messageReplies","messageAttachments","reply"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Fragment } from 'react'\n\nimport cx from 'classnames'\n\nimport Message from '../Message'\n\nimport type {} from '../Message'\nimport type { Props as ButtonProps } from '../../Button/Button'\n\n// COMPONENTS THAT CAN GO INTO THIS COMPONENT, KEEP MINIMAL\nimport Text from '../../Text/Text'\nimport TextStyle from '../../TextStyle/TextStyle'\nimport Button from '../../Button/Button'\nimport Image from '../../Image/Image'\n\ntype FromProps = {\n\t/** Unique id of the sender */\n\tid: string,\n\n\t/** Image associated with message sender */\n\timage?: string,\n\n\t/** Name associated with message sender */\n\tname?: string,\n\n\t/** Alt description with message sender */\n\talt?: string\n}\n\nexport type MessageBuilderProps = {\n\t/** Information about the sender */\n\tfrom: FromProps,\n\n\t/** Message body */\n\tdateSent?: Date,\n\n\t/** Message body */\n\tmessage?: Object,\n\n\t/** Detail string gives additional context about this message */\n\tdetail?: string,\n\n\t/** An action related to this message */\n\tprimaryAction?: ButtonProps,\n\n\t/** Contextual information and additional actions associated to the message */\n\treplies?: Array,\n\n\t/** Attachment content associated to the message */\n\tattachments?: Array,\n\n\t/** Set true if the message is from Sprucebot */\n\tisFromSprucebot?: boolean\n}\n\nconst MessageBuilderKey = {\n\ttext: Text,\n\ttextStyle: TextStyle,\n\tbutton: Button\n}\n\nconst MessageAttachmentKey = {\n\timage: Image\n}\n\nconst renderMessageChild = child => {\n\tconst Handler =\n\t\t(child && child.type && MessageBuilderKey[child.type]) || Fragment\n\treturn typeof Handler === 'function' ? (\n\t\tHandler({ ...child.props })\n\t) : (\n\t\t<Handler {...child.props} />\n\t)\n}\n\nconst renderAttachmentChild = child => {\n\tconst Handler =\n\t\t(child && child.type && MessageAttachmentKey[child.type]) || Fragment\n\tconst className = cx(child.props.className, {\n\t\t'message__attachment-image': child.type === 'image'\n\t})\n\treturn typeof Handler === 'function' ? (\n\t\tHandler({ className, ...child.props })\n\t) : (\n\t\t<Handler className={className} {...child.props} />\n\t)\n}\n\nconst TemplateEngine = (text = '', context = {}) => {\n\tlet re = /{{([^}}]+)?}}/g,\n\t\tchildren = [],\n\t\tcursor = 0,\n\t\tmatch\n\n\tlet add = function(line, js) {\n\t\tif (line !== '') {\n\t\t\tchildren.push({\n\t\t\t\tprops: { element: 'span', children: line.replace(/\"/g, '\\\\\"') }\n\t\t\t})\n\t\t}\n\t\tif (context[js]) {\n\t\t\tchildren.push(context[js])\n\t\t}\n\t}\n\twhile ((match = re.exec(text))) {\n\t\tadd(text.slice(cursor, match.index), match[1])\n\t\tcursor = match.index + match[0].length\n\t}\n\tadd(text.substr(cursor, text.length - cursor))\n\n\treturn children.map(renderMessageChild)\n}\n\nconst MessageBuilder = (props: MessageBuilderProps) => {\n\tconst {\n\t\tfrom,\n\t\tdateSent,\n\t\tmessage,\n\t\tdetail,\n\t\tprimaryAction,\n\t\treplies,\n\t\tattachments,\n\t\tisFromSprucebot\n\t} = props\n\n\tconst { text: messageText, context: messageContext } = message || {}\n\n\tlet messageReplies = []\n\tlet messageAttachments = []\n\n\tif (replies) {\n\t\tmessageReplies = replies.map(reply => {\n\t\t\treturn {\n\t\t\t\ttype: reply.type,\n\t\t\t\tchildren: TemplateEngine(reply.text, reply.context)\n\t\t\t}\n\t\t})\n\t}\n\n\tif (attachments) {\n\t\tmessageAttachments = attachments.map(renderAttachmentChild)\n\t}\n\n\treturn (\n\t\t<Message\n\t\t\tfrom={from}\n\t\t\tdateSent={dateSent}\n\t\t\tdetail={detail}\n\t\t\tprimaryAction={primaryAction}\n\t\t\treplies={messageReplies}\n\t\t\tattachments={messageAttachments}\n\t\t\tisFromSprucebot={isFromSprucebot}\n\t\t>\n\t\t\t{messageText &&\n\t\t\t\tmessageContext &&\n\t\t\t\tTemplateEngine(messageText, messageContext)}\n\t\t</Message>\n\t)\n}\n\nexport default MessageBuilder\n"],"file":"MessageBuilder.js"}

package/lib/components/Message/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Message["default"];
+  }
+});
+Object.defineProperty(exports, "MessageBuilder", {
+  enumerable: true,
+  get: function get() {
+    return _MessageBuilder2["default"];
+  }
+});
+
+var _Message = _interopRequireDefault(require("./Message"));
+
+var _MessageBuilder2 = _interopRequireDefault(require("./components/MessageBuilder"));
+//# sourceMappingURL=index.js.map

package/lib/components/Message/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"index.js"}

package/lib/components/Modal/Modal-story.js

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Autosuggest = _interopRequireDefault(require("../Forms/components/Autosuggest/Autosuggest"));
+
+var _Forms = require("../Forms");
+
+var _countries = _interopRequireDefault(require("../../../.storybook/data/countries"));
+
+var renderSuggestion = function renderSuggestion(suggestion) {
+  if (suggestion.isEmptyMessage) {
+    return _react["default"].createElement("div", {
+      className: "autosuggest__no-results"
+    }, _react["default"].createElement("p", {
+      className: "autosuggest__no-results-title"
+    }, "No matching countries found."), _react["default"].createElement("p", {
+      className: "autosuggest__no-results-subtitle"
+    }, "Please adjust your search and try again."));
+  }
+
+  return _react["default"].createElement(_Button["default"], {
+    isSmall: true,
+    className: "autosuggest__list-item-inner",
+    text: suggestion.text
+  });
+};
+
+var ModalExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ModalExample, _Component);
+
+  function ModalExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ModalExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ModalExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isOpen: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleVisibility", function () {
+      _this.setState(function (prevState) {
+        return {
+          isOpen: !prevState.isOpen
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAfterOpen", function () {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRequestClose", function () {
+      _this.setState({
+        isOpen: false
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ModalExample, [{
+    key: "render",
+    value: function render() {
+      var isOpen = this.state.isOpen;
+      var _this$props = this.props,
+          title = _this$props.title,
+          canGoBack = _this$props.canGoBack,
+          hasSecondaryButton = _this$props.hasSecondaryButton,
+          includeFooter = _this$props.includeFooter;
+      return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Button["default"], {
+        kind: "secondary",
+        text: "Give me modal",
+        onClick: this.toggleVisibility
+      }), _react["default"].createElement(_Modal["default"], {
+        isOpen: isOpen,
+        onAfterOpen: this.onAfterOpen,
+        onRequestClose: this.onRequestClose,
+        isSmall: (0, _react3["boolean"])('isSmall', true)
+      }, _react["default"].createElement(_Modal["default"].Header, {
+        title: title,
+        onRequestClose: this.onRequestClose,
+        handleGoBack: canGoBack ? function () {
+          return console.log('take me home');
+        } : null
+      }), _react["default"].createElement("form", null, _react["default"].createElement(_Modal["default"].Body, null, _react["default"].createElement(_Forms.FormLayout, null, _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+        label: "Category Name",
+        placeholder: "e.g. Barber"
+      })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+        label: "Teaser",
+        postLabel: "0/64",
+        placeholder: "Haircuts, shaves, and touch-ups.",
+        helper: "Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters."
+      })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextArea, {
+        label: "Description",
+        placeholder: "Optional category description\u2026",
+        helper: "Add a short teaser for your guests to see when they browse your services.",
+        rows: 3
+      })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.Checkbox, {
+        id: "hide-category",
+        label: "Hide this category",
+        postText: "It will still be visible to your teammates, but will be hidden from guests."
+      })))), includeFooter && _react["default"].createElement(_Modal["default"].Footer, {
+        primaryAction: {
+          text: 'Create Category',
+          onClick: function onClick() {
+            return console.log('Next');
+          },
+          type: 'submit'
+        },
+        secondaryAction: hasSecondaryButton && {
+          text: 'Cancel',
+          onClick: function onClick() {
+            return console.log('Cancel');
+          }
+        }
+      }))));
+    }
+  }]);
+  return ModalExample;
+}(_react.Component);
+
+var stories = (0, _react2.storiesOf)('Modal', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Modal', function () {
+  return _react["default"].createElement(ModalExample, {
+    title: (0, _react3.text)('title', 'New Service Category'),
+    canGoBack: (0, _react3["boolean"])('handleGoBack', false),
+    includeFooter: (0, _react3["boolean"])('Modal.Footer', true),
+    hasSecondaryButton: (0, _react3["boolean"])('secondaryAction', false)
+  });
+}).add('static', function () {
+  return _react["default"].createElement(_Modal["default"], {
+    isOpen: (0, _react3["boolean"])('isOpen', true),
+    onAfterOpen: function onAfterOpen() {
+      return console.log('onAfterOpen');
+    },
+    onRequestClose: function onRequestClose() {
+      return console.log('onRequestClose');
+    },
+    isSmall: (0, _react3["boolean"])('isSmall', true)
+  }, _react["default"].createElement(_Modal["default"].Header, {
+    title: (0, _react3.text)('title', 'New Service Category'),
+    onRequestClose: function onRequestClose() {
+      return console.log('onRequestClose');
+    },
+    handleGoBack: (0, _react3["boolean"])('canGoBack', false) ? function () {
+      return console.log('take me home');
+    } : null
+  }), _react["default"].createElement("form", null, _react["default"].createElement(_Modal["default"].Body, null, _react["default"].createElement(_Forms.FormLayout, null, _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+    label: "Category Name",
+    placeholder: "e.g. Barber"
+  })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+    label: "Teaser",
+    postLabel: "0/64",
+    placeholder: "Haircuts, shaves, and touch-ups.",
+    helper: "Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters."
+  })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextArea, {
+    label: "Description",
+    placeholder: "Optional category description\u2026",
+    helper: "Add a short teaser for your guests to see when they browse your services.",
+    rows: 3
+  })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Autosuggest["default"], {
+    label: 'Country',
+    placeholder: 'Select a country...',
+    defaultSuggestions: (0, _react3.object)('defaultSuggestions', _countries["default"]),
+    shouldRenderSuggestions: function shouldRenderSuggestions() {
+      return true;
+    },
+    renderSuggestion: renderSuggestion,
+    getSuggestionValue: function getSuggestionValue(value) {
+      return value.text;
+    },
+    getSuggestions: function getSuggestions(value) {
+      var results = _countries["default"].filter(function (suggestion) {
+        return suggestion.text.toLowerCase().slice(0, value.length) === value.toLowerCase();
+      }); // Here you could add click events to buttons or whatever else they need
+      // No Results Message
+
+
+      if (results.length === 0) {
+        return [{
+          text: 'NO RESULTS',
+          isEmptyMessage: true
+        }];
+      }
+
+      return results;
+    }
+  })), _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.Checkbox, {
+    id: "hide-category",
+    label: "Hide this category",
+    postText: "It will still be visible to your teammates, but will be hidden from guests."
+  })))), (0, _react3["boolean"])('includeFooter', true) && _react["default"].createElement(_Modal["default"].Footer, {
+    primaryAction: (0, _react3.object)('primaryAction', {
+      text: 'Create Category',
+      onClick: function onClick() {
+        return console.log('Next');
+      },
+      type: 'submit'
+    }),
+    secondaryAction: (0, _react3.object)('secondaryAction', {
+      text: 'Cancel',
+      onClick: function onClick() {
+        return console.log('Cancel');
+      }
+    })
+  })));
+});
+//# sourceMappingURL=Modal-story.js.map

package/lib/components/Modal/Modal-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Modal/Modal-story.js"],"names":["renderSuggestion","suggestion","isEmptyMessage","text","ModalExample","isOpen","setState","prevState","state","props","title","canGoBack","hasSecondaryButton","includeFooter","toggleVisibility","onAfterOpen","onRequestClose","console","log","onClick","type","Component","stories","module","addDecorator","withKnobs","add","countries","value","results","filter","toLowerCase","slice","length"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Fragment, Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean, object } from '@storybook/addon-knobs/react'\nimport Modal from './Modal'\nimport Button from '../Button/Button'\nimport Autosuggest from '../Forms/components/Autosuggest/Autosuggest'\nimport {\n\tCheckbox,\n\tTextInput,\n\tTextArea,\n\tFormLayout,\n\tFormLayoutItem\n} from '../Forms'\n\nimport countries from '../../../.storybook/data/countries'\n\nconst renderSuggestion = (suggestion: any) => {\n\tif (suggestion.isEmptyMessage) {\n\t\treturn (\n\t\t\t<div className=\"autosuggest__no-results\">\n\t\t\t\t<p className=\"autosuggest__no-results-title\">\n\t\t\t\t\tNo matching countries found.\n\t\t\t\t</p>\n\t\t\t\t<p className=\"autosuggest__no-results-subtitle\">\n\t\t\t\t\tPlease adjust your search and try again.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<Button\n\t\t\tisSmall\n\t\t\tclassName=\"autosuggest__list-item-inner\"\n\t\t\ttext={suggestion.text}\n\t\t/>\n\t)\n}\n\ntype Props = {\n\ttitle: string,\n\tcanGoBack: boolean,\n\thasSecondaryButton: boolean,\n\tincludeFooter: boolean\n}\ntype State = {\n\tisOpen: boolean\n}\n\nclass ModalExample extends Component<Props, State> {\n\tstate = {\n\t\tisOpen: false\n\t}\n\n\ttoggleVisibility = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tisOpen: !prevState.isOpen\n\t\t}))\n\t}\n\n\tonAfterOpen = () => {}\n\n\tonRequestClose = () => {\n\t\tthis.setState({\n\t\t\tisOpen: false\n\t\t})\n\t}\n\trender() {\n\t\tconst { isOpen } = this.state\n\t\tconst { title, canGoBack, hasSecondaryButton, includeFooter } = this.props\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<Button\n\t\t\t\t\tkind=\"secondary\"\n\t\t\t\t\ttext=\"Give me modal\"\n\t\t\t\t\tonClick={this.toggleVisibility}\n\t\t\t\t/>\n\t\t\t\t<Modal\n\t\t\t\t\tisOpen={isOpen}\n\t\t\t\t\tonAfterOpen={this.onAfterOpen}\n\t\t\t\t\tonRequestClose={this.onRequestClose}\n\t\t\t\t\tisSmall={boolean('isSmall', true)}\n\t\t\t\t>\n\t\t\t\t\t<Modal.Header\n\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\tonRequestClose={this.onRequestClose}\n\t\t\t\t\t\thandleGoBack={canGoBack ? () => console.log('take me home') : null}\n\t\t\t\t\t/>\n\t\t\t\t\t<form>\n\t\t\t\t\t\t<Modal.Body>\n\t\t\t\t\t\t\t<FormLayout>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<TextInput label=\"Category Name\" placeholder=\"e.g. Barber\" />\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\t\t\t\tlabel=\"Teaser\"\n\t\t\t\t\t\t\t\t\t\tpostLabel=\"0/64\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Haircuts, shaves, and touch-ups.\"\n\t\t\t\t\t\t\t\t\t\thelper=\"Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters.\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<TextArea\n\t\t\t\t\t\t\t\t\t\tlabel=\"Description\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Optional category description…\"\n\t\t\t\t\t\t\t\t\t\thelper=\"Add a short teaser for your guests to see when they browse your services.\"\n\t\t\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\t\t\tid=\"hide-category\"\n\t\t\t\t\t\t\t\t\t\tlabel=\"Hide this category\"\n\t\t\t\t\t\t\t\t\t\tpostText=\"It will still be visible to your teammates, but will be hidden from guests.\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t</FormLayout>\n\t\t\t\t\t\t</Modal.Body>\n\t\t\t\t\t\t{includeFooter && (\n\t\t\t\t\t\t\t<Modal.Footer\n\t\t\t\t\t\t\t\tprimaryAction={{\n\t\t\t\t\t\t\t\t\ttext: 'Create Category',\n\t\t\t\t\t\t\t\t\tonClick: () => console.log('Next'),\n\t\t\t\t\t\t\t\t\ttype: 'submit'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsecondaryAction={\n\t\t\t\t\t\t\t\t\thasSecondaryButton && {\n\t\t\t\t\t\t\t\t\t\ttext: 'Cancel',\n\t\t\t\t\t\t\t\t\t\tonClick: () => console.log('Cancel')\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t</Fragment>\n\t\t)\n\t}\n}\n\nconst stories = storiesOf('Modal', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Modal', () => (\n\t\t<ModalExample\n\t\t\ttitle={text('title', 'New Service Category')}\n\t\t\tcanGoBack={boolean('handleGoBack', false)}\n\t\t\tincludeFooter={boolean('Modal.Footer', true)}\n\t\t\thasSecondaryButton={boolean('secondaryAction', false)}\n\t\t/>\n\t))\n\t.add('static', () => (\n\t\t<Modal\n\t\t\tisOpen={boolean('isOpen', true)}\n\t\t\tonAfterOpen={() => console.log('onAfterOpen')}\n\t\t\tonRequestClose={() => console.log('onRequestClose')}\n\t\t\tisSmall={boolean('isSmall', true)}\n\t\t>\n\t\t\t<Modal.Header\n\t\t\t\ttitle={text('title', 'New Service Category')}\n\t\t\t\tonRequestClose={() => console.log('onRequestClose')}\n\t\t\t\thandleGoBack={\n\t\t\t\t\tboolean('canGoBack', false) ? () => console.log('take me home') : null\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<form>\n\t\t\t\t<Modal.Body>\n\t\t\t\t\t<FormLayout>\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<TextInput label=\"Category Name\" placeholder=\"e.g. Barber\" />\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\t\tlabel=\"Teaser\"\n\t\t\t\t\t\t\t\tpostLabel=\"0/64\"\n\t\t\t\t\t\t\t\tplaceholder=\"Haircuts, shaves, and touch-ups.\"\n\t\t\t\t\t\t\t\thelper=\"Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters.\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<TextArea\n\t\t\t\t\t\t\t\tlabel=\"Description\"\n\t\t\t\t\t\t\t\tplaceholder=\"Optional category description…\"\n\t\t\t\t\t\t\t\thelper=\"Add a short teaser for your guests to see when they browse your services.\"\n\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<Autosuggest\n\t\t\t\t\t\t\t\tlabel={'Country'}\n\t\t\t\t\t\t\t\tplaceholder={'Select a country...'}\n\t\t\t\t\t\t\t\tdefaultSuggestions={object('defaultSuggestions', countries)}\n\t\t\t\t\t\t\t\tshouldRenderSuggestions={() => true}\n\t\t\t\t\t\t\t\trenderSuggestion={renderSuggestion}\n\t\t\t\t\t\t\t\tgetSuggestionValue={value => value.text}\n\t\t\t\t\t\t\t\tgetSuggestions={value => {\n\t\t\t\t\t\t\t\t\tconst results = countries.filter(\n\t\t\t\t\t\t\t\t\t\tsuggestion =>\n\t\t\t\t\t\t\t\t\t\t\tsuggestion.text.toLowerCase().slice(0, value.length) ===\n\t\t\t\t\t\t\t\t\t\t\tvalue.toLowerCase()\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t// Here you could add click events to buttons or whatever else they need\n\t\t\t\t\t\t\t\t\t// No Results Message\n\t\t\t\t\t\t\t\t\tif (results.length === 0) {\n\t\t\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttext: 'NO RESULTS',\n\t\t\t\t\t\t\t\t\t\t\t\tisEmptyMessage: true\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn results\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\tid=\"hide-category\"\n\t\t\t\t\t\t\t\tlabel=\"Hide this category\"\n\t\t\t\t\t\t\t\tpostText=\"It will still be visible to your teammates, but will be hidden from guests.\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t</FormLayout>\n\t\t\t\t</Modal.Body>\n\t\t\t\t{boolean('includeFooter', true) && (\n\t\t\t\t\t<Modal.Footer\n\t\t\t\t\t\tprimaryAction={object('primaryAction', {\n\t\t\t\t\t\t\ttext: 'Create Category',\n\t\t\t\t\t\t\tonClick: () => console.log('Next'),\n\t\t\t\t\t\t\ttype: 'submit'\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tsecondaryAction={object('secondaryAction', {\n\t\t\t\t\t\t\ttext: 'Cancel',\n\t\t\t\t\t\t\tonClick: () => console.log('Cancel')\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</form>\n\t\t</Modal>\n\t))\n"],"file":"Modal-story.js"}