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

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _TextContainer = _interopRequireDefault(require("./TextContainer"));
+
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+
+var _Subheading = _interopRequireDefault(require("../Subheading/Subheading"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var stories = (0, _react2.storiesOf)('Text Container', module);
+var spacingOptions = {
+  Base: null,
+  Tight: 'tight',
+  Loose: 'loose'
+};
+stories.addDecorator(_react3.withKnobs);
+stories.add('Text Container', function () {
+  return _react["default"].createElement(_TextContainer["default"], {
+    spacing: (0, _react3.select)('spacing', spacingOptions, spacingOptions.Base),
+    isCentered: (0, _react3["boolean"])('isCentered', false)
+  }, _react["default"].createElement(_Heading["default"], null, "Do you like roller coasters?"), _react["default"].createElement(_Subheading["default"], null, "If you could time travel, what would you do?"), _react["default"].createElement(_Text["default"], null, "Swimming hundreds of feet beneath the ocean\u2019s surface in many parts of the world are prolific architects called giant larvaceans."), _react["default"].createElement(_Text["default"], null, "These zooplankton are not particularly giant themselves (they resemble tadpoles and are about the size of a pinkie finger), but every day."), _react["default"].createElement(_Subheading["default"], null, "How many pairs of shoes do you own?"), _react["default"].createElement(_Text["default"], null, "Swimming hundreds of feet beneath the ocean\u2019s surface in many parts of the world are prolific architects called giant larvaceans."), _react["default"].createElement(_Text["default"], null, "These zooplankton are not particularly giant themselves (they resemble tadpoles and are about the size of a pinkie finger), but every day."));
+});
+//# sourceMappingURL=TextContainer-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TextContainer/TextContainer-story.js"],"names":["stories","module","spacingOptions","Base","Tight","Loose","addDecorator","withKnobs","add"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG,uBAAU,gBAAV,EAA4BC,MAA5B,CAAhB;AAEA,IAAMC,cAAc,GAAG;AACtBC,EAAAA,IAAI,EAAE,IADgB;AAEtBC,EAAAA,KAAK,EAAE,OAFe;AAGtBC,EAAAA,KAAK,EAAE;AAHe,CAAvB;AAMAL,OAAO,CAACM,YAAR,CAAqBC,iBAArB;AAEAP,OAAO,CAACQ,GAAR,CAAY,gBAAZ,EAA8B;AAAA,SAC7B,gCAAC,yBAAD;AACC,IAAA,OAAO,EAAE,oBAAO,SAAP,EAAkBN,cAAlB,EAAkCA,cAAc,CAACC,IAAjD,CADV;AAEC,IAAA,UAAU,EAAE,wBAAQ,YAAR,EAAsB,KAAtB;AAFb,KAIC,gCAAC,mBAAD,uCAJD,EAKC,gCAAC,sBAAD,uDALD,EAMC,gCAAC,gBAAD,iJAND,EAUC,gCAAC,gBAAD,qJAVD,EAcC,gCAAC,sBAAD,8CAdD,EAeC,gCAAC,gBAAD,iJAfD,EAmBC,gCAAC,gBAAD,qJAnBD,CAD6B;AAAA,CAA9B","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean, select } from '@storybook/addon-knobs/react'\nimport TextContainer from './TextContainer'\nimport Heading from '../Heading/Heading'\nimport Subheading from '../Subheading/Subheading'\nimport Text from '../Text/Text'\n\nconst stories = storiesOf('Text Container', module)\n\nconst spacingOptions = {\n\tBase: null,\n\tTight: 'tight',\n\tLoose: 'loose'\n}\n\nstories.addDecorator(withKnobs)\n\nstories.add('Text Container', () => (\n\t<TextContainer\n\t\tspacing={select('spacing', spacingOptions, spacingOptions.Base)}\n\t\tisCentered={boolean('isCentered', false)}\n\t>\n\t\t<Heading>Do you like roller coasters?</Heading>\n\t\t<Subheading>If you could time travel, what would you do?</Subheading>\n\t\t<Text>\n\t\t\tSwimming hundreds of feet beneath the ocean’s surface in many parts of the\n\t\t\tworld are prolific architects called giant larvaceans.\n\t\t</Text>\n\t\t<Text>\n\t\t\tThese zooplankton are not particularly giant themselves (they resemble\n\t\t\ttadpoles and are about the size of a pinkie finger), but every day.\n\t\t</Text>\n\t\t<Subheading>How many pairs of shoes do you own?</Subheading>\n\t\t<Text>\n\t\t\tSwimming hundreds of feet beneath the ocean’s surface in many parts of the\n\t\t\tworld are prolific architects called giant larvaceans.\n\t\t</Text>\n\t\t<Text>\n\t\t\tThese zooplankton are not particularly giant themselves (they resemble\n\t\t\ttadpoles and are about the size of a pinkie finger), but every day.\n\t\t</Text>\n\t</TextContainer>\n))\n"],"file":"TextContainer-story.js"}

package/lib/components/TextContainer/TextContainer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var TextContainer = function TextContainer(props) {
+  var children = props.children,
+      className = props.className,
+      spacing = props.spacing,
+      isCentered = props.isCentered;
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('text-container', className, {
+      'text-container--centered': isCentered,
+      'text-container--spacing-tight': spacing === 'tight',
+      'text-container--spacing-loose': spacing === 'loose'
+    })
+  }, children);
+};
+
+TextContainer.defaultProps = {
+  isCentered: false
+};
+var _default = TextContainer;
+exports["default"] = _default;
+//# sourceMappingURL=TextContainer.js.map

