npm - box-ui-elements - Versions diffs - 19.0.0-beta.8 → 19.0.0 - Mend

box-ui-elements 19.0.0-beta.8 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2051) hide show

package/es/components/contact-datalist-item/ContactDatalistItem.stories.js CHANGED Viewed

@@ -9,7 +9,7 @@ export const Example = () => React.createElement(ContactDatalistItem, {
   subtitle: React.createElement("span", null, "CEO")
 });
 export default {
-  title: 'Components|Dropdowns/ListItems/ContactDatalistItem',
+  title: 'Components/Dropdowns/ListItems/ContactDatalistItem',
   component: ContactDatalistItem,
   parameters: {
     notes: 'Used as a child of user/contact list components such as the PillSelectorDropdown'

package/es/components/contact-datalist-item/ContactDatalistItem.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/contact-datalist-item/ContactDatalistItem.stories.tsx"],"names":["React","ContactDatalistItem","Example","title","component","parameters","notes"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,mBAAD;AACI,EAAA,mBAAmB,EAAE,MAAM,YAD/B;AAEI,EAAA,EAAE,EAAC,KAFP;AAGI,EAAA,UAAU,EAAE,KAHhB;AAII,EAAA,IAAI,EAAC,aAJT;AAKI,EAAA,UAAU,MALd;AAMI,EAAA,QAAQ,EAAE;AANd,EADG;AAWP,eAAe;AACXC,EAAAA,KAAK,EAAE,oDADI;AAEXC,EAAAA,SAAS,EAAEH,mBAFA;AAGXI,EAAAA,UAAU,EAAE;AACRC,IAAAA,KAAK,EAAE;AADC;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport ContactDatalistItem from './ContactDatalistItem';\n\nexport const Example = () => (\n <ContactDatalistItem\n getContactAvatarUrl={() => 'avatar.png'}\n id=\"123\"\n isExternal={false}\n name=\"Aaron Levie\"\n showAvatar\n subtitle={<span>CEO</span>}\n />\n);\n\nexport default {\n title: 'Components\|Dropdowns/ListItems/ContactDatalistItem',\n component: ContactDatalistItem,\n parameters: {\n notes: 'Used as a child of user/contact list components such as the PillSelectorDropdown',\n },\n};\n"],"file":"ContactDatalistItem.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/contact-datalist-item/ContactDatalistItem.stories.tsx"],"names":["React","ContactDatalistItem","Example","title","component","parameters","notes"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,mBAAD;AACI,EAAA,mBAAmB,EAAE,MAAM,YAD/B;AAEI,EAAA,EAAE,EAAC,KAFP;AAGI,EAAA,UAAU,EAAE,KAHhB;AAII,EAAA,IAAI,EAAC,aAJT;AAKI,EAAA,UAAU,MALd;AAMI,EAAA,QAAQ,EAAE;AANd,EADG;AAWP,eAAe;AACXC,EAAAA,KAAK,EAAE,oDADI;AAEXC,EAAAA,SAAS,EAAEH,mBAFA;AAGXI,EAAAA,UAAU,EAAE;AACRC,IAAAA,KAAK,EAAE;AADC;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport ContactDatalistItem from './ContactDatalistItem';\n\nexport const Example = () => (\n <ContactDatalistItem\n getContactAvatarUrl={() => 'avatar.png'}\n id=\"123\"\n isExternal={false}\n name=\"Aaron Levie\"\n showAvatar\n subtitle={<span>CEO</span>}\n />\n);\n\nexport default {\n title: 'Components/Dropdowns/ListItems/ContactDatalistItem',\n component: ContactDatalistItem,\n parameters: {\n notes: 'Used as a child of user/contact list components such as the PillSelectorDropdown',\n },\n};\n"],"file":"ContactDatalistItem.stories.js"}

package/es/components/context-menu/ContextMenu.stories.js CHANGED Viewed

@@ -10,7 +10,7 @@ export const basic = () => React.createElement(ContextMenu, null, React.createEl
 }, "Target Component - right click me"), React.createElement(Menu, null, React.createElement(MenuItem, null, "View Profile"), React.createElement(MenuItem, null, "Help")));
 export const withSubmenu = () => React.createElement(ContextMenuWithSubmenuWithBoundariesElementExample, null);
 export default {
-  title: 'Components|ContextMenu',
+  title: 'Components/ContextMenu',
   component: ContextMenu,
   parameters: {
     notes

package/es/components/context-menu/ContextMenu.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/context-menu/ContextMenu.stories.tsx"],"names":["React","Menu","MenuItem","ContextMenu","notes","ContextMenuWithSubmenuWithBoundariesElementExample","basic","withSubmenu","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,IAAP,MAAiB,cAAjB;AACA,OAAOC,QAAP,MAAqB,kBAArB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAOC,kDAAP,MAA+D,0EAA/D;AAEA,OAAO,mDAAP;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,WAAD,QACI;AAAK,EAAA,SAAS,EAAC;AAAf,uCADJ,EAEI,oBAAC,IAAD,QACI,oBAAC,QAAD,uBADJ,EAEI,oBAAC,QAAD,eAFJ,CAFJ,CADG;AAUP,OAAO,MAAMC,WAAW,GAAG,MAAM,oBAAC,kDAAD,OAA1B;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEN,WAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Menu from '../menu/Menu';\nimport MenuItem from '../menu/MenuItem';\n\nimport ContextMenu from './ContextMenu';\nimport notes from './ContextMenu.stories.md';\n\nimport ContextMenuWithSubmenuWithBoundariesElementExample from '../../../examples/src/ContextMenuWithSubmenuWithBoundariesElementExample';\n\nimport '../../../examples/styles/ContextMenuExamples.scss';\n\nexport const basic = () => (\n <ContextMenu>\n <div className=\"context-menu-example-target\">Target Component - right click me</div>\n <Menu>\n <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </ContextMenu>\n);\n\nexport const withSubmenu = () => <ContextMenuWithSubmenuWithBoundariesElementExample />;\n\nexport default {\n title: 'Components\|ContextMenu',\n component: ContextMenu,\n parameters: {\n notes,\n },\n};\n"],"file":"ContextMenu.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/context-menu/ContextMenu.stories.tsx"],"names":["React","Menu","MenuItem","ContextMenu","notes","ContextMenuWithSubmenuWithBoundariesElementExample","basic","withSubmenu","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,IAAP,MAAiB,cAAjB;AACA,OAAOC,QAAP,MAAqB,kBAArB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAOC,kDAAP,MAA+D,0EAA/D;AAEA,OAAO,mDAAP;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,WAAD,QACI;AAAK,EAAA,SAAS,EAAC;AAAf,uCADJ,EAEI,oBAAC,IAAD,QACI,oBAAC,QAAD,uBADJ,EAEI,oBAAC,QAAD,eAFJ,CAFJ,CADG;AAUP,OAAO,MAAMC,WAAW,GAAG,MAAM,oBAAC,kDAAD,OAA1B;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEN,WAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Menu from '../menu/Menu';\nimport MenuItem from '../menu/MenuItem';\n\nimport ContextMenu from './ContextMenu';\nimport notes from './ContextMenu.stories.md';\n\nimport ContextMenuWithSubmenuWithBoundariesElementExample from '../../../examples/src/ContextMenuWithSubmenuWithBoundariesElementExample';\n\nimport '../../../examples/styles/ContextMenuExamples.scss';\n\nexport const basic = () => (\n <ContextMenu>\n <div className=\"context-menu-example-target\">Target Component - right click me</div>\n <Menu>\n <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </ContextMenu>\n);\n\nexport const withSubmenu = () => <ContextMenuWithSubmenuWithBoundariesElementExample />;\n\nexport default {\n title: 'Components/ContextMenu',\n component: ContextMenu,\n parameters: {\n notes,\n },\n};\n"],"file":"ContextMenu.stories.js"}

package/es/components/count-badge/CountBadge.stories.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const withHTMLSymbol2 = () => React.createElement(CountBadge, {
   value: String.fromCharCode(215)
 });
 export default {
-  title: 'Components|Badges/CountBadge',
+  title: 'Components/Badges/CountBadge',
   component: CountBadge,
   parameters: {
     notes

package/es/components/count-badge/CountBadge.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/count-badge/CountBadge.stories.tsx"],"names":["React","CountBadge","notes","withAnimation","withoutAnimation","withHTMLSymbol1","String","fromCharCode","withHTMLSymbol2","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,MAAMC,aAAa,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,aAAa,MAAnC;AAAoC,EAAA,KAAK,EAAC;AAA1C,EAA5B;AAEP,OAAO,MAAMC,gBAAgB,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAC;AAA5B,EAA/B;AAEP,OAAO,MAAMC,eAAe,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAEC,MAAM,CAACC,YAAP,CAAoB,IAApB;AAA7B,EAA9B;AAEP,OAAO,MAAMC,eAAe,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAEF,MAAM,CAACC,YAAP,CAAoB,GAApB;AAA7B,EAA9B;AAEP,eAAe;AACXE,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAET,UAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport CountBadge from './CountBadge';\nimport notes from './CountBadge.stories.md';\n\nexport const withAnimation = () => <CountBadge isVisible shouldAnimate value=\"1\" />;\n\nexport const withoutAnimation = () => <CountBadge isVisible value=\"3,000\" />;\n\nexport const withHTMLSymbol1 = () => <CountBadge isVisible value={String.fromCharCode(8226)} />;\n\nexport const withHTMLSymbol2 = () => <CountBadge isVisible value={String.fromCharCode(215)} />;\n\nexport default {\n title: 'Components\|Badges/CountBadge',\n component: CountBadge,\n parameters: {\n notes,\n },\n};\n"],"file":"CountBadge.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/count-badge/CountBadge.stories.tsx"],"names":["React","CountBadge","notes","withAnimation","withoutAnimation","withHTMLSymbol1","String","fromCharCode","withHTMLSymbol2","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,MAAMC,aAAa,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,aAAa,MAAnC;AAAoC,EAAA,KAAK,EAAC;AAA1C,EAA5B;AAEP,OAAO,MAAMC,gBAAgB,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAC;AAA5B,EAA/B;AAEP,OAAO,MAAMC,eAAe,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAEC,MAAM,CAACC,YAAP,CAAoB,IAApB;AAA7B,EAA9B;AAEP,OAAO,MAAMC,eAAe,GAAG,MAAM,oBAAC,UAAD;AAAY,EAAA,SAAS,MAArB;AAAsB,EAAA,KAAK,EAAEF,MAAM,CAACC,YAAP,CAAoB,GAApB;AAA7B,EAA9B;AAEP,eAAe;AACXE,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAET,UAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport CountBadge from './CountBadge';\nimport notes from './CountBadge.stories.md';\n\nexport const withAnimation = () => <CountBadge isVisible shouldAnimate value=\"1\" />;\n\nexport const withoutAnimation = () => <CountBadge isVisible value=\"3,000\" />;\n\nexport const withHTMLSymbol1 = () => <CountBadge isVisible value={String.fromCharCode(8226)} />;\n\nexport const withHTMLSymbol2 = () => <CountBadge isVisible value={String.fromCharCode(215)} />;\n\nexport default {\n title: 'Components/Badges/CountBadge',\n component: CountBadge,\n parameters: {\n notes,\n },\n};\n"],"file":"CountBadge.stories.js"}

package/es/components/datalist-item/DatalistItem.stories.js CHANGED Viewed

