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

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _faker = _interopRequireDefault(require("faker"));
+
+var _index = _interopRequireWildcard(require("./index"));
+
+var _Card = _interopRequireDefault(require("../Card/Card"));
+
+var stories = (0, _react2.storiesOf)('Layout', module);
+stories.addDecorator(_react3.withKnobs);
+
+var generateCard = function generateCard() {
+  return _react["default"].createElement(_Card["default"], null, _react["default"].createElement(_Card["default"].Header, {
+    title: _faker["default"].lorem.words(3)
+  }), _react["default"].createElement(_Card["default"].Body, null, _faker["default"].lorem.words(Math.floor(Math.random() * 25 + 5))));
+};
+
+stories.add('Spacing Utilities', function () {
+  var prefixSelect = (0, _react3.select)('side', ['all', 'horizontal', 'vertical', 'top', 'right', 'bottom', 'left'], 'all');
+  var prefixes = {
+    all: '',
+    horizontal: 'x',
+    vertical: 'y',
+    top: 't',
+    right: 'r',
+    bottom: 'b',
+    left: 'l'
+  };
+  return _react["default"].createElement("div", {
+    style: {
+      backgroundColor: 'rgba(49,95,204,0.5)'
+    }
+  }, _react["default"].createElement("div", {
+    className: "p".concat(prefixes[prefixSelect], "-").concat((0, _react3.select)('spacing', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 1)),
+    style: {
+      width: 'auto',
+      backgroundColor: 'rgba(49,95,204,0.5)'
+    }
+  }, _react["default"].createElement("p", {
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, "This is content")));
+}).add('Container Classes', function () {
+  return _react["default"].createElement("div", {
+    className: "p-4",
+    style: {
+      backgroundColor: 'rgba(49,95,204,0.5)'
+    }
+  }, _react["default"].createElement("div", {
+    className: "container--".concat((0, _react3.select)('container class', ['base', 'tight', 'wide'], 'base')),
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, _react["default"].createElement("p", null, "This is the content")));
+}).add('Primary Layout', function () {
+  return _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index.LayoutSection, null, generateCard()));
+}).add('Two Column Layout', function () {
+  return _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()));
+}).add('Two Column Primary & Secondary Layout', function () {
+  return _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index.LayoutSection, null, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()));
+}).add('Tight Layout', function () {
+  return _react["default"].createElement(_index["default"], {
+    width: "tight"
+  }, _react["default"].createElement(_index.LayoutSection, null, generateCard()));
+}).add('Wide Layout', function () {
+  return _react["default"].createElement(_index["default"], {
+    width: "wide"
+  }, _react["default"].createElement(_index.LayoutSection, null, generateCard()));
+}).add('Full-Width Layout', function () {
+  return _react["default"].createElement(_index["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_index.LayoutSection, null, generateCard()));
+}).add('Full-Bleed Layout', function () {
+  return _react["default"].createElement(_index["default"], {
+    width: "full-width",
+    isFullBleed: true
+  }, _react["default"].createElement(_index.LayoutSection, null, generateCard()));
+}).add('Very dense full-width layout', function () {
+  return _react["default"].createElement(_index["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()), _react["default"].createElement(_index.LayoutSection, {
+    isSecondary: true
+  }, generateCard()));
+});
+//# sourceMappingURL=Layout-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Layout/Layout-story.js"],"names":["stories","module","addDecorator","withKnobs","generateCard","faker","lorem","words","Math","floor","random","add","prefixSelect","prefixes","all","horizontal","vertical","top","right","bottom","left","backgroundColor","width"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { select, withKnobs } from '@storybook/addon-knobs/react'\nimport faker from 'faker'\n\nimport Layout, { LayoutSection } from './index'\nimport Card from '../Card/Card'\nconst stories = storiesOf('Layout', module)\n\nstories.addDecorator(withKnobs)\n\nconst generateCard = () => (\n\t<Card>\n\t\t<Card.Header title={faker.lorem.words(3)} />\n\t\t<Card.Body>\n\t\t\t{faker.lorem.words(Math.floor(Math.random() * 25 + 5))}\n\t\t</Card.Body>\n\t</Card>\n)\n\nstories\n\t.add('Spacing Utilities', () => {\n\t\tconst prefixSelect = select(\n\t\t\t'side',\n\t\t\t['all', 'horizontal', 'vertical', 'top', 'right', 'bottom', 'left'],\n\t\t\t'all'\n\t\t)\n\t\tconst prefixes = {\n\t\t\tall: '',\n\t\t\thorizontal: 'x',\n\t\t\tvertical: 'y',\n\t\t\ttop: 't',\n\t\t\tright: 'r',\n\t\t\tbottom: 'b',\n\t\t\tleft: 'l'\n\t\t}\n\t\treturn (\n\t\t\t<div style={{ backgroundColor: 'rgba(49,95,204,0.5)' }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`p${prefixes[prefixSelect]}-${select(\n\t\t\t\t\t\t'spacing',\n\t\t\t\t\t\t[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n\t\t\t\t\t\t1\n\t\t\t\t\t)}`}\n\t\t\t\t\tstyle={{ width: 'auto', backgroundColor: 'rgba(49,95,204,0.5)' }}\n\t\t\t\t>\n\t\t\t\t\t<p style={{ backgroundColor: '#fff' }}>This is content</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t})\n\t.add('Container Classes', () => (\n\t\t<div className=\"p-4\" style={{ backgroundColor: 'rgba(49,95,204,0.5)' }}>\n\t\t\t<div\n\t\t\t\tclassName={`container--${select(\n\t\t\t\t\t'container class',\n\t\t\t\t\t['base', 'tight', 'wide'],\n\t\t\t\t\t'base'\n\t\t\t\t)}`}\n\t\t\t\tstyle={{ backgroundColor: '#fff' }}\n\t\t\t>\n\t\t\t\t<p>This is the content</p>\n\t\t\t</div>\n\t\t</div>\n\t))\n\t.add('Primary Layout', () => (\n\t\t<Layout>\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Two Column Layout', () => (\n\t\t<Layout>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Two Column Primary & Secondary Layout', () => (\n\t\t<Layout>\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Tight Layout', () => (\n\t\t<Layout width=\"tight\">\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Wide Layout', () => (\n\t\t<Layout width=\"wide\">\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Full-Width Layout', () => (\n\t\t<Layout width=\"full-width\">\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Full-Bleed Layout', () => (\n\t\t<Layout width=\"full-width\" isFullBleed>\n\t\t\t<LayoutSection>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n\t.add('Very dense full-width layout', () => (\n\t\t<Layout width=\"full-width\">\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t\t<LayoutSection isSecondary>{generateCard()}</LayoutSection>\n\t\t</Layout>\n\t))\n"],"file":"Layout-story.js"}

package/lib/components/Layout/Layout.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _LayoutSection = _interopRequireDefault(require("./components/LayoutSection/LayoutSection"));
+
+var Layout = function Layout(props) {
+  var children = props.children,
+      isCentered = props.isCentered,
+      isFullBleed = props.isFullBleed,
+      width = props.width,
+      className = props.className;
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('layout', className, {
+      'layout--centered': isCentered,
+      'layout--wide': width === 'wide',
+      'layout--tight': width === 'tight',
+      'layout--full-width': width === 'full-width',
+      'layout--full-bleed': isFullBleed
+    })
+  }, children);
+};
+
+Layout.Section = _LayoutSection["default"];
+Layout.defaultProps = {
+  isCentered: false,
+  width: 'base',
+  isFullBleed: false
+};
+var _default = Layout;
+exports["default"] = _default;
+//# sourceMappingURL=Layout.js.map