package/lib/components/TextContainer/TextContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TextContainer/TextContainer.js"],"names":["TextContainer","props","children","className","spacing","isCentered","defaultProps"],"mappings":";;;;;;;;;AACA;;AACA;;AAkBA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAAA,MAC5CC,QAD4C,GACCD,KADD,CAC5CC,QAD4C;AAAA,MAClCC,SADkC,GACCF,KADD,CAClCE,SADkC;AAAA,MACvBC,OADuB,GACCH,KADD,CACvBG,OADuB;AAAA,MACdC,UADc,GACCJ,KADD,CACdI,UADc;AAGpD,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,gBAAH,EAAqBF,SAArB,EAAgC;AAC1C,kCAA4BE,UADc;AAE1C,uCAAiCD,OAAO,KAAK,OAFH;AAG1C,uCAAiCA,OAAO,KAAK;AAHH,KAAhC;AADZ,KAOEF,QAPF,CADD;AAWA,CAdD;;AAgBAF,aAAa,CAACM,YAAd,GAA6B;AAC5BD,EAAAA,UAAU,EAAE;AADgB,CAA7B;eAIeL,a","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\n\nimport type { Node } from 'react'\n\nexport type TextContainerProps = {\n\t/** Contents of the component. */\n\tchildren: Node,\n\n\t/** Class name for the component */\n\tclassName?: string,\n\n\t/** Vertical spacing of the child components */\n\tspacing?: 'tight' | 'loose',\n\n\t/** Whether the children of the text container are centered */\n\tisCentered?: boolean\n}\n\nconst TextContainer = (props: TextContainerProps) => {\n\tconst { children, className, spacing, isCentered } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('text-container', className, {\n\t\t\t\t'text-container--centered': isCentered,\n\t\t\t\t'text-container--spacing-tight': spacing === 'tight',\n\t\t\t\t'text-container--spacing-loose': spacing === 'loose'\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nTextContainer.defaultProps = {\n\tisCentered: false\n}\n\nexport default TextContainer\n"],"file":"TextContainer.js"}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _TextStyle = _interopRequireDefault(require("./TextStyle"));
+
+var stories = (0, _react2.storiesOf)('TextStyle', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Text Style - Strong', function () {
+  return _react["default"].createElement(_TextStyle["default"], {
+    type: "strong"
+  }, (0, _react3.text)('children', 'Hello, world'));
+}).add('Text Style - Emphasis', function () {
+  return _react["default"].createElement(_TextStyle["default"], {
+    type: "emphasis"
+  }, (0, _react3.text)('children', 'Hello, world'));
+}).add('Text Style - Subdued', function () {
+  return _react["default"].createElement(_TextStyle["default"], {
+    type: "subdued"
+  }, (0, _react3.text)('children', 'Hello, world'));
+});
+//# sourceMappingURL=TextStyle-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TextStyle/TextStyle-story.js"],"names":["stories","module","addDecorator","withKnobs","add"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA,IAAMA,OAAO,GAAG,uBAAU,WAAV,EAAuBC,MAAvB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CACLI,GADF,CACM,qBADN,EAC6B;AAAA,SAC3B,gCAAC,qBAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,KAA0B,kBAAK,UAAL,EAAiB,cAAjB,CAA1B,CAD2B;AAAA,CAD7B,EAIEA,GAJF,CAIM,uBAJN,EAI+B;AAAA,SAC7B,gCAAC,qBAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,KAA4B,kBAAK,UAAL,EAAiB,cAAjB,CAA5B,CAD6B;AAAA,CAJ/B,EAOEA,GAPF,CAOM,sBAPN,EAO8B;AAAA,SAC5B,gCAAC,qBAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,KAA2B,kBAAK,UAAL,EAAiB,cAAjB,CAA3B,CAD4B;AAAA,CAP9B","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text } from '@storybook/addon-knobs/react'\nimport TextStyle from './TextStyle'\nconst stories = storiesOf('TextStyle', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Text Style - Strong', () => (\n\t\t<TextStyle type=\"strong\">{text('children', 'Hello, world')}</TextStyle>\n\t))\n\t.add('Text Style - Emphasis', () => (\n\t\t<TextStyle type=\"emphasis\">{text('children', 'Hello, world')}</TextStyle>\n\t))\n\t.add('Text Style - Subdued', () => (\n\t\t<TextStyle type=\"subdued\">{text('children', 'Hello, world')}</TextStyle>\n\t))\n"],"file":"TextStyle-story.js"}

package/lib/components/TextStyle/TextStyle.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var TextStyle = function TextStyle(props) {
+  var children = props.children,
+      className = props.className,
+      type = props.type;
+  var Element = type === 'strong' ? 'strong' : 'span';
+  var classes = (0, _classnames["default"])(className, {
+    'text__style--strong': type === 'strong',
+    'text__style--emphasis': type === 'emphasis',
+    'text__style--subdued': type === 'subdued'
+  });
+
+  if (typeof children === 'string') {
+    return _react["default"].createElement(Element, {
+      className: classes,
+      dangerouslySetInnerHTML: {
+        __html: children
+      }
+    });
+  }
+
+  return _react["default"].createElement(Element, {
+    className: classes
+  }, children);
+};
+
+var _default = TextStyle;
+exports["default"] = _default;
+//# sourceMappingURL=TextStyle.js.map

package/lib/components/TextStyle/TextStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TextStyle/TextStyle.js"],"names":["TextStyle","props","children","className","type","Element","classes","__html"],"mappings":";;;;;;;;;AACA;;AACA;;AAaA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAA2B;AAAA,MACpCC,QADoC,GACND,KADM,CACpCC,QADoC;AAAA,MAC1BC,SAD0B,GACNF,KADM,CAC1BE,SAD0B;AAAA,MACfC,IADe,GACNH,KADM,CACfG,IADe;AAE5C,MAAMC,OAAO,GAAGD,IAAI,KAAK,QAAT,GAAoB,QAApB,GAA+B,MAA/C;AACA,MAAME,OAAO,GAAG,4BAAGH,SAAH,EAAc;AAC7B,2BAAuBC,IAAI,KAAK,QADH;AAE7B,6BAAyBA,IAAI,KAAK,UAFL;AAG7B,4BAAwBA,IAAI,KAAK;AAHJ,GAAd,CAAhB;;AAKA,MAAI,OAAOF,QAAP,KAAoB,QAAxB,EAAkC;AACjC,WACC,gCAAC,OAAD;AACC,MAAA,SAAS,EAAEI,OADZ;AAEC,MAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEL;AAAV;AAF1B,MADD;AAMA;;AACD,SAAO,gCAAC,OAAD;AAAS,IAAA,SAAS,EAAEI;AAApB,KAA8BJ,QAA9B,CAAP;AACA,CAjBD;;eAmBeF,S","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\n\nexport type TextStyleProps = {\n\t/** Contents of the component. */\n\tchildren: Node,\n\n\t/** Class name for the component */\n\tclassName?: string,\n\n\t/** Style type */\n\ttype?: 'strong' | 'emphasis' | 'subdued'\n}\n\nconst TextStyle = (props: TextStyleProps) => {\n\tconst { children, className, type } = props\n\tconst Element = type === 'strong' ? 'strong' : 'span'\n\tconst classes = cx(className, {\n\t\t'text__style--strong': type === 'strong',\n\t\t'text__style--emphasis': type === 'emphasis',\n\t\t'text__style--subdued': type === 'subdued'\n\t})\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Element\n\t\t\t\tclassName={classes}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: children }}\n\t\t\t/>\n\t\t)\n\t}\n\treturn <Element className={classes}>{children}</Element>\n}\n\nexport default TextStyle\n"],"file":"TextStyle.js"}

