box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/components/media-query/useMediaQuery.js

@@ -0,0 +1,97 @@
+// @flow
+
+import { toQuery, useMediaQuery as _useMediaQuery } from 'react-responsive';
+import {
+    ANY_HOVER,
+    ANY_POINTER_COARSE,
+    ANY_POINTER_FINE,
+    HOVER,
+    HOVER_TYPE,
+    POINTER_COARSE,
+    POINTER_FINE,
+    POINTER_TYPE,
+    SIZE_LARGE,
+    SIZE_MEDIUM,
+    SIZE_SMALL,
+    VIEW_SIZE_TYPE,
+} from './constants';
+import type { MediaQuery, MediaShape } from './types';
+
+const getPointerCapabilities = (isFine: boolean, isCoarse: boolean) => {
+    if (!isFine && !isCoarse) return POINTER_TYPE.none;
+    if (isFine) return POINTER_TYPE.fine;
+    return POINTER_TYPE.coarse;
+};
+
+const getViewDimensions = () => {
+    return { viewWidth: window.innerWidth, viewHeight: window.innerHeight };
+};
+
+/**
+ * Formats the media query either as a MediaQuery object or string
+ * @param query
+ * @returns {string}
+ */
+function formatQuery(query: MediaQuery): string {
+    return typeof query === 'string' ? query : toQuery(query);
+}
+
+/**
+ * Executes media query
+ * @param query
+ * @param onQueryChange
+ * @returns {boolean}
+ */
+function useQuery(query: MediaQuery, onQueryChange?: (_: boolean) => void): boolean {
+    return _useMediaQuery({ query: formatQuery(query) }, null, onQueryChange);
+}
+
+/**
+ * Determines device capabilities for hover and pointer features
+ * @returns {{anyPointer: *, hover: (string), pointer: *, anyHover: (string)}}
+ */
+function useDeviceCapabilities() {
+    const isHover: boolean = useQuery(HOVER);
+    const isAnyHover: boolean = useQuery(ANY_HOVER);
+
+    const anyHover = isAnyHover ? HOVER_TYPE.hover : HOVER_TYPE.none;
+    const hover = isHover ? HOVER_TYPE.hover : HOVER_TYPE.none;
+    const pointer = getPointerCapabilities(useQuery(POINTER_FINE), useQuery(POINTER_COARSE));
+    const anyPointer = getPointerCapabilities(useQuery(ANY_POINTER_FINE), useQuery(ANY_POINTER_COARSE));
+
+    return {
+        anyHover,
+        hover,
+        anyPointer,
+        pointer,
+    };
+}
+
+/**
+ * Determines device size using media queries
+ * @returns {string}
+ */
+function useDeviceSize() {
+    const isSmall: boolean = useQuery(SIZE_SMALL);
+    const isMedium: boolean = useQuery(SIZE_MEDIUM);
+    const isLarge: boolean = useQuery(SIZE_LARGE);
+
+    if (isSmall) return VIEW_SIZE_TYPE.small;
+    if (isMedium) return VIEW_SIZE_TYPE.medium;
+    if (isLarge) return VIEW_SIZE_TYPE.large;
+
+    return VIEW_SIZE_TYPE.xlarge;
+}
+
+function useMediaQuery(): MediaShape {
+    const deviceCapabilities = useDeviceCapabilities();
+    const deviceSize = useDeviceSize();
+    const viewDimensions = getViewDimensions();
+    return {
+        ...deviceCapabilities,
+        ...viewDimensions,
+        size: deviceSize,
+    };
+}
+
+export default useMediaQuery;

package/src/components/media-query/withMediaQuery.js

@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+import useMediaQuery from './useMediaQuery';
+import type { MediaShape } from './types';
+
+type PropsShape = {
+    children: React.Node,
+};
+
+function withMediaQuery<Props: PropsShape>(WrappedComponent: React.ComponentType<any>): React.ComponentType<any> {
+    return ({ children, ...rest }: Props) => {
+        const mediaProps: MediaShape = useMediaQuery();
+
+        return (
+            <WrappedComponent {...rest} {...mediaProps}>
+                {children}
+            </WrappedComponent>
+        );
+    };
+}
+
+export default withMediaQuery;

