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

package/src/components/radar/__tests__/__snapshots__/RadarAnimation.test.tsx.snap

@@ -5,8 +5,8 @@ exports[`components/radar/RadarAnimation should render correctly with bottom-cen
   attachment="top center"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -40,8 +40,8 @@ exports[`components/radar/RadarAnimation should render correctly with bottom-lef
   attachment="top left"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -75,8 +75,8 @@ exports[`components/radar/RadarAnimation should render correctly with bottom-rig
   attachment="top right"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -110,8 +110,8 @@ exports[`components/radar/RadarAnimation should render correctly with middle-cen
   attachment="middle center"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -145,8 +145,8 @@ exports[`components/radar/RadarAnimation should render correctly with middle-lef
   attachment="middle right"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -180,8 +180,8 @@ exports[`components/radar/RadarAnimation should render correctly with middle-rig
   attachment="middle left"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -216,8 +216,8 @@ exports[`components/radar/RadarAnimation should render correctly with tetherElem
   className="tether-element-class-name"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -251,8 +251,8 @@ exports[`components/radar/RadarAnimation should render correctly with top-center
   attachment="bottom center"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -286,8 +286,8 @@ exports[`components/radar/RadarAnimation should render correctly with top-left p
   attachment="bottom left"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },
@@ -321,8 +321,8 @@ exports[`components/radar/RadarAnimation should render correctly with top-right
   attachment="bottom right"
   classPrefix="radar-animation"
   constraints={
-    Array [
-      Object {
+    [
+      {
         "attachment": "together",
         "to": "window",
       },

package/src/components/radio/stories/RadioButton.stories.tsx

@@ -11,7 +11,7 @@ export const disabled = () => (
 );
 
 export default {
-    title: 'Components|Radio/RadioButton',
+    title: 'Components/Radio/RadioButton',
     component: RadioButton,
     parameters: {
         notes,

package/src/components/radio/stories/RadioGroup.stories.tsx

@@ -52,7 +52,7 @@ export const withCustomRadioButtonComponent = () => {
 };
 
 export default {
-    title: 'Components|Radio/RadioGroup',
+    title: 'Components/Radio/RadioGroup',
     component: RadioGroup,
     parameters: {
         notes,

package/src/components/search-form/SearchActions.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { injectIntl, IntlShape } from 'react-intl';
+
+import ClearBadge16 from '../../icon/fill/ClearBadge16';
+import Search16 from '../../icon/fill/Search16';
+import makeLoadable from '../loading-indicator/makeLoadable';
+
+import messages from './messages';
+
+export interface SearchActionsProps {
+    /** Whether to render an interactive search button */
+    hasSubmitAction: boolean;
+    /** Intl object */
+    intl: IntlShape;
+    /** Called when clear button is clicked */
+    onClear: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+}
+
+const SearchActions = ({ hasSubmitAction, intl, onClear }: SearchActionsProps) => {
+    const { formatMessage } = intl;
+
+    return (
+        <div className="action-buttons">
+            {hasSubmitAction ? (
+                <button
+                    type="submit"
+                    className="action-button search-button"
+                    title={formatMessage(messages.searchButtonTitle)}
+                >
+                    <Search16 />
+                </button>
+            ) : (
+                <div className="action-button search-button">
+                    <Search16 />
+                </div>
+            )}
+            <button
+                className="action-button clear-button"
+                onClick={onClear}
+                title={formatMessage(messages.clearButtonTitle)}
+                type="button"
+            >
+                <ClearBadge16 />
+            </button>
+        </div>
+    );
+};
+
+export { SearchActions as SearchActionsBase };
+export default makeLoadable(injectIntl(SearchActions));

package/src/components/search-form/SearchForm.js

@@ -1,34 +1,17 @@
 // @flow
 import * as React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
-import ClearBadge16 from '../../icon/fill/ClearBadge16';
-import Search16 from '../../icon/fill/Search16';
+// $FlowFixMe
+import SearchActions from './SearchActions';
 
-import makeLoadable from '../loading-indicator/makeLoadable';
+// $FlowFixMe
+import messages from './messages';
 
 import './SearchForm.scss';
 
-const messages = defineMessages({
-    clearButtonTitle: {
-        defaultMessage: 'Clear',
-        description: 'Title for a clear button',
-        id: 'boxui.searchForm.clearButtonTitle',
-    },
-    searchButtonTitle: {
-        defaultMessage: 'Search',
-        description: 'Title for a search button',
-        id: 'boxui.searchForm.searchButtonTitle',
-    },
-    searchLabel: {
-        defaultMessage: 'Search query',
-        description: 'Label for a search input',
-        id: 'boxui.searchForm.searchLabel',
-    },
-});
-
 type Props = {
     /** Form submit action */
     action?: string,
@@ -41,13 +24,13 @@ type Props = {
     method?: 'get' | 'post',
     /** Name of the text input */
     name?: string,
-    /** On change handler for the search input, debounced by 250ms */
+    /** On change handler for the search input */
     onChange?: Function,
     /** On submit handler for the search input */
     onSubmit?: Function,
     /** Extra query parameters in addition to the form data */
     queryParams: { [arg: string]: string },
-    /** Boolean to prevent propogation of search clear action */
+    /** Whether to prevent propagation of search clear action */
     shouldPreventClearEventPropagation?: boolean,
     /** If the clear button is shown when input field is not empty */
     useClearButton?: boolean,
@@ -177,35 +160,6 @@ class SearchFormBase extends React.Component<Props, State> {
             <input key={index} name={param} type="hidden" value={queryParams[param]} />
         ));
 
-        const SearchActions = () => (
-            <div className="action-buttons">
-                {onSubmit ? (
-                    <button
-                        type="submit"
-                        className="action-button search-button"
-                        title={formatMessage(messages.searchButtonTitle)}
-                    >
-                        <Search16 />
-                    </button>
-                ) : (
-                    <div className="action-button search-button">
-                        <Search16 />
-                    </div>
-                )}
-
-                <button
-                    className="action-button clear-button"
-                    onClick={this.onClearHandler}
-                    title={formatMessage(messages.clearButtonTitle)}
-                    type="button"
-                >
-                    <ClearBadge16 />
-                </button>
-            </div>
-        );
-
-        const LoadableSearchActions = makeLoadable(SearchActions);
-
         // @NOTE Prevent errors from React about controlled inputs
         const onChangeStub = () => {};
 
@@ -229,11 +183,13 @@ class SearchFormBase extends React.Component<Props, State> {
                         type="search"
                         {...inputProps}
                     />
-                    <LoadableSearchActions
+                    <SearchActions
+                        hasSubmitAction={!!onSubmit}
                         isLoading={isLoading}
                         loadingIndicatorProps={{
                             className: 'search-form-loading-indicator',
                         }}
+                        onClear={this.onClearHandler}
                     />
                     {hiddenInputs}
                 </form>

package/src/components/search-form/__tests__/SearchForm.test.js

@@ -66,7 +66,7 @@ describe('components/search-form/SearchForm', () => {
             onSubmitMock.mockReset();
         });
 
-        test('should call onsubmit on form submit event', () => {
+        test('should call onSubmit on form submit event', () => {
             const wrapper = mount(<SearchForm onSubmit={onSubmitMock} placeholder="search" value="cheese" />);
             const form = wrapper.find('form');
 
@@ -75,7 +75,7 @@ describe('components/search-form/SearchForm', () => {
             expect(onSubmitMock).toBeCalledWith('cheese', expect.objectContaining(event));
         });
 
-        test('should call onsubmit on search icon button submit event', () => {
+        test('should call onSubmit on search icon button submit event', () => {
             const wrapper = mount(<SearchForm onSubmit={onSubmitMock} placeholder="search" value="cheese" />);
             const searchButton = wrapper.find('.search-button');
             expect(searchButton.prop('type')).toEqual('submit');
@@ -86,7 +86,7 @@ describe('components/search-form/SearchForm', () => {
         });
     });
 
-    test('should call onchange on form change', () => {
+    test('should call onChange on form change', () => {
         const onChangeSpy = sinon.spy();
         const wrapper = mount(<SearchForm onChange={onChangeSpy} placeholder="search" value="cheese" />);
         const form = wrapper.find('form');
@@ -124,8 +124,12 @@ describe('components/search-form/SearchForm', () => {
 
     test('should set the onClearHandler to the clear button onClick prop', () => {
         const wrapper = shallow(<SearchForm intl={intlShape} />).shallow();
-        const lodableComponent = wrapper.find('LoadableSearchActions').shallow();
-        const searchActions = lodableComponent.shallow();
+        // Sift through the nested HOCs to find the correct element
+        const searchActions = wrapper
+            .find('LoadableSearchActions')
+            .dive()
+            .dive()
+            .dive();
         const { onClearHandler } = wrapper.instance();
         expect(searchActions.find('.clear-button').prop('onClick')).toEqual(onClearHandler);
     });

package/src/components/search-form/messages.ts

@@ -0,0 +1,21 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    clearButtonTitle: {
+        defaultMessage: 'Clear',
+        description: 'Title for a clear button',
+        id: 'boxui.searchForm.clearButtonTitle',
+    },
+    searchButtonTitle: {
+        defaultMessage: 'Search',
+        description: 'Title for a search button',
+        id: 'boxui.searchForm.searchButtonTitle',
+    },
+    searchLabel: {
+        defaultMessage: 'Search query',
+        description: 'Label for a search input',
+        id: 'boxui.searchForm.searchLabel',
+    },
+});
+
+export default messages;

package/src/components/section/Section.stories.tsx

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

package/src/components/select/Select.stories.js

@@ -68,7 +68,7 @@ export const withInfoTooltip = () => (
 );
 
 export default {
-    title: 'Components|Select',
+    title: 'Components/Select',
     component: Select,
     parameters: {
         notes,

package/src/components/select-button/SelectButton.stories.js

@@ -24,7 +24,7 @@ export const withError = () => (
 );
 
 export default {
-    title: 'Components|SelectButton',
+    title: 'Components/SelectButton',
     component: SelectButton,
     parameters: {
         notes,

package/src/components/select-field/__tests__/__snapshots__/BaseSelectField.test.js.snap

@@ -16,7 +16,7 @@ exports[`components/select-field/BaseSelectField renderSelectButton() should sen
 `;
 
 exports[`components/select-field/BaseSelectField renderSelectOptions() should render option content using optionRenderer when provided 1`] = `
-Array [
+[
   <DatalistItem
     className="select-option"
     isSelected={false}

package/src/components/selector-dropdown/SelectorDropdown.stories.js

@@ -8,7 +8,7 @@ import notes from './SelectorDropdown.stories.md';
 export const basic = () => <SelectorDropdownExamples />;
 
 export default {
-    title: 'Components|SelectorDropdown',
+    title: 'Components/SelectorDropdown',
     component: SelectorDropdown,
     parameters: {
         notes,

package/src/components/sidebar-toggle-button/SidebarToggleButton.stories.js

@@ -24,7 +24,7 @@ export const leftFacing = () => (
 );
 
 export default {
-    title: 'Components|SidebarToggleButton',
+    title: 'Components/SidebarToggleButton',
     component: SidebarToggleButton,
     parameters: {
         notes,

package/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap

@@ -6,7 +6,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
 >
   <SidebarToggleButton
     intl={
-      Object {
+      {
         "formatDate": [Function],
         "formatMessage": [Function],
         "formatNumber": [Function],
@@ -28,8 +28,8 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
-          Array [
-            Object {
+          [
+            {
               "attachment": "together",
               "to": "window",
             },
@@ -104,7 +104,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
   <SidebarToggleButton
     direction="left"
     intl={
-      Object {
+      {
         "formatDate": [Function],
         "formatMessage": [Function],
         "formatNumber": [Function],
@@ -126,8 +126,8 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
-          Array [
-            Object {
+          [
+            {
               "attachment": "together",
               "to": "window",
             },
@@ -202,7 +202,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
   <SidebarToggleButton
     direction="left"
     intl={
-      Object {
+      {
         "formatDate": [Function],
         "formatMessage": [Function],
         "formatNumber": [Function],
@@ -224,8 +224,8 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
-          Array [
-            Object {
+          [
+            {
               "attachment": "together",
               "to": "window",
             },
@@ -298,7 +298,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
 >
   <SidebarToggleButton
     intl={
-      Object {
+      {
         "formatDate": [Function],
         "formatMessage": [Function],
         "formatNumber": [Function],
@@ -320,8 +320,8 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
-          Array [
-            Object {
+          [
+            {
               "attachment": "together",
               "to": "window",
             },

package/src/components/tab-view/TabView.stories.js

@@ -159,7 +159,7 @@ export const dynamicWithLinks = () => (
 );
 
 export default {
-    title: 'Components|TabView',
+    title: 'Components/TabView',
     component: TabView,
     parameters: {
         notes,

package/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap

@@ -21,7 +21,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
         aria-errormessage="errorMessage22"
         aria-invalid={false}
         style={
-          Object {
+          {
             "resize": "none",
           }
         }
@@ -64,7 +64,7 @@ exports[`components/text-area/TextArea should render text area with description
         aria-errormessage="errorMessage26"
         aria-invalid={false}
         style={
-          Object {
+          {
             "resize": "none",
           }
         }
@@ -100,7 +100,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
         aria-errormessage="errorMessage24"
         aria-invalid={false}
         style={
-          Object {
+          {
             "resize": "none",
           }
         }

package/src/components/text-input/TextInput.stories.js

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

package/src/components/text-input-with-copy-button/TextInputWithCopyButton.js

@@ -159,11 +159,16 @@ class TextInputWithCopyButton extends React.PureComponent<Props, State> {
     };
 
     handleCopyEvent = (event: SyntheticEvent<>) => {
-        this.animateCopyButton();
+        const { disabled, onCopySuccess } = this.props;
+
+        if (disabled) {
+            event.preventDefault();
+        } else {
+            this.animateCopyButton();
 
-        const { onCopySuccess } = this.props;
-        if (onCopySuccess) {
-            onCopySuccess(event);
+            if (onCopySuccess) {
+                onCopySuccess(event);
+            }
         }
     };
 

package/src/components/text-input-with-copy-button/TextInputWithCopyButton.stories.js

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

package/src/components/thumbnail-card/ThumbnailCard.stories.js

@@ -12,7 +12,7 @@ export const basic = () => <ThumbnailCard thumbnail={thumbnail} title={title} />
 export const highlightOnHover = () => <ThumbnailCard highlightOnHover thumbnail={thumbnail} title={title} />;
 
 export default {
-    title: 'Components|ThumbnailCard',
+    title: 'Components/ThumbnailCard',
     component: ThumbnailCard,
     parameters: {
         notes,

package/src/components/time/ReadableTime.stories.js

@@ -48,7 +48,7 @@ export const dateInTheFutureWhenNotAllowed = () => (
 );
 
 export default {
-    title: 'Components|ReadableTime',
+    title: 'Components/ReadableTime',
     component: ReadableTime,
     parameters: {
         notes,

package/src/components/time-input/TimeInput.stories.tsx

@@ -39,6 +39,6 @@ export const optional = () => {
 };
 
 export default {
-    title: 'Components|TimeInput',
+    title: 'Components/TimeInput',
     component: TimeInput,
 };

package/src/components/toggle/Toggle.stories.js

@@ -54,7 +54,7 @@ export const controlled = () => {
 export const disabled = () => <Toggle name="toggle4" label="Disabled" isDisabled={boolean('isDisabled', true)} />;
 
 export default {
-    title: 'Components|Toggle',
+    title: 'Components/Toggle',
     component: Toggle,
     parameters: {
         notes,

package/src/components/tooltip/Tooltip.stories.tsx

@@ -129,7 +129,7 @@ withLongText.story = {
 };
 
 export default {
-    title: 'Components|Tooltip',
+    title: 'Components/Tooltip',
     component: Tooltip,
     parameters: {
         notes,