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/modal/Modal.scss CHANGED Viewed

@@ -1,6 +1,5 @@
 @import '../../styles/variables';
 @import '../../styles/mixins/buttons';
-@import '../../styles/constants/media-queries';
 /**************************************
  * Modal
@@ -48,6 +47,8 @@
 }
 .modal-dialog-container {
+    flex-basis: 100%;
+    width: 100%;
     margin: auto;
 }
@@ -150,77 +151,69 @@
     display: flex;
 }
-//Responsive support - triggers fullscreen mode after reaching $small-medium-screen width
-.is-responsive-web {
-    @include breakpoint($small-medium-screen) {
-        $responsive-modal-header-height: 64px;
-        $responsive-modal-actions-height: 60px;
-        .modal-title {
-            @include bdl-lineClamp(2);
-        }
-        .modal {
-            flex-direction: column;
-            padding: 0;
-        }
-        .modal-header-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            width: 100%;
-            height: $responsive-modal-header-height;
-        }
-        .modal-header {
-            display: flex;
-            align-items: center;
-            padding: 0 16px;
-        }
-        .modal-content {
-            flex-basis: 100%;
-            margin-top: $responsive-modal-header-height;
-            margin-bottom: $responsive-modal-actions-height;
-            padding: 24px 16px 12px 16px;
-            overflow: auto;
-        }
-        .modal-dialog {
-            height: 100%;
-            padding: 0;
-            border-radius: 0;
-        }
-        .modal-close-button {
-            top: 0;
-            right: 10px;
-            display: flex;
-            align-items: center;
-            height: 100%;
-            padding: 20px 0;
-        }
-        .modal-actions {
-            position: fixed;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            height: $responsive-modal-actions-height;
-            padding: 10px 16px;
-            background-color: $white;
-        }
-        .modal-dialog-container {
-            overflow: hidden;
-        }
+@include breakpoint($small-medium-screen) {
+    $responsive-modal-header-height: 64px;
+    $responsive-modal-actions-height: 60px;
+    .modal-title {
+        @include bdl-lineClamp(2);
     }
-    .modal-dialog-container {
+    .modal {
+        flex-direction: column;
+        padding: 0;
+    }
+    .modal-header-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: $responsive-modal-header-height;
+    }
+    .modal-header {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+    }
+    .modal-content {
         flex-basis: 100%;
+        margin-top: $responsive-modal-header-height;
+        margin-bottom: $responsive-modal-actions-height;
+        padding: 24px 16px 12px 16px;
+        overflow: auto;
+    }
+    .modal-dialog {
+        height: 100%;
+        padding: 0;
+        border-radius: 0;
+    }
+    .modal-close-button {
+        top: 0;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 20px 0;
+    }
+    .modal-actions {
+        position: fixed;
+        right: 0;
+        bottom: 0;
         width: 100%;
+        height: $responsive-modal-actions-height;
+        padding: 10px 16px;
+        background-color: $white;
+    }
+    .modal-dialog-container {
+        overflow: hidden;
     }
 }

package/es/components/modal/stories/Modal.stories.js CHANGED Viewed

@@ -81,7 +81,7 @@ export const withCustomBackdropClickHandler = () => {
   }, "Launch standard modal"))));
 };
 export default {
-  title: 'Components|Modal',
+  title: 'Components/Modal',
   component: Modal,
   parameters: {
     notes

package/es/components/modal/stories/Modal.stories.js.flow CHANGED Viewed

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

package/es/components/modal/stories/Modal.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/modal/stories/Modal.stories.js"],"names":["React","IntlProvider","State","Store","Button","ModalActions","PrimaryButton","Modal","notes","basic","componentStore","isModalOpen","openModal","set","closeModal","state","withCustomBackdropClickHandler","confirmBackdropClose","window","confirm","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport ModalActions from '../ModalActions';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\n\nimport Modal from '../Modal';\nimport notes from './Modal.stories.md';\n\nexport const basic = () => {\n const componentStore = new Store({\n isModalOpen: false,\n });\n\n const openModal = () =>\n componentStore.set({\n isModalOpen: true,\n });\n\n const closeModal = () => componentStore.set({ isModalOpen: false });\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <Modal\n title=\"Box: Sharing is simple\"\n onRequestClose={closeModal}\n isOpen={state.isModalOpen}\n focusElementSelector=\"input\"\n >\n <p>\n Elements can be auto-focused by implementing transition logic in componentDidUpdate.\n Focus is trapped inside the modal while it is open, so pressing tab will cycle through\n the elements inside.\n </p>\n <p>\n <input type=\"text\" />\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut\n scelerisque porttitor, libero diam luctus ante, non porta lectus dolor eu lectus.\n Suspendisse sagittis ut orci eget placerat.\n </p>\n <ModalActions>\n <Button onClick={closeModal}>Cancel</Button>\n <PrimaryButton onClick={closeModal}>Okay</PrimaryButton>\n </ModalActions>\n </Modal>\n <PrimaryButton onClick={openModal}>Launch standard modal</PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withCustomBackdropClickHandler = () => {\n const componentStore = new Store({\n isModalOpen: false,\n });\n\n const openModal = () =>\n componentStore.set({\n isModalOpen: true,\n });\n const closeModal = () => componentStore.set({ isModalOpen: false });\n\n const confirmBackdropClose = () => {\n // We can call the defined `closeModal` message after any custom processing,\n // or do a no-op if we wish to disable backdrop close functionality\n // eslint-disable-next-line no-alert\n if (window.confirm('There are unsaved changes. Are you sure you want to close?')) {\n closeModal();\n }\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <Modal\n title=\"Box: Sharing is simple\"\n onRequestClose={closeModal}\n isOpen={state.isModalOpen}\n focusElementSelector=\"input\"\n onBackdropClick={confirmBackdropClose}\n >\n <p>\n Elements can be auto-focused by implementing transition logic in componentDidUpdate.\n Focus is trapped inside the modal while it is open, so pressing tab will cycle through\n the elements inside.\n </p>\n <p>\n <input type=\"text\" />\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut\n scelerisque porttitor, libero diam luctus ante, non porta lectus dolor eu lectus.\n Suspendisse sagittis ut orci eget placerat.\n </p>\n <ModalActions>\n <Button onClick={closeModal}>Cancel</Button>\n <PrimaryButton onClick={closeModal}>Okay</PrimaryButton>\n </ModalActions>\n </Modal>\n <PrimaryButton onClick={openModal}>Launch standard modal</PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|Modal',\n component: Modal,\n parameters: {\n notes,\n },\n};\n"],"file":"Modal.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/modal/stories/Modal.stories.js"],"names":["React","IntlProvider","State","Store","Button","ModalActions","PrimaryButton","Modal","notes","basic","componentStore","isModalOpen","openModal","set","closeModal","state","withCustomBackdropClickHandler","confirmBackdropClose","window","confirm","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport ModalActions from '../ModalActions';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\n\nimport Modal from '../Modal';\nimport notes from './Modal.stories.md';\n\nexport const basic = () => {\n const componentStore = new Store({\n isModalOpen: false,\n });\n\n const openModal = () =>\n componentStore.set({\n isModalOpen: true,\n });\n\n const closeModal = () => componentStore.set({ isModalOpen: false });\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <Modal\n title=\"Box: Sharing is simple\"\n onRequestClose={closeModal}\n isOpen={state.isModalOpen}\n focusElementSelector=\"input\"\n >\n <p>\n Elements can be auto-focused by implementing transition logic in componentDidUpdate.\n Focus is trapped inside the modal while it is open, so pressing tab will cycle through\n the elements inside.\n </p>\n <p>\n <input type=\"text\" />\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut\n scelerisque porttitor, libero diam luctus ante, non porta lectus dolor eu lectus.\n Suspendisse sagittis ut orci eget placerat.\n </p>\n <ModalActions>\n <Button onClick={closeModal}>Cancel</Button>\n <PrimaryButton onClick={closeModal}>Okay</PrimaryButton>\n </ModalActions>\n </Modal>\n <PrimaryButton onClick={openModal}>Launch standard modal</PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport const withCustomBackdropClickHandler = () => {\n const componentStore = new Store({\n isModalOpen: false,\n });\n\n const openModal = () =>\n componentStore.set({\n isModalOpen: true,\n });\n const closeModal = () => componentStore.set({ isModalOpen: false });\n\n const confirmBackdropClose = () => {\n // We can call the defined `closeModal` message after any custom processing,\n // or do a no-op if we wish to disable backdrop close functionality\n // eslint-disable-next-line no-alert\n if (window.confirm('There are unsaved changes. Are you sure you want to close?')) {\n closeModal();\n }\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <Modal\n title=\"Box: Sharing is simple\"\n onRequestClose={closeModal}\n isOpen={state.isModalOpen}\n focusElementSelector=\"input\"\n onBackdropClick={confirmBackdropClose}\n >\n <p>\n Elements can be auto-focused by implementing transition logic in componentDidUpdate.\n Focus is trapped inside the modal while it is open, so pressing tab will cycle through\n the elements inside.\n </p>\n <p>\n <input type=\"text\" />\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut\n scelerisque porttitor, libero diam luctus ante, non porta lectus dolor eu lectus.\n Suspendisse sagittis ut orci eget placerat.\n </p>\n <ModalActions>\n <Button onClick={closeModal}>Cancel</Button>\n <PrimaryButton onClick={closeModal}>Okay</PrimaryButton>\n </ModalActions>\n </Modal>\n <PrimaryButton onClick={openModal}>Launch standard modal</PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/Modal',\n component: Modal,\n parameters: {\n notes,\n },\n};\n"],"file":"Modal.stories.js"}

package/es/components/modal/stories/ModalActions.stories.js CHANGED Viewed

@@ -12,7 +12,7 @@ export const basic = () => React.createElement(IntlProvider, {
   type: "alert"
 }, "This is the alert message. It will automatically be wrapped in a paragraph tag.", React.createElement(ModalActions, null, React.createElement(Button, null, "Cancel"), React.createElement(PrimaryButton, null, "Okay"))));
 export default {
-  title: 'Components|ModalActions',
+  title: 'Components/ModalActions',
   component: ModalActions,
   parameters: {
     notes

package/es/components/modal/stories/ModalActions.stories.js.flow CHANGED Viewed

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

package/es/components/modal/stories/ModalActions.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/modal/stories/ModalActions.stories.js"],"names":["React","IntlProvider","Button","ModalDialog","PrimaryButton","ModalActions","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,oCAA1B;AAEA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,mBAAnB;AAAuC,EAAA,IAAI,EAAC;AAA5C,sFAEI,oBAAC,YAAD,QACI,oBAAC,MAAD,iBADJ,EAEI,oBAAC,aAAD,eAFJ,CAFJ,CADJ,CADG;AAYP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEJ,YAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport Button from '../../button/Button';\nimport ModalDialog from '../ModalDialog';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\n\nimport ModalActions from '../ModalActions';\nimport notes from './ModalActions.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <ModalDialog title=\"Alert ModalDialog\" type=\"alert\">\n This is the alert message. It will automatically be wrapped in a paragraph tag.\n <ModalActions>\n <Button>Cancel</Button>\n <PrimaryButton>Okay</PrimaryButton>\n </ModalActions>\n </ModalDialog>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components\|ModalActions',\n component: ModalActions,\n parameters: {\n notes,\n },\n};\n"],"file":"ModalActions.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/modal/stories/ModalActions.stories.js"],"names":["React","IntlProvider","Button","ModalDialog","PrimaryButton","ModalActions","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,oCAA1B;AAEA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,mBAAnB;AAAuC,EAAA,IAAI,EAAC;AAA5C,sFAEI,oBAAC,YAAD,QACI,oBAAC,MAAD,iBADJ,EAEI,oBAAC,aAAD,eAFJ,CAFJ,CADJ,CADG;AAYP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEJ,YAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport Button from '../../button/Button';\nimport ModalDialog from '../ModalDialog';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\n\nimport ModalActions from '../ModalActions';\nimport notes from './ModalActions.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <ModalDialog title=\"Alert ModalDialog\" type=\"alert\">\n This is the alert message. It will automatically be wrapped in a paragraph tag.\n <ModalActions>\n <Button>Cancel</Button>\n <PrimaryButton>Okay</PrimaryButton>\n </ModalActions>\n </ModalDialog>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components/ModalActions',\n component: ModalActions,\n parameters: {\n notes,\n },\n};\n"],"file":"ModalActions.stories.js"}

package/es/components/modal/stories/ModalDialog.stories.js CHANGED Viewed

@@ -8,7 +8,7 @@ export const basic = () => React.createElement(IntlProvider, {
   title: "Static ModalDialog"
 }, React.createElement("p", null, "I can be rendered statically! Because I\u2019m not in a portal!"), React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut scelerisque porttitor, libero diam luctus ante, non porta lectus dolor eu lectus. Suspendisse sagittis ut orci eget placerat.")));
 export default {
-  title: 'Components|ModalDialog',
+  title: 'Components/ModalDialog',
   component: ModalDialog,
   parameters: {
     notes

package/es/components/modal/stories/ModalDialog.stories.js.flow CHANGED Viewed

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

package/es/components/modal/stories/ModalDialog.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/modal/stories/ModalDialog.stories.js"],"names":["React","IntlProvider","ModalDialog","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC;AAAnB,GACI,iGADJ,EAEI,oPAFJ,CADJ,CADG;AAaP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEJ,WAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport ModalDialog from '../ModalDialog';\nimport notes from './ModalDialog.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <ModalDialog title=\"Static ModalDialog\">\n <p>I can be rendered statically! Because I’m not in a portal!</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut scelerisque\n porttitor, libero diam luctus ante, non porta lectus dolor eu lectus. Suspendisse sagittis ut orci eget\n placerat.\n </p>\n </ModalDialog>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components\|ModalDialog',\n component: ModalDialog,\n parameters: {\n notes,\n },\n};\n"],"file":"ModalDialog.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/modal/stories/ModalDialog.stories.js"],"names":["React","IntlProvider","ModalDialog","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC;AAAnB,GACI,iGADJ,EAEI,oPAFJ,CADJ,CADG;AAaP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEJ,WAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport ModalDialog from '../ModalDialog';\nimport notes from './ModalDialog.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <ModalDialog title=\"Static ModalDialog\">\n <p>I can be rendered statically! Because I’m not in a portal!</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, lacus ut scelerisque\n porttitor, libero diam luctus ante, non porta lectus dolor eu lectus. Suspendisse sagittis ut orci eget\n placerat.\n </p>\n </ModalDialog>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components/ModalDialog',\n component: ModalDialog,\n parameters: {\n notes,\n },\n};\n"],"file":"ModalDialog.stories.js"}

package/es/components/nav-sidebar/NavSidebar.stories.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const collapsible = () => React.createElement(NavSidebar, {
   heading: "Item 2"
 }, React.createElement(Link, null, "Item 2-1"), React.createElement(Link, null, "Item 2-2"), React.createElement(Link, null, "Item 2-3")));
 export default {
-  title: 'Components|NavSidebar',
+  title: 'Components/NavSidebar',
   component: NavSidebar,
   parameters: {
     notes

package/es/components/nav-sidebar/NavSidebar.stories.js.flow CHANGED Viewed

@@ -46,7 +46,7 @@ export const collapsible = () => (
 );
 export default {
-    title: 'Components|NavSidebar',
+    title: 'Components/NavSidebar',
     component: NavSidebar,
     parameters: {
         notes,

package/es/components/nav-sidebar/NavSidebar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/nav-sidebar/NavSidebar.stories.js"],"names":["React","action","boolean","NavSidebar","NavListCollapseHeader","NavList","Link","notes","notCollapsible","collapsible","title","component","parameters"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,IAAP,MAAiB,cAAjB;AAEA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,MAAMC,cAAc,GAAG,MAC1B,oBAAC,UAAD;AAAY,0BAAqB;AAAjC,GACI,oBAAC,OAAD,QACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,CADJ,EAKI,oBAAC,OAAD;AAAS,EAAA,OAAO,EAAC;AAAjB,GACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CALJ,CADG;AAcP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,UAAD;AAAY,0BAAqB;AAAjC,GACI,oBAAC,OAAD;AACI,EAAA,OAAO,EACH,oBAAC,qBAAD;AAAuB,IAAA,gBAAgB,EAAER,MAAM,CAAC,yBAAD;AAA/C,0BAFR;AAMI,EAAA,SAAS,EAAC,gBANd;AAOI,EAAA,SAAS,EAAEC,OAAO,CAAC,WAAD,EAAc,KAAd;AAPtB,GASI,oBAAC,IAAD,mBATJ,EAUI,oBAAC,IAAD,mBAVJ,CADJ,EAaI,oBAAC,OAAD;AAAS,EAAA,OAAO,EAAC;AAAjB,GACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CAbJ,CADG;AAsBP,eAAe;AACXQ,EAAAA,KAAK,EAAE,uBADI;AAEXC,EAAAA,SAAS,EAAER,UAFA;AAGXS,EAAAA,UAAU,EAAE;AACRL,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["/* eslint-disable /\nimport as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\nimport NavSidebar from './NavSidebar';\nimport NavListCollapseHeader from './NavListCollapseHeader';\nimport NavList from './NavList';\nimport Link from '../link/Link';\n\nimport notes from './NavSidebar.stories.md';\n\nexport const notCollapsible = () => (\n <NavSidebar data-resin-component=\"leftnav\">\n <NavList>\n <Link>Item 1-1</Link>\n <Link>Item 1-2</Link>\n </NavList>\n <NavList heading=\"Item 2\">\n <Link>Item 2-1</Link>\n <Link>Item 2-2</Link>\n <Link>Item 2-3</Link>\n </NavList>\n </NavSidebar>\n);\n\nexport const collapsible = () => (\n <NavSidebar data-resin-component=\"leftnav\">\n <NavList\n heading={\n <NavListCollapseHeader onToggleCollapse={action('onToggleCollapse called')}>\n Collapse or Expand\n </NavListCollapseHeader>\n }\n className=\"is-collapsible\"\n collapsed={boolean('collapsed', false)}\n >\n <Link>Item 1-1</Link>\n <Link>Item 1-2</Link>\n </NavList>\n <NavList heading=\"Item 2\">\n <Link>Item 2-1</Link>\n <Link>Item 2-2</Link>\n <Link>Item 2-3</Link>\n </NavList>\n </NavSidebar>\n);\n\nexport default {\n title: 'Components\|NavSidebar',\n component: NavSidebar,\n parameters: {\n notes,\n },\n};\n"],"file":"NavSidebar.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/nav-sidebar/NavSidebar.stories.js"],"names":["React","action","boolean","NavSidebar","NavListCollapseHeader","NavList","Link","notes","notCollapsible","collapsible","title","component","parameters"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,IAAP,MAAiB,cAAjB;AAEA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,MAAMC,cAAc,GAAG,MAC1B,oBAAC,UAAD;AAAY,0BAAqB;AAAjC,GACI,oBAAC,OAAD,QACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,CADJ,EAKI,oBAAC,OAAD;AAAS,EAAA,OAAO,EAAC;AAAjB,GACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CALJ,CADG;AAcP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,UAAD;AAAY,0BAAqB;AAAjC,GACI,oBAAC,OAAD;AACI,EAAA,OAAO,EACH,oBAAC,qBAAD;AAAuB,IAAA,gBAAgB,EAAER,MAAM,CAAC,yBAAD;AAA/C,0BAFR;AAMI,EAAA,SAAS,EAAC,gBANd;AAOI,EAAA,SAAS,EAAEC,OAAO,CAAC,WAAD,EAAc,KAAd;AAPtB,GASI,oBAAC,IAAD,mBATJ,EAUI,oBAAC,IAAD,mBAVJ,CADJ,EAaI,oBAAC,OAAD;AAAS,EAAA,OAAO,EAAC;AAAjB,GACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CAbJ,CADG;AAsBP,eAAe;AACXQ,EAAAA,KAAK,EAAE,uBADI;AAEXC,EAAAA,SAAS,EAAER,UAFA;AAGXS,EAAAA,UAAU,EAAE;AACRL,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["/* eslint-disable /\nimport as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\nimport NavSidebar from './NavSidebar';\nimport NavListCollapseHeader from './NavListCollapseHeader';\nimport NavList from './NavList';\nimport Link from '../link/Link';\n\nimport notes from './NavSidebar.stories.md';\n\nexport const notCollapsible = () => (\n <NavSidebar data-resin-component=\"leftnav\">\n <NavList>\n <Link>Item 1-1</Link>\n <Link>Item 1-2</Link>\n </NavList>\n <NavList heading=\"Item 2\">\n <Link>Item 2-1</Link>\n <Link>Item 2-2</Link>\n <Link>Item 2-3</Link>\n </NavList>\n </NavSidebar>\n);\n\nexport const collapsible = () => (\n <NavSidebar data-resin-component=\"leftnav\">\n <NavList\n heading={\n <NavListCollapseHeader onToggleCollapse={action('onToggleCollapse called')}>\n Collapse or Expand\n </NavListCollapseHeader>\n }\n className=\"is-collapsible\"\n collapsed={boolean('collapsed', false)}\n >\n <Link>Item 1-1</Link>\n <Link>Item 1-2</Link>\n </NavList>\n <NavList heading=\"Item 2\">\n <Link>Item 2-1</Link>\n <Link>Item 2-2</Link>\n <Link>Item 2-3</Link>\n </NavList>\n </NavSidebar>\n);\n\nexport default {\n title: 'Components/NavSidebar',\n component: NavSidebar,\n parameters: {\n notes,\n },\n};\n"],"file":"NavSidebar.stories.js"}

package/es/components/notification/stories/Notification.stories.js CHANGED Viewed

@@ -22,7 +22,7 @@ export const error = () => React.createElement(IntlProvider, {
   type: "error"
 }, React.createElement("span", null, "This is an error notification.")));
 export default {
-  title: 'Components|Notifications/Notification',
+  title: 'Components/Notifications/Notification',
   component: Notification,
   parameters: {
     notes

package/es/components/notification/stories/Notification.stories.js.flow CHANGED Viewed

@@ -41,7 +41,7 @@ export const error = () => (
 );
 export default {
-    title: 'Components|Notifications/Notification',
+    title: 'Components/Notifications/Notification',
     component: Notification,
     parameters: {
         notes,

package/es/components/notification/stories/Notification.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/notification/stories/Notification.stories.js"],"names":["React","IntlProvider","Button","Notification","notes","basic","info","warn","error","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AAEA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD,0CADJ,CADG;AAMP,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,gFADJ,EAEI,oBAAC,MAAD,mBAFJ,CADJ,CADG;AASP,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,qFADJ,EAEI,oBAAC,MAAD,mBAFJ,EAGI,oBAAC,MAAD,yBAHJ,CADJ,CADG;AAUP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,mEADJ,CADJ,CADG;AAQP,eAAe;AACXC,EAAAA,KAAK,EAAE,uCADI;AAEXC,EAAAA,SAAS,EAAEP,YAFA;AAGXQ,EAAAA,UAAU,EAAE;AACRP,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport Button from '../../button/Button';\n\nimport Notification from '../Notification';\nimport notes from './Notification.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <Notification>This is a default notification.</Notification>\n </IntlProvider>\n);\n\nexport const info = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"info\">\n <span>This is an info notification with a button.</span>\n <Button>Click me</Button>\n </Notification>\n </IntlProvider>\n);\n\nexport const warn = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"warn\">\n <span>This is a warning notification with two buttons.</span>\n <Button>Click me</Button>\n <Button>Click me again</Button>\n </Notification>\n </IntlProvider>\n);\n\nexport const error = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"error\">\n <span>This is an error notification.</span>\n </Notification>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components\|Notifications/Notification',\n component: Notification,\n parameters: {\n notes,\n },\n};\n"],"file":"Notification.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/notification/stories/Notification.stories.js"],"names":["React","IntlProvider","Button","Notification","notes","basic","info","warn","error","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AAEA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD,0CADJ,CADG;AAMP,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,gFADJ,EAEI,oBAAC,MAAD,mBAFJ,CADJ,CADG;AASP,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,qFADJ,EAEI,oBAAC,MAAD,mBAFJ,EAGI,oBAAC,MAAD,yBAHJ,CADJ,CADG;AAUP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,YAAD;AAAc,EAAA,IAAI,EAAC;AAAnB,GACI,mEADJ,CADJ,CADG;AAQP,eAAe;AACXC,EAAAA,KAAK,EAAE,uCADI;AAEXC,EAAAA,SAAS,EAAEP,YAFA;AAGXQ,EAAAA,UAAU,EAAE;AACRP,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport Button from '../../button/Button';\n\nimport Notification from '../Notification';\nimport notes from './Notification.stories.md';\n\nexport const basic = () => (\n <IntlProvider locale=\"en\">\n <Notification>This is a default notification.</Notification>\n </IntlProvider>\n);\n\nexport const info = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"info\">\n <span>This is an info notification with a button.</span>\n <Button>Click me</Button>\n </Notification>\n </IntlProvider>\n);\n\nexport const warn = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"warn\">\n <span>This is a warning notification with two buttons.</span>\n <Button>Click me</Button>\n <Button>Click me again</Button>\n </Notification>\n </IntlProvider>\n);\n\nexport const error = () => (\n <IntlProvider locale=\"en\">\n <Notification type=\"error\">\n <span>This is an error notification.</span>\n </Notification>\n </IntlProvider>\n);\n\nexport default {\n title: 'Components/Notifications/Notification',\n component: Notification,\n parameters: {\n notes,\n },\n};\n"],"file":"Notification.stories.js"}

package/es/components/notification/stories/NotificationsWrapper.stories.js CHANGED Viewed

@@ -47,7 +47,7 @@ export const example = () => {
   }, "Display persistent notification"))));
 };
 export default {
-  title: 'Components|Notifications/NotificationsWrapper',
+  title: 'Components/Notifications/NotificationsWrapper',
   component: NotificationsWrapper,
   parameters: {
     notes

package/es/components/notification/stories/NotificationsWrapper.stories.js.flow CHANGED Viewed

@@ -57,7 +57,7 @@ export const example = () => {
 };
 export default {
-    title: 'Components|Notifications/NotificationsWrapper',
+    title: 'Components/Notifications/NotificationsWrapper',
     component: NotificationsWrapper,
     parameters: {
         notes,

package/es/components/notification/stories/NotificationsWrapper.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/notification/stories/NotificationsWrapper.stories.js"],"names":["React","IntlProvider","State","Store","Button","PrimaryButton","Notification","NotificationsWrapper","notes","example","DATE","Date","toTimeString","componentStore","id","notifications","Map","closeNotification","get","delete","set","addNotification","duration","type","notification","state","values","undefined","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,aAAP,MAA0B,oCAA1B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,OAAOC,oBAAP,MAAiC,yBAAjC;AACA,OAAOC,KAAP,MAAkB,mCAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,QAAMC,IAAI,GAAG,IAAIC,IAAJ,CAAS,uBAAT,EAAkCC,YAAlC,EAAb;AACA,QAAMC,cAAc,GAAG,IAAIV,KAAJ,CAAU;AAC7BW,IAAAA,EAAE,EAAE,CADyB;AAE7BC,IAAAA,aAAa,EAAE,IAAIC,GAAJ;AAFc,GAAV,CAAvB;;AAKA,QAAMC,iBAAiB,GAAGH,EAAE,IAAI;AAC5B,UAAMC,aAAa,GAAGF,cAAc,CAACK,GAAf,CAAmB,eAAnB,CAAtB;AACAH,IAAAA,aAAa,CAACI,MAAd,CAAqBL,EAArB;AACAD,IAAAA,cAAc,CAACO,GAAf,CAAmB;AAAEL,MAAAA;AAAF,KAAnB;AACH,GAJD;;AAMA,QAAMM,eAAe,GAAG,CAACC,QAAD,EAAWC,IAAX,KAAoB;AACxC,UAAMT,EAAE,GAAGD,cAAc,CAACK,GAAf,CAAmB,IAAnB,CAAX;AACA,UAAMH,aAAa,GAAGF,cAAc,CAACK,GAAf,CAAmB,eAAnB,CAAtB;AACA,UAAMM,YAAY,GACd,oBAAC,YAAD;AAAc,MAAA,GAAG,EAAEV,EAAnB;AAAuB,MAAA,QAAQ,EAAEQ,QAAjC;AAA2C,MAAA,OAAO,EAAE,MAAML,iBAAiB,CAACH,EAAD,CAA3E;AAAiF,MAAA,IAAI,EAAES;AAAvF,OACI,iEAAkCb,IAAlC,CADJ,EAEI,oBAAC,MAAD,eAFJ,CADJ;AAOAG,IAAAA,cAAc,CAACO,GAAf,CAAmB;AACfL,MAAAA,aAAa,EAAEA,aAAa,CAACK,GAAd,CAAkBN,EAAlB,EAAsBU,YAAtB,CADA;AAEfV,MAAAA,EAAE,EAAEA,EAAE,GAAG;AAFM,KAAnB;AAIH,GAdD;;AAgBA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKY,KAAK,IACF,oBAAC,YAAD;AAAc,IAAA,MAAM,EAAC;AAArB,KACI,iCACI,oBAAC,oBAAD,QAAuB,CAAC,GAAGA,KAAK,CAACV,aAAN,CAAoBW,MAApB,EAAJ,CAAvB,CADJ,EAEI,oBAAC,MAAD;AAAQ,IAAA,OAAO,EAAE,MAAML,eAAe,CAAC,OAAD,EAAU,MAAV;AAAtC,kCAFJ,EAGI,oBAAC,aAAD;AAAe,IAAA,OAAO,EAAE,MAAMA,eAAe,CAACM,SAAD,EAAY,MAAZ;AAA7C,uCAHJ,CADJ,CAFR,CADJ;AAeH,CA5CM;AA8CP,eAAe;AACXC,EAAAA,KAAK,EAAE,+CADI;AAEXC,EAAAA,SAAS,EAAEtB,oBAFA;AAGXuB,EAAAA,UAAU,EAAE;AACRtB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\nimport Notification from '../Notification';\n\nimport NotificationsWrapper from '../NotificationsWrapper';\nimport notes from './NotificationsWrapper.stories.md';\n\nexport const example = () => {\n const DATE = new Date('May 13, 2002 23:15:30').toTimeString();\n const componentStore = new Store({\n id: 0,\n notifications: new Map(),\n });\n\n const closeNotification = id => {\n const notifications = componentStore.get('notifications');\n notifications.delete(id);\n componentStore.set({ notifications });\n };\n\n const addNotification = (duration, type) => {\n const id = componentStore.get('id');\n const notifications = componentStore.get('notifications');\n const notification = (\n <Notification key={id} duration={duration} onClose={() => closeNotification(id)} type={type}>\n <span>Hello world! I was made at {DATE}</span>\n <Button>Okay</Button>\n </Notification>\n );\n\n componentStore.set({\n notifications: notifications.set(id, notification),\n id: id + 1,\n });\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <NotificationsWrapper>{[...state.notifications.values()]}</NotificationsWrapper>\n <Button onClick={() => addNotification('short', 'info')}>Display timed notification</Button>\n <PrimaryButton onClick={() => addNotification(undefined, 'warn')}>\n Display persistent notification\n </PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|Notifications/NotificationsWrapper',\n component: NotificationsWrapper,\n parameters: {\n notes,\n },\n};\n"],"file":"NotificationsWrapper.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/notification/stories/NotificationsWrapper.stories.js"],"names":["React","IntlProvider","State","Store","Button","PrimaryButton","Notification","NotificationsWrapper","notes","example","DATE","Date","toTimeString","componentStore","id","notifications","Map","closeNotification","get","delete","set","addNotification","duration","type","notification","state","values","undefined","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,aAAP,MAA0B,oCAA1B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,OAAOC,oBAAP,MAAiC,yBAAjC;AACA,OAAOC,KAAP,MAAkB,mCAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,QAAMC,IAAI,GAAG,IAAIC,IAAJ,CAAS,uBAAT,EAAkCC,YAAlC,EAAb;AACA,QAAMC,cAAc,GAAG,IAAIV,KAAJ,CAAU;AAC7BW,IAAAA,EAAE,EAAE,CADyB;AAE7BC,IAAAA,aAAa,EAAE,IAAIC,GAAJ;AAFc,GAAV,CAAvB;;AAKA,QAAMC,iBAAiB,GAAGH,EAAE,IAAI;AAC5B,UAAMC,aAAa,GAAGF,cAAc,CAACK,GAAf,CAAmB,eAAnB,CAAtB;AACAH,IAAAA,aAAa,CAACI,MAAd,CAAqBL,EAArB;AACAD,IAAAA,cAAc,CAACO,GAAf,CAAmB;AAAEL,MAAAA;AAAF,KAAnB;AACH,GAJD;;AAMA,QAAMM,eAAe,GAAG,CAACC,QAAD,EAAWC,IAAX,KAAoB;AACxC,UAAMT,EAAE,GAAGD,cAAc,CAACK,GAAf,CAAmB,IAAnB,CAAX;AACA,UAAMH,aAAa,GAAGF,cAAc,CAACK,GAAf,CAAmB,eAAnB,CAAtB;AACA,UAAMM,YAAY,GACd,oBAAC,YAAD;AAAc,MAAA,GAAG,EAAEV,EAAnB;AAAuB,MAAA,QAAQ,EAAEQ,QAAjC;AAA2C,MAAA,OAAO,EAAE,MAAML,iBAAiB,CAACH,EAAD,CAA3E;AAAiF,MAAA,IAAI,EAAES;AAAvF,OACI,iEAAkCb,IAAlC,CADJ,EAEI,oBAAC,MAAD,eAFJ,CADJ;AAOAG,IAAAA,cAAc,CAACO,GAAf,CAAmB;AACfL,MAAAA,aAAa,EAAEA,aAAa,CAACK,GAAd,CAAkBN,EAAlB,EAAsBU,YAAtB,CADA;AAEfV,MAAAA,EAAE,EAAEA,EAAE,GAAG;AAFM,KAAnB;AAIH,GAdD;;AAgBA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKY,KAAK,IACF,oBAAC,YAAD;AAAc,IAAA,MAAM,EAAC;AAArB,KACI,iCACI,oBAAC,oBAAD,QAAuB,CAAC,GAAGA,KAAK,CAACV,aAAN,CAAoBW,MAApB,EAAJ,CAAvB,CADJ,EAEI,oBAAC,MAAD;AAAQ,IAAA,OAAO,EAAE,MAAML,eAAe,CAAC,OAAD,EAAU,MAAV;AAAtC,kCAFJ,EAGI,oBAAC,aAAD;AAAe,IAAA,OAAO,EAAE,MAAMA,eAAe,CAACM,SAAD,EAAY,MAAZ;AAA7C,uCAHJ,CADJ,CAFR,CADJ;AAeH,CA5CM;AA8CP,eAAe;AACXC,EAAAA,KAAK,EAAE,+CADI;AAEXC,EAAAA,SAAS,EAAEtB,oBAFA;AAGXuB,EAAAA,UAAU,EAAE;AACRtB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport Button from '../../button/Button';\nimport PrimaryButton from '../../primary-button/PrimaryButton';\nimport Notification from '../Notification';\n\nimport NotificationsWrapper from '../NotificationsWrapper';\nimport notes from './NotificationsWrapper.stories.md';\n\nexport const example = () => {\n const DATE = new Date('May 13, 2002 23:15:30').toTimeString();\n const componentStore = new Store({\n id: 0,\n notifications: new Map(),\n });\n\n const closeNotification = id => {\n const notifications = componentStore.get('notifications');\n notifications.delete(id);\n componentStore.set({ notifications });\n };\n\n const addNotification = (duration, type) => {\n const id = componentStore.get('id');\n const notifications = componentStore.get('notifications');\n const notification = (\n <Notification key={id} duration={duration} onClose={() => closeNotification(id)} type={type}>\n <span>Hello world! I was made at {DATE}</span>\n <Button>Okay</Button>\n </Notification>\n );\n\n componentStore.set({\n notifications: notifications.set(id, notification),\n id: id + 1,\n });\n };\n\n return (\n <State store={componentStore}>\n {state => (\n <IntlProvider locale=\"en\">\n <div>\n <NotificationsWrapper>{[...state.notifications.values()]}</NotificationsWrapper>\n <Button onClick={() => addNotification('short', 'info')}>Display timed notification</Button>\n <PrimaryButton onClick={() => addNotification(undefined, 'warn')}>\n Display persistent notification\n </PrimaryButton>\n </div>\n </IntlProvider>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/Notifications/NotificationsWrapper',\n component: NotificationsWrapper,\n parameters: {\n notes,\n },\n};\n"],"file":"NotificationsWrapper.stories.js"}

package/es/components/nudge/Nudge.stories.js CHANGED Viewed

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

package/es/components/nudge/Nudge.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/nudge/Nudge.stories.tsx"],"names":["React","State","Store","BoxMobile140","Nudge","notes","onButtonClick","console","log","regular","componentStore","isShown","onNudgeClose","set","state","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,YAAP,MAAyB,iCAAzB;AAEA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;;AAEA,MAAMC,aAAa,GAAG,MAAM;AACxB;AACAC,EAAAA,OAAO,CAACC,GAAR,CAAY,gBAAZ;AACH,CAHD;;AAKA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,QAAMC,cAAc,GAAG,IAAIR,KAAJ,CAAU;AAC7BS,IAAAA,OAAO,EAAE;AADoB,GAAV,CAAvB;;AAIA,QAAMC,YAAY,GAAG,MAAMF,cAAc,CAACG,GAAf,CAAmB;AAAEF,IAAAA,OAAO,EAAE;AAAX,GAAnB,CAA3B;;AAEA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKI,KAAK,IACF,oBAAC,KAAD;AACI,IAAA,UAAU,EAAE,sDADhB;AAEI,IAAA,OAAO,EACH,8HAHR;AAOI,IAAA,YAAY,EAAE,oBAAC,YAAD;AAAc,MAAA,MAAM,EAAE,GAAtB;AAA2B,MAAA,KAAK,EAAE;AAAlC,MAPlB;AAQI,IAAA,OAAO,EAAEA,KAAK,CAACH,OARnB;AASI,IAAA,MAAM,EAAE,sDATZ;AAUI,IAAA,aAAa,EAAEL,aAVnB;AAWI,IAAA,kBAAkB,EAAEM;AAXxB,IAFR,CADJ;AAmBH,CA1BM;AA4BP,eAAe;AACXG,EAAAA,KAAK,EAAE,kBADI;AAEXC,EAAAA,SAAS,EAAEZ,KAFA;AAGXa,EAAAA,UAAU,EAAE;AACRZ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport BoxMobile140 from '../../illustration/BoxMobile140';\n\nimport Nudge from './Nudge';\nimport notes from './Nudge.stories.md';\n\nconst onButtonClick = () => {\n // eslint-disable-next-line no-console\n console.log('button clicked');\n};\n\nexport const regular = () => {\n const componentStore = new Store({\n isShown: true,\n });\n\n const onNudgeClose = () => componentStore.set({ isShown: false });\n\n return (\n <State store={componentStore}>\n {state => (\n <Nudge\n buttonText={<span>Pellentesque port</span>}\n content={\n <span>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis rutrum turpis.\n </span>\n }\n illustration={<BoxMobile140 height={140} width={140} />}\n isShown={state.isShown}\n header={<span>Heading goes here</span>}\n onButtonClick={onButtonClick}\n onCloseButtonClick={onNudgeClose}\n />\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|Nudge',\n component: Nudge,\n parameters: {\n notes,\n },\n};\n"],"file":"Nudge.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/nudge/Nudge.stories.tsx"],"names":["React","State","Store","BoxMobile140","Nudge","notes","onButtonClick","console","log","regular","componentStore","isShown","onNudgeClose","set","state","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,YAAP,MAAyB,iCAAzB;AAEA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;;AAEA,MAAMC,aAAa,GAAG,MAAM;AACxB;AACAC,EAAAA,OAAO,CAACC,GAAR,CAAY,gBAAZ;AACH,CAHD;;AAKA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB,QAAMC,cAAc,GAAG,IAAIR,KAAJ,CAAU;AAC7BS,IAAAA,OAAO,EAAE;AADoB,GAAV,CAAvB;;AAIA,QAAMC,YAAY,GAAG,MAAMF,cAAc,CAACG,GAAf,CAAmB;AAAEF,IAAAA,OAAO,EAAE;AAAX,GAAnB,CAA3B;;AAEA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKI,KAAK,IACF,oBAAC,KAAD;AACI,IAAA,UAAU,EAAE,sDADhB;AAEI,IAAA,OAAO,EACH,8HAHR;AAOI,IAAA,YAAY,EAAE,oBAAC,YAAD;AAAc,MAAA,MAAM,EAAE,GAAtB;AAA2B,MAAA,KAAK,EAAE;AAAlC,MAPlB;AAQI,IAAA,OAAO,EAAEA,KAAK,CAACH,OARnB;AASI,IAAA,MAAM,EAAE,sDATZ;AAUI,IAAA,aAAa,EAAEL,aAVnB;AAWI,IAAA,kBAAkB,EAAEM;AAXxB,IAFR,CADJ;AAmBH,CA1BM;AA4BP,eAAe;AACXG,EAAAA,KAAK,EAAE,kBADI;AAEXC,EAAAA,SAAS,EAAEZ,KAFA;AAGXa,EAAAA,UAAU,EAAE;AACRZ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport BoxMobile140 from '../../illustration/BoxMobile140';\n\nimport Nudge from './Nudge';\nimport notes from './Nudge.stories.md';\n\nconst onButtonClick = () => {\n // eslint-disable-next-line no-console\n console.log('button clicked');\n};\n\nexport const regular = () => {\n const componentStore = new Store({\n isShown: true,\n });\n\n const onNudgeClose = () => componentStore.set({ isShown: false });\n\n return (\n <State store={componentStore}>\n {state => (\n <Nudge\n buttonText={<span>Pellentesque port</span>}\n content={\n <span>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis rutrum turpis.\n </span>\n }\n illustration={<BoxMobile140 height={140} width={140} />}\n isShown={state.isShown}\n header={<span>Heading goes here</span>}\n onButtonClick={onButtonClick}\n onCloseButtonClick={onNudgeClose}\n />\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/Nudge',\n component: Nudge,\n parameters: {\n notes,\n },\n};\n"],"file":"Nudge.stories.js"}

package/es/components/pill-cloud/PillCloud.stories.js CHANGED Viewed

@@ -67,7 +67,7 @@ export const regular = () => {
   }, "Selected Pill: ", selectedOption.displayText));
 };
 export default {
-  title: 'Components|PillCloud',
+  title: 'Components/PillCloud',
   component: PillCloud,
   parameters: {
     notes

package/es/components/pill-cloud/PillCloud.stories.js.flow CHANGED Viewed

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

package/es/components/pill-cloud/PillCloud.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/pill-cloud/PillCloud.stories.js"],"names":["React","useState","PillCloud","notes","pills","value","displayText","regular","selectedOption","setSelectedOption","option","title","component","parameters"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,MAAMC,KAAK,GAAG,CACV;AAAEC,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CADU,EAEV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAFU,EAGV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAHU,EAIV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAJU,EAKV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CALU,EAMV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CANU,EAOV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAPU,EAQV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CARU,EASV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CATU,EAUV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAVU,EAWV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAXU,EAYV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAZU,EAaV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAbU,EAcV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAdU,EAeV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAfU,EAgBV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAhBU,CAAd;AAkBA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB;AACA,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCR,QAAQ,CAACG,KAAK,CAAC,CAAD,CAAN,CAApD;AACA,SACI,iCACI,oBAAC,SAAD;AACI,IAAA,QAAQ,EAAEM,MAAM,IAAI;AAChBD,MAAAA,iBAAiB,CAACC,MAAD,CAAjB;AACH,KAHL;AAII,IAAA,OAAO,EAAEN,KAJb;AAKI,IAAA,eAAe,EAAE,CAACI,cAAD,CALrB;AAMI,IAAA,WAAW,EAAE;AAAE,0BAAoB;AAAtB;AANjB,IADJ,EASI;AAAK,IAAA,EAAE,EAAC;AAAR,wBAA4CA,cAAc,CAACF,WAA3D,CATJ,CADJ;AAaH,CAhBM;AAkBP,eAAe;AACXK,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEV,SAFA;AAGXW,EAAAA,UAAU,EAAE;AACRV,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import React, { useState } from 'react';\n\nimport PillCloud from './PillCloud';\nimport notes from './PillCloud.stories.md';\n\nconst pills = [\n { value: 0, displayText: 'Box' },\n { value: 1, displayText: 'Fox' },\n { value: 2, displayText: 'Socks' },\n { value: 3, displayText: 'Flocks' },\n { value: 4, displayText: 'Chalks' },\n { value: 5, displayText: 'Locks' },\n { value: 6, displayText: 'long pill, very very long pill, so long that it breaks css boundaries' },\n { value: 7, displayText: 'Rocks' },\n { value: 8, displayText: 'Crocs' },\n { value: 9, displayText: 'Mox' },\n { value: 10, displayText: 'Stalks' },\n { value: 11, displayText: 'Clocks' },\n { value: 12, displayText: 'Lox' },\n { value: 13, displayText: 'Blocks' },\n { value: 14, displayText: 'Ox' },\n { value: 15, displayText: 'another long pill, very very long pill, so long that it breaks css boundaries' },\n];\nexport const regular = () => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selectedOption, setSelectedOption] = useState(pills[5]);\n return (\n <div>\n <PillCloud\n onSelect={option => {\n setSelectedOption(option);\n }}\n options={pills}\n selectedOptions={[selectedOption]}\n buttonProps={{ 'data-button-type': 'pill-btn' }}\n />\n <div id=\"pill-cloud-output\">Selected Pill: {selectedOption.displayText}</div>\n </div>\n );\n};\n\nexport default {\n title: 'Components\|PillCloud',\n component: PillCloud,\n parameters: {\n notes,\n },\n};\n"],"file":"PillCloud.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/pill-cloud/PillCloud.stories.js"],"names":["React","useState","PillCloud","notes","pills","value","displayText","regular","selectedOption","setSelectedOption","option","title","component","parameters"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,MAAMC,KAAK,GAAG,CACV;AAAEC,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CADU,EAEV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAFU,EAGV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAHU,EAIV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAJU,EAKV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CALU,EAMV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CANU,EAOV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAPU,EAQV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CARU,EASV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CATU,EAUV;AAAED,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,WAAW,EAAE;AAAzB,CAVU,EAWV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAXU,EAYV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAZU,EAaV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAbU,EAcV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAdU,EAeV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAfU,EAgBV;AAAED,EAAAA,KAAK,EAAE,EAAT;AAAaC,EAAAA,WAAW,EAAE;AAA1B,CAhBU,CAAd;AAkBA,OAAO,MAAMC,OAAO,GAAG,MAAM;AACzB;AACA,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCR,QAAQ,CAACG,KAAK,CAAC,CAAD,CAAN,CAApD;AACA,SACI,iCACI,oBAAC,SAAD;AACI,IAAA,QAAQ,EAAEM,MAAM,IAAI;AAChBD,MAAAA,iBAAiB,CAACC,MAAD,CAAjB;AACH,KAHL;AAII,IAAA,OAAO,EAAEN,KAJb;AAKI,IAAA,eAAe,EAAE,CAACI,cAAD,CALrB;AAMI,IAAA,WAAW,EAAE;AAAE,0BAAoB;AAAtB;AANjB,IADJ,EASI;AAAK,IAAA,EAAE,EAAC;AAAR,wBAA4CA,cAAc,CAACF,WAA3D,CATJ,CADJ;AAaH,CAhBM;AAkBP,eAAe;AACXK,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEV,SAFA;AAGXW,EAAAA,UAAU,EAAE;AACRV,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import React, { useState } from 'react';\n\nimport PillCloud from './PillCloud';\nimport notes from './PillCloud.stories.md';\n\nconst pills = [\n { value: 0, displayText: 'Box' },\n { value: 1, displayText: 'Fox' },\n { value: 2, displayText: 'Socks' },\n { value: 3, displayText: 'Flocks' },\n { value: 4, displayText: 'Chalks' },\n { value: 5, displayText: 'Locks' },\n { value: 6, displayText: 'long pill, very very long pill, so long that it breaks css boundaries' },\n { value: 7, displayText: 'Rocks' },\n { value: 8, displayText: 'Crocs' },\n { value: 9, displayText: 'Mox' },\n { value: 10, displayText: 'Stalks' },\n { value: 11, displayText: 'Clocks' },\n { value: 12, displayText: 'Lox' },\n { value: 13, displayText: 'Blocks' },\n { value: 14, displayText: 'Ox' },\n { value: 15, displayText: 'another long pill, very very long pill, so long that it breaks css boundaries' },\n];\nexport const regular = () => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selectedOption, setSelectedOption] = useState(pills[5]);\n return (\n <div>\n <PillCloud\n onSelect={option => {\n setSelectedOption(option);\n }}\n options={pills}\n selectedOptions={[selectedOption]}\n buttonProps={{ 'data-button-type': 'pill-btn' }}\n />\n <div id=\"pill-cloud-output\">Selected Pill: {selectedOption.displayText}</div>\n </div>\n );\n};\n\nexport default {\n title: 'Components/PillCloud',\n component: PillCloud,\n parameters: {\n notes,\n },\n};\n"],"file":"PillCloud.stories.js"}

package/es/components/pill-selector-dropdown/PillSelector.js CHANGED Viewed

@@ -172,6 +172,8 @@ class PillSelectorBase extends React.Component {
       getPillClassName,
       getPillImageUrl,
       inputProps,
+      isInputDisabled,
+      isInputFocusedNextLine,
       onInput,
       onRemove,
       onSuggestedPillAdd,
@@ -185,7 +187,7 @@ class PillSelectorBase extends React.Component {
       suggestedPillsTitle,
       validator
     } = _this$props,
-          rest = _objectWithoutProperties(_this$props, ["allowInvalidPills", "className", "disabled", "error", "errorTooltipPosition", "getPillClassName", "getPillImageUrl", "inputProps", "onInput", "onRemove", "onSuggestedPillAdd", "placeholder", "innerRef", "selectedOptions", "showAvatars", "showRoundedPills", "suggestedPillsData", "suggestedPillsFilter", "suggestedPillsTitle", "validator"]);
+          rest = _objectWithoutProperties(_this$props, ["allowInvalidPills", "className", "disabled", "error", "errorTooltipPosition", "getPillClassName", "getPillImageUrl", "inputProps", "isInputDisabled", "isInputFocusedNextLine", "onInput", "onRemove", "onSuggestedPillAdd", "placeholder", "innerRef", "selectedOptions", "showAvatars", "showRoundedPills", "suggestedPillsData", "suggestedPillsFilter", "suggestedPillsTitle", "validator"]);
     const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;
     const hasError = !!error;
@@ -250,8 +252,10 @@ class PillSelectorBase extends React.Component {
       "data-testid": "pill-selection-helper"
     }), React.createElement("textarea", _extends({}, ariaAttrs, rest, inputProps, {
       autoComplete: "off",
-      className: classNames('bdl-PillSelector-input', 'pill-selector-input', className),
-      disabled: disabled,
+      className: classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
+        'bdl-PillSelector-input--nextLine': isInputFocusedNextLine
+      }),
+      disabled: disabled || isInputDisabled,
       onInput: onInput,
       placeholder: this.getNumSelected() === 0 ? placeholder : '',
       ref: input => {

package/es/components/pill-selector-dropdown/PillSelector.js.flow CHANGED Viewed

@@ -31,6 +31,10 @@ type Props = {
     getPillImageUrl?: (data: { id: string | number, [key: string]: any }) => string,
     innerRef?: React.Ref<any>,
     inputProps: Object,
+    /** Allows disabling the textarea element without disabling the whole PillSelector */
+    isInputDisabled?: boolean,
+    /** Whether to show textarea in next line when focused */
+    isInputFocusedNextLine?: boolean,
     onInput: Function,
     onRemove: Function,
     onSuggestedPillAdd?: Function,
@@ -194,6 +198,8 @@ class PillSelectorBase extends React.Component<Props, State> {
             getPillClassName,
             getPillImageUrl,
             inputProps,
+            isInputDisabled,
+            isInputFocusedNextLine,
             onInput,
             onRemove,
             onSuggestedPillAdd,
@@ -284,8 +290,10 @@ class PillSelectorBase extends React.Component<Props, State> {
                         {...rest}
                         {...inputProps}
                         autoComplete="off"
-                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}
-                        disabled={disabled}
+                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
+                            'bdl-PillSelector-input--nextLine': isInputFocusedNextLine,
+                        })}
+                        disabled={disabled || isInputDisabled}
                         onInput={onInput}
                         placeholder={this.getNumSelected() === 0 ? placeholder : ''}
                         ref={input => {