package/src/components/modal/Modal.scss

@@ -1,5 +1,6 @@
 @import '../../styles/variables';
 @import '../../styles/mixins/buttons';
+@import '../../styles/constants/media-queries';
 
 /**************************************
  * Modal
@@ -56,6 +57,7 @@
     display: flex;
     flex-direction: column;
     width: 460px;
+    max-width: 100%;
     margin: auto;
     padding: 30px;
     background-color: $white;
@@ -133,3 +135,28 @@
     z-index: 89;
     display: flex;
 }
+
+//Responsive support - triggers fullscreen mode after reaching $small-medium-screen width
+.is-responsive-web {
+    @include breakpoint($small-medium-screen) {
+        .modal {
+            flex-direction: column;
+            padding: 0;
+        }
+
+        .modal-dialog {
+            min-height: 100%;
+            padding: 22px 16px 12px 16px;
+            border-radius: 0;
+        }
+
+        .modal-close-button {
+            right: 10px;
+        }
+    }
+
+    .modal-dialog-container {
+        flex-basis: 100%;
+        width: 100%;
+    }
+}

package/src/components/modal/__tests__/Modal.stories.test.js

@@ -1,3 +1,5 @@
+import { sizeSmallMax } from '../../../styles/variables';
+
 describe('components/modal/Modal', () => {
     const MODAL_STORIES = ['components-modal--basic', 'components-modal--with-custom-backdrop-click-handler'];
 
@@ -10,4 +12,12 @@ describe('components/modal/Modal', () => {
         const image = await BoxVisualTestUtils.takeModalScreenshot(id);
         return expect(image).toMatchImageSnapshot();
     });
+
+    test.each(MODAL_STORIES)(
+        'looks visually correct for small screens when button is clicked in story %s',
+        async id => {
+            const image = await BoxVisualTestUtils.takeModalScreenshot(id, parseInt(sizeSmallMax, 10));
+            return expect(image).toMatchImageSnapshot();
+        },
+    );
 });

package/src/components/preview/previewIcons.ts

@@ -29,6 +29,8 @@ import IconFileThreeD from '../../icon/content/FileThreeD32';
 import IconFileVector from '../../icon/content/FileVector32';
 import IconFileVideo from '../../icon/content/FileVideo32';
 import IconFileWord from '../../icon/content/FileWord32';
+import IconFileXbd from '../../icon/content/FileXbd32';
+import IconFileXdw from '../../icon/content/FileXdw32';
 import IconFileZip from '../../icon/content/FileZip32';
 import { SVGProps } from '../accessible-svg/AccessibleSVG';
 
@@ -168,6 +170,8 @@ register(IconFileVideo, '#009AED', [
     'wmv',
 ]);
 register(IconFileWord, '#185ABD', ['doc', 'docx']);
+register(IconFileXbd, '#00838D', ['xbd']);
+register(IconFileXdw, '#00838D', ['xdw']);
 register(IconFileZip, vars.bdlGray20, ['tgz', 'zip']);
 
 export const getColor = (extension?: string): Config['color'] => {

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

@@ -17,11 +17,6 @@
         border: 0;
         cursor: pointer;
 
-        &:hover,
-        &:focus {
-            outline: none;
-        }
-
         path {
             transition: fill linear .1s;
         }

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

@@ -204,7 +204,8 @@ class SelectorDropdown extends React.Component<Props, State> {
                     this.resetActiveItem();
                 }
                 break;
-            // no default
+            default:
+                this.handleInput();
         }
     };
 
@@ -296,7 +297,7 @@ class SelectorDropdown extends React.Component<Props, State> {
             </ul>
         );
 
-        // change onKeyPress/onPaste back to onInput when React fixes this IE11 bug: https://github.com/facebook/react/issues/7280
+        // change onPaste back to onInput when React fixes this IE11 bug: https://github.com/facebook/react/issues/7280
 
         // We're simulating the blur event with the tab key listener and the
         // click listener as a proxy because IE will trigger a blur when
@@ -307,7 +308,6 @@ class SelectorDropdown extends React.Component<Props, State> {
                 className={classNames('SelectorDropdown', className)}
                 onFocus={this.handleFocus}
                 onKeyDown={this.handleKeyDown}
-                onKeyPress={this.handleInput}
                 onPaste={this.handleInput}
                 ref={this.selectorDropdownRef}
             >

package/src/components/selector-dropdown/__tests__/SelectorDropdown.test.js

@@ -172,12 +172,16 @@ describe('components/selector-dropdown/SelectorDropdown', () => {
 
     describe('handleInput()', () => {
         test('should call openDropdown() when key is pressed', () => {
+            const event = {
+                key: 'a',
+            };
+
             const wrapper = renderEmptyDropdown();
             const instance = wrapper.instance();
 
             sandbox.mock(instance).expects('openDropdown');
 
-            wrapper.simulate('keyPress');
+            wrapper.simulate('keyDown', event);
         });
 
         test('should call openDropdown() when text is pasted', () => {

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

@@ -45,7 +45,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
           key=".0"
           onBlur={[Function]}
           onFocus={[Function]}
-          onKeyDown={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           tabIndex="0"
@@ -56,7 +55,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
             className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
             onBlur={[Function]}
             onFocus={[Function]}
-            onKeyDown={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             tabIndex="0"
@@ -144,7 +142,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
           key=".0"
           onBlur={[Function]}
           onFocus={[Function]}
-          onKeyDown={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           tabIndex="0"
@@ -155,7 +152,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
             className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
             onBlur={[Function]}
             onFocus={[Function]}
-            onKeyDown={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             tabIndex="0"
@@ -243,7 +239,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
           key=".0"
           onBlur={[Function]}
           onFocus={[Function]}
-          onKeyDown={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           tabIndex="0"
@@ -254,7 +249,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
             className="btn-plain bdl-SidebarToggleButton"
             onBlur={[Function]}
             onFocus={[Function]}
-            onKeyDown={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             tabIndex="0"
@@ -340,7 +334,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
           key=".0"
           onBlur={[Function]}
           onFocus={[Function]}
-          onKeyDown={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           tabIndex="0"
@@ -351,7 +344,6 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
             className="btn-plain bdl-SidebarToggleButton"
             onBlur={[Function]}
             onFocus={[Function]}
-            onKeyDown={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             tabIndex="0"

package/src/components/tab-view/Tabs.scss

@@ -107,10 +107,6 @@
         }
     }
 
-    .tab:focus {
-        outline: 1px dotted $primary-color;
-    }
-
     .tab:hover,
     .tab:focus {
         .tab-title {

package/src/components/tooltip/Tooltip.tsx

@@ -130,15 +130,30 @@ class Tooltip extends React.Component<TooltipProps, State> {
         this.setState({ hasRendered: true });
     }
 
-    componentDidUpdate(prevProps: TooltipProps) {
+    componentDidUpdate(prevProps: TooltipProps, prevState: State) {
+        const isControlled = this.isControlled();
+
         // Reset wasClosedByUser state when isShown transitions from false to true
-        if (this.isControlled()) {
+        if (isControlled) {
             if (!prevProps.isShown && this.props.isShown) {
                 this.setState({ wasClosedByUser: false });
             }
+        } else {
+            if (!prevState.isShown && this.state.isShown) {
+                // capture event so that tooltip closes before any other floating components that can be closed by
+                // "Escape" key(e.g. Modal, Menu, etc.)
+                document.addEventListener('keydown', this.handleKeyDown, true);
+            }
+            if (prevState.isShown && !this.state.isShown) {
+                document.removeEventListener('keydown', this.handleKeyDown, true);
+            }
         }
     }
 
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown, true);
+    }
+
     tooltipID = uniqueId('tooltip');
 
     tetherRef = React.createRef<TetherComponent>();
@@ -158,7 +173,7 @@ class Tooltip extends React.Component<TooltipProps, State> {
         }
     };
 
-    fireChildEvent = (type: string, event: React.SyntheticEvent<HTMLElement>) => {
+    fireChildEvent = (type: string, event: React.SyntheticEvent<HTMLElement> | Event) => {
         const { children } = this.props;
         const handler = (children as React.ReactElement).props[type];
         if (handler) {
@@ -196,8 +211,9 @@ class Tooltip extends React.Component<TooltipProps, State> {
         return typeof isShownProp !== 'undefined';
     };
 
-    handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
+            event.stopPropagation();
             this.setState({ isShown: false });
         }
         this.fireChildEvent('onKeyDown', event);
@@ -278,7 +294,6 @@ class Tooltip extends React.Component<TooltipProps, State> {
         if (!isControlled) {
             componentProps.onBlur = this.handleBlur;
             componentProps.onFocus = this.handleFocus;
-            componentProps.onKeyDown = this.handleKeyDown;
             componentProps.onMouseEnter = this.handleMouseEnter;
             componentProps.onMouseLeave = this.handleMouseLeave;
 

package/src/components/tooltip/__tests__/Tooltip.test.tsx

@@ -3,6 +3,8 @@
 import * as React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
+import noop from 'lodash/noop';
+
 import Tooltip, { TooltipPosition, TooltipTheme } from '../Tooltip';
 import TetherPosition from '../../../common/tether-positions';
 
@@ -89,7 +91,6 @@ describe('components/tooltip/Tooltip', () => {
             expect(component.is('button')).toBe(true);
             expect(component.prop('onBlur')).toBeTruthy();
             expect(component.prop('onFocus')).toBeTruthy();
-            expect(component.prop('onKeyDown')).toBeTruthy();
             expect(component.prop('onMouseEnter')).toBeTruthy();
             expect(component.prop('onMouseLeave')).toBeTruthy();
             expect(component.prop('tabIndex')).toEqual('0');
@@ -477,18 +478,29 @@ describe('components/tooltip/Tooltip', () => {
 
     describe('handleKeyDown()', () => {
         test('should update isShown state only when escape key is pressed', () => {
+            const map: { [key: string]: Function } = {};
+            document.addEventListener = jest.fn().mockImplementationOnce((event, cb) => {
+                map[event] = cb;
+            });
             const wrapper = shallow(
                 <Tooltip text="hi">
                     <button />
                 </Tooltip>,
             );
             wrapper.setState({ isShown: true });
-
-            wrapper.find('button').simulate('keydown', { key: 'Escape' });
+            map.keydown({
+                key: 'Escape',
+                stopPropagation: noop,
+            });
+            expect(document.addEventListener).toHaveBeenCalledWith('keydown', expect.anything(), true);
             expect(wrapper.state('isShown')).toBe(false);
         });
 
         test('should not update isShown state only when some other key is pressed', () => {
+            const map: { [key: string]: Function } = {};
+            document.addEventListener = jest.fn().mockImplementationOnce((event, cb) => {
+                map[event] = cb;
+            });
             const wrapper = shallow(
                 <Tooltip text="hi">
                     <button />
@@ -496,7 +508,8 @@ describe('components/tooltip/Tooltip', () => {
             );
             wrapper.setState({ isShown: true });
 
-            wrapper.find('button').simulate('keydown', { key: 'Space' });
+            map.keydown({ key: 'Space' });
+            expect(document.addEventListener).toHaveBeenCalledWith('keydown', expect.anything(), true);
             expect(wrapper.state('isShown')).toBe(true);
         });
 

package/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -135,7 +135,6 @@ exports[`components/tooltip/Tooltip render() should render children wrapped in t
   <div
     onBlur={[Function]}
     onFocus={[Function]}
-    onKeyDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     tabIndex="0"
@@ -205,7 +204,6 @@ exports[`components/tooltip/Tooltip render() should render correctly with tether
   <div
     onBlur={[Function]}
     onFocus={[Function]}
-    onKeyDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     tabIndex="0"

package/src/constants.js

@@ -304,6 +304,7 @@ export const ORIGIN_METADATA_SIDEBAR: 'metadata_sidebar' = 'metadata_sidebar';
 export const ORIGIN_SKILLS_SIDEBAR: 'skills_sidebar' = 'skills_sidebar';
 export const ORIGIN_VERSIONS_SIDEBAR: 'versions_sidebar' = 'versions_sidebar';
 export const ORIGIN_PREVIEW: 'preview' = 'preview';
+export const ORIGIN_PREVIEW_SIDEBAR: 'preview_sidebar' = 'preview_sidebar';
 export const ORIGIN_CONTENT_EXPLORER: 'content_explorer' = 'content_explorer';
 export const ORIGIN_OPEN_WITH: 'open_with' = 'open_with';
 

package/src/elements/content-open-with/IconFileMap.js

@@ -4,14 +4,12 @@
  * @author Box
  */
 import * as React from 'react';