@@ -8,7 +8,7 @@ export const Example = () => {
   }, "Text");
 };
 export default {
-  title: 'Components|Dropdowns/ListItems/DatalistItem',
+  title: 'Components/Dropdowns/ListItems/DatalistItem',
   component: DatalistItem,
   parameters: {
     notes

package/es/components/datalist-item/DatalistItem.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/datalist-item/DatalistItem.stories.tsx"],"names":["React","DatalistItem","notes","Example","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB,C,CAEA;;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,SAAO,oBAAC,YAAD;AAAc,IAAA,UAAU;AAAxB,YAAP;AACH,CAFM;AAIP,eAAe;AACXC,EAAAA,KAAK,EAAE,6CADI;AAEXC,EAAAA,SAAS,EAAEJ,YAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\n// @ts-ignore JS Import\nimport DatalistItem from './DatalistItem';\nimport notes from './DatalistItem.stories.md';\n\nexport const Example = () => {\n return <DatalistItem isSelected>Text</DatalistItem>;\n};\n\nexport default {\n title: 'Components\|Dropdowns/ListItems/DatalistItem',\n component: DatalistItem,\n parameters: {\n notes,\n },\n};\n"],"file":"DatalistItem.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/datalist-item/DatalistItem.stories.tsx"],"names":["React","DatalistItem","notes","Example","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB,C,CAEA;;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,SAAO,oBAAC,YAAD;AAAc,IAAA,UAAU;AAAxB,YAAP;AACH,CAFM;AAIP,eAAe;AACXC,EAAAA,KAAK,EAAE,6CADI;AAEXC,EAAAA,SAAS,EAAEJ,YAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\n// @ts-ignore JS Import\nimport DatalistItem from './DatalistItem';\nimport notes from './DatalistItem.stories.md';\n\nexport const Example = () => {\n return <DatalistItem isSelected>Text</DatalistItem>;\n};\n\nexport default {\n title: 'Components/Dropdowns/ListItems/DatalistItem',\n component: DatalistItem,\n parameters: {\n notes,\n },\n};\n"],"file":"DatalistItem.stories.js"}

package/es/components/date-picker/DatePicker.stories.js CHANGED Viewed

@@ -316,7 +316,7 @@ export const withRangeAndKeyboardInput = () => {
   }))));
 };
 export default {
-  title: 'Components|DatePicker',
+  title: 'Components/DatePicker',
   component: DatePicker,
   parameters: {
     notes

package/es/components/date-picker/DatePicker.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/date-picker/DatePicker.stories.tsx"],"names":["React","IntlProvider","State","Store","TooltipPosition","DatePicker","notes","bdlGray10","basic","MIN_TIME","Date","TODAY","yearRange","getFullYear","componentStore","date","fromDate","toDate","state","day","month","year","set","basicWithKeyboardInput","withDescription","manuallyEditable","manuallyEditableAndAccessible","withLimitedDateRange","maxDate","sixDays","minDate","valueOf","alwaysVisibleWithCustomInputField","customInput","display","justifyContent","margin","width","position","left","top","zIndex","background","border","borderRadius","padding","height","outline","textAlign","toDateString","disabledWithErrorMessage","customErrorTooltipPosition","MIDDLE_RIGHT","withRange","MAX_TIME","withRangeAndKeyboardInput","title","component","parameters"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport { TooltipPosition } from '../tooltip';\nimport DatePicker from './DatePicker';\nimport notes from './DatePicker.stories.md';\n\nimport { bdlGray10 } from '../../styles/variables';\n\nexport const basic = () => {\n const MIN_TIME = new Date(0);\n const TODAY = new Date('July 18, 2018');\n const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];\n const componentStore = new Store({\n date: new Date('July 9, 2018'),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n yearRange={yearRange}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const basicWithKeyboardInput = () => {\n const MIN_TIME = new Date(0);\n const TODAY = new Date('July 18, 2018');\n const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];\n const componentStore = new Store({\n date: new Date('July 9, 2018'),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n isKeyboardInputAllowed\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n yearRange={yearRange}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withDescription = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker placeholder=\"Date\" description=\"Date of your birth\" label=\"Date Picker\" />\n </IntlProvider>\n);\n\nexport const manuallyEditable = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker isTextInputAllowed placeholder=\"Date\" label=\"Date Picker\" value={new Date('September 27, 2019')} />\n </IntlProvider>\n);\n\nexport const manuallyEditableAndAccessible = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker isAccessible placeholder=\"Date\" label=\"Date Picker\" value={new Date('August 10, 2021')} />\n </IntlProvider>\n);\n\nexport const withLimitedDateRange = () => {\n const maxDate = new Date('February 25, 2021');\n const sixDays = 1000 * 60 * 60 * 24 * 6;\n const minDate = new Date(maxDate.valueOf() - sixDays);\n const componentStore = new Store({\n date: maxDate,\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n isTextInputAllowed\n placeholder=\"Date\"\n label=\"Date Picker\"\n minDate={minDate}\n maxDate={maxDate}\n value={state.date}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const alwaysVisibleWithCustomInputField = () => {\n const componentStore = new Store({\n date: new Date('February 26, 2021'),\n fromDate: null,\n toDate: null,\n });\n\n return (\n <State store={componentStore}>\n {state => {\n const customInput = (\n <input\n style={{\n display: 'none',\n }}\n />\n );\n\n return (\n <IntlProvider locale=\"en-US\">\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n <DatePicker\n className=\"date-picker-example\"\n customInput={customInput}\n displayFormat={{\n day: 'numeric',\n month: 'short',\n year: 'numeric',\n }}\n hideLabel\n isAlwaysVisible\n isClearable={false}\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n />\n <div\n style={{\n margin: '20px 30px',\n width: '400px',\n }}\n >\n <p>\n In this example, the DatePicker is bound to a custom hidden input field. The right\n panel retains the same state as the DatePicker, but is not contained within the\n DatePicker component.\n </p>\n <div\n style={{\n position: 'relative',\n }}\n >\n <label\n htmlFor=\"date-picker-custom-input\"\n style={{\n position: 'absolute',\n left: '10px',\n top: '6px',\n zIndex: 100,\n }}\n >\n Start Date\n </label>\n <input\n disabled\n name=\"date-picker-custom-input\"\n style={{\n background: bdlGray10,\n border: 0,\n borderRadius: '4px',\n padding: '.5em .8em',\n width: '19em',\n height: '2.5em',\n top: 0,\n outline: 'none',\n textAlign: 'right',\n }}\n value={state.date.toDateString()}\n />\n </div>\n </div>\n </div>\n </IntlProvider>\n );\n }}\n </State>\n );\n};\n\nexport const disabledWithErrorMessage = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n isDisabled\n error=\"Error Message\"\n placeholder=\"Date\"\n name=\"datepicker\"\n label=\"Disabled Date Picker\"\n />\n </IntlProvider>\n);\n\nexport const customErrorTooltipPosition = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n error=\"Error Message\"\n errorTooltipPosition={TooltipPosition.MIDDLE_RIGHT}\n placeholder=\"Date\"\n name=\"datepicker\"\n label=\"Disabled Date Picker\"\n />\n </IntlProvider>\n);\n\nexport const withRange = () => {\n const MAX_TIME = new Date('3000-01-01T00:00:00.000Z');\n const MIN_TIME = new Date(0);\n const TODAY = new Date();\n const componentStore: Store<{ date: Date; fromDate: Date \| null; toDate: Date \| null }> = new Store({\n date: new Date(),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <div>\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n label=\"From Date\"\n maxDate={state.toDate \|\| MAX_TIME}\n name=\"datepicker-from\"\n onChange={(date: Date) => {\n componentStore.set({ fromDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.fromDate}\n />\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n label=\"To Date\"\n minDate={state.fromDate \|\| MIN_TIME}\n maxDate={TODAY}\n name=\"datepicker-to\"\n onChange={(date: Date) => {\n componentStore.set({ toDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.toDate}\n />\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withRangeAndKeyboardInput = () => {\n const MAX_TIME = new Date('3000-01-01T00:00:00.000Z');\n const MIN_TIME = new Date(0);\n const TODAY = new Date();\n const componentStore: Store<{ date: Date; fromDate: Date \| null; toDate: Date \| null }> = new Store({\n date: new Date(),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <div>\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n isKeyboardInputAllowed\n label=\"From Date\"\n maxDate={state.toDate \|\| MAX_TIME}\n name=\"datepicker-from\"\n onChange={(date: Date) => {\n componentStore.set({ fromDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.fromDate}\n />\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n isKeyboardInputAllowed\n label=\"To Date\"\n minDate={state.fromDate \|\| MIN_TIME}\n maxDate={TODAY}\n name=\"datepicker-to\"\n onChange={(date: Date) => {\n componentStore.set({ toDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.toDate}\n />\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|DatePicker',\n component: DatePicker,\n parameters: {\n notes,\n },\n};\n"],"file":"DatePicker.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/date-picker/DatePicker.stories.tsx"],"names":["React","IntlProvider","State","Store","TooltipPosition","DatePicker","notes","bdlGray10","basic","MIN_TIME","Date","TODAY","yearRange","getFullYear","componentStore","date","fromDate","toDate","state","day","month","year","set","basicWithKeyboardInput","withDescription","manuallyEditable","manuallyEditableAndAccessible","withLimitedDateRange","maxDate","sixDays","minDate","valueOf","alwaysVisibleWithCustomInputField","customInput","display","justifyContent","margin","width","position","left","top","zIndex","background","border","borderRadius","padding","height","outline","textAlign","toDateString","disabledWithErrorMessage","customErrorTooltipPosition","MIDDLE_RIGHT","withRange","MAX_TIME","withRangeAndKeyboardInput","title","component","parameters"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport { TooltipPosition } from '../tooltip';\nimport DatePicker from './DatePicker';\nimport notes from './DatePicker.stories.md';\n\nimport { bdlGray10 } from '../../styles/variables';\n\nexport const basic = () => {\n const MIN_TIME = new Date(0);\n const TODAY = new Date('July 18, 2018');\n const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];\n const componentStore = new Store({\n date: new Date('July 9, 2018'),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n yearRange={yearRange}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const basicWithKeyboardInput = () => {\n const MIN_TIME = new Date(0);\n const TODAY = new Date('July 18, 2018');\n const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];\n const componentStore = new Store({\n date: new Date('July 9, 2018'),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n isKeyboardInputAllowed\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n yearRange={yearRange}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withDescription = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker placeholder=\"Date\" description=\"Date of your birth\" label=\"Date Picker\" />\n </IntlProvider>\n);\n\nexport const manuallyEditable = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker isTextInputAllowed placeholder=\"Date\" label=\"Date Picker\" value={new Date('September 27, 2019')} />\n </IntlProvider>\n);\n\nexport const manuallyEditableAndAccessible = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker isAccessible placeholder=\"Date\" label=\"Date Picker\" value={new Date('August 10, 2021')} />\n </IntlProvider>\n);\n\nexport const withLimitedDateRange = () => {\n const maxDate = new Date('February 25, 2021');\n const sixDays = 1000 * 60 * 60 * 24 * 6;\n const minDate = new Date(maxDate.valueOf() - sixDays);\n const componentStore = new Store({\n date: maxDate,\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n isTextInputAllowed\n placeholder=\"Date\"\n label=\"Date Picker\"\n minDate={minDate}\n maxDate={maxDate}\n value={state.date}\n />\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const alwaysVisibleWithCustomInputField = () => {\n const componentStore = new Store({\n date: new Date('February 26, 2021'),\n fromDate: null,\n toDate: null,\n });\n\n return (\n <State store={componentStore}>\n {state => {\n const customInput = (\n <input\n style={{\n display: 'none',\n }}\n />\n );\n\n return (\n <IntlProvider locale=\"en-US\">\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n <DatePicker\n className=\"date-picker-example\"\n customInput={customInput}\n displayFormat={{\n day: 'numeric',\n month: 'short',\n year: 'numeric',\n }}\n hideLabel\n isAlwaysVisible\n isClearable={false}\n label=\"Date\"\n name=\"datepicker\"\n onChange={(date: Date) => {\n componentStore.set({ date });\n }}\n placeholder=\"Date\"\n value={state.date}\n />\n <div\n style={{\n margin: '20px 30px',\n width: '400px',\n }}\n >\n <p>\n In this example, the DatePicker is bound to a custom hidden input field. The right\n panel retains the same state as the DatePicker, but is not contained within the\n DatePicker component.\n </p>\n <div\n style={{\n position: 'relative',\n }}\n >\n <label\n htmlFor=\"date-picker-custom-input\"\n style={{\n position: 'absolute',\n left: '10px',\n top: '6px',\n zIndex: 100,\n }}\n >\n Start Date\n </label>\n <input\n disabled\n name=\"date-picker-custom-input\"\n style={{\n background: bdlGray10,\n border: 0,\n borderRadius: '4px',\n padding: '.5em .8em',\n width: '19em',\n height: '2.5em',\n top: 0,\n outline: 'none',\n textAlign: 'right',\n }}\n value={state.date.toDateString()}\n />\n </div>\n </div>\n </div>\n </IntlProvider>\n );\n }}\n </State>\n );\n};\n\nexport const disabledWithErrorMessage = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n isDisabled\n error=\"Error Message\"\n placeholder=\"Date\"\n name=\"datepicker\"\n label=\"Disabled Date Picker\"\n />\n </IntlProvider>\n);\n\nexport const customErrorTooltipPosition = () => (\n <IntlProvider locale=\"en-US\">\n <DatePicker\n error=\"Error Message\"\n errorTooltipPosition={TooltipPosition.MIDDLE_RIGHT}\n placeholder=\"Date\"\n name=\"datepicker\"\n label=\"Disabled Date Picker\"\n />\n </IntlProvider>\n);\n\nexport const withRange = () => {\n const MAX_TIME = new Date('3000-01-01T00:00:00.000Z');\n const MIN_TIME = new Date(0);\n const TODAY = new Date();\n const componentStore: Store<{ date: Date; fromDate: Date \| null; toDate: Date \| null }> = new Store({\n date: new Date(),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <div>\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n label=\"From Date\"\n maxDate={state.toDate \|\| MAX_TIME}\n name=\"datepicker-from\"\n onChange={(date: Date) => {\n componentStore.set({ fromDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.fromDate}\n />\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n label=\"To Date\"\n minDate={state.fromDate \|\| MIN_TIME}\n maxDate={TODAY}\n name=\"datepicker-to\"\n onChange={(date: Date) => {\n componentStore.set({ toDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.toDate}\n />\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withRangeAndKeyboardInput = () => {\n const MAX_TIME = new Date('3000-01-01T00:00:00.000Z');\n const MIN_TIME = new Date(0);\n const TODAY = new Date();\n const componentStore: Store<{ date: Date; fromDate: Date \| null; toDate: Date \| null }> = new Store({\n date: new Date(),\n fromDate: null,\n toDate: null,\n });\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en-US\">\n <div>\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n isKeyboardInputAllowed\n label=\"From Date\"\n maxDate={state.toDate \|\| MAX_TIME}\n name=\"datepicker-from\"\n onChange={(date: Date) => {\n componentStore.set({ fromDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.fromDate}\n />\n <DatePicker\n className=\"date-picker-example\"\n displayFormat={{\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }}\n hideOptionalLabel\n isKeyboardInputAllowed\n label=\"To Date\"\n minDate={state.fromDate \|\| MIN_TIME}\n maxDate={TODAY}\n name=\"datepicker-to\"\n onChange={(date: Date) => {\n componentStore.set({ toDate: date });\n }}\n placeholder=\"Choose a Date\"\n value={state.toDate}\n />\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/DatePicker',\n component: DatePicker,\n parameters: {\n notes,\n },\n};\n"],"file":"DatePicker.stories.js"}

package/es/components/draft-js-editor/DraftJSEditor.stories.js CHANGED Viewed

@@ -33,7 +33,7 @@ export const basic = () => {
   }));
 };
 export default {
-  title: 'Components|DraftJSEditor',
+  title: 'Components/DraftJSEditor',
   component: DraftJSEditor,
   parameters: {
     notes

package/es/components/draft-js-editor/DraftJSEditor.stories.js.flow CHANGED Viewed

@@ -42,7 +42,7 @@ export const basic = () => {
 };
 export default {
-    title: 'Components|DraftJSEditor',
+    title: 'Components/DraftJSEditor',
     component: DraftJSEditor,
     parameters: {
         notes,

package/es/components/draft-js-editor/DraftJSEditor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/draft-js-editor/DraftJSEditor.stories.js"],"names":["React","ContentState","EditorState","State","Store","boolean","DraftJSEditor","notes","DraftMentionDecorator","basic","initialEditorState","createWithContent","createFromText","componentStore","exampleExternalEditorState","setEditorState","newEditorState","set","state","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,UAA1C;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AACA,SAASC,qBAAT,QAAsC,4CAAtC;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM;AACvB,QAAMC,kBAAkB,GAAGR,WAAW,CAACS,iBAAZ,CACvBV,YAAY,CAACW,cAAb,CAA4B,SAA5B,CADuB,EAEvBJ,qBAFuB,CAA3B;AAIA,QAAMK,cAAc,GAAG,IAAIT,KAAJ,CAAU;AAC7BU,IAAAA,0BAA0B,EAAEJ;AADC,GAAV,CAAvB;;AAIA,QAAMK,cAAc,GAAGC,cAAc,IAAI;AACrCH,IAAAA,cAAc,CAACI,GAAf,CAAmB;AAAEH,MAAAA,0BAA0B,EAAEE;AAA9B,KAAnB;AACH,GAFD;;AAIA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAEH;AAAd,KACKK,KAAK,IACF,oBAAC,aAAD;AACI,IAAA,WAAW,EAAEA,KAAK,CAACJ,0BADvB;AAEI,IAAA,SAAS,EAAET,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,IAAA,UAAU,EAAE,EAHhB;AAII,IAAA,UAAU,EAAEA,OAAO,CAAC,YAAD,EAAe,KAAf,CAJvB;AAKI,IAAA,UAAU,EAAEA,OAAO,CAAC,YAAD,EAAe,IAAf,CALvB;AAMI,IAAA,KAAK,EAAC,yBANV;AAOI,IAAA,WAAW,EAAC,oCAPhB;AAQI,IAAA,MAAM,EAAE,MAAM,IARlB;AASI,IAAA,QAAQ,EAAEU,cATd;AAUI,IAAA,OAAO,EAAE,MAAM;AAVnB,IAFR,CADJ;AAkBH,CA/BM;AAiCP,eAAe;AACXI,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEd,aAFA;AAGXe,EAAAA,UAAU,EAAE;AACRd,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { ContentState, EditorState } from 'draft-js';\nimport { State, Store } from '@sambego/storybook-state';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport DraftJSEditor from './DraftJSEditor';\nimport notes from './DraftJSEditor.stories.md';\nimport { DraftMentionDecorator } from '../form-elements/draft-js-mention-selector';\n\nexport const basic = () => {\n const initialEditorState = EditorState.createWithContent(\n ContentState.createFromText('Example'),\n DraftMentionDecorator,\n );\n const componentStore = new Store({\n exampleExternalEditorState: initialEditorState,\n });\n\n const setEditorState = newEditorState => {\n componentStore.set({ exampleExternalEditorState: newEditorState });\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <DraftJSEditor\n editorState={state.exampleExternalEditorState}\n hideLabel={boolean('hideLabel', false)}\n inputProps={{}}\n isDisabled={boolean('isDisabled', false)}\n isRequired={boolean('isRequired', true)}\n label=\"Draft.js Editor Example\"\n description=\"Description for screenReader users\"\n onBlur={() => null}\n onChange={setEditorState}\n onFocus={() => null}\n />\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|DraftJSEditor',\n component: DraftJSEditor,\n parameters: {\n notes,\n },\n};\n"],"file":"DraftJSEditor.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/draft-js-editor/DraftJSEditor.stories.js"],"names":["React","ContentState","EditorState","State","Store","boolean","DraftJSEditor","notes","DraftMentionDecorator","basic","initialEditorState","createWithContent","createFromText","componentStore","exampleExternalEditorState","setEditorState","newEditorState","set","state","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,UAA1C;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AACA,SAASC,qBAAT,QAAsC,4CAAtC;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM;AACvB,QAAMC,kBAAkB,GAAGR,WAAW,CAACS,iBAAZ,CACvBV,YAAY,CAACW,cAAb,CAA4B,SAA5B,CADuB,EAEvBJ,qBAFuB,CAA3B;AAIA,QAAMK,cAAc,GAAG,IAAIT,KAAJ,CAAU;AAC7BU,IAAAA,0BAA0B,EAAEJ;AADC,GAAV,CAAvB;;AAIA,QAAMK,cAAc,GAAGC,cAAc,IAAI;AACrCH,IAAAA,cAAc,CAACI,GAAf,CAAmB;AAAEH,MAAAA,0BAA0B,EAAEE;AAA9B,KAAnB;AACH,GAFD;;AAIA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAEH;AAAd,KACKK,KAAK,IACF,oBAAC,aAAD;AACI,IAAA,WAAW,EAAEA,KAAK,CAACJ,0BADvB;AAEI,IAAA,SAAS,EAAET,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,IAAA,UAAU,EAAE,EAHhB;AAII,IAAA,UAAU,EAAEA,OAAO,CAAC,YAAD,EAAe,KAAf,CAJvB;AAKI,IAAA,UAAU,EAAEA,OAAO,CAAC,YAAD,EAAe,IAAf,CALvB;AAMI,IAAA,KAAK,EAAC,yBANV;AAOI,IAAA,WAAW,EAAC,oCAPhB;AAQI,IAAA,MAAM,EAAE,MAAM,IARlB;AASI,IAAA,QAAQ,EAAEU,cATd;AAUI,IAAA,OAAO,EAAE,MAAM;AAVnB,IAFR,CADJ;AAkBH,CA/BM;AAiCP,eAAe;AACXI,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEd,aAFA;AAGXe,EAAAA,UAAU,EAAE;AACRd,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { ContentState, EditorState } from 'draft-js';\nimport { State, Store } from '@sambego/storybook-state';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport DraftJSEditor from './DraftJSEditor';\nimport notes from './DraftJSEditor.stories.md';\nimport { DraftMentionDecorator } from '../form-elements/draft-js-mention-selector';\n\nexport const basic = () => {\n const initialEditorState = EditorState.createWithContent(\n ContentState.createFromText('Example'),\n DraftMentionDecorator,\n );\n const componentStore = new Store({\n exampleExternalEditorState: initialEditorState,\n });\n\n const setEditorState = newEditorState => {\n componentStore.set({ exampleExternalEditorState: newEditorState });\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <DraftJSEditor\n editorState={state.exampleExternalEditorState}\n hideLabel={boolean('hideLabel', false)}\n inputProps={{}}\n isDisabled={boolean('isDisabled', false)}\n isRequired={boolean('isRequired', true)}\n label=\"Draft.js Editor Example\"\n description=\"Description for screenReader users\"\n onBlur={() => null}\n onChange={setEditorState}\n onFocus={() => null}\n />\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/DraftJSEditor',\n component: DraftJSEditor,\n parameters: {\n notes,\n },\n};\n"],"file":"DraftJSEditor.stories.js"}

package/es/components/draggable-list/DraggableList.stories.js CHANGED Viewed

@@ -75,7 +75,7 @@ export const ExampleIsDraggableViaHandle = () => React.createElement(DraggableLi
   isDraggableViaHandle: true
 });
 export default {
-  title: 'Components|DraggableList',
+  title: 'Components/DraggableList',
   component: DraggableList,
   parameters: {
     notes

package/es/components/draggable-list/DraggableList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/draggable-list/DraggableList.stories.tsx"],"names":["React","uniqueId","Checkbox","DraggableList","DraggableListItem","reorder","notes","DraggableListExamples","Component","items","listId","count","Array","from","length","v","k","map","id","label","sourceIndex","destinationIndex","state","setState","componentDidMount","getItems","render","isDraggableViaHandle","props","onDragEnd","item","index","Example","ExampleIsDraggableViaHandle","title","component","parameters"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,OAAOC,QAAP,MAAqB,sBAArB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,OAAP,MAAyC,gCAAzC;AAEA,OAAOC,KAAP,MAAkB,4BAAlB;;AAWA,MAAMC,qBAAN,SAAoCP,KAAK,CAACQ,SAA1C,CAAkE;AAAA;AAAA;;AAAA,mCACtD;AACJC,MAAAA,KAAK,EAAE,EADH;AAEJC,MAAAA,MAAM,EAAE;AAFJ,KADsD;;AAAA,sCAalDC,KAAD,IAA2C;AAClD,aAAOC,KAAK,CAACC,IAAN,CAAW;AAAEC,QAAAA,MAAM,EAAEH;AAAV,OAAX,EAA8B,CAACI,CAAD,EAAIC,CAAJ,KAAUA,CAAxC,EAA2CC,GAA3C,CAA+CD,CAAC,KAAK;AACxDE,QAAAA,EAAE,EAAEjB,QAAQ,CAAC,OAAD,CAD4C;AAExDkB,QAAAA,KAAK,iBAAUH,CAAV;AAFmD,OAAL,CAAhD,CAAP;AAIH,KAlB6D;;AAAA,uCAoBlD,CAACI,WAAD,EAAsBC,gBAAtB,KAAmD;AAC3D,UAAI,CAACA,gBAAL,EAAuB;AACnB;AACH;;AAED,YAAMZ,KAAK,GAAGJ,OAAO,CAAC,KAAKiB,KAAL,CAAWb,KAAZ,EAAmBW,WAAnB,EAAgCC,gBAAhC,CAArB;AAEA,WAAKE,QAAL,CAAc;AACVd,QAAAA;AADU,OAAd;AAGH,KA9B6D;AAAA;;AAM9De,EAAAA,iBAAiB,GAAG;AAChB,SAAKD,QAAL,CAAc;AACVd,MAAAA,KAAK,EAAE,KAAKgB,QAAL,CAAc,EAAd,CADG;AAEVf,MAAAA,MAAM,EAAET,QAAQ;AAFN,KAAd;AAIH;;AAqBDyB,EAAAA,MAAM,GAAG;AACL,UAAM;AAAEC,MAAAA;AAAF,QAA2B,KAAKC,KAAtC;AACA,UAAM;AAAEnB,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoB,KAAKY,KAA/B;AAEA,WACI,oBAAC,aAAD;AAAe,MAAA,SAAS,EAAC,kCAAzB;AAA4D,MAAA,MAAM,EAAEZ,MAApE;AAA4E,MAAA,SAAS,EAAE,KAAKmB;AAA5F,OACKpB,KAAK,CAACQ,GAAN,CAAU,CAACa,IAAD,EAAwBC,KAAxB,KACP,oBAAC,iBAAD;AACI,MAAA,GAAG,sBAAeA,KAAf,CADP;AAEI,MAAA,EAAE,EAAED,IAAI,CAACZ,EAFb;AAGI,MAAA,KAAK,EAAEa,KAHX;AAII,MAAA,oBAAoB,EAAEJ;AAJ1B,OAMI,oBAAC,QAAD;AAAU,MAAA,KAAK,EAAEG,IAAI,CAACX,KAAtB;AAA6B,MAAA,IAAI,EAAEW,IAAI,CAACX;AAAxC,MANJ,CADH,CADL,CADJ;AAcH;;AAlD6D;;AAqDlE,OAAO,MAAMa,OAAO,GAAG,MAAM,oBAAC,qBAAD,OAAtB;AAEP,OAAO,MAAMC,2BAA2B,GAAG,MAAM,oBAAC,qBAAD;AAAuB,EAAA,oBAAoB;AAA3C,EAA1C;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEhC,aAFA;AAGXiC,EAAAA,UAAU,EAAE;AACR9B,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport uniqueId from 'lodash/uniqueId';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport DraggableList from './DraggableList';\nimport DraggableListItem from './DraggableListItem';\nimport reorder, { ReorderListItem } from './draggable-list-utils/reorder';\n\nimport notes from './DraggableList.stories.md';\n\ninterface Props {\n isDraggableViaHandle?: boolean;\n}\n\ninterface State {\n items: Array<ReorderListItem>;\n listId: string;\n}\n\nclass DraggableListExamples extends React.Component<Props, State> {\n state = {\n items: [],\n listId: '',\n };\n\n componentDidMount() {\n this.setState({\n items: this.getItems(10),\n listId: uniqueId(),\n });\n }\n\n getItems = (count: number): Array<ReorderListItem> => {\n return Array.from({ length: count }, (v, k) => k).map(k => ({\n id: uniqueId('item_'),\n label: `item ${k}`,\n }));\n };\n\n onDragEnd = (sourceIndex: number, destinationIndex: number) => {\n if (!destinationIndex) {\n return;\n }\n\n const items = reorder(this.state.items, sourceIndex, destinationIndex);\n\n this.setState({\n items,\n });\n };\n\n render() {\n const { isDraggableViaHandle } = this.props;\n const { items, listId } = this.state;\n\n return (\n <DraggableList className=\"draggable-list-example-container\" listId={listId} onDragEnd={this.onDragEnd}>\n {items.map((item: ReorderListItem, index) => (\n <DraggableListItem\n key={`draggable-${index}`}\n id={item.id}\n index={index}\n isDraggableViaHandle={isDraggableViaHandle}\n >\n <Checkbox label={item.label} name={item.label} />\n </DraggableListItem>\n ))}\n </DraggableList>\n );\n }\n}\n\nexport const Example = () => <DraggableListExamples />;\n\nexport const ExampleIsDraggableViaHandle = () => <DraggableListExamples isDraggableViaHandle />;\n\nexport default {\n title: 'Components\|DraggableList',\n component: DraggableList,\n parameters: {\n notes,\n },\n};\n"],"file":"DraggableList.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/draggable-list/DraggableList.stories.tsx"],"names":["React","uniqueId","Checkbox","DraggableList","DraggableListItem","reorder","notes","DraggableListExamples","Component","items","listId","count","Array","from","length","v","k","map","id","label","sourceIndex","destinationIndex","state","setState","componentDidMount","getItems","render","isDraggableViaHandle","props","onDragEnd","item","index","Example","ExampleIsDraggableViaHandle","title","component","parameters"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,OAAOC,QAAP,MAAqB,sBAArB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,OAAP,MAAyC,gCAAzC;AAEA,OAAOC,KAAP,MAAkB,4BAAlB;;AAWA,MAAMC,qBAAN,SAAoCP,KAAK,CAACQ,SAA1C,CAAkE;AAAA;AAAA;;AAAA,mCACtD;AACJC,MAAAA,KAAK,EAAE,EADH;AAEJC,MAAAA,MAAM,EAAE;AAFJ,KADsD;;AAAA,sCAalDC,KAAD,IAA2C;AAClD,aAAOC,KAAK,CAACC,IAAN,CAAW;AAAEC,QAAAA,MAAM,EAAEH;AAAV,OAAX,EAA8B,CAACI,CAAD,EAAIC,CAAJ,KAAUA,CAAxC,EAA2CC,GAA3C,CAA+CD,CAAC,KAAK;AACxDE,QAAAA,EAAE,EAAEjB,QAAQ,CAAC,OAAD,CAD4C;AAExDkB,QAAAA,KAAK,iBAAUH,CAAV;AAFmD,OAAL,CAAhD,CAAP;AAIH,KAlB6D;;AAAA,uCAoBlD,CAACI,WAAD,EAAsBC,gBAAtB,KAAmD;AAC3D,UAAI,CAACA,gBAAL,EAAuB;AACnB;AACH;;AAED,YAAMZ,KAAK,GAAGJ,OAAO,CAAC,KAAKiB,KAAL,CAAWb,KAAZ,EAAmBW,WAAnB,EAAgCC,gBAAhC,CAArB;AAEA,WAAKE,QAAL,CAAc;AACVd,QAAAA;AADU,OAAd;AAGH,KA9B6D;AAAA;;AAM9De,EAAAA,iBAAiB,GAAG;AAChB,SAAKD,QAAL,CAAc;AACVd,MAAAA,KAAK,EAAE,KAAKgB,QAAL,CAAc,EAAd,CADG;AAEVf,MAAAA,MAAM,EAAET,QAAQ;AAFN,KAAd;AAIH;;AAqBDyB,EAAAA,MAAM,GAAG;AACL,UAAM;AAAEC,MAAAA;AAAF,QAA2B,KAAKC,KAAtC;AACA,UAAM;AAAEnB,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoB,KAAKY,KAA/B;AAEA,WACI,oBAAC,aAAD;AAAe,MAAA,SAAS,EAAC,kCAAzB;AAA4D,MAAA,MAAM,EAAEZ,MAApE;AAA4E,MAAA,SAAS,EAAE,KAAKmB;AAA5F,OACKpB,KAAK,CAACQ,GAAN,CAAU,CAACa,IAAD,EAAwBC,KAAxB,KACP,oBAAC,iBAAD;AACI,MAAA,GAAG,sBAAeA,KAAf,CADP;AAEI,MAAA,EAAE,EAAED,IAAI,CAACZ,EAFb;AAGI,MAAA,KAAK,EAAEa,KAHX;AAII,MAAA,oBAAoB,EAAEJ;AAJ1B,OAMI,oBAAC,QAAD;AAAU,MAAA,KAAK,EAAEG,IAAI,CAACX,KAAtB;AAA6B,MAAA,IAAI,EAAEW,IAAI,CAACX;AAAxC,MANJ,CADH,CADL,CADJ;AAcH;;AAlD6D;;AAqDlE,OAAO,MAAMa,OAAO,GAAG,MAAM,oBAAC,qBAAD,OAAtB;AAEP,OAAO,MAAMC,2BAA2B,GAAG,MAAM,oBAAC,qBAAD;AAAuB,EAAA,oBAAoB;AAA3C,EAA1C;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEhC,aAFA;AAGXiC,EAAAA,UAAU,EAAE;AACR9B,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport uniqueId from 'lodash/uniqueId';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport DraggableList from './DraggableList';\nimport DraggableListItem from './DraggableListItem';\nimport reorder, { ReorderListItem } from './draggable-list-utils/reorder';\n\nimport notes from './DraggableList.stories.md';\n\ninterface Props {\n isDraggableViaHandle?: boolean;\n}\n\ninterface State {\n items: Array<ReorderListItem>;\n listId: string;\n}\n\nclass DraggableListExamples extends React.Component<Props, State> {\n state = {\n items: [],\n listId: '',\n };\n\n componentDidMount() {\n this.setState({\n items: this.getItems(10),\n listId: uniqueId(),\n });\n }\n\n getItems = (count: number): Array<ReorderListItem> => {\n return Array.from({ length: count }, (v, k) => k).map(k => ({\n id: uniqueId('item_'),\n label: `item ${k}`,\n }));\n };\n\n onDragEnd = (sourceIndex: number, destinationIndex: number) => {\n if (!destinationIndex) {\n return;\n }\n\n const items = reorder(this.state.items, sourceIndex, destinationIndex);\n\n this.setState({\n items,\n });\n };\n\n render() {\n const { isDraggableViaHandle } = this.props;\n const { items, listId } = this.state;\n\n return (\n <DraggableList className=\"draggable-list-example-container\" listId={listId} onDragEnd={this.onDragEnd}>\n {items.map((item: ReorderListItem, index) => (\n <DraggableListItem\n key={`draggable-${index}`}\n id={item.id}\n index={index}\n isDraggableViaHandle={isDraggableViaHandle}\n >\n <Checkbox label={item.label} name={item.label} />\n </DraggableListItem>\n ))}\n </DraggableList>\n );\n }\n}\n\nexport const Example = () => <DraggableListExamples />;\n\nexport const ExampleIsDraggableViaHandle = () => <DraggableListExamples isDraggableViaHandle />;\n\nexport default {\n title: 'Components/DraggableList',\n component: DraggableList,\n parameters: {\n notes,\n },\n};\n"],"file":"DraggableList.stories.js"}

package/es/components/dropdown-menu/DropdownMenu.stories.js CHANGED Viewed

@@ -70,7 +70,7 @@ export const responsiveWithHeader = () => React.createElement(DropdownMenu, {
   isDisabled: boolean('isDisabled', true)
 }, "Disabled Option"), React.createElement(MenuSeparator, null), React.createElement(SubmenuItem, null, "Submenu", React.createElement(Menu, null, React.createElement(MenuItem, null, "View Profile"), React.createElement(MenuItem, null, "Help"))), React.createElement(MenuItem, null, "Help")));
 export default {
-  title: 'Components|DropdownMenu',
+  title: 'Components/DropdownMenu',
   component: DropdownMenu,
   parameters: {
     notes

package/es/components/dropdown-menu/DropdownMenu.stories.js.flow CHANGED Viewed

@@ -103,7 +103,7 @@ export const responsiveWithHeader = () => (
 );
 export default {
-    title: 'Components|DropdownMenu',
+    title: 'Components/DropdownMenu',
     component: DropdownMenu,
     parameters: {
         notes,

package/es/components/dropdown-menu/DropdownMenu.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/dropdown-menu/DropdownMenu.stories.js"],"names":["React","boolean","Avatar","Button","Link","Menu","MenuItem","MenuLinkItem","MenuSeparator","MenuHeader","MenuToggle","PlainButton","SubmenuItem","DropdownMenu","notes","generateClickHandler","message","event","preventDefault","console","log","basic","withLinkMenu","responsiveWithHeader","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Avatar from '../avatar/Avatar';\nimport Button from '../button/Button';\nimport Link from '../link/Link';\nimport Menu from '../menu/Menu';\nimport MenuItem from '../menu/MenuItem';\nimport MenuLinkItem from '../menu/MenuLinkItem';\nimport MenuSeparator from '../menu/MenuSeparator';\nimport MenuHeader from '../menu/MenuHeader';\nimport MenuToggle from './MenuToggle';\nimport PlainButton from '../plain-button/PlainButton';\nimport SubmenuItem from '../menu/SubmenuItem';\n\nimport DropdownMenu from './DropdownMenu';\nimport notes from './DropdownMenu.stories.md';\n\nfunction generateClickHandler(message) {\n return event => {\n event.preventDefault();\n /* eslint-disable-next-line no-console /\n console.log(`${message} menu option selected`);\n };\n}\n\nexport const basic = () => (\n <DropdownMenu\n isResponsive\n onMenuOpen={() => {\n / eslint-disable-next-line no-console /\n console.log('menu opened');\n }}\n onMenuClose={() => {\n / eslint-disable-next-line no-console /\n console.log('menu closed');\n }}\n >\n <PlainButton className=\"dropdown-menu-example-button\" type=\"button\">\n <MenuToggle>\n <Avatar id=\"123\" name=\"Jay Tee\" />\n </MenuToggle>\n </PlainButton>\n <Menu>\n <MenuItem onClick={generateClickHandler('View Profile')}>View Profile</MenuItem>\n <MenuItem onClick={generateClickHandler('Help')}>Help</MenuItem>\n <MenuItem\n onClick={generateClickHandler('Should Not Fire This Handler')}\n isDisabled={boolean('isDisabled', true)}\n >\n Disabled Option\n </MenuItem>\n <MenuSeparator />\n <MenuLinkItem>\n <Link href=\"/logout-example-link\" onClick={generateClickHandler('Log Out')}>\n Log Out\n </Link>\n </MenuLinkItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport const withLinkMenu = () => (\n // When using `MenuToggle` in an element with the `lnk` class, the caret icon is automatically colored blue.\n <DropdownMenu>\n <PlainButton className=\"lnk\">\n <MenuToggle>Hello</MenuToggle>\n </PlainButton>\n <Menu>\n <MenuItem\n / eslint-disable-next-line no-console */\n onClick={() => console.log('hey')}\n >\n Menu Item\n </MenuItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport const responsiveWithHeader = () => (\n <DropdownMenu isResponsive>\n <PlainButton className=\"dropdown-menu-example-button\" type=\"button\">\n <MenuToggle>\n <Button>View in mobile</Button>\n </MenuToggle>\n </PlainButton>\n <Menu>\n <MenuHeader title=\"Optional Title\" subtitle=\"Subtitle\" /> <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n <MenuItem isDisabled={boolean('isDisabled', true)}>Disabled Option</MenuItem>\n <MenuSeparator />\n <SubmenuItem>\n Submenu\n <Menu>\n <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </SubmenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport default {\n title: 'Components\|DropdownMenu',\n component: DropdownMenu,\n parameters: {\n notes,\n },\n};\n"],"file":"DropdownMenu.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/dropdown-menu/DropdownMenu.stories.js"],"names":["React","boolean","Avatar","Button","Link","Menu","MenuItem","MenuLinkItem","MenuSeparator","MenuHeader","MenuToggle","PlainButton","SubmenuItem","DropdownMenu","notes","generateClickHandler","message","event","preventDefault","console","log","basic","withLinkMenu","responsiveWithHeader","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Avatar from '../avatar/Avatar';\nimport Button from '../button/Button';\nimport Link from '../link/Link';\nimport Menu from '../menu/Menu';\nimport MenuItem from '../menu/MenuItem';\nimport MenuLinkItem from '../menu/MenuLinkItem';\nimport MenuSeparator from '../menu/MenuSeparator';\nimport MenuHeader from '../menu/MenuHeader';\nimport MenuToggle from './MenuToggle';\nimport PlainButton from '../plain-button/PlainButton';\nimport SubmenuItem from '../menu/SubmenuItem';\n\nimport DropdownMenu from './DropdownMenu';\nimport notes from './DropdownMenu.stories.md';\n\nfunction generateClickHandler(message) {\n return event => {\n event.preventDefault();\n /* eslint-disable-next-line no-console /\n console.log(`${message} menu option selected`);\n };\n}\n\nexport const basic = () => (\n <DropdownMenu\n isResponsive\n onMenuOpen={() => {\n / eslint-disable-next-line no-console /\n console.log('menu opened');\n }}\n onMenuClose={() => {\n / eslint-disable-next-line no-console /\n console.log('menu closed');\n }}\n >\n <PlainButton className=\"dropdown-menu-example-button\" type=\"button\">\n <MenuToggle>\n <Avatar id=\"123\" name=\"Jay Tee\" />\n </MenuToggle>\n </PlainButton>\n <Menu>\n <MenuItem onClick={generateClickHandler('View Profile')}>View Profile</MenuItem>\n <MenuItem onClick={generateClickHandler('Help')}>Help</MenuItem>\n <MenuItem\n onClick={generateClickHandler('Should Not Fire This Handler')}\n isDisabled={boolean('isDisabled', true)}\n >\n Disabled Option\n </MenuItem>\n <MenuSeparator />\n <MenuLinkItem>\n <Link href=\"/logout-example-link\" onClick={generateClickHandler('Log Out')}>\n Log Out\n </Link>\n </MenuLinkItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport const withLinkMenu = () => (\n // When using `MenuToggle` in an element with the `lnk` class, the caret icon is automatically colored blue.\n <DropdownMenu>\n <PlainButton className=\"lnk\">\n <MenuToggle>Hello</MenuToggle>\n </PlainButton>\n <Menu>\n <MenuItem\n / eslint-disable-next-line no-console */\n onClick={() => console.log('hey')}\n >\n Menu Item\n </MenuItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport const responsiveWithHeader = () => (\n <DropdownMenu isResponsive>\n <PlainButton className=\"dropdown-menu-example-button\" type=\"button\">\n <MenuToggle>\n <Button>View in mobile</Button>\n </MenuToggle>\n </PlainButton>\n <Menu>\n <MenuHeader title=\"Optional Title\" subtitle=\"Subtitle\" /> <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n <MenuItem isDisabled={boolean('isDisabled', true)}>Disabled Option</MenuItem>\n <MenuSeparator />\n <SubmenuItem>\n Submenu\n <Menu>\n <MenuItem>View Profile</MenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </SubmenuItem>\n <MenuItem>Help</MenuItem>\n </Menu>\n </DropdownMenu>\n);\n\nexport default {\n title: 'Components/DropdownMenu',\n component: DropdownMenu,\n parameters: {\n notes,\n },\n};\n"],"file":"DropdownMenu.stories.js"}

package/es/components/error-mask/ErrorMask.stories.js CHANGED Viewed

@@ -6,7 +6,7 @@ export const regular = () => React.createElement(ErrorMask, {
   errorSubHeader: "Please refresh the page or try again later. And if it still doesn't work, then contact support. And if you can't contact support, post on our community forums."
 });
 export default {
-  title: 'Components|ErrorMask',
+  title: 'Components/ErrorMask',
   component: ErrorMask,
   parameters: {
     notes

package/es/components/error-mask/ErrorMask.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/error-mask/ErrorMask.stories.tsx"],"names":["React","ErrorMask","notes","regular","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,wHADhB;AAEI,EAAA,cAAc,EAAC;AAFnB,EADG;AAOP,eAAe;AACXC,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEJ,SAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport ErrorMask from './ErrorMask';\nimport notes from './ErrorMask.stories.md';\n\nexport const regular = () => (\n <ErrorMask\n errorHeader=\"Apologies, we were unable to load this. But you can try what's mentioned below or just give up. No shame in giving up.\"\n errorSubHeader=\"Please refresh the page or try again later. And if it still doesn't work, then contact support. And if you can't contact support, post on our community forums.\"\n />\n);\n\nexport default {\n title: 'Components\|ErrorMask',\n component: ErrorMask,\n parameters: {\n notes,\n },\n};\n"],"file":"ErrorMask.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/error-mask/ErrorMask.stories.tsx"],"names":["React","ErrorMask","notes","regular","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,wHADhB;AAEI,EAAA,cAAc,EAAC;AAFnB,EADG;AAOP,eAAe;AACXC,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEJ,SAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport ErrorMask from './ErrorMask';\nimport notes from './ErrorMask.stories.md';\n\nexport const regular = () => (\n <ErrorMask\n errorHeader=\"Apologies, we were unable to load this. But you can try what's mentioned below or just give up. No shame in giving up.\"\n errorSubHeader=\"Please refresh the page or try again later. And if it still doesn't work, then contact support. And if you can't contact support, post on our community forums.\"\n />\n);\n\nexport default {\n title: 'Components/ErrorMask',\n component: ErrorMask,\n parameters: {\n notes,\n },\n};\n"],"file":"ErrorMask.stories.js"}

package/es/components/fieldset/Fieldset.stories.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const basic = () => React.createElement(Fieldset, {
   value: "tiramisu"
 })));
 export default {
-  title: 'Components|Fieldset',
+  title: 'Components/Fieldset',
   component: Fieldset,
   parameters: {
     notes

package/es/components/fieldset/Fieldset.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/fieldset/Fieldset.stories.tsx"],"names":["React","RadioButton","RadioGroup","Fieldset","notes","basic","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,KAAP,MAAkB,uBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,QAAD;AAAU,EAAA,KAAK,EAAC;AAAhB,GACI,oBAAC,UAAD;AAAY,EAAA,IAAI,EAAC,UAAjB;AAA4B,EAAA,KAAK,EAAC;AAAlC,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,WAAnB;AAA+B,EAAA,KAAK,EAAC;AAArC,EADJ,EAEI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,YAAnB;AAAgC,EAAA,KAAK,EAAC;AAAtC,EAFJ,EAGI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EAHJ,EAII,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EAJJ,EAKI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EALJ,CADJ,CADG;AAYP,eAAe;AACXC,EAAAA,KAAK,EAAE,qBADI;AAEXC,EAAAA,SAAS,EAAEJ,QAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport RadioButton from '../radio/RadioButton';\nimport RadioGroup from '../radio/RadioGroup';\n\nimport Fieldset from './Fieldset';\nimport notes from './Fieldset.stories.md';\n\nexport const basic = () => (\n <Fieldset title=\"Choose your favorite dessert\">\n <RadioGroup name=\"nodeType\" value=\"cupcakes\">\n <RadioButton label=\"Apple Pie\" value=\"applePie\" />\n <RadioButton label=\"Cheesecake\" value=\"cheesecake\" />\n <RadioButton label=\"Cupcakes\" value=\"cupcakes\" />\n <RadioButton label=\"Macarons\" value=\"macarons\" />\n <RadioButton label=\"Tiramisu\" value=\"tiramisu\" />\n </RadioGroup>\n </Fieldset>\n);\n\nexport default {\n title: 'Components\|Fieldset',\n component: Fieldset,\n parameters: {\n notes,\n },\n};\n"],"file":"Fieldset.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/fieldset/Fieldset.stories.tsx"],"names":["React","RadioButton","RadioGroup","Fieldset","notes","basic","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,KAAP,MAAkB,uBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,QAAD;AAAU,EAAA,KAAK,EAAC;AAAhB,GACI,oBAAC,UAAD;AAAY,EAAA,IAAI,EAAC,UAAjB;AAA4B,EAAA,KAAK,EAAC;AAAlC,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,WAAnB;AAA+B,EAAA,KAAK,EAAC;AAArC,EADJ,EAEI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,YAAnB;AAAgC,EAAA,KAAK,EAAC;AAAtC,EAFJ,EAGI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EAHJ,EAII,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EAJJ,EAKI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,UAAnB;AAA8B,EAAA,KAAK,EAAC;AAApC,EALJ,CADJ,CADG;AAYP,eAAe;AACXC,EAAAA,KAAK,EAAE,qBADI;AAEXC,EAAAA,SAAS,EAAEJ,QAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport RadioButton from '../radio/RadioButton';\nimport RadioGroup from '../radio/RadioGroup';\n\nimport Fieldset from './Fieldset';\nimport notes from './Fieldset.stories.md';\n\nexport const basic = () => (\n <Fieldset title=\"Choose your favorite dessert\">\n <RadioGroup name=\"nodeType\" value=\"cupcakes\">\n <RadioButton label=\"Apple Pie\" value=\"applePie\" />\n <RadioButton label=\"Cheesecake\" value=\"cheesecake\" />\n <RadioButton label=\"Cupcakes\" value=\"cupcakes\" />\n <RadioButton label=\"Macarons\" value=\"macarons\" />\n <RadioButton label=\"Tiramisu\" value=\"tiramisu\" />\n </RadioGroup>\n </Fieldset>\n);\n\nexport default {\n title: 'Components/Fieldset',\n component: Fieldset,\n parameters: {\n notes,\n },\n};\n"],"file":"Fieldset.stories.js"}

package/es/components/flyout/Flyout.stories.js CHANGED Viewed

@@ -73,7 +73,7 @@ export const Complex = () => {
   }, React.createElement(PrimaryButton, null, "Submit"), React.createElement(Button, null, "Close")))));
 };
 export default {
-  title: 'Components|Flyout',
+  title: 'Components/Flyout',
   component: Flyout,
   parameters: {
     notes

package/es/components/flyout/Flyout.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/flyout/Flyout.stories.tsx"],"names":["React","select","Button","IconHelp","TextInput","PlainButton","PrimaryButton","TextArea","Flyout","Overlay","notes","Basic","positions","position","marginTop","marginLeft","OpenOnHover","Complex","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,8BAArB,C,CACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,aAAP,MAA0B,mBAA1B,C,CACA;;AACA,OAAOC,QAAP,MAAqB,cAArB,C,CAEA;;AACA,SAASC,MAAT,EAAiBC,OAAjB,QAAgC,GAAhC;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM;AACvB,QAAMC,SAAS,GAAG;AACd,qBAAiB,eADH;AAEd,mBAAe,aAFD;AAGd,oBAAgB,cAHF;AAId,mBAAe,aAJD;AAKd,oBAAgB,cALF;AAMd,kBAAc,UANA;AAOd,gBAAY,UAPE;AAQd,iBAAa;AARC,GAAlB;AAWA,QAAMC,QAAQ,GAAGZ,MAAM,CAAC,UAAD,EAAaW,SAAb,EAAwB,eAAxB,CAAvB;AAEA,SACI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,mBAAmB,EAAE,KAA7B;AAAoC,IAAA,QAAQ,EAAEF;AAA9C,KACI,oBAAC,MAAD,8BADJ,EAEI,oBAAC,OAAD,QACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,0DADJ,EAEI,kEAFJ,EAGI,+BAHJ,EAII,+BACI,6DADJ,CAJJ,CADJ,CAFJ,CADJ,CADJ;AAiBH,CA/BM;AAiCP,OAAO,MAAMG,WAAW,GAAG,MAAM;AAC7B,SACI;AAAK,IAAA,KAAK,EAAE;AAAEF,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,WAAW;AAAnB,KACI,oBAAC,MAAD,wBADJ,EAEI,oBAAC,OAAD,QACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,4CADJ,EAEI,gDAFJ,EAGI,+BAHJ,EAII;AAAG,IAAA,IAAI,EAAC;AAAR,qBAJJ,CADJ,CAFJ,CADJ,CADJ;AAeH,CAhBM;AAkBP,OAAO,MAAME,OAAO,GAAG,MAAM;AACzB,SACI;AAAK,IAAA,KAAK,EAAE;AAAEH,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,0BAAlB;AAA6C,IAAA,MAAM,EAAC;AAApD,KACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACI,oBAAC,QAAD,OADJ,CADJ,EAII,oBAAC,OAAD,QACI,iCACI,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,UAAf;AAA0B,IAAA,KAAK,EAAC;AAAhC,IADJ,CADJ,EAII,iCACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,eAA9B;AAA8C,IAAA,WAAW,EAAC,kBAA1D;AAA6E,IAAA,IAAI,EAAC;AAAlF,IADJ,CAJJ,EAOI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,aAAD,iBADJ,EAEI,oBAAC,MAAD,gBAFJ,CAPJ,CAJJ,CADJ,CADJ;AAqBH,CAtBM;AAwBP,eAAe;AACXG,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAEX,MAFA;AAGXY,EAAAA,UAAU,EAAE;AACRV,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { select } from '@storybook/addon-knobs';\n\nimport Button from '../button';\nimport IconHelp from '../../icons/general/IconHelp';\n// @ts-ignore JS import\nimport TextInput from '../text-input';\nimport PlainButton from '../plain-button';\nimport PrimaryButton from '../primary-button';\n// @ts-ignore JS import\nimport TextArea from '../text-area';\n\n// @ts-ignore JS import\nimport { Flyout, Overlay } from '.';\nimport notes from './Flyout.stories.md';\n\nexport const Basic = () => {\n const positions = {\n 'bottom-center': 'bottom-center',\n 'bottom-left': 'bottom-left',\n 'bottom-right': 'bottom-right',\n 'middle-left': 'middle-left',\n 'middle-right': 'middle-right',\n 'top-center': 'top-left',\n 'top-left': 'top-left',\n 'top-right': 'top-right',\n };\n\n const position = select('Position', positions, 'bottom-center');\n\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout closeOnClickOutside={false} position={position}>\n <Button>Nothing to see here</Button>\n <Overlay>\n <div className=\"accessible-overlay-content\">\n <p>Try hitting the Tab key.</p>\n <p>Now try click outside, go ahead.</p>\n <br />\n <p>\n <i>You are not going anywhere.</i>\n </p>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport const OpenOnHover = () => {\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout openOnHover>\n <Button>Open on Hover</Button>\n <Overlay>\n <div className=\"accessible-overlay-content\">\n <h1>Some text</h1>\n <p>Some more text</p>\n <br />\n <a href=\"https://google.com\">Go to Google?</a>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport const Complex = () => {\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout className=\"amsterdam-survey-overlay\" offset=\"0 0\">\n <PlainButton className=\"amsterdam-survey-button\">\n <IconHelp />\n </PlainButton>\n <Overlay>\n <div>\n <TextArea name=\"textarea\" label=\"Provide Feedback\" />\n </div>\n <div>\n <TextInput name=\"email\" label=\"Email Address\" placeholder=\"user@example.com\" type=\"email\" />\n </div>\n <div className=\"icon-menu-container\">\n <PrimaryButton>Submit</PrimaryButton>\n <Button>Close</Button>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport default {\n title: 'Components\|Flyout',\n component: Flyout,\n parameters: {\n notes,\n },\n};\n"],"file":"Flyout.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/flyout/Flyout.stories.tsx"],"names":["React","select","Button","IconHelp","TextInput","PlainButton","PrimaryButton","TextArea","Flyout","Overlay","notes","Basic","positions","position","marginTop","marginLeft","OpenOnHover","Complex","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,8BAArB,C,CACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,aAAP,MAA0B,mBAA1B,C,CACA;;AACA,OAAOC,QAAP,MAAqB,cAArB,C,CAEA;;AACA,SAASC,MAAT,EAAiBC,OAAjB,QAAgC,GAAhC;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM;AACvB,QAAMC,SAAS,GAAG;AACd,qBAAiB,eADH;AAEd,mBAAe,aAFD;AAGd,oBAAgB,cAHF;AAId,mBAAe,aAJD;AAKd,oBAAgB,cALF;AAMd,kBAAc,UANA;AAOd,gBAAY,UAPE;AAQd,iBAAa;AARC,GAAlB;AAWA,QAAMC,QAAQ,GAAGZ,MAAM,CAAC,UAAD,EAAaW,SAAb,EAAwB,eAAxB,CAAvB;AAEA,SACI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,mBAAmB,EAAE,KAA7B;AAAoC,IAAA,QAAQ,EAAEF;AAA9C,KACI,oBAAC,MAAD,8BADJ,EAEI,oBAAC,OAAD,QACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,0DADJ,EAEI,kEAFJ,EAGI,+BAHJ,EAII,+BACI,6DADJ,CAJJ,CADJ,CAFJ,CADJ,CADJ;AAiBH,CA/BM;AAiCP,OAAO,MAAMG,WAAW,GAAG,MAAM;AAC7B,SACI;AAAK,IAAA,KAAK,EAAE;AAAEF,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,WAAW;AAAnB,KACI,oBAAC,MAAD,wBADJ,EAEI,oBAAC,OAAD,QACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,4CADJ,EAEI,gDAFJ,EAGI,+BAHJ,EAII;AAAG,IAAA,IAAI,EAAC;AAAR,qBAJJ,CADJ,CAFJ,CADJ,CADJ;AAeH,CAhBM;AAkBP,OAAO,MAAME,OAAO,GAAG,MAAM;AACzB,SACI;AAAK,IAAA,KAAK,EAAE;AAAEH,MAAAA,SAAS,EAAE,GAAb;AAAkBC,MAAAA,UAAU,EAAE;AAA9B;AAAZ,KACI,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,0BAAlB;AAA6C,IAAA,MAAM,EAAC;AAApD,KACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACI,oBAAC,QAAD,OADJ,CADJ,EAII,oBAAC,OAAD,QACI,iCACI,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,UAAf;AAA0B,IAAA,KAAK,EAAC;AAAhC,IADJ,CADJ,EAII,iCACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,eAA9B;AAA8C,IAAA,WAAW,EAAC,kBAA1D;AAA6E,IAAA,IAAI,EAAC;AAAlF,IADJ,CAJJ,EAOI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,aAAD,iBADJ,EAEI,oBAAC,MAAD,gBAFJ,CAPJ,CAJJ,CADJ,CADJ;AAqBH,CAtBM;AAwBP,eAAe;AACXG,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAEX,MAFA;AAGXY,EAAAA,UAAU,EAAE;AACRV,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { select } from '@storybook/addon-knobs';\n\nimport Button from '../button';\nimport IconHelp from '../../icons/general/IconHelp';\n// @ts-ignore JS import\nimport TextInput from '../text-input';\nimport PlainButton from '../plain-button';\nimport PrimaryButton from '../primary-button';\n// @ts-ignore JS import\nimport TextArea from '../text-area';\n\n// @ts-ignore JS import\nimport { Flyout, Overlay } from '.';\nimport notes from './Flyout.stories.md';\n\nexport const Basic = () => {\n const positions = {\n 'bottom-center': 'bottom-center',\n 'bottom-left': 'bottom-left',\n 'bottom-right': 'bottom-right',\n 'middle-left': 'middle-left',\n 'middle-right': 'middle-right',\n 'top-center': 'top-left',\n 'top-left': 'top-left',\n 'top-right': 'top-right',\n };\n\n const position = select('Position', positions, 'bottom-center');\n\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout closeOnClickOutside={false} position={position}>\n <Button>Nothing to see here</Button>\n <Overlay>\n <div className=\"accessible-overlay-content\">\n <p>Try hitting the Tab key.</p>\n <p>Now try click outside, go ahead.</p>\n <br />\n <p>\n <i>You are not going anywhere.</i>\n </p>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport const OpenOnHover = () => {\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout openOnHover>\n <Button>Open on Hover</Button>\n <Overlay>\n <div className=\"accessible-overlay-content\">\n <h1>Some text</h1>\n <p>Some more text</p>\n <br />\n <a href=\"https://google.com\">Go to Google?</a>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport const Complex = () => {\n return (\n <div style={{ marginTop: 200, marginLeft: 200 }}>\n <Flyout className=\"amsterdam-survey-overlay\" offset=\"0 0\">\n <PlainButton className=\"amsterdam-survey-button\">\n <IconHelp />\n </PlainButton>\n <Overlay>\n <div>\n <TextArea name=\"textarea\" label=\"Provide Feedback\" />\n </div>\n <div>\n <TextInput name=\"email\" label=\"Email Address\" placeholder=\"user@example.com\" type=\"email\" />\n </div>\n <div className=\"icon-menu-container\">\n <PrimaryButton>Submit</PrimaryButton>\n <Button>Close</Button>\n </div>\n </Overlay>\n </Flyout>\n </div>\n );\n};\n\nexport default {\n title: 'Components/Flyout',\n component: Flyout,\n parameters: {\n notes,\n },\n};\n"],"file":"Flyout.stories.js"}

package/es/components/flyout/OverlayHeader.js CHANGED Viewed

@@ -14,7 +14,8 @@ const OverlayHeader = (_ref) => {
   const handleClick = event => {
     event.preventDefault();
     event.stopPropagation();
-  };
+  }; // @ts-ignore TODO: figure out why this is giving a TS error
   const {
     closeOverlay

package/es/components/flyout/OverlayHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/flyout/OverlayHeader.tsx"],"names":["React","classNames","CloseButton","FlyoutContext","OverlayHeader","children","className","handleClick","event","preventDefault","stopPropagation","closeOverlay","useContext"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,WAAP,MAAwB,6BAAxB,C,CACA;;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,OAAO,sBAAP;;AASA,MAAMC,aAAa,GAAG,UAAiD;AAAA,MAAhD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAgD;;AACnE,QAAMC,WAAW,GAAIC,KAAD,IAAuD;AACvEA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACE,eAAN;AACH,GAHD~~;;AAKA~~,QAAM;AAAEC,IAAAA;AAAF,MAAmBX,KAAK,CAACY,UAAN,CAAiBT,aAAjB,CAAzB;AAEA,SACI;AACI,IAAA,SAAS,EAAEF,UAAU,CAAC,mBAAD,EAAsBK,SAAtB,CADzB;AAEI,mBAAY,mBAFhB;AAGI,IAAA,OAAO,EAAEC,WAHb;AAII,IAAA,IAAI,EAAC;AAJT,KAMI;AAAK,IAAA,SAAS,EAAC;AAAf,KAA4CF,QAA5C,CANJ,EAOI,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEM;AAAtB,IAPJ,CADJ;AAWH,CAnBD;;AAqBA,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\n\nimport classNames from 'classnames';\nimport CloseButton from '../close-button/CloseButton';\n// @ts-ignore flow\nimport FlyoutContext from './FlyoutContext';\n\nimport './OverlayHeader.scss';\n\nexport interface OverlayHeaderProps {\n /** Components to render in the header /\n children?: React.ReactNode;\n /* Set className to the overlay header */\n className?: string;\n}\n\nconst OverlayHeader = ({ children, className }: OverlayHeaderProps) => {\n const handleClick = (event: React.SyntheticEvent<HTMLDivElement>): void => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n const { closeOverlay } = React.useContext(FlyoutContext);\n\n return (\n <div\n className={classNames('bdl-OverlayHeader', className)}\n data-testid=\"bdl-OverlayHeader\"\n onClick={handleClick}\n role=\"presentation\"\n >\n <div className=\"bdl-OverlayHeader-content\">{children}</div>\n <CloseButton onClick={closeOverlay} />\n </div>\n );\n};\n\nexport default OverlayHeader;\n"],"file":"OverlayHeader.js"}
1	+ {"version":3,"sources":["../../../src/components/flyout/OverlayHeader.tsx"],"names":["React","classNames","CloseButton","FlyoutContext","OverlayHeader","children","className","handleClick","event","preventDefault","stopPropagation","closeOverlay","useContext"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,WAAP,MAAwB,6BAAxB,C,CACA;;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,OAAO,sBAAP;;AASA,MAAMC,aAAa,GAAG,UAAiD;AAAA,MAAhD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAgD;;AACnE,QAAMC,WAAW,GAAIC,KAAD,IAAuD;AACvEA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACE,eAAN;AACH,GAHD,CADmE,CAKnE;;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmBX,KAAK,CAACY,UAAN,CAAiBT,aAAjB,CAAzB;AAEA,SACI;AACI,IAAA,SAAS,EAAEF,UAAU,CAAC,mBAAD,EAAsBK,SAAtB,CADzB;AAEI,mBAAY,mBAFhB;AAGI,IAAA,OAAO,EAAEC,WAHb;AAII,IAAA,IAAI,EAAC;AAJT,KAMI;AAAK,IAAA,SAAS,EAAC;AAAf,KAA4CF,QAA5C,CANJ,EAOI,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEM;AAAtB,IAPJ,CADJ;AAWH,CAnBD;;AAqBA,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\n\nimport classNames from 'classnames';\nimport CloseButton from '../close-button/CloseButton';\n// @ts-ignore flow\nimport FlyoutContext from './FlyoutContext';\n\nimport './OverlayHeader.scss';\n\nexport interface OverlayHeaderProps {\n /** Components to render in the header /\n children?: React.ReactNode;\n /* Set className to the overlay header */\n className?: string;\n}\n\nconst OverlayHeader = ({ children, className }: OverlayHeaderProps) => {\n const handleClick = (event: React.SyntheticEvent<HTMLDivElement>): void => {\n event.preventDefault();\n event.stopPropagation();\n };\n // @ts-ignore TODO: figure out why this is giving a TS error\n const { closeOverlay } = React.useContext(FlyoutContext);\n\n return (\n <div\n className={classNames('bdl-OverlayHeader', className)}\n data-testid=\"bdl-OverlayHeader\"\n onClick={handleClick}\n role=\"presentation\"\n >\n <div className=\"bdl-OverlayHeader-content\">{children}</div>\n <CloseButton onClick={closeOverlay} />\n </div>\n );\n};\n\nexport default OverlayHeader;\n"],"file":"OverlayHeader.js"}

package/es/components/footer-indicator/FooterIndicator.stories.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const withTruncatedText = () => React.createElement("div", {
   indicatorText: "FooterIndicatorWithExtremelyRemarkablyStupendouslyTerrificallyLongName"
 }));
 export default {
-  title: 'Components|FooterIndicator',
+  title: 'Components/FooterIndicator',
   component: FooterIndicator,
   parameters: {
     notes

package/es/components/footer-indicator/FooterIndicator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/footer-indicator/FooterIndicator.stories.tsx"],"names":["React","FooterIndicator","notes","regular","height","position","transform","withTruncatedText","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,KAAP,MAAkB,8BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB;AACI,EAAA,KAAK,EAAE;AACHC,IAAAA,MAAM,EAAE,OADL;AAEHC,IAAAA,QAAQ,EAAE,UAFP;AAGHC,IAAAA,SAAS,EAAE;AAHR;AADX,GAOI,oBAAC,eAAD;AAAiB,EAAA,aAAa,EAAC;AAA/B,EAPJ,CADG;AAYP,OAAO,MAAMC,iBAAiB,GAAG,MAC7B;AACI,EAAA,KAAK,EAAE;AACHH,IAAAA,MAAM,EAAE,OADL;AAEHC,IAAAA,QAAQ,EAAE,UAFP;AAGHC,IAAAA,SAAS,EAAE;AAHR;AADX,GAOI,oBAAC,eAAD;AAAiB,EAAA,aAAa,EAAC;AAA/B,EAPJ,CADG;AAYP,eAAe;AACXE,EAAAA,KAAK,EAAE,4BADI;AAEXC,EAAAA,SAAS,EAAER,eAFA;AAGXS,EAAAA,UAAU,EAAE;AACRR,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport FooterIndicator from './FooterIndicator';\nimport notes from './FooterIndicator.stories.md';\n\nexport const regular = () => (\n <div\n style={{\n height: '250px',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n }}\n >\n <FooterIndicator indicatorText=\"FooterIndicator\" />\n </div>\n);\n\nexport const withTruncatedText = () => (\n <div\n style={{\n height: '250px',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n }}\n >\n <FooterIndicator indicatorText=\"FooterIndicatorWithExtremelyRemarkablyStupendouslyTerrificallyLongName\" />\n </div>\n);\n\nexport default {\n title: 'Components\|FooterIndicator',\n component: FooterIndicator,\n parameters: {\n notes,\n },\n};\n"],"file":"FooterIndicator.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/footer-indicator/FooterIndicator.stories.tsx"],"names":["React","FooterIndicator","notes","regular","height","position","transform","withTruncatedText","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,KAAP,MAAkB,8BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB;AACI,EAAA,KAAK,EAAE;AACHC,IAAAA,MAAM,EAAE,OADL;AAEHC,IAAAA,QAAQ,EAAE,UAFP;AAGHC,IAAAA,SAAS,EAAE;AAHR;AADX,GAOI,oBAAC,eAAD;AAAiB,EAAA,aAAa,EAAC;AAA/B,EAPJ,CADG;AAYP,OAAO,MAAMC,iBAAiB,GAAG,MAC7B;AACI,EAAA,KAAK,EAAE;AACHH,IAAAA,MAAM,EAAE,OADL;AAEHC,IAAAA,QAAQ,EAAE,UAFP;AAGHC,IAAAA,SAAS,EAAE;AAHR;AADX,GAOI,oBAAC,eAAD;AAAiB,EAAA,aAAa,EAAC;AAA/B,EAPJ,CADG;AAYP,eAAe;AACXE,EAAAA,KAAK,EAAE,4BADI;AAEXC,EAAAA,SAAS,EAAER,eAFA;AAGXS,EAAAA,UAAU,EAAE;AACRR,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport FooterIndicator from './FooterIndicator';\nimport notes from './FooterIndicator.stories.md';\n\nexport const regular = () => (\n <div\n style={{\n height: '250px',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n }}\n >\n <FooterIndicator indicatorText=\"FooterIndicator\" />\n </div>\n);\n\nexport const withTruncatedText = () => (\n <div\n style={{\n height: '250px',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n }}\n >\n <FooterIndicator indicatorText=\"FooterIndicatorWithExtremelyRemarkablyStupendouslyTerrificallyLongName\" />\n </div>\n);\n\nexport default {\n title: 'Components/FooterIndicator',\n component: FooterIndicator,\n parameters: {\n notes,\n },\n};\n"],"file":"FooterIndicator.stories.js"}

package/es/components/form-elements/form/Form.stories.js CHANGED Viewed

@@ -108,7 +108,7 @@ export const basic = () => {
   }, "Submit"))));
 };
 export default {
-  title: 'Components|Form Elements/Form',
+  title: 'Components/Form Elements/Form',
   component: Form,
   parameters: {
     notes

package/es/components/form-elements/form/Form.stories.js.flow CHANGED Viewed

@@ -113,7 +113,7 @@ export const basic = () => {
 };
 export default {
-    title: 'Components|Form Elements/Form',
+    title: 'Components/Form Elements/Form',
     component: Form,
     parameters: {
         notes,

package/es/components/form-elements/form/Form.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/form-elements/form/Form.stories.js"],"names":["React","IntlProvider","boolean","State","Store","Button","Select","TextArea","TextInput","Toggle","Form","notes","basic","componentStore","formData","showtextareatoggle","formValidityState","customValidationFunc","value","code","message","state","set","username","console","log","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AACA,SAASC,OAAT,QAAwB,wBAAxB;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,QAAP,MAAqB,uBAArB;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,KAAP,MAAkB,mBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM;AACvB,QAAMC,cAAc,GAAG,IAAIT,KAAJ,CAAU;AAC7BU,IAAAA,QAAQ,EAAE;AACNC,MAAAA,kBAAkB,EAAE;AADd,KADmB;AAI7BC,IAAAA,iBAAiB,EAAE;AAJU,GAAV,CAAvB;;AAOA,QAAMC,oBAAoB,GAAGC,KAAK,IAAI;AAClC,QAAIA,KAAK,KAAK,KAAd,EAAqB;AACjB,aAAO;AACHC,QAAAA,IAAI,EAAE,QADH;AAEHC,QAAAA,OAAO,EAAE;AAFN,OAAP;AAIH;;AACD,WAAO,IAAP;AACH,GARD;;AAUA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAEP;AAAd,KACKQ,KAAK,IACF,oBAAC,YAAD;AAAc,IAAA,MAAM,EAAC;AAArB,KACI,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEP,QAAQ,IAAI;AAClBD,MAAAA,cAAc,CAACS,GAAf,CAAmB;AAAEN,QAAAA,iBAAiB,EAAE,EAArB;AAAyBF,QAAAA;AAAzB,OAAnB;AACH,KAHL;AAII,IAAA,aAAa,EAAE,MAAM;AACjB;AACA;AACAD,MAAAA,cAAc,CAACS,GAAf,CAAmB;AACfN,QAAAA,iBAAiB,EAAE;AACfO,UAAAA,QAAQ,EAAE;AACNJ,YAAAA,IAAI,EAAE,eADA;AAENC,YAAAA,OAAO,EAAE;AAFH;AADK;AADJ,OAAnB;AAQH;AACD;AAhBJ;AAiBI,IAAA,eAAe,EAAEJ,iBAAiB,IAAIQ,OAAO,CAACC,GAAR,CAAYT,iBAAZ,CAjB1C;AAkBI,IAAA,iBAAiB,EAAEK,KAAK,CAACL;AAlB7B,KAoBI,iCACI,oBAAC,SAAD;AACI,IAAA,IAAI,EAAC,UADT;AAEI,IAAA,KAAK,EAAC,UAFV;AAGI,IAAA,WAAW,EAAC,aAHhB;AAII,IAAA,IAAI,EAAC,MAJT;AAKI,IAAA,UAAU,EAAEd,OAAO,CAAC,YAAD,EAAe,IAAf;AALvB,IADJ,CApBJ,EA6BI,iCACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,eAA9B;AAA8C,IAAA,WAAW,EAAC,kBAA1D;AAA6E,IAAA,IAAI,EAAC;AAAlF,IADJ,CA7BJ,EAgCI,iCACI,oBAAC,SAAD;AACI,IAAA,KAAK,EAAC,cADV;AAEI,IAAA,IAAI,EAAC,sBAFT;AAGI,IAAA,WAAW,EAAC,SAHhB;AAII,IAAA,IAAI,EAAC,MAJT;AAKI,IAAA,UAAU,EAAEe;AALhB,IADJ,CAhCJ,EA0CI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,aAAb;AAA2B,IAAA,KAAK,EAAC;AAAjC,KACI;AAAQ,IAAA,KAAK,EAAE;AAAf,gBADJ,EAEI;AAAQ,IAAA,KAAK,EAAE;AAAf,+BAFJ,EAGI;AAAQ,IAAA,KAAK,EAAE;AAAf,sBAHJ,EAII;AAAQ,IAAA,KAAK,EAAE;AAAf,oBAJJ,EAKI;AAAQ,IAAA,KAAK,EAAE;AAAf,yBALJ,EAMI;AAAQ,IAAA,KAAK,EAAE;AAAf,uBANJ,EAOI;AAAQ,IAAA,KAAK,EAAE;AAAf,mBAPJ,EAQI;AAAQ,IAAA,KAAK,EAAE;AAAf,8BARJ,EASI;AAAQ,IAAA,KAAK,EAAE;AAAf,wBATJ,CA1CJ,EAsDI,iCACI,iCACI,oBAAC,MAAD;AACI,IAAA,IAAI,EAAC,oBADT;AAEI,IAAA,EAAE,EAAC,oBAFP;AAGI,IAAA,IAAI,EAAEI,KAAK,CAACP,QAAN,CAAeC,kBAAf,KAAsC,IAHhD;AAII,IAAA,KAAK,EAAC,eAJV;AAKI,IAAA,QAAQ,EAAE,MAAM;AALpB,IADJ,CADJ,EAUKM,KAAK,CAACP,QAAN,CAAeC,kBAAf,KAAsC,IAAtC,GACG,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,UAAf;AAA0B,IAAA,KAAK,EAAC,YAAhC;AAA6C,IAAA,WAAW,EAAC;AAAzD,IADH,GAEG,IAZR,CAtDJ,EAqEI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,cArEJ,CADJ,CAFR,CADJ;AA+EH,CAjGM;AAmGP,eAAe;AACXW,EAAAA,KAAK,EAAE,+BADI;AAEXC,EAAAA,SAAS,EAAEjB,IAFA;AAGXkB,EAAAA,UAAU,EAAE;AACRjB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { boolean } from '@storybook/addon-knobs';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport Select from '../../select/Select';\nimport TextArea from '../text-area/TextArea';\nimport TextInput from '../text-input/TextInput';\nimport Toggle from '../../toggle/Toggle';\n\nimport Form from './Form';\nimport notes from './Form.stories.md';\n\nexport const basic = () => {\n const componentStore = new Store({\n formData: {\n showtextareatoggle: '',\n },\n formValidityState: {},\n });\n\n const customValidationFunc = value => {\n if (value !== 'box') {\n return {\n code: 'notbox',\n message: 'value is not box',\n };\n }\n return null;\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <Form\n onChange={formData => {\n componentStore.set({ formValidityState: {}, formData });\n }}\n onValidSubmit={() => {\n // On a server validation error, set formValidityState to\n // push error states to child inputs\n componentStore.set({\n formValidityState: {\n username: {\n code: 'usernametaken',\n message: 'Username already taken.',\n },\n },\n });\n }}\n /* eslint-disable-next-line no-console */\n onInvalidSubmit={formValidityState => console.log(formValidityState)}\n formValidityState={state.formValidityState}\n >\n <div>\n <TextInput\n name=\"username\"\n label=\"Username\"\n placeholder=\"swagmaster6\"\n type=\"text\"\n isRequired={boolean('isRequired', true)}\n />\n </div>\n <div>\n <TextInput name=\"email\" label=\"Email Address\" placeholder=\"user@example.com\" type=\"email\" />\n </div>\n <div>\n <TextInput\n label=\"Must say box\"\n name=\"customValidationFunc\"\n placeholder=\"Not box\"\n type=\"text\"\n validation={customValidationFunc}\n />\n </div>\n\n <Select name=\"albumselect\" label=\"Album\">\n <option value={1}>Illmatic</option>\n <option value={2}>The Marshall Mathers LP</option>\n <option value={3}>All Eyez on Me</option>\n <option value={4}>Ready To Die</option>\n <option value={5}>Enter the Wu-Tang</option>\n <option value={6}>The Eminem Show</option>\n <option value={7}>The Chronic</option>\n <option value={8}>Straight Outta Compton</option>\n <option value={9}>Reasonable Doubt</option>\n </Select>\n\n <div>\n <div>\n <Toggle\n name=\"showtextareatoggle\"\n id=\"showtextareatoggle\"\n isOn={state.formData.showtextareatoggle === 'on'}\n label=\"Show TextArea\"\n onChange={() => null}\n />\n </div>\n {state.formData.showtextareatoggle === 'on' ? (\n <TextArea name=\"textarea\" label=\"Your story\" placeholder=\"Once upon a time\" />\n ) : null}\n </div>\n\n <Button type=\"submit\">Submit</Button>\n </Form>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|Form Elements/Form',\n component: Form,\n parameters: {\n notes,\n },\n};\n"],"file":"Form.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/form-elements/form/Form.stories.js"],"names":["React","IntlProvider","boolean","State","Store","Button","Select","TextArea","TextInput","Toggle","Form","notes","basic","componentStore","formData","showtextareatoggle","formValidityState","customValidationFunc","value","code","message","state","set","username","console","log","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { boolean } from '@storybook/addon-knobs';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport Select from '../../select/Select';\nimport TextArea from '../text-area/TextArea';\nimport TextInput from '../text-input/TextInput';\nimport Toggle from '../../toggle/Toggle';\n\nimport Form from './Form';\nimport notes from './Form.stories.md';\n\nexport const basic = () => {\n const componentStore = new Store({\n formData: {\n showtextareatoggle: '',\n },\n formValidityState: {},\n });\n\n const customValidationFunc = value => {\n if (value !== 'box') {\n return {\n code: 'notbox',\n message: 'value is not box',\n };\n }\n return null;\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <Form\n onChange={formData => {\n componentStore.set({ formValidityState: {}, formData });\n }}\n onValidSubmit={() => {\n // On a server validation error, set formValidityState to\n // push error states to child inputs\n componentStore.set({\n formValidityState: {\n username: {\n code: 'usernametaken',\n message: 'Username already taken.',\n },\n },\n });\n }}\n /* eslint-disable-next-line no-console */\n onInvalidSubmit={formValidityState => console.log(formValidityState)}\n formValidityState={state.formValidityState}\n >\n <div>\n <TextInput\n name=\"username\"\n label=\"Username\"\n placeholder=\"swagmaster6\"\n type=\"text\"\n isRequired={boolean('isRequired', true)}\n />\n </div>\n <div>\n <TextInput name=\"email\" label=\"Email Address\" placeholder=\"user@example.com\" type=\"email\" />\n </div>\n <div>\n <TextInput\n label=\"Must say box\"\n name=\"customValidationFunc\"\n placeholder=\"Not box\"\n type=\"text\"\n validation={customValidationFunc}\n />\n </div>\n\n <Select name=\"albumselect\" label=\"Album\">\n <option value={1}>Illmatic</option>\n <option value={2}>The Marshall Mathers LP</option>\n <option value={3}>All Eyez on Me</option>\n <option value={4}>Ready To Die</option>\n <option value={5}>Enter the Wu-Tang</option>\n <option value={6}>The Eminem Show</option>\n <option value={7}>The Chronic</option>\n <option value={8}>Straight Outta Compton</option>\n <option value={9}>Reasonable Doubt</option>\n </Select>\n\n <div>\n <div>\n <Toggle\n name=\"showtextareatoggle\"\n id=\"showtextareatoggle\"\n isOn={state.formData.showtextareatoggle === 'on'}\n label=\"Show TextArea\"\n onChange={() => null}\n />\n </div>\n {state.formData.showtextareatoggle === 'on' ? (\n <TextArea name=\"textarea\" label=\"Your story\" placeholder=\"Once upon a time\" />\n ) : null}\n </div>\n\n <Button type=\"submit\">Submit</Button>\n </Form>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/Form Elements/Form',\n component: Form,\n parameters: {\n notes,\n },\n};\n"],"file":"Form.stories.js"}

package/es/components/form-elements/formik/Formik.stories.js CHANGED Viewed

@@ -167,7 +167,7 @@ export const basic = () => {
   }, React.createElement("strong", null, "Formik State"), " = ", JSON.stringify(props, null, 2))));
 };
 export default {
-  title: 'Components|Formik Elements',
+  title: 'Components/Formik Elements',
   parameters: {
     notes
   }

package/es/components/form-elements/formik/Formik.stories.js.flow CHANGED Viewed

@@ -177,7 +177,7 @@ export const basic = () => {
 };
 export default {
-    title: 'Components|Formik Elements',
+    title: 'Components/Formik Elements',
     parameters: {
         notes,
     },