package/lib/components/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Layout/Layout.js"],"names":["Layout","props","children","isCentered","isFullBleed","width","className","Section","LayoutSection","defaultProps"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AAmBA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAwB;AAAA,MAC9BC,QAD8B,GAC0BD,KAD1B,CAC9BC,QAD8B;AAAA,MACpBC,UADoB,GAC0BF,KAD1B,CACpBE,UADoB;AAAA,MACRC,WADQ,GAC0BH,KAD1B,CACRG,WADQ;AAAA,MACKC,KADL,GAC0BJ,KAD1B,CACKI,KADL;AAAA,MACYC,SADZ,GAC0BL,KAD1B,CACYK,SADZ;AAGtC,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,QAAH,EAAaA,SAAb,EAAwB;AAClC,0BAAoBH,UADc;AAElC,sBAAgBE,KAAK,KAAK,MAFQ;AAGlC,uBAAiBA,KAAK,KAAK,OAHO;AAIlC,4BAAsBA,KAAK,KAAK,YAJE;AAKlC,4BAAsBD;AALY,KAAxB;AADZ,KASEF,QATF,CADD;AAaA,CAhBD;;AAkBAF,MAAM,CAACO,OAAP,GAAiBC,yBAAjB;AAEAR,MAAM,CAACS,YAAP,GAAsB;AACrBN,EAAAA,UAAU,EAAE,KADS;AAErBE,EAAAA,KAAK,EAAE,MAFc;AAGrBD,EAAAA,WAAW,EAAE;AAHQ,CAAtB;eAMeJ,M","sourcesContent":["// @flow\nimport React, { Node } from 'react'\nimport cx from 'classnames'\nimport LayoutSection from './components/LayoutSection/LayoutSection'\n\nexport type LayoutProps = {\n\t/** Contents of the Layout. Should be LayoutSection components */\n\tchildren?: Node,\n\n\t/** Set true to center align layout content. */\n\tisCentered?: boolean,\n\n\t/** Set true to remove horizontal padding from layout. */\n\tisFullBleed?: boolean,\n\n\t/** Sets the width of the layout */\n\twidth?: 'base' | 'tight' | 'wide' | 'full-width',\n\n\t/** any classes applied to the div */\n\tclassName?: string\n}\n\nconst Layout = (props: LayoutProps) => {\n\tconst { children, isCentered, isFullBleed, width, className } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('layout', className, {\n\t\t\t\t'layout--centered': isCentered,\n\t\t\t\t'layout--wide': width === 'wide',\n\t\t\t\t'layout--tight': width === 'tight',\n\t\t\t\t'layout--full-width': width === 'full-width',\n\t\t\t\t'layout--full-bleed': isFullBleed\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nLayout.Section = LayoutSection\n\nLayout.defaultProps = {\n\tisCentered: false,\n\twidth: 'base',\n\tisFullBleed: false\n}\n\nexport default Layout\n"],"file":"Layout.js"}

