@transferwise/components 0.0.0-experimental-5c47442 → 0.0.0-experimental-71a6c2e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5c47442",
+  "version": "0.0.0-experimental-71a6c2e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.22.0"
+    "@transferwise/neptune-css": "14.22.0",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/actionOption/ActionOption.story.tsx

@@ -5,7 +5,6 @@ import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { Nudge, Title, Typography } from '..';
 
 import ActionOption from './ActionOption';
-import { background } from '@storybook/theming';
 
 export default {
   component: ActionOption,

package/src/common/Option/Option.less

@@ -110,7 +110,7 @@ button.np-option {
     }
   }
 
-  @media (max-width: 320px) {
+  @media (--screen-400-zoom) {
     .np-option-additional-content  {
       margin-top: -3px;
     }

package/src/withNextPortal/withNextPortal.spec.tsx

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { render } from '../test-utils';
+import withNextPortalWrapper from './withNextPortal';
+
+describe('withNextPortalWrapper', () => {
+  it('renders component in React portal', () => {
+    type Props = Pick<
+      HTMLAttributes<HTMLButtonElement>,
+      'id' | 'children' | 'className' | 'aria-label'
+    >;
+    const RandomComponentForTest = withNextPortalWrapper((props: Props) => <span {...props} />);
+    const data: Props = {
+      'aria-label': 'Test aria-label',
+      id: 'random-component',
+      children: 'Test Children',
+    };
+    render(<RandomComponentForTest {...data} />);
+
+    const componentDomRef = document.body.lastChild;
+    expect(componentDomRef).toHaveAttribute('aria-label', data['aria-label']);
+    expect(componentDomRef).toHaveTextContent(data.children as string);
+    expect(componentDomRef).toHaveAttribute('id', data.id);
+  });
+});

package/src/withNextPortal/withNextPortal.spec.js

@@ -1,22 +0,0 @@
-import { mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-
-import withNextPortal from './withNextPortal';
-
-jest.mock('react-dom');
-
-describe('withNextPortal', () => {
-  it('should return a function', () => {
-    expect(typeof withNextPortal()).toBe('function');
-  });
-
-  it('should create a portal with the component', () => {
-    ReactDOM.createPortal.mockImplementation(() => null);
-    const props = {};
-    const Component = withNextPortal(AnyComponent);
-    mount(<Component {...props} />);
-    expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-  });
-
-  const AnyComponent = () => <div>Test div</div>;
-});