-import IconAdobeSign from '../../icons/adobe-sign/IconAdobeSign';
 import IconGoogleDocs from '../../icons/google-docs/IconGoogleDocs';
 import IconGoogleSheets from '../../icons/google-docs/IconGoogleSheets';
 import IconGoogleSlides from '../../icons/google-docs/IconGoogleSlides';
 import FileIcon from '../../icons/file-icon/FileIcon';
 
 const ICON_FILE_MAP = {
-    'Adobe Sign': IconAdobeSign,
     'Google Docs': IconGoogleDocs,
     'Google Docs (beta)': IconGoogleDocs,
     'Google Sheets': IconGoogleSheets,

package/src/elements/content-open-with/__tests__/ContentOpenWith.test.js

@@ -8,7 +8,7 @@ import BoxToolsInstallMessage from '../BoxToolsInstallMessage';
 
 jest.mock('lodash/uniqueId', () => () => 'uniqueId');
 
-const ADOBE_INTEGRATION_ID = '1234';
+const ABCD_INTEGRATION_ID = '1234';
 const BLACKLISTED_ERROR_MESSAGE_KEY = 'boxToolsBlacklistedError';
 const BOX_TOOLS_INSTALL_ERROR_MESSAGE_KEY = 'boxToolsInstallErrorMessage';
 
@@ -51,7 +51,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
     describe('isBoxEditIntegration()', () => {
         test('should determine if the integration is a Box Edit integration', () => {
-            expect(instance.isBoxEditIntegration(ADOBE_INTEGRATION_ID)).toBe(false);
+            expect(instance.isBoxEditIntegration(ABCD_INTEGRATION_ID)).toBe(false);
             expect(instance.isBoxEditIntegration(BOX_EDIT_INTEGRATION_ID)).toBe(true);
             expect(instance.isBoxEditIntegration(BOX_EDIT_SFC_INTEGRATION_ID)).toBe(true);
         });
@@ -59,7 +59,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
     describe('isBoxEditSFCIntegration()', () => {
         test('should determine if the integration is a Box Edit SFC integration', () => {
-            expect(instance.isBoxEditSFCIntegration(ADOBE_INTEGRATION_ID)).toBe(false);
+            expect(instance.isBoxEditSFCIntegration(ABCD_INTEGRATION_ID)).toBe(false);
             expect(instance.isBoxEditSFCIntegration(BOX_EDIT_INTEGRATION_ID)).toBe(false);
             expect(instance.isBoxEditSFCIntegration(BOX_EDIT_SFC_INTEGRATION_ID)).toBe(true);
         });
@@ -100,7 +100,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
             mockIntegrations = [
                 {
                     isDisabled: false,
-                    name: 'Adobe',
+                    name: 'ABCD',
                     appIntegrationId: '2',
                     disabledReasons: [],
                 },
@@ -299,7 +299,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
             displayIntegration = {
                 appIntegrationId: '1',
-                displayName: 'Adobe Sign',
+                displayName: 'Google Docs',
             };
 
             instance.setState = jest.fn();
@@ -523,7 +523,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
             const result = instance.getDisplayIntegration();
             expect(result).toEqual(null);
 
-            instance.setState({ integrations: ['Adobe', 'Google'] });
+            instance.setState({ integrations: ['ABCD', 'Google'] });
             const multipleResult = instance.getDisplayIntegration();
             expect(multipleResult).toEqual(null);
 
@@ -534,9 +534,9 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should return the sole integration as the display integration', () => {
             instance = getWrapper({ fileId }).instance();
-            instance.setState({ integrations: ['Adobe'] });
+            instance.setState({ integrations: ['ABCD'] });
             const result = instance.getDisplayIntegration();
-            expect(result).toEqual('Adobe');
+            expect(result).toEqual('ABCD');
         });
     });
 
@@ -547,7 +547,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should render the Open With button if there is one or fewer integrations', () => {
             instance.setState({
-                integrations: ['Adobe'],
+                integrations: ['ABCD'],
                 isLoading: false,
             });
             expect(wrapper).toMatchSnapshot();
@@ -555,7 +555,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should render the Open With dropdown if there is more than one integration', () => {
             instance.setState({
-                integrations: ['Adobe', 'Google Suite'],
+                integrations: ['ABCD', 'Google Suite'],
                 isLoading: false,
             });
             expect(wrapper).toMatchSnapshot();
@@ -563,7 +563,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should render the PortalContainer if the integration is loading', () => {
             instance.setState({
-                integrations: ['Adobe', 'Google Suite'],
+                integrations: ['ABCD', 'Google Suite'],
                 shouldRenderLoadingIntegrationPortal: true,
             });
             expect(wrapper).toMatchSnapshot();
@@ -571,7 +571,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should render the PortalContainer if the integration is errored', () => {
             instance.setState({
-                integrations: ['Adobe', 'Google Suite'],
+                integrations: ['ABCD', 'Google Suite'],
                 shouldRenderErrorIntegrationPortal: true,
             });
             expect(wrapper).toMatchSnapshot();
@@ -579,7 +579,7 @@ describe('elements/content-open-with/ContentOpenWith', () => {
 
         test('should render the ExecuteForm if we have data to post', () => {
             instance.setState({
-                integrations: ['Adobe'],
+                integrations: ['ABCD'],
                 executePostData: {
                     url: 'foo.com',
                     params: [{ foo: 'bar' }],

package/src/elements/content-open-with/__tests__/OpenWithButton.test.js

@@ -39,7 +39,7 @@ describe('elements/content-open-with/OpenWithButton', () => {
 
     test('should render as disabled if the integration is disabled', () => {
         const wrapper = getWrapper({
-            displayIntegration: { isDisabled: true, displayName: 'Adobe Sign' },
+            displayIntegration: { isDisabled: true, displayName: 'Google Docs' },
             onClick: noop,
         });
         expect(wrapper).toMatchSnapshot();

package/src/elements/content-open-with/__tests__/OpenWithDropdownMenu.test.js

@@ -11,10 +11,6 @@ describe('elements/content-open-with/OpenWithDropdownMenu', () => {
         const integrations = [
             {
                 appIntegrationId: 1,
-                displayName: 'Adobe Sign',
-            },
-            {
-                appIntegrationId: 2,
                 displayName: 'Google Docs',
             },
         ];
@@ -23,7 +19,7 @@ describe('elements/content-open-with/OpenWithDropdownMenu', () => {
             integrations,
             onClick: noop,
         });
-        expect(wrapper.find(Menu).children()).toHaveLength(2);
+        expect(wrapper.find(Menu).children()).toHaveLength(1);
 
         expect(wrapper).toMatchSnapshot();
     });

package/src/elements/content-open-with/__tests__/OpenWithDropdownMenuItem.test.js

@@ -10,8 +10,8 @@ describe('elements/content-open-with/OpenWithDropdownMenuItem', () => {
     test('should render the description and correct icon', () => {
         const props = {
             integration: {
-                displayName: 'Adobe Sign',
-                displayDescription: 'Open With Adobe',
+                displayName: 'Google Docs',
+                displayDescription: 'Open With Google Docs',
                 appIntegrationId: '1',
                 disabledReasons: [],
             },