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

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

@@ -0,0 +1,297 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _index = require("./index");
+
+var _countries = _interopRequireDefault(require("../../../.storybook/data/countries"));
+
+var _querystring = require("querystring");
+
+var spacingOptions = {
+  Base: null,
+  Tight: 'tight'
+};
+
+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 stories = (0, _react2.storiesOf)('Forms', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Autosuggest', function () {
+  return _react["default"].createElement(_index.Autosuggest, {
+    alwaysRenderSuggestions: false,
+    label: (0, _react3.text)('label', 'Country'),
+    inputHelper: (0, _react3.object)('inputHelper', {
+      helper: 'We use this information to improve your shopping experience.'
+    }),
+    placeholder: (0, _react3.text)('placeholder', 'Select your 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;
+    }
+  });
+}).add('Autosuggest Search', function () {
+  return _react["default"].createElement(_index.Autosuggest, {
+    alwaysRenderSuggestions: false,
+    placeholder: (0, _react3.text)('placeholder', 'Search countries…'),
+    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;
+    },
+    icon: {
+      icon: 'search'
+    }
+  });
+}).add('Duration Input', function () {
+  return _react["default"].createElement(_index.DurationInput, {
+    label: (0, _querystring.stringify)('label', 'Duration'),
+    placeholder: (0, _react3.text)('placeholder', 'How long is this going to take?'),
+    minMinutes: (0, _react3.number)('minMinutes', 5),
+    maxMinutes: (0, _react3.number)('maxMinutes', 60 * 4),
+    skipMinutes: (0, _react3.number)('skipMinutes', 5),
+    defaultValue: (0, _react3.number)('defaultValue'),
+    onChange: function onChange(minutes, e) {
+      return console.log(minutes, e);
+    }
+  });
+}).add('Text Input', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    id: (0, _react3.text)('id', 'input'),
+    name: (0, _react3.text)('name', 'inputName'),
+    label: (0, _react3.text)('label', 'First Name'),
+    postLabel: (0, _react3.text)('postLabel', ''),
+    placeholder: (0, _react3.text)('placeholder', 'i.e. Annie'),
+    defaultValue: (0, _react3.text)('defaultValue', ''),
+    error: (0, _react3.text)('error', ''),
+    helper: (0, _react3.text)('helper', 'Let me help you understand why we are asking for this.'),
+    readOnly: (0, _react3["boolean"])('readOnly', false),
+    isSmall: (0, _react3["boolean"])('isSmall', false)
+  }));
+}).add('Text Area', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.TextArea, (0, _extends2["default"])({
+    id: (0, _react3.text)('id', 'input'),
+    name: (0, _react3.text)('name', 'inputName'),
+    label: (0, _react3.text)('label', 'Category'),
+    postLabel: (0, _react3.text)('postLabel', ''),
+    placeholder: (0, _react3.text)('placeholder', 'Optional category description…'),
+    defaultValue: (0, _react3.text)('defaultValue', ''),
+    error: (0, _react3.text)('error', ''),
+    helper: (0, _react3.text)('helper', ''),
+    readOnly: (0, _react3["boolean"])('readOnly', false)
+  }, (0, _react3.object)('...rest', {}))));
+}).add('Search', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Search, {
+    type: "text",
+    placeholder: (0, _react3.text)('placeholder', 'Search for anything…'),
+    readOnly: (0, _react3["boolean"])('readOnly', false),
+    isSmall: (0, _react3["boolean"])('isSmall', false)
+  }));
+}).add('Phone Number', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.PhoneInput, {
+    label: (0, _react3.text)('label', 'Phone Number'),
+    placeholder: (0, _react3.text)('placeholder', '(555) 555-5555'),
+    isSmall: (0, _react3["boolean"])('isSmall', false)
+  }));
+}).add('Subdomain', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.DomainInput, {
+    label: (0, _react3.text)('label', 'Shopify Store URL'),
+    placeholder: (0, _react3.text)('placeholder', 'my-spruce-org'),
+    appendix: (0, _react3.text)('appendix', '.spruce.ai')
+  }));
+}).add('Radio', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Radio, {
+    id: "option-one",
+    name: "radio",
+    label: (0, _react3.text)('label: option one', 'Option One'),
+    postText: (0, _react3.text)('postText: option one', '')
+  }), _react["default"].createElement(_index.Radio, {
+    id: "option-two",
+    name: "radio",
+    label: (0, _react3.text)('label: option two', 'Option Two'),
+    postText: (0, _react3.text)('postText: option two', '')
+  }), _react["default"].createElement(_index.Radio, {
+    id: "option-three",
+    name: "radio",
+    label: (0, _react3.text)('label: option three', 'Option Three'),
+    postText: (0, _react3.text)('postText: option three', '')
+  }));
+}).add('Checkbox', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Checkbox, {
+    id: "option-one",
+    name: "optionOne",
+    label: (0, _react3.text)('label: option one', 'Option One'),
+    postText: (0, _react3.text)('postText: option one', 'Post text one'),
+    disabled: (0, _react3["boolean"])('disabled: option one', false)
+  }), _react["default"].createElement(_index.Checkbox, {
+    id: "option-two",
+    name: "optionTwo",
+    label: (0, _react3.text)('label: option two', 'Option Two'),
+    postText: (0, _react3.text)('postText: option two', 'Post text two'),
+    disabled: (0, _react3["boolean"])('disabled: option two', false)
+  }), _react["default"].createElement(_index.Checkbox, {
+    id: "option-three",
+    name: "optionThree",
+    label: (0, _react3.text)('label: option three', 'Option Three'),
+    postText: (0, _react3.text)('postText: option three', 'Post text three'),
+    disabled: (0, _react3["boolean"])('disabled: option three', false),
+    isIndeterminate: true
+  }));
+}).add('Toggle', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Toggle, {
+    id: (0, _react3.text)('id', 'toggle'),
+    name: (0, _react3.text)('name', 'toggle'),
+    postText: (0, _react3.text)('postText', ''),
+    className: (0, _react3.text)('className', '')
+  }));
+}).add('Tag', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Tag, {
+    text: (0, _react3.text)('text', 'Barber Services'),
+    isSmall: (0, _react3["boolean"])('isSmall', false)
+  }), _react["default"].createElement(_index.Tag, {
+    kind: "secondary",
+    text: (0, _react3.text)('text', 'Barber Services'),
+    isSmall: (0, _react3["boolean"])('isSmall', false)
+  }));
+}).add('Slider', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.Slider, {
+    id: (0, _react3.text)('id', 'slider'),
+    name: (0, _react3.text)('name', 'slider'),
+    min: (0, _react3.number)('min', 0),
+    max: (0, _react3.number)('max', 200),
+    value: (0, _react3.number)('value', 100),
+    label: (0, _react3.text)('label', 'Scale'),
+    postLabel: (0, _react3.text)('postLabel', '100%')
+  }));
+}).add('Select', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement("p", null, "For controlled usage, default `value` to an empty-string in order to display the placeholder."), _react["default"].createElement(_index.Select, {
+    label: (0, _react3.text)('label', 'Country'),
+    placeholder: (0, _react3.text)('placeholder', 'Select something...'),
+    id: (0, _react3.text)('id', 'country'),
+    options: (0, _react3.object)('options', {
+      us: 'United States',
+      ca: 'Canada',
+      nj: 'New Jersey'
+    }),
+    isSimple: (0, _react3["boolean"])('isSimple', false),
+    helper: (0, _react3.text)('helper', ''),
+    error: (0, _react3.text)('error', ''),
+    disabled: (0, _react3["boolean"])('disabled', false)
+  }));
+}).add('Date Picker', function () {
+  return _react["default"].createElement(_index.DatePicker, {
+    numberOfMonths: (0, _react3.number)('numberOfMonths', 1),
+    kind: (0, _react3.select)('kind', {
+      singleDate: 'singleDate',
+      dateRange: 'dateRange'
+    }, 'singleDate'),
+    onSelectDateRange: function onSelectDateRange(_ref) {
+      var startDate = _ref.startDate,
+          endDate = _ref.endDate;
+      return console.log(startDate, endDate);
+    },
+    isDayBlocked: function isDayBlocked(day) {
+      return day.isBefore((0, _moment["default"])().startOf('day'));
+    }
+  });
+}).add('Stars', function () {
+  return _react["default"].createElement(_index.Stars, null);
+}).add('Form Layout', function () {
+  return _react["default"].createElement(_index.FormLayout, {
+    spacing: (0, _react3.select)('spacing', spacingOptions, spacingOptions.Base)
+  }, _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "Name of Business",
+    placeholder: "e.g. Annie's Bagels"
+  })), _react["default"].createElement(_index.FormLayoutGroup, null, _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "First Name",
+    placeholder: "e.g. Annie"
+  })), _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "Last Name",
+    placeholder: "e.g. Smith"
+  }))), _react["default"].createElement(_index.FormLayoutGroup, {
+    isCondensed: true
+  }, _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "Price"
+  })), _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "Duration"
+  })), _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_index.TextInput, {
+    type: "text",
+    label: "Commission"
+  }))));
+});
+//# sourceMappingURL=Forms-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Forms/Forms-story.js"],"names":["spacingOptions","Base","Tight","renderSuggestion","suggestion","isEmptyMessage","text","stories","module","addDecorator","withKnobs","add","helper","countries","value","results","filter","toLowerCase","slice","length","icon","minutes","e","console","log","us","ca","nj","singleDate","dateRange","startDate","endDate","day","isBefore","startOf"],"mappings":";;;;;;;;AACA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AAoBA;;AACA;;AAEA,IAAMA,cAAc,GAAG;AACtBC,EAAAA,IAAI,EAAE,IADgB;AAEtBC,EAAAA,KAAK,EAAE;AAFe,CAAvB;;AAKA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD,EAAqB;AAC7C,MAAIA,UAAU,CAACC,cAAf,EAA+B;AAC9B,WACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC;AAAG,MAAA,SAAS,EAAC;AAAb,sCADD,EAIC;AAAG,MAAA,SAAS,EAAC;AAAb,kDAJD,CADD;AAUA;;AACD,SACC,gCAAC,kBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,SAAS,EAAC,8BAFX;AAGC,IAAA,IAAI,EAAED,UAAU,CAACE;AAHlB,IADD;AAOA,CApBD;;AAsBA,IAAMC,OAAO,GAAG,uBAAU,OAAV,EAAmBC,MAAnB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CACLI,GADF,CACM,aADN,EACqB;AAAA,SACnB,gCAAC,kBAAD;AACC,IAAA,uBAAuB,EAAE,KAD1B;AAEC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,SAAd,CAFR;AAGC,IAAA,WAAW,EAAE,oBAAO,aAAP,EAAsB;AAClCC,MAAAA,MAAM,EAAE;AAD0B,KAAtB,CAHd;AAMC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,qBAApB,CANd;AAOC,IAAA,kBAAkB,EAAE,oBAAO,oBAAP,EAA6BC,qBAA7B,CAPrB;AAQC,IAAA,uBAAuB,EAAE;AAAA,aAAM,IAAN;AAAA,KAR1B;AASC,IAAA,gBAAgB,EAAEV,gBATnB;AAUC,IAAA,kBAAkB,EAAE,4BAAAW,KAAK;AAAA,aAAIA,KAAK,CAACR,IAAV;AAAA,KAV1B;AAWC,IAAA,cAAc,EAAE,wBAAAQ,KAAK,EAAI;AACxB,UAAMC,OAAO,GAAGF,sBAAUG,MAAV,CACf,UAAAZ,UAAU;AAAA,eACTA,UAAU,CAACE,IAAX,CAAgBW,WAAhB,GAA8BC,KAA9B,CAAoC,CAApC,EAAuCJ,KAAK,CAACK,MAA7C,MACAL,KAAK,CAACG,WAAN,EAFS;AAAA,OADK,CAAhB,CADwB,CAMxB;AACA;;;AACA,UAAIF,OAAO,CAACI,MAAR,KAAmB,CAAvB,EAA0B;AACzB,eAAO,CACN;AACCb,UAAAA,IAAI,EAAE,YADP;AAECD,UAAAA,cAAc,EAAE;AAFjB,SADM,CAAP;AAMA;;AACD,aAAOU,OAAP;AACA;AA5BF,IADmB;AAAA,CADrB,EAiCEJ,GAjCF,CAiCM,oBAjCN,EAiC4B;AAAA,SAC1B,gCAAC,kBAAD;AACC,IAAA,uBAAuB,EAAE,KAD1B;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,mBAApB,CAFd;AAGC,IAAA,kBAAkB,EAAE,oBAAO,oBAAP,EAA6BE,qBAA7B,CAHrB;AAIC,IAAA,uBAAuB,EAAE;AAAA,aAAM,IAAN;AAAA,KAJ1B;AAKC,IAAA,gBAAgB,EAAEV,gBALnB;AAMC,IAAA,kBAAkB,EAAE,4BAAAW,KAAK;AAAA,aAAIA,KAAK,CAACR,IAAV;AAAA,KAN1B;AAOC,IAAA,cAAc,EAAE,wBAAAQ,KAAK,EAAI;AACxB,UAAMC,OAAO,GAAGF,sBAAUG,MAAV,CACf,UAAAZ,UAAU;AAAA,eACTA,UAAU,CAACE,IAAX,CAAgBW,WAAhB,GAA8BC,KAA9B,CAAoC,CAApC,EAAuCJ,KAAK,CAACK,MAA7C,MACAL,KAAK,CAACG,WAAN,EAFS;AAAA,OADK,CAAhB,CADwB,CAMxB;AACA;;;AACA,UAAIF,OAAO,CAACI,MAAR,KAAmB,CAAvB,EAA0B;AACzB,eAAO,CACN;AACCb,UAAAA,IAAI,EAAE,YADP;AAECD,UAAAA,cAAc,EAAE;AAFjB,SADM,CAAP;AAMA;;AACD,aAAOU,OAAP;AACA,KAxBF;AAyBC,IAAA,IAAI,EAAE;AACLK,MAAAA,IAAI,EAAE;AADD;AAzBP,IAD0B;AAAA,CAjC5B,EAgEET,GAhEF,CAgEM,gBAhEN,EAgEwB;AAAA,SACtB,gCAAC,oBAAD;AACC,IAAA,KAAK,EAAE,4BAAU,OAAV,EAAmB,UAAnB,CADR;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,iCAApB,CAFd;AAGC,IAAA,UAAU,EAAE,oBAAO,YAAP,EAAqB,CAArB,CAHb;AAIC,IAAA,UAAU,EAAE,oBAAO,YAAP,EAAqB,KAAK,CAA1B,CAJb;AAKC,IAAA,WAAW,EAAE,oBAAO,aAAP,EAAsB,CAAtB,CALd;AAMC,IAAA,YAAY,EAAE,oBAAO,cAAP,CANf;AAOC,IAAA,QAAQ,EAAE,kBAACU,OAAD,EAAUC,CAAV;AAAA,aAAgBC,OAAO,CAACC,GAAR,CAAYH,OAAZ,EAAqBC,CAArB,CAAhB;AAAA;AAPX,IADsB;AAAA,CAhExB,EA2EEX,GA3EF,CA2EM,YA3EN,EA2EoB;AAAA,SAClB,gCAAC,eAAD,QACC,gCAAC,gBAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,EAAE,EAAE,kBAAK,IAAL,EAAW,OAAX,CAFL;AAGC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,WAAb,CAHP;AAIC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,YAAd,CAJR;AAKC,IAAA,SAAS,EAAE,kBAAK,WAAL,EAAkB,EAAlB,CALZ;AAMC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,YAApB,CANd;AAOC,IAAA,YAAY,EAAE,kBAAK,cAAL,EAAqB,EAArB,CAPf;AAQC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,EAAd,CARR;AASC,IAAA,MAAM,EAAE,kBACP,QADO,EAEP,wDAFO,CATT;AAaC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAbX;AAcC,IAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,KAAnB;AAdV,IADD,CADkB;AAAA,CA3EpB,EA+FEA,GA/FF,CA+FM,WA/FN,EA+FmB;AAAA,SACjB,gCAAC,eAAD,QACC,gCAAC,eAAD;AACC,IAAA,EAAE,EAAE,kBAAK,IAAL,EAAW,OAAX,CADL;AAEC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,WAAb,CAFP;AAGC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,UAAd,CAHR;AAIC,IAAA,SAAS,EAAE,kBAAK,WAAL,EAAkB,EAAlB,CAJZ;AAKC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,gCAApB,CALd;AAMC,IAAA,YAAY,EAAE,kBAAK,cAAL,EAAqB,EAArB,CANf;AAOC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,EAAd,CAPR;AAQC,IAAA,MAAM,EAAE,kBAAK,QAAL,EAAe,EAAf,CART;AASC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB;AATX,KAUK,oBAAO,SAAP,EAAkB,EAAlB,CAVL,EADD,CADiB;AAAA,CA/FnB,EA+GEA,GA/GF,CA+GM,QA/GN,EA+GgB;AAAA,SACd,gCAAC,eAAD,QACC,gCAAC,aAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,sBAApB,CAFd;AAGC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAHX;AAIC,IAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,KAAnB;AAJV,IADD,CADc;AAAA,CA/GhB,EAyHEA,GAzHF,CAyHM,cAzHN,EAyHsB;AAAA,SACpB,gCAAC,eAAD,QACC,gCAAC,iBAAD;AACC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,cAAd,CADR;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,gBAApB,CAFd;AAGC,IAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,KAAnB;AAHV,IADD,CADoB;AAAA,CAzHtB,EAkIEA,GAlIF,CAkIM,WAlIN,EAkImB;AAAA,SACjB,gCAAC,eAAD,QACC,gCAAC,kBAAD;AACC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,mBAAd,CADR;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,eAApB,CAFd;AAGC,IAAA,QAAQ,EAAE,kBAAK,UAAL,EAAiB,YAAjB;AAHX,IADD,CADiB;AAAA,CAlInB,EA2IEA,GA3IF,CA2IM,OA3IN,EA2Ie;AAAA,SACb,gCAAC,eAAD,QACC,gCAAC,YAAD;AACC,IAAA,EAAE,EAAC,YADJ;AAEC,IAAA,IAAI,EAAC,OAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,mBAAL,EAA0B,YAA1B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,sBAAL,EAA6B,EAA7B;AAJX,IADD,EAOC,gCAAC,YAAD;AACC,IAAA,EAAE,EAAC,YADJ;AAEC,IAAA,IAAI,EAAC,OAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,mBAAL,EAA0B,YAA1B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,sBAAL,EAA6B,EAA7B;AAJX,IAPD,EAaC,gCAAC,YAAD;AACC,IAAA,EAAE,EAAC,cADJ;AAEC,IAAA,IAAI,EAAC,OAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,qBAAL,EAA4B,cAA5B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,wBAAL,EAA+B,EAA/B;AAJX,IAbD,CADa;AAAA,CA3If,EAiKEA,GAjKF,CAiKM,UAjKN,EAiKkB;AAAA,SAChB,gCAAC,eAAD,QACC,gCAAC,eAAD;AACC,IAAA,EAAE,EAAC,YADJ;AAEC,IAAA,IAAI,EAAC,WAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,mBAAL,EAA0B,YAA1B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,sBAAL,EAA6B,eAA7B,CAJX;AAKC,IAAA,QAAQ,EAAE,wBAAQ,sBAAR,EAAgC,KAAhC;AALX,IADD,EAQC,gCAAC,eAAD;AACC,IAAA,EAAE,EAAC,YADJ;AAEC,IAAA,IAAI,EAAC,WAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,mBAAL,EAA0B,YAA1B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,sBAAL,EAA6B,eAA7B,CAJX;AAKC,IAAA,QAAQ,EAAE,wBAAQ,sBAAR,EAAgC,KAAhC;AALX,IARD,EAeC,gCAAC,eAAD;AACC,IAAA,EAAE,EAAC,cADJ;AAEC,IAAA,IAAI,EAAC,aAFN;AAGC,IAAA,KAAK,EAAE,kBAAK,qBAAL,EAA4B,cAA5B,CAHR;AAIC,IAAA,QAAQ,EAAE,kBAAK,wBAAL,EAA+B,iBAA/B,CAJX;AAKC,IAAA,QAAQ,EAAE,wBAAQ,wBAAR,EAAkC,KAAlC,CALX;AAMC,IAAA,eAAe;AANhB,IAfD,CADgB;AAAA,CAjKlB,EA2LEA,GA3LF,CA2LM,QA3LN,EA2LgB;AAAA,SACd,gCAAC,eAAD,QACC,gCAAC,aAAD;AACC,IAAA,EAAE,EAAE,kBAAK,IAAL,EAAW,QAAX,CADL;AAEC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,QAAb,CAFP;AAGC,IAAA,QAAQ,EAAE,kBAAK,UAAL,EAAiB,EAAjB,CAHX;AAIC,IAAA,SAAS,EAAE,kBAAK,WAAL,EAAkB,EAAlB;AAJZ,IADD,CADc;AAAA,CA3LhB,EAqMEA,GArMF,CAqMM,KArMN,EAqMa;AAAA,SACX,gCAAC,eAAD,QACC,gCAAC,UAAD;AACC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,iBAAb,CADP;AAEC,IAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,KAAnB;AAFV,IADD,EAKC,gCAAC,UAAD;AACC,IAAA,IAAI,EAAC,WADN;AAEC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,iBAAb,CAFP;AAGC,IAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,KAAnB;AAHV,IALD,CADW;AAAA,CArMb,EAkNEA,GAlNF,CAkNM,QAlNN,EAkNgB;AAAA,SACd,gCAAC,eAAD,QACC,gCAAC,aAAD;AACC,IAAA,EAAE,EAAE,kBAAK,IAAL,EAAW,QAAX,CADL;AAEC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,QAAb,CAFP;AAGC,IAAA,GAAG,EAAE,oBAAO,KAAP,EAAc,CAAd,CAHN;AAIC,IAAA,GAAG,EAAE,oBAAO,KAAP,EAAc,GAAd,CAJN;AAKC,IAAA,KAAK,EAAE,oBAAO,OAAP,EAAgB,GAAhB,CALR;AAMC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,OAAd,CANR;AAOC,IAAA,SAAS,EAAE,kBAAK,WAAL,EAAkB,MAAlB;AAPZ,IADD,CADc;AAAA,CAlNhB,EA+NEA,GA/NF,CA+NM,QA/NN,EA+NgB;AAAA,SACd,gCAAC,eAAD,QACC,2IADD,EAMC,gCAAC,aAAD;AACC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,SAAd,CADR;AAEC,IAAA,WAAW,EAAE,kBAAK,aAAL,EAAoB,qBAApB,CAFd;AAGC,IAAA,EAAE,EAAE,kBAAK,IAAL,EAAW,SAAX,CAHL;AAIC,IAAA,OAAO,EAAE,oBAAO,SAAP,EAAkB;AAC1Bc,MAAAA,EAAE,EAAE,eADsB;AAE1BC,MAAAA,EAAE,EAAE,QAFsB;AAG1BC,MAAAA,EAAE,EAAE;AAHsB,KAAlB,CAJV;AASC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CATX;AAUC,IAAA,MAAM,EAAE,kBAAK,QAAL,EAAe,EAAf,CAVT;AAWC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAc,EAAd,CAXR;AAYC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB;AAZX,IAND,CADc;AAAA,CA/NhB,EAsPEhB,GAtPF,CAsPM,aAtPN,EAsPqB;AAAA,SACnB,gCAAC,iBAAD;AACC,IAAA,cAAc,EAAE,oBAAO,gBAAP,EAAyB,CAAzB,CADjB;AAEC,IAAA,IAAI,EAAE,oBACL,MADK,EAEL;AAAEiB,MAAAA,UAAU,EAAE,YAAd;AAA4BC,MAAAA,SAAS,EAAE;AAAvC,KAFK,EAGL,YAHK,CAFP;AAOC,IAAA,iBAAiB,EAAE;AAAA,UAAGC,SAAH,QAAGA,SAAH;AAAA,UAAcC,OAAd,QAAcA,OAAd;AAAA,aAClBR,OAAO,CAACC,GAAR,CAAYM,SAAZ,EAAuBC,OAAvB,CADkB;AAAA,KAPpB;AAUC,IAAA,YAAY,EAAE,sBAAAC,GAAG;AAAA,aAAIA,GAAG,CAACC,QAAJ,CAAa,0BAASC,OAAT,CAAiB,KAAjB,CAAb,CAAJ;AAAA;AAVlB,IADmB;AAAA,CAtPrB,EAoQEvB,GApQF,CAoQM,OApQN,EAoQe;AAAA,SAAM,gCAAC,YAAD,OAAN;AAAA,CApQf,EAqQEA,GArQF,CAqQM,aArQN,EAqQqB;AAAA,SACnB,gCAAC,iBAAD;AACC,IAAA,OAAO,EAAE,oBAAO,SAAP,EAAkBX,cAAlB,EAAkCA,cAAc,CAACC,IAAjD;AADV,KAGC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,KAAK,EAAC,kBAFP;AAGC,IAAA,WAAW,EAAC;AAHb,IADD,CAHD,EAUC,gCAAC,sBAAD,QACC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAC,YAA7B;AAA0C,IAAA,WAAW,EAAC;AAAtD,IADD,CADD,EAIC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAC,WAA7B;AAAyC,IAAA,WAAW,EAAC;AAArD,IADD,CAJD,CAVD,EAkBC,gCAAC,sBAAD;AAAiB,IAAA,WAAW;AAA5B,KACC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAC;AAA7B,IADD,CADD,EAIC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAC;AAA7B,IADD,CAJD,EAOC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAC;AAA7B,IADD,CAPD,CAlBD,CADmB;AAAA,CArQrB","sourcesContent":["// @flow\nimport React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport {\n\twithKnobs,\n\ttext,\n\tboolean,\n\tobject,\n\tnumber,\n\tselect\n} from '@storybook/addon-knobs/react'\nimport moment from 'moment'\nimport Button from '../Button/Button'\nimport {\n\tAutosuggest,\n\tCheckbox,\n\tDatePicker,\n\tDomainInput,\n\tDurationInput,\n\tPhoneInput,\n\tRadio,\n\tSearch,\n\tSelect,\n\tSlider,\n\tStars,\n\tTag,\n\tTextArea,\n\tTextInput,\n\tToggle,\n\tFormLayout,\n\tFormLayoutGroup,\n\tFormLayoutItem\n} from './index'\nimport countries from '../../../.storybook/data/countries'\nimport { stringify } from 'querystring'\n\nconst spacingOptions = {\n\tBase: null,\n\tTight: 'tight'\n}\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\nconst stories = storiesOf('Forms', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Autosuggest', () => (\n\t\t<Autosuggest\n\t\t\talwaysRenderSuggestions={false}\n\t\t\tlabel={text('label', 'Country')}\n\t\t\tinputHelper={object('inputHelper', {\n\t\t\t\thelper: 'We use this information to improve your shopping experience.'\n\t\t\t})}\n\t\t\tplaceholder={text('placeholder', 'Select your country')}\n\t\t\tdefaultSuggestions={object('defaultSuggestions', countries)}\n\t\t\tshouldRenderSuggestions={() => true}\n\t\t\trenderSuggestion={renderSuggestion}\n\t\t\tgetSuggestionValue={value => value.text}\n\t\t\tgetSuggestions={value => {\n\t\t\t\tconst results = countries.filter(\n\t\t\t\t\tsuggestion =>\n\t\t\t\t\t\tsuggestion.text.toLowerCase().slice(0, value.length) ===\n\t\t\t\t\t\tvalue.toLowerCase()\n\t\t\t\t)\n\t\t\t\t// Here you could add click events to buttons or whatever else they need\n\t\t\t\t// No Results Message\n\t\t\t\tif (results.length === 0) {\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'NO RESULTS',\n\t\t\t\t\t\t\tisEmptyMessage: true\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t\treturn results\n\t\t\t}}\n\t\t/>\n\t))\n\t.add('Autosuggest Search', () => (\n\t\t<Autosuggest\n\t\t\talwaysRenderSuggestions={false}\n\t\t\tplaceholder={text('placeholder', 'Search countries…')}\n\t\t\tdefaultSuggestions={object('defaultSuggestions', countries)}\n\t\t\tshouldRenderSuggestions={() => true}\n\t\t\trenderSuggestion={renderSuggestion}\n\t\t\tgetSuggestionValue={value => value.text}\n\t\t\tgetSuggestions={value => {\n\t\t\t\tconst results = countries.filter(\n\t\t\t\t\tsuggestion =>\n\t\t\t\t\t\tsuggestion.text.toLowerCase().slice(0, value.length) ===\n\t\t\t\t\t\tvalue.toLowerCase()\n\t\t\t\t)\n\t\t\t\t// Here you could add click events to buttons or whatever else they need\n\t\t\t\t// No Results Message\n\t\t\t\tif (results.length === 0) {\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'NO RESULTS',\n\t\t\t\t\t\t\tisEmptyMessage: true\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t\treturn results\n\t\t\t}}\n\t\t\ticon={{\n\t\t\t\ticon: 'search'\n\t\t\t}}\n\t\t/>\n\t))\n\t.add('Duration Input', () => (\n\t\t<DurationInput\n\t\t\tlabel={stringify('label', 'Duration')}\n\t\t\tplaceholder={text('placeholder', 'How long is this going to take?')}\n\t\t\tminMinutes={number('minMinutes', 5)}\n\t\t\tmaxMinutes={number('maxMinutes', 60 * 4)}\n\t\t\tskipMinutes={number('skipMinutes', 5)}\n\t\t\tdefaultValue={number('defaultValue')}\n\t\t\tonChange={(minutes, e) => console.log(minutes, e)}\n\t\t/>\n\t))\n\t.add('Text Input', () => (\n\t\t<Fragment>\n\t\t\t<TextInput\n\t\t\t\ttype=\"text\"\n\t\t\t\tid={text('id', 'input')}\n\t\t\t\tname={text('name', 'inputName')}\n\t\t\t\tlabel={text('label', 'First Name')}\n\t\t\t\tpostLabel={text('postLabel', '')}\n\t\t\t\tplaceholder={text('placeholder', 'i.e. Annie')}\n\t\t\t\tdefaultValue={text('defaultValue', '')}\n\t\t\t\terror={text('error', '')}\n\t\t\t\thelper={text(\n\t\t\t\t\t'helper',\n\t\t\t\t\t'Let me help you understand why we are asking for this.'\n\t\t\t\t)}\n\t\t\t\treadOnly={boolean('readOnly', false)}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Text Area', () => (\n\t\t<Fragment>\n\t\t\t<TextArea\n\t\t\t\tid={text('id', 'input')}\n\t\t\t\tname={text('name', 'inputName')}\n\t\t\t\tlabel={text('label', 'Category')}\n\t\t\t\tpostLabel={text('postLabel', '')}\n\t\t\t\tplaceholder={text('placeholder', 'Optional category description…')}\n\t\t\t\tdefaultValue={text('defaultValue', '')}\n\t\t\t\terror={text('error', '')}\n\t\t\t\thelper={text('helper', '')}\n\t\t\t\treadOnly={boolean('readOnly', false)}\n\t\t\t\t{...object('...rest', {})}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Search', () => (\n\t\t<Fragment>\n\t\t\t<Search\n\t\t\t\ttype=\"text\"\n\t\t\t\tplaceholder={text('placeholder', 'Search for anything…')}\n\t\t\t\treadOnly={boolean('readOnly', false)}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Phone Number', () => (\n\t\t<Fragment>\n\t\t\t<PhoneInput\n\t\t\t\tlabel={text('label', 'Phone Number')}\n\t\t\t\tplaceholder={text('placeholder', '(555) 555-5555')}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Subdomain', () => (\n\t\t<Fragment>\n\t\t\t<DomainInput\n\t\t\t\tlabel={text('label', 'Shopify Store URL')}\n\t\t\t\tplaceholder={text('placeholder', 'my-spruce-org')}\n\t\t\t\tappendix={text('appendix', '.spruce.ai')}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Radio', () => (\n\t\t<Fragment>\n\t\t\t<Radio\n\t\t\t\tid=\"option-one\"\n\t\t\t\tname=\"radio\"\n\t\t\t\tlabel={text('label: option one', 'Option One')}\n\t\t\t\tpostText={text('postText: option one', '')}\n\t\t\t/>\n\t\t\t<Radio\n\t\t\t\tid=\"option-two\"\n\t\t\t\tname=\"radio\"\n\t\t\t\tlabel={text('label: option two', 'Option Two')}\n\t\t\t\tpostText={text('postText: option two', '')}\n\t\t\t/>\n\t\t\t<Radio\n\t\t\t\tid=\"option-three\"\n\t\t\t\tname=\"radio\"\n\t\t\t\tlabel={text('label: option three', 'Option Three')}\n\t\t\t\tpostText={text('postText: option three', '')}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Checkbox', () => (\n\t\t<Fragment>\n\t\t\t<Checkbox\n\t\t\t\tid=\"option-one\"\n\t\t\t\tname=\"optionOne\"\n\t\t\t\tlabel={text('label: option one', 'Option One')}\n\t\t\t\tpostText={text('postText: option one', 'Post text one')}\n\t\t\t\tdisabled={boolean('disabled: option one', false)}\n\t\t\t/>\n\t\t\t<Checkbox\n\t\t\t\tid=\"option-two\"\n\t\t\t\tname=\"optionTwo\"\n\t\t\t\tlabel={text('label: option two', 'Option Two')}\n\t\t\t\tpostText={text('postText: option two', 'Post text two')}\n\t\t\t\tdisabled={boolean('disabled: option two', false)}\n\t\t\t/>\n\t\t\t<Checkbox\n\t\t\t\tid=\"option-three\"\n\t\t\t\tname=\"optionThree\"\n\t\t\t\tlabel={text('label: option three', 'Option Three')}\n\t\t\t\tpostText={text('postText: option three', 'Post text three')}\n\t\t\t\tdisabled={boolean('disabled: option three', false)}\n\t\t\t\tisIndeterminate\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Toggle', () => (\n\t\t<Fragment>\n\t\t\t<Toggle\n\t\t\t\tid={text('id', 'toggle')}\n\t\t\t\tname={text('name', 'toggle')}\n\t\t\t\tpostText={text('postText', '')}\n\t\t\t\tclassName={text('className', '')}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Tag', () => (\n\t\t<Fragment>\n\t\t\t<Tag\n\t\t\t\ttext={text('text', 'Barber Services')}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t/>\n\t\t\t<Tag\n\t\t\t\tkind=\"secondary\"\n\t\t\t\ttext={text('text', 'Barber Services')}\n\t\t\t\tisSmall={boolean('isSmall', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Slider', () => (\n\t\t<Fragment>\n\t\t\t<Slider\n\t\t\t\tid={text('id', 'slider')}\n\t\t\t\tname={text('name', 'slider')}\n\t\t\t\tmin={number('min', 0)}\n\t\t\t\tmax={number('max', 200)}\n\t\t\t\tvalue={number('value', 100)}\n\t\t\t\tlabel={text('label', 'Scale')}\n\t\t\t\tpostLabel={text('postLabel', '100%')}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Select', () => (\n\t\t<Fragment>\n\t\t\t<p>\n\t\t\t\tFor controlled usage, default `value` to an empty-string in order to\n\t\t\t\tdisplay the placeholder.\n\t\t\t</p>\n\n\t\t\t<Select\n\t\t\t\tlabel={text('label', 'Country')}\n\t\t\t\tplaceholder={text('placeholder', 'Select something...')}\n\t\t\t\tid={text('id', 'country')}\n\t\t\t\toptions={object('options', {\n\t\t\t\t\tus: 'United States',\n\t\t\t\t\tca: 'Canada',\n\t\t\t\t\tnj: 'New Jersey'\n\t\t\t\t})}\n\t\t\t\tisSimple={boolean('isSimple', false)}\n\t\t\t\thelper={text('helper', '')}\n\t\t\t\terror={text('error', '')}\n\t\t\t\tdisabled={boolean('disabled', false)}\n\t\t\t/>\n\t\t</Fragment>\n\t))\n\t.add('Date Picker', () => (\n\t\t<DatePicker\n\t\t\tnumberOfMonths={number('numberOfMonths', 1)}\n\t\t\tkind={select(\n\t\t\t\t'kind',\n\t\t\t\t{ singleDate: 'singleDate', dateRange: 'dateRange' },\n\t\t\t\t'singleDate'\n\t\t\t)}\n\t\t\tonSelectDateRange={({ startDate, endDate }) =>\n\t\t\t\tconsole.log(startDate, endDate)\n\t\t\t}\n\t\t\tisDayBlocked={day => day.isBefore(moment().startOf('day'))}\n\t\t/>\n\t))\n\t.add('Stars', () => <Stars />)\n\t.add('Form Layout', () => (\n\t\t<FormLayout\n\t\t\tspacing={select('spacing', spacingOptions, spacingOptions.Base)}\n\t\t>\n\t\t\t<FormLayoutItem>\n\t\t\t\t<TextInput\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tlabel=\"Name of Business\"\n\t\t\t\t\tplaceholder=\"e.g. Annie's Bagels\"\n\t\t\t\t/>\n\t\t\t</FormLayoutItem>\n\t\t\t<FormLayoutGroup>\n\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t<TextInput type=\"text\" label=\"First Name\" placeholder=\"e.g. Annie\" />\n\t\t\t\t</FormLayoutItem>\n\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t<TextInput type=\"text\" label=\"Last Name\" placeholder=\"e.g. Smith\" />\n\t\t\t\t</FormLayoutItem>\n\t\t\t</FormLayoutGroup>\n\t\t\t<FormLayoutGroup isCondensed>\n\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t<TextInput type=\"text\" label=\"Price\" />\n\t\t\t\t</FormLayoutItem>\n\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t<TextInput type=\"text\" label=\"Duration\" />\n\t\t\t\t</FormLayoutItem>\n\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t<TextInput type=\"text\" label=\"Commission\" />\n\t\t\t\t</FormLayoutItem>\n\t\t\t</FormLayoutGroup>\n\t\t</FormLayout>\n\t))\n"],"file":"Forms-story.js"}