package/lib/components/Layout/components/LayoutSection/LayoutSection.js

@@ -0,0 +1,38 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var LayoutSection = function LayoutSection(props) {
+  var className = props.className,
+      isSecondary = props.isSecondary,
+      children = props.children,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["className", "isSecondary", "children"]);
+  return _react["default"].createElement("div", (0, _extends2["default"])({
+    className: (0, _classnames["default"])('layout__section', className, {
+      'layout__section--secondary': isSecondary
+    })
+  }, rest), children);
+};
+
+LayoutSection.displayName = 'Layout.Section';
+LayoutSection.defaultProps = {
+  isSecondary: false
+};
+var _default = LayoutSection;
+exports["default"] = _default;
+//# sourceMappingURL=LayoutSection.js.map

package/lib/components/Layout/components/LayoutSection/LayoutSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Layout/components/LayoutSection/LayoutSection.js"],"names":["LayoutSection","props","className","isSecondary","children","rest","displayName","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAaA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAAA,MAC5CC,SAD4C,GACED,KADF,CAC5CC,SAD4C;AAAA,MACjCC,WADiC,GACEF,KADF,CACjCE,WADiC;AAAA,MACpBC,QADoB,GACEH,KADF,CACpBG,QADoB;AAAA,MACPC,IADO,6CACEJ,KADF;AAGpD,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,iBAAH,EAAsBC,SAAtB,EAAiC;AAC3C,oCAA8BC;AADa,KAAjC;AADZ,KAIKE,IAJL,GAMED,QANF,CADD;AAUA,CAbD;;AAeAJ,aAAa,CAACM,WAAd,GAA4B,gBAA5B;AACAN,aAAa,CAACO,YAAd,GAA6B;AAC5BJ,EAAAA,WAAW,EAAE;AADe,CAA7B;eAIeH,a","sourcesContent":["// @flow\nimport React, { Node } from 'react'\nimport cx from 'classnames'\n\nexport type LayoutSectionProps = {\n\t/** Contents of the Layout Section */\n\tchildren: Node,\n\n\t/** Class name for the section */\n\tclassName?: string,\n\n\t/** Whether this is a secondary Layout Section */\n\tisSecondary: boolean\n}\n\nconst LayoutSection = (props: LayoutSectionProps) => {\n\tconst { className, isSecondary, children, ...rest } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('layout__section', className, {\n\t\t\t\t'layout__section--secondary': isSecondary\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nLayoutSection.displayName = 'Layout.Section'\nLayoutSection.defaultProps = {\n\tisSecondary: false\n}\n\nexport default LayoutSection\n"],"file":"LayoutSection.js"}