package/lib/components/Toast/Toast-story.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toast-story.d.ts.map

package/lib/components/Toast/Toast-story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast-story.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast-story.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _addonKnobs = require("@storybook/addon-knobs");
+
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
+
+var _Toast = _interopRequireDefault(require("./Toast"));
+
+var _ToastWrapper = _interopRequireDefault(require("./components/ToastWrapper/ToastWrapper"));
+
+var _Button = require("../Button/Button");
+
+var stories = (0, _react2.storiesOf)('Toast', module);
+
+var Toaster =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Toaster, _Component);
+
+  function Toaster() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Toaster);
+
+    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"])(Toaster)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      toasts: []
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addToast", function (kind) {
+      var showFollowup = _this.props.showFollowup;
+      var ids = {
+        neutral: '1',
+        positive: '2',
+        negative: '3',
+        warn: '4',
+        info: '5'
+      };
+      var headlines = {
+        neutral: 'Neat',
+        positive: 'Great!',
+        negative: 'Oh No!',
+        warn: 'Uh-oh',
+        info: 'Did you know?'
+      };
+      var texts = {
+        neutral: 'Something just happened and it was fine.',
+        positive: 'You did something amazing. Congrats!',
+        negative: 'Run away! This is awful.',
+        warn: 'Something is not quite right',
+        info: 'Penguins cannot fly'
+      };
+      var timeouts = {
+        neutral: 'never',
+        positive: 10000,
+        negative: 3000,
+        warn: 'never',
+        info: 2000
+      };
+
+      _this.setState(function (prevState) {
+        var newToasts = (0, _toConsumableArray2["default"])(prevState.toasts);
+        newToasts.push({
+          headline: headlines[kind],
+          text: texts[kind],
+          kind: kind,
+          id: ids[kind],
+          followupAction: showFollowup ? function () {
+            return console.log('Undo');
+          } : null,
+          timeout: timeouts[kind]
+        });
+        return {
+          toasts: newToasts
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeToast", function () {
+      _this.setState(function (prevState) {
+        var toasts = (0, _toConsumableArray2["default"])(prevState.toasts);
+        return {
+          toasts: toasts
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Toaster, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var toasts = this.state.toasts;
+      return _react["default"].createElement("div", null, _react["default"].createElement(_ButtonGroup["default"], {
+        actions: [{
+          text: 'Add Toast',
+          onClick: function onClick() {
+            return _this2.addToast('neutral');
+          }
+        }, {
+          text: 'Add Happy Toast',
+          onClick: function onClick() {
+            return _this2.addToast('positive');
+          }
+        }, {
+          text: 'Add Sad Toast',
+          onClick: function onClick() {
+            return _this2.addToast('negative');
+          }
+        }, {
+          kind: _Button.ButtonKinds.Secondary,
+          text: 'Add Warning Toast',
+          onClick: function onClick() {
+            return _this2.addToast('warn');
+          }
+        }, {
+          kind: _Button.ButtonKinds.Secondary,
+          text: 'Add Info Toast',
+          onClick: function onClick() {
+            return _this2.addToast('info');
+          }
+        }]
+      }), _react["default"].createElement(_ToastWrapper["default"], {
+        toasts: toasts,
+        handleRemove: this.removeToast
+      }));
+    }
+  }]);
+  return Toaster;
+}(_react.Component);
+
+var toastKinds = ['neutral', 'positive', 'negative', 'warn', 'info'];
+stories.addDecorator(_addonKnobs.withKnobs);
+stories.add('Toast', function () {
+  return _react["default"].createElement(_Toast["default"], {
+    id: "toast",
+    kind: (0, _addonKnobs.select)('kind', ['neutral', 'positive', 'negative', 'warn', 'info'], 'neutral'),
+    headline: (0, _addonKnobs.text)('headline', 'Neat'),
+    text: (0, _addonKnobs.text)('text', 'Something just happened and it was fine.'),
+    onRemove: function onRemove() {
+      return null;
+    },
+    onAction: function onAction() {
+      return null;
+    },
+    followupText: (0, _addonKnobs["boolean"])('followupAction', false) ? 'Undo' : undefined
+  });
+}).add('All Kinds', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      padding: '1rem'
+    }
+  }, toastKinds.map(function (kind) {
+    return _react["default"].createElement("div", {
+      key: kind,
+      style: {
+        padding: '1rem'
+      }
+    }, _react["default"].createElement(_Toast["default"], {
+      id: "toast",
+      kind: kind.toString(),
+      headline: (0, _addonKnobs.text)('headline', 'Neat') + ' ' + kind + ' toast',
+      text: (0, _addonKnobs.text)('text', 'Something just happened and it was fine.'),
+      onRemove: function onRemove() {
+        return null;
+      },
+      onAction: function onAction() {
+        return null;
+      },
+      followupText: (0, _addonKnobs["boolean"])('followupAction', false) ? 'Undo' : undefined
+    }));
+  }));
+}).add('Toaster', function () {
+  return _react["default"].createElement(Toaster, {
+    headline: (0, _addonKnobs.text)('headline', 'Neat'),
+    text: (0, _addonKnobs.text)('text', 'Something just happened and it was fine.'),
+    showFollowup: (0, _addonKnobs["boolean"])('showFollowup', false)
+  });
+});
+//# sourceMappingURL=Toast-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Toast/Toast-story.tsx"],"names":["stories","module","Toaster","toasts","kind","showFollowup","props","ids","neutral","positive","negative","warn","info","headlines","texts","timeouts","setState","prevState","newToasts","push","headline","text","id","followupAction","console","log","timeout","state","onClick","addToast","ButtonKinds","Secondary","removeToast","Component","toastKinds","addDecorator","withKnobs","add","undefined","padding","map","toString"],"mappings":"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","sourcesContent":["import React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean, select } from '@storybook/addon-knobs'\nimport ButtonGroup from '../ButtonGroup/ButtonGroup'\nimport Toast from './Toast'\nimport ToastWrapper from './components/ToastWrapper/ToastWrapper'\nimport { ButtonKinds } from '../Button/Button'\n\nconst stories = storiesOf('Toast', module)\n\ninterface IToasterProps {\n\tshowFollowup: boolean\n\theadline: string\n\ttext: string\n}\n\ninterface IToasterState {\n\ttoasts: any[]\n}\n\nclass Toaster extends Component<IToasterProps, IToasterState> {\n\tpublic state = {\n\t\ttoasts: []\n\t}\n\n\tpublic addToast = (\n\t\tkind: 'neutral' | 'positive' | 'negative' | 'warn' | 'info'\n\t) => {\n\t\tconst { showFollowup } = this.props\n\t\tconst ids = {\n\t\t\tneutral: '1',\n\t\t\tpositive: '2',\n\t\t\tnegative: '3',\n\t\t\twarn: '4',\n\t\t\tinfo: '5'\n\t\t}\n\t\tconst headlines = {\n\t\t\tneutral: 'Neat',\n\t\t\tpositive: 'Great!',\n\t\t\tnegative: 'Oh No!',\n\t\t\twarn: 'Uh-oh',\n\t\t\tinfo: 'Did you know?'\n\t\t}\n\t\tconst texts = {\n\t\t\tneutral: 'Something just happened and it was fine.',\n\t\t\tpositive: 'You did something amazing. Congrats!',\n\t\t\tnegative: 'Run away! This is awful.',\n\t\t\twarn: 'Something is not quite right',\n\t\t\tinfo: 'Penguins cannot fly'\n\t\t}\n\t\tconst timeouts = {\n\t\t\tneutral: 'never',\n\t\t\tpositive: 10000,\n\t\t\tnegative: 3000,\n\t\t\twarn: 'never',\n\t\t\tinfo: 2000\n\t\t}\n\t\tthis.setState(prevState => {\n\t\t\tconst newToasts = [...prevState.toasts]\n\t\t\tnewToasts.push({\n\t\t\t\theadline: headlines[kind],\n\t\t\t\ttext: texts[kind],\n\t\t\t\tkind,\n\t\t\t\tid: ids[kind],\n\t\t\t\tfollowupAction: showFollowup ? () => console.log('Undo') : null,\n\t\t\t\ttimeout: timeouts[kind]\n\t\t\t})\n\t\t\treturn {\n\t\t\t\ttoasts: newToasts\n\t\t\t}\n\t\t})\n\t}\n\n\t// TODO: Hook up this functionality\n\tpublic removeToast = () => {\n\t\tthis.setState(prevState => {\n\t\t\tconst toasts = [...prevState.toasts]\n\t\t\treturn {\n\t\t\t\ttoasts\n\t\t\t}\n\t\t})\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst { toasts } = this.state\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tactions={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'Add Toast',\n\t\t\t\t\t\t\tonClick: () => this.addToast('neutral')\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'Add Happy Toast',\n\t\t\t\t\t\t\tonClick: () => this.addToast('positive')\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'Add Sad Toast',\n\t\t\t\t\t\t\tonClick: () => this.addToast('negative')\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkind: ButtonKinds.Secondary,\n\t\t\t\t\t\t\ttext: 'Add Warning Toast',\n\t\t\t\t\t\t\tonClick: () => this.addToast('warn')\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkind: ButtonKinds.Secondary,\n\t\t\t\t\t\t\ttext: 'Add Info Toast',\n\t\t\t\t\t\t\tonClick: () => this.addToast('info')\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<ToastWrapper toasts={toasts} handleRemove={this.removeToast} />\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nconst toastKinds = ['neutral', 'positive', 'negative', 'warn', 'info']\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Toast', () => (\n\t\t<Toast\n\t\t\tid=\"toast\"\n\t\t\tkind={select(\n\t\t\t\t'kind',\n\t\t\t\t['neutral', 'positive', 'negative', 'warn', 'info'],\n\t\t\t\t'neutral'\n\t\t\t)}\n\t\t\theadline={text('headline', 'Neat')}\n\t\t\ttext={text('text', 'Something just happened and it was fine.')}\n\t\t\tonRemove={() => null}\n\t\t\tonAction={() => null}\n\t\t\tfollowupText={boolean('followupAction', false) ? 'Undo' : undefined}\n\t\t/>\n\t))\n\t.add('All Kinds', () => (\n\t\t<div style={{ padding: '1rem' }}>\n\t\t\t{toastKinds.map(kind => (\n\t\t\t\t<div key={kind} style={{ padding: '1rem' }}>\n\t\t\t\t\t<Toast\n\t\t\t\t\t\tid=\"toast\"\n\t\t\t\t\t\tkind={kind.toString()}\n\t\t\t\t\t\theadline={text('headline', 'Neat') + ' ' + kind + ' toast'}\n\t\t\t\t\t\ttext={text('text', 'Something just happened and it was fine.')}\n\t\t\t\t\t\tonRemove={() => null}\n\t\t\t\t\t\tonAction={() => null}\n\t\t\t\t\t\tfollowupText={boolean('followupAction', false) ? 'Undo' : undefined}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t))\n\t.add('Toaster', () => (\n\t\t<Toaster\n\t\t\theadline={text('headline', 'Neat')}\n\t\t\ttext={text('text', 'Something just happened and it was fine.')}\n\t\t\tshowFollowup={boolean('showFollowup', false)}\n\t\t/>\n\t))\n"],"file":"Toast-story.js"}

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IHWToast, IHWAction } from '@sprucelabs/spruce-types';
+export interface IToastProps extends Omit<IHWToast, 'id'> {
+    /** Unique ID for the toast */
+    id: string | number;
+    /** Handle toast removal */
+    onRemove?: Function;
+    /** override how long before the toast goes away, in milis */
+    timeout?: number | 'never';
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+declare const Toast: {
+    (props: IHWToast | IToastProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    defaultProps: {
+        kind: string;
+        followupAction: null;
+        followupText: string;
+        text: string;
+        canRemove: boolean;
+    };
+};
+export default Toast;
+//# sourceMappingURL=Toast.d.ts.map

package/lib/components/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AA4B9D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxD,8BAA8B;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IAEnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,QAAA,MAAM,KAAK;;;;;;;;;CAwCV,CAAA;AAUD,eAAe,KAAK,CAAA"}

package/lib/components/Toast/Toast.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var ToastHeader = function ToastHeader(props) {
+  var headline = props.headline,
+      onRemove = props.onRemove,
+      canRemove = props.canRemove;
+  return _react["default"].createElement("div", {
+    className: "toast__header"
+  }, _react["default"].createElement("p", null, headline), canRemove && onRemove && _react["default"].createElement(_Button["default"], {
+    icon: {
+      name: 'close'
+    },
+    onClick: onRemove
+  }));
+};
+
+var Toast = function Toast(props) {
+  var commonProps = props;
+  var reactHeartwoodProps = props;
+  var headline = commonProps.headline,
+      kind = commonProps.kind,
+      text = commonProps.text,
+      followupAction = commonProps.followupAction,
+      followupText = commonProps.followupText,
+      removeAction = commonProps.removeAction;
+  var canRemove = reactHeartwoodProps.canRemove,
+      _onAction = reactHeartwoodProps.onAction,
+      _onRemove = reactHeartwoodProps.onRemove;
+  var toastClass = (0, _classnames["default"])('toast', {
+    'toast-positive': kind === 'positive',
+    'toast-negative': kind === 'negative',
+    'toast-warn': kind === 'warn',
+    'toast-info': kind === 'info'
+  });
+  return _react["default"].createElement("div", {
+    className: toastClass
+  }, _react["default"].createElement(ToastHeader, {
+    headline: headline,
+    onRemove: function onRemove() {
+      removeAction && _onAction && _onAction(removeAction);
+      _onRemove && _onRemove();
+    },
+    canRemove: canRemove || false
+  }), text && _react["default"].createElement("div", {
+    className: "toast__body"
+  }, _react["default"].createElement("p", null, text)), followupAction && _onAction && _react["default"].createElement(_Button["default"], {
+    text: followupText,
+    onAction: function onAction() {
+      return _onAction(followupAction);
+    }
+  }));
+};
+
+Toast.defaultProps = {
+  kind: 'neutral',
+  followupAction: null,
+  followupText: 'Undo',
+  text: '',
+  canRemove: true
+};
+var _default = Toast;
+exports["default"] = _default;
+//# sourceMappingURL=Toast.js.map

package/lib/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Toast/Toast.tsx"],"names":["ToastHeader","props","headline","onRemove","canRemove","name","Toast","commonProps","reactHeartwoodProps","kind","text","followupAction","followupText","removeAction","onAction","toastClass","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAiBA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkD;AAAA,MAC7DC,QAD6D,GAC3BD,KAD2B,CAC7DC,QAD6D;AAAA,MACnDC,QADmD,GAC3BF,KAD2B,CACnDE,QADmD;AAAA,MACzCC,SADyC,GAC3BH,KAD2B,CACzCG,SADyC;AAErE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,2CAAIF,QAAJ,CADD,EAEEE,SAAS,IAAID,QAAb,IACA,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAE;AAAEE,MAAAA,IAAI,EAAE;AAAR,KAAd;AAAiC,IAAA,OAAO,EAAEF;AAA1C,IAHF,CADD;AAQA,CAVD;;AA0BA,IAAMG,KAAK,GAAG,SAARA,KAAQ,CAACL,KAAD,EAAuD;AACpE,MAAMM,WAAW,GAAGN,KAApB;AACA,MAAMO,mBAAmB,GAAGP,KAA5B;AAFoE,MAKnEC,QALmE,GAWhEK,WAXgE,CAKnEL,QALmE;AAAA,MAMnEO,IANmE,GAWhEF,WAXgE,CAMnEE,IANmE;AAAA,MAOnEC,IAPmE,GAWhEH,WAXgE,CAOnEG,IAPmE;AAAA,MAQnEC,cARmE,GAWhEJ,WAXgE,CAQnEI,cARmE;AAAA,MASnEC,YATmE,GAWhEL,WAXgE,CASnEK,YATmE;AAAA,MAUnEC,YAVmE,GAWhEN,WAXgE,CAUnEM,YAVmE;AAAA,MAY5DT,SAZ4D,GAY1BI,mBAZ0B,CAY5DJ,SAZ4D;AAAA,MAYjDU,SAZiD,GAY1BN,mBAZ0B,CAYjDM,QAZiD;AAAA,MAYvCX,SAZuC,GAY1BK,mBAZ0B,CAYvCL,QAZuC;AAcpE,MAAMY,UAAU,GAAG,4BAAG,OAAH,EAAY;AAC9B,sBAAkBN,IAAI,KAAK,UADG;AAE9B,sBAAkBA,IAAI,KAAK,UAFG;AAG9B,kBAAcA,IAAI,KAAK,MAHO;AAI9B,kBAAcA,IAAI,KAAK;AAJO,GAAZ,CAAnB;AAMA,SACC;AAAK,IAAA,SAAS,EAAEM;AAAhB,KACC,gCAAC,WAAD;AACC,IAAA,QAAQ,EAAEb,QADX;AAEC,IAAA,QAAQ,EAAE,oBAAM;AACfW,MAAAA,YAAY,IAAIC,SAAhB,IAA4BA,SAAQ,CAACD,YAAD,CAApC;AACAV,MAAAA,SAAQ,IAAIA,SAAQ,EAApB;AACA,KALF;AAMC,IAAA,SAAS,EAAEC,SAAS,IAAI;AANzB,IADD,EASEM,IAAI,IACJ;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,2CAAIA,IAAJ,CADD,CAVF,EAcEC,cAAc,IAAIG,SAAlB,IACA,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAEF,YAAd;AAA4B,IAAA,QAAQ,EAAE;AAAA,aAAME,SAAQ,CAACH,cAAD,CAAd;AAAA;AAAtC,IAfF,CADD;AAoBA,CAxCD;;AA0CAL,KAAK,CAACU,YAAN,GAAqB;AACpBP,EAAAA,IAAI,EAAE,SADc;AAEpBE,EAAAA,cAAc,EAAE,IAFI;AAGpBC,EAAAA,YAAY,EAAE,MAHM;AAIpBF,EAAAA,IAAI,EAAE,EAJc;AAKpBN,EAAAA,SAAS,EAAE;AALS,CAArB;eAQeE,K","sourcesContent":["import React from 'react'\nimport cx from 'classnames'\nimport Button from '../Button/Button'\nimport { IHWToast, IHWAction } from '@sprucelabs/spruce-types'\n\ninterface IToastHeaderProps {\n\t/**  Optional id for view caching */\n\tid?: string\n\n\t/** Function to remove the toast */\n\tonRemove?: Function\n\n\t/** headline */\n\theadline?: string\n\n\t/** is this toast removable */\n\tcanRemove?: boolean\n}\n\nconst ToastHeader = (props: IToastHeaderProps): React.ReactElement => {\n\tconst { headline, onRemove, canRemove } = props\n\treturn (\n\t\t<div className=\"toast__header\">\n\t\t\t<p>{headline}</p>\n\t\t\t{canRemove && onRemove && (\n\t\t\t\t<Button icon={{ name: 'close' }} onClick={onRemove} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport interface IToastProps extends Omit<IHWToast, 'id'> {\n\t/** Unique ID for the toast */\n\tid: string | number\n\n\t/** Handle toast removal */\n\tonRemove?: Function\n\n\t/** override how long before the toast goes away, in milis */\n\ttimeout?: number | 'never'\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\nconst Toast = (props: IToastProps | IHWToast): React.ReactElement => {\n\tconst commonProps = props as IHWToast\n\tconst reactHeartwoodProps = props as IToastProps\n\n\tconst {\n\t\theadline,\n\t\tkind,\n\t\ttext,\n\t\tfollowupAction,\n\t\tfollowupText,\n\t\tremoveAction\n\t} = commonProps\n\tconst { canRemove, onAction, onRemove } = reactHeartwoodProps\n\n\tconst toastClass = cx('toast', {\n\t\t'toast-positive': kind === 'positive',\n\t\t'toast-negative': kind === 'negative',\n\t\t'toast-warn': kind === 'warn',\n\t\t'toast-info': kind === 'info'\n\t})\n\treturn (\n\t\t<div className={toastClass}>\n\t\t\t<ToastHeader\n\t\t\t\theadline={headline}\n\t\t\t\tonRemove={() => {\n\t\t\t\t\tremoveAction && onAction && onAction(removeAction)\n\t\t\t\t\tonRemove && onRemove()\n\t\t\t\t}}\n\t\t\t\tcanRemove={canRemove || false}\n\t\t\t/>\n\t\t\t{text && (\n\t\t\t\t<div className=\"toast__body\">\n\t\t\t\t\t<p>{text}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{followupAction && onAction && (\n\t\t\t\t<Button text={followupText} onAction={() => onAction(followupAction)} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nToast.defaultProps = {\n\tkind: 'neutral',\n\tfollowupAction: null,\n\tfollowupText: 'Undo',\n\ttext: '',\n\tcanRemove: true\n}\n\nexport default Toast\n"],"file":"Toast.js"}

package/lib/components/Toast/components/ToastWrapper/ToastWrapper.d.ts

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { IToastProps } from '../../Toast';
+export interface IToastWrapperProps {
+    /** The toasts */
+    toasts: IToastProps[];
+    /** Handle toast removal */
+    handleRemove: Function;
+}
+interface IToastWrapperState {
+    toasts: IToastProps[];
+    timeouts: any;
+}
+export default class ToastWrapper extends Component<IToastWrapperProps, IToastWrapperState> {
+    state: IToastWrapperState;
+    timeouts: {};
+    static getDerivedStateFromProps(props: IToastWrapperProps, state: IToastWrapperState): {
+        toasts: IToastProps[];
+        timeouts: any[];
+    };
+    onRemoveClick: (id: string | number) => void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=ToastWrapper.d.ts.map

package/lib/components/Toast/components/ToastWrapper/ToastWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/components/ToastWrapper/ToastWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,WAAW,kBAAkB;IAClC,iBAAiB;IACjB,MAAM,EAAE,WAAW,EAAE,CAAA;IAErB,2BAA2B;IAC3B,YAAY,EAAE,QAAQ,CAAA;CACtB;AAED,UAAU,kBAAkB;IAC3B,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAA;CACb;AAID,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,SAAS,CAClD,kBAAkB,EAClB,kBAAkB,CAClB;IACO,KAAK,EAAE,kBAAkB,CAG/B;IAEM,QAAQ,KAAK;WAEN,wBAAwB,CACrC,KAAK,EAAE,kBAAkB,EACzB,KAAK,EAAE,kBAAkB,GACvB;QAAE,MAAM,EAAE,WAAW,EAAE,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAA;KAAE;IAgBtC,aAAa,gCAOnB;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;CA8BnC"}