package/lib/components/Forms/components/Autosuggest/Autosuggest.d.ts

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { IIconProps } from '../../../Icon/Icon';
+export interface IAutosuggestInterfaceProps {
+    /** Unique identifier */
+    id: string;
+    /** Teach Autosuggest how to calculate suggestions for any given input value. */
+    getSuggestions: (value: string) => Promise<Record<string, any>[]> | null;
+    /** Implement it to teach Autosuggest what should be the input value when suggestion is clicked. */
+    getSuggestionValue: Function;
+    /** Defines how suggestions will be rendered */
+    renderSuggestion: Function;
+    /** Will be called every time suggestion is selected via mouse or keyboard. */
+    onSuggestionSelected: Function;
+    /** Supply default suggestions that can be shown without input */
+    defaultSuggestions?: any[];
+    /** Placeholder for the input */
+    placeholder?: string;
+    /** optionally pass a default value for this input */
+    defaultValue?: string;
+    /** optional label */
+    label?: string;
+    /** Text after label */
+    postLabel?: string | React.ReactNode;
+    /** Error text */
+    error?: string;
+    /** Helper text */
+    helper?: string | React.ReactNode;
+    /** Set true to make the input less tall */
+    isSmall?: boolean;
+    /** Adds a class to the Autosuggest's wrapper */
+    wrapperClassName?: string;
+    /** passed through to react autosuggest */
+    inputProps?: Record<string, any>;
+    /** optional class name for wrapper */
+    className?: string;
+    /** disable this input */
+    disabled?: boolean;
+    /** Optional; adds an icon to the beginning of the text input */
+    icon?: IIconProps;
+}
+interface IAutosuggestInterfaceState {
+    value: string;
+    suggestions?: any[];
+    showClearButton: boolean;
+    containerPlacement: {
+        top: number;
+        left: number;
+        width: number;
+    };
+}
+export default class Autosuggest extends Component<IAutosuggestInterfaceProps, IAutosuggestInterfaceState> {
+    private static defaultProps;
+    private domNodeRef;
+    private autosuggestRef;
+    private debouncedResize;
+    constructor(props: IAutosuggestInterfaceProps);
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    render(): React.ReactElement;
+    private getContainerPlacement;
+    private handleWindowResize;
+    private onChange;
+    private onBlur;
+    private onSuggestionsFetchRequested;
+    private onSuggestionsClearRequested;
+    private scrollParentIfNeeded;
+    private findOverflowParent;
+    private handleClearInput;
+}
+export {};
+//# sourceMappingURL=Autosuggest.d.ts.map