package/lib/components/Layout/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 _Layout["default"];
+  }
+});
+Object.defineProperty(exports, "LayoutSection", {
+  enumerable: true,
+  get: function get() {
+    return _LayoutSection2["default"];
+  }
+});
+
+var _Layout = _interopRequireDefault(require("./Layout"));
+
+var _LayoutSection2 = _interopRequireDefault(require("./components/LayoutSection/LayoutSection"));
+//# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+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 _addonKnobs = require("@storybook/addon-knobs");
+
+var _react = require("@storybook/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _lists = require("../../../.storybook/data/lists");
+
+var _people = require("../../../.storybook/data/people");
+
+var _Tabs = _interopRequireDefault(require("../Tabs/Tabs"));
+
+var _ListHeader = _interopRequireDefault(require("./components/ListHeader/ListHeader"));
+
+var _ListItem = _interopRequireDefault(require("./components/ListItem/ListItem"));
+
+var _SortableList = _interopRequireDefault(require("./components/SortableList/SortableList"));
+
+var _List = _interopRequireWildcard(require("./List"));
+
+var _spruceTypes = require("@sprucelabs/spruce-types");
+
+var _Button = require("../Button/Button");
+
+var stories = (0, _react.storiesOf)('List', module);
+
+var TabbedList =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TabbedList, _Component);
+
+  function TabbedList() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TabbedList);
+
+    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"])(TabbedList)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      users: _people.userList02,
+      tabs: [{
+        text: 'Guests',
+        panel: _react2["default"].createElement(_List["default"], {
+          items: _people.userList
+        })
+      }, {
+        text: 'Team',
+        panel: _react2["default"].createElement(_List["default"], {
+          items: _people.userList02
+        })
+      }, {
+        text: 'Settings',
+        panel: _react2["default"].createElement(_List["default"], {
+          items: _people.userList03
+        })
+      }],
+      activeTabIndex: 0
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTabClick", function (idx) {
+      _this.setState({
+        activeTabIndex: idx
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TabbedList, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          tabs = _this$state.tabs,
+          activeTabIndex = _this$state.activeTabIndex;
+      return _react2["default"].createElement(_List.ListWrapper, null, _react2["default"].createElement(_react2.Fragment, null, _react2["default"].createElement(_ListHeader["default"], {
+        title: "Notes"
+      }), _react2["default"].createElement(_Tabs["default"], {
+        tabs: tabs.map(function (tab, idx) {
+          return (0, _objectSpread2["default"])({
+            isCurrent: idx === activeTabIndex,
+            onClick: function onClick() {
+              return _this2.handleTabClick(idx);
+            }
+          }, tab);
+        })
+      })));
+    }
+  }]);
+  return TabbedList;
+}(_react2.Component); // stories.addDecorator(
+// 	withKnobsOptions({
+// 		escapeHTML: false
+// 	})
+// )
+
+
+stories.addDecorator(_addonKnobs.withKnobs);
+stories.add('List Item', function () {
+  return _react2["default"].createElement(_ListItem["default"], {
+    id: "unique",
+    title: (0, _addonKnobs.text)('title', 'Wed, Oct 28'),
+    subtitle: (0, _addonKnobs.text)('subtitle', '9am–4pm'),
+    avatar: (0, _addonKnobs.text)('avatar', ''),
+    image: (0, _addonKnobs.text)('image', ''),
+    icon: {
+      isLineIcon: (0, _addonKnobs["boolean"])('isLineIcon', true),
+      name: (0, _addonKnobs.text)('name', '')
+    },
+    isDraggable: (0, _addonKnobs["boolean"])('isDraggable', false),
+    actions: (0, _addonKnobs.object)('actions', []),
+    toggleId: (0, _addonKnobs.text)('toggleId', ''),
+    contextMenu: (0, _addonKnobs.object)('contextMenu', null),
+    isLoading: (0, _addonKnobs["boolean"])('isLoading', false)
+  });
+}).add('Text List', function () {
+  return _react2["default"].createElement(_react2.Fragment, null, _react2["default"].createElement(_List["default"], {
+    header: (0, _addonKnobs.object)('header: text list', {
+      title: 'Holidays'
+    }),
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false),
+    items: (0, _addonKnobs.object)('items: text list', _lists.dateList),
+    isLoading: (0, _addonKnobs["boolean"])('isLoading', false)
+  }), _react2["default"].createElement(_SortableList["default"], {
+    header: (0, _addonKnobs.object)('header: sortable list', {
+      title: 'Services'
+    }),
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false),
+    onConfirm: function onConfirm() {
+      return console.log('Confirmed!');
+    },
+    items: (0, _addonKnobs.object)('items: sortable list', _lists.serviceList),
+    onSortStart: function onSortStart() {
+      return null;
+    },
+    onSortEnd: function onSortEnd() {
+      return null;
+    },
+    areSeparatorsVisible: true,
+    isLoading: (0, _addonKnobs["boolean"])('isLoading', false)
+  }), _react2["default"].createElement(_List["default"], {
+    header: (0, _addonKnobs.object)('header: dates list', {
+      title: 'Important Dates'
+    }),
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false),
+    items: (0, _addonKnobs.object)('items: dates list', _lists.dateList),
+    isLoading: (0, _addonKnobs["boolean"])('isLoading', false)
+  }));
+}).add('Nested List', function () {
+  return _react2["default"].createElement(_List["default"], {
+    isSmall: true,
+    items: _lists.nestedList
+  });
+}).add('List with an action', function () {
+  return _react2["default"].createElement(_List["default"], {
+    items: _lists.listWithAction
+  });
+}).add('Icons: some hidden', function () {
+  return _react2["default"].createElement(_List["default"], {
+    header: (0, _addonKnobs.object)('header: dates list', {
+      title: 'Important Dates'
+    }),
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false),
+    items: (0, _addonKnobs.object)('items: dates list', _lists.listHiddenIcons)
+  });
+}).add('Settings List', function () {
+  return _react2["default"].createElement(_List["default"], {
+    header: (0, _addonKnobs.object)('header', {
+      title: 'Settings'
+    }),
+    items: (0, _addonKnobs.object)('items', _lists.settingsList)
+  });
+}).add('People List', function () {
+  return _react2["default"].createElement(_List["default"], {
+    header: {
+      title: 'Team Schedule',
+      subtitle: 'Mon, Sep 27',
+      actions: [{
+        text: 'Today',
+        kind: _Button.ButtonKinds.Simple
+      }, {
+        icon: {
+          name: 'calendar',
+          isLineIcon: true
+        },
+        kind: _Button.ButtonKinds.Simple
+      }, {
+        icon: {
+          name: 'arrow_back'
+        },
+        kind: _Button.ButtonKinds.Simple
+      }, {
+        icon: {
+          customIcon: 'arrow_forward'
+        },
+        kind: _Button.ButtonKinds.Simple
+      }]
+    },
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false),
+    items: (0, _addonKnobs.object)('items', _people.userList)
+  });
+}).add('People Tabbed', function () {
+  return _react2["default"].createElement(TabbedList, null);
+}).add('Selectable Items', function () {
+  return _react2["default"].createElement(_List["default"], {
+    selectableType: (0, _addonKnobs.select)('selectableType', [_spruceTypes.IHWListItemSelectableType.Checkbox, _spruceTypes.IHWListItemSelectableType.Radio], _spruceTypes.IHWListItemSelectableType.Checkbox),
+    items: (0, _addonKnobs.object)('selectable items', _lists.selectableList),
+    isSmall: (0, _addonKnobs["boolean"])('isSmall', false)
+  });
+}).add('Expandable List Item', function () {
+  return _react2["default"].createElement(_List["default"], {
+    items: _lists.expandableList
+  });
+});
+//# sourceMappingURL=List-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/List/List-story.tsx"],"names":["stories","module","TabbedList","users","userList02","tabs","text","panel","userList","userList03","activeTabIndex","idx","setState","state","map","tab","isCurrent","onClick","handleTabClick","Component","addDecorator","withKnobs","add","isLineIcon","name","title","dateList","console","log","serviceList","nestedList","listWithAction","listHiddenIcons","settingsList","subtitle","actions","kind","ButtonKinds","Simple","icon","customIcon","IHWListItemSelectableType","Checkbox","Radio","selectableList","expandableList"],"mappings":"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","sourcesContent":["import {\n\tboolean,\n\tobject,\n\tselect,\n\ttext,\n\twithKnobs\n} from '@storybook/addon-knobs'\nimport { storiesOf } from '@storybook/react'\nimport React, { Component, Fragment } from 'react'\nimport {\n\tdateList,\n\texpandableList,\n\tlistHiddenIcons,\n\tlistWithAction,\n\tnestedList,\n\tselectableList,\n\tserviceList,\n\tsettingsList\n} from '../../../.storybook/data/lists'\nimport {\n\tuserList,\n\tuserList02,\n\tuserList03\n} from '../../../.storybook/data/people'\nimport Tabs from '../Tabs/Tabs'\nimport ListHeader from './components/ListHeader/ListHeader'\nimport ListItem from './components/ListItem/ListItem'\nimport SortableList from './components/SortableList/SortableList'\nimport List, { ListWrapper } from './List'\nimport { IHWListItemSelectableType } from '@sprucelabs/spruce-types'\nimport { ButtonKinds } from '../Button/Button'\n\nconst stories = storiesOf('List', module)\n\ninterface ITabbedProps {}\ninterface ITabbedState {\n\tusers: any[]\n\ttabs: any[]\n\tactiveTabIndex: number\n}\n\nclass TabbedList extends Component<ITabbedProps, ITabbedState> {\n\tpublic state = {\n\t\tusers: userList02,\n\t\ttabs: [\n\t\t\t{\n\t\t\t\ttext: 'Guests',\n\t\t\t\tpanel: <List items={userList} />\n\t\t\t},\n\t\t\t{\n\t\t\t\ttext: 'Team',\n\t\t\t\tpanel: <List items={userList02} />\n\t\t\t},\n\t\t\t{\n\t\t\t\ttext: 'Settings',\n\t\t\t\tpanel: <List items={userList03} />\n\t\t\t}\n\t\t],\n\t\tactiveTabIndex: 0\n\t}\n\n\tpublic handleTabClick = (idx: number) => {\n\t\tthis.setState({\n\t\t\tactiveTabIndex: idx\n\t\t})\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst { tabs, activeTabIndex } = this.state\n\n\t\treturn (\n\t\t\t<ListWrapper>\n\t\t\t\t<Fragment>\n\t\t\t\t\t<ListHeader title=\"Notes\" />\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={tabs.map((tab, idx) => ({\n\t\t\t\t\t\t\tisCurrent: idx === activeTabIndex,\n\t\t\t\t\t\t\tonClick: () => this.handleTabClick(idx),\n\t\t\t\t\t\t\t...tab\n\t\t\t\t\t\t}))}\n\t\t\t\t\t/>\n\t\t\t\t</Fragment>\n\t\t\t</ListWrapper>\n\t\t)\n\t}\n}\n\n// stories.addDecorator(\n// \twithKnobsOptions({\n// \t\tescapeHTML: false\n// \t})\n// )\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('List Item', () => (\n\t\t<ListItem\n\t\t\tid=\"unique\"\n\t\t\ttitle={text('title', 'Wed, Oct 28')}\n\t\t\tsubtitle={text('subtitle', '9am–4pm')}\n\t\t\tavatar={text('avatar', '')}\n\t\t\timage={text('image', '')}\n\t\t\ticon={{ isLineIcon: boolean('isLineIcon', true), name: text('name', '') }}\n\t\t\tisDraggable={boolean('isDraggable', false)}\n\t\t\tactions={object('actions', [])}\n\t\t\ttoggleId={text('toggleId', '')}\n\t\t\tcontextMenu={object('contextMenu', null)}\n\t\t\tisLoading={boolean('isLoading', false)}\n\t\t/>\n\t))\n\t.add('Text List', () => (\n\t\t<Fragment>\n\t\t\t<List\n\t\t\t\theader={object('header: text list', { title: 'Holidays' })}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t\titems={object('items: text list', dateList)}\n\t\t\t\tisLoading={boolean('isLoading', false)}\n\t\t\t/>\n\t\t\t<SortableList\n\t\t\t\theader={object('header: sortable list', { title: 'Services' })}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t\tonConfirm={() => console.log('Confirmed!')}\n\t\t\t\titems={object('items: sortable list', serviceList)}\n\t\t\t\tonSortStart={() => null}\n\t\t\t\tonSortEnd={() => null}\n\t\t\t\tareSeparatorsVisible\n\t\t\t\tisLoading={boolean('isLoading', false)}\n\t\t\t/>\n\t\t\t<List\n\t\t\t\theader={object('header: dates list', { title: 'Important Dates' })}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t\titems={object('items: dates list', dateList)}\n\t\t\t\tisLoading={boolean('isLoading', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Nested List', () => <List isSmall items={nestedList} />)\n\t.add('List with an action', () => <List items={listWithAction} />)\n\t.add('Icons: some hidden', () => (\n\t\t<List\n\t\t\theader={object('header: dates list', { title: 'Important Dates' })}\n\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\titems={object('items: dates list', listHiddenIcons)}\n\t\t/>\n\t))\n\t.add('Settings List', () => (\n\t\t<List\n\t\t\theader={object('header', { title: 'Settings' })}\n\t\t\titems={object('items', settingsList)}\n\t\t/>\n\t))\n\t.add('People List', () => (\n\t\t<List\n\t\t\theader={{\n\t\t\t\ttitle: 'Team Schedule',\n\t\t\t\tsubtitle: 'Mon, Sep 27',\n\t\t\t\tactions: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: 'Today',\n\t\t\t\t\t\tkind: ButtonKinds.Simple\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ticon: {\n\t\t\t\t\t\t\tname: 'calendar',\n\t\t\t\t\t\t\tisLineIcon: true\n\t\t\t\t\t\t},\n\t\t\t\t\t\tkind: ButtonKinds.Simple\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ticon: {\n\t\t\t\t\t\t\tname: 'arrow_back'\n\t\t\t\t\t\t},\n\t\t\t\t\t\tkind: ButtonKinds.Simple\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ticon: {\n\t\t\t\t\t\t\tcustomIcon: 'arrow_forward'\n\t\t\t\t\t\t},\n\t\t\t\t\t\tkind: ButtonKinds.Simple\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}}\n\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\titems={object('items', userList)}\n\t\t/>\n\t))\n\t.add('People Tabbed', () => <TabbedList />)\n\t.add('Selectable Items', () => (\n\t\t<List\n\t\t\tselectableType={select<\n\t\t\t\tIHWListItemSelectableType.Checkbox | IHWListItemSelectableType.Radio\n\t\t\t>(\n\t\t\t\t'selectableType',\n\t\t\t\t[IHWListItemSelectableType.Checkbox, IHWListItemSelectableType.Radio],\n\t\t\t\tIHWListItemSelectableType.Checkbox\n\t\t\t)}\n\t\t\titems={object('selectable items', selectableList)}\n\t\t\tisSmall={boolean('isSmall', false)}\n\t\t/>\n\t))\n\t.add('Expandable List Item', () => <List items={expandableList} />)\n"],"file":"List-story.js"}