package/lib/components/Forms/components/Autosuggest/Autosuggest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autosuggest.d.ts","sourceRoot":"","sources":["../../../../../src/components/Forms/components/Autosuggest/Autosuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMxC,OAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAIrD,MAAM,WAAW,0BAA0B;IAC1C,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAA;IAEV,gFAAgF;IAChF,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IAExE,mGAAmG;IACnG,kBAAkB,EAAE,QAAQ,CAAA;IAE5B,+CAA+C;IAC/C,gBAAgB,EAAE,QAAQ,CAAA;IAE1B,8EAA8E;IAC9E,oBAAoB,EAAE,QAAQ,CAAA;IAE9B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,EAAE,CAAA;IAE1B,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAEpC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAEjC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAEhC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,CAAA;CACjB;AAED,UAAU,0BAA0B;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,GAAG,EAAE,CAAA;IACnB,eAAe,EAAE,OAAO,CAAA;IACxB,kBAAkB,EAAE;QACnB,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACb,CAAA;CACD;AAoBD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS,CACjD,0BAA0B,EAC1B,0BAA0B,CAC1B;IACA,OAAO,CAAC,MAAM,CAAC,YAAY,CAE1B;IAED,OAAO,CAAC,UAAU,CAAiC;IACnD,OAAO,CAAC,cAAc,CAAmC;IAEzD,OAAO,CAAC,eAAe,CAAiD;gBAErD,KAAK,EAAE,0BAA0B;IAkB7C,iBAAiB,aAKvB;IAEM,oBAAoB,aAI1B;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;IA8FnC,OAAO,CAAC,qBAAqB,CAoC5B;IAED,OAAO,CAAC,kBAAkB,CAEzB;IAED,OAAO,CAAC,QAAQ,CAIf;IAED,OAAO,CAAC,MAAM,CAKb;IAED,OAAO,CAAC,2BAA2B,CAWlC;IAED,OAAO,CAAC,2BAA2B,CAKlC;IAED,OAAO,CAAC,oBAAoB,CAwC3B;IAED,OAAO,CAAC,kBAAkB,CAYzB;IAED,OAAO,CAAC,gBAAgB,CAKvB;CACD"}