package/lib/components/List/List.d.ts

@@ -0,0 +1,34 @@
+import { IHWAction, IHWList, IHWListHeader, IHWListItemTypes } from '@sprucelabs/spruce-types';
+import React from 'react';
+import { IExpandableListItemProps } from './components/ExpandableListItem/ExpandableListItem';
+import { IListHeaderProps } from './components/ListHeader/ListHeader';
+import { IListItemProps } from './components/ListItem/ListItem';
+export declare type IWrappedItemProps = IListItemProps | IExpandableListItemProps;
+export interface IListProps extends Omit<IHWList, 'id' | 'header' | 'items'> {
+    /** optional id for view caching */
+    id?: string;
+    /** List Header */
+    header?: IListHeaderProps | IHWListHeader | null;
+    /** List items */
+    items?: Array<IWrappedItemProps | IHWListItemTypes> | null;
+    /** Class for the list */
+    className?: string;
+    /** any passthrough to render in the body of the list */
+    children?: React.ReactNode;
+    /** Is this whole list in a loading state? Sets all list items to loading only if true. */
+    isLoading?: boolean;
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+export declare const ListWrapper: (props: any) => 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>)>;
+declare const List: {
+    (props: IListProps): 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: {
+        header: null;
+        className: string;
+        isSmall: boolean;
+        areSeparatorsVisible: boolean;
+    };
+};
+export default List;
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAA2B,EAC1B,wBAAwB,EACxB,MAAM,oDAAoD,CAAA;AAC3D,OAAmB,EAClB,gBAAgB,EAChB,MAAM,oCAAoC,CAAA;AAC3C,OAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEzE,oBAAY,iBAAiB,GAAG,cAAc,GAAG,wBAAwB,CAAA;AAEzE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3E,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,kBAAkB;IAClB,MAAM,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAAA;IAEhD,iBAAiB;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAE1D,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,0FAA0F;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,eAAO,MAAM,WAAW,gOAEvB,CAAA;AAED,QAAA,MAAM,IAAI;;;;;;;;CAiET,CAAA;AASD,eAAe,IAAI,CAAA"}