@transferwise/components 0.0.0-experimental-b7e52e5 → 0.0.0-experimental-57931af

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b7e52e5",
+  "version": "0.0.0-experimental-57931af",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,14 +94,14 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-b7e52e5",
     "@wise/components-theming": "1.6.2",
+    "@transferwise/neptune-css": "0.0.0-experimental-57931af",
     "@transferwise/less-config": "3.1.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.19.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-b7e52e5",
+    "@transferwise/neptune-css": "0.0.0-experimental-57931af",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/listItem/ListItem.tests.story.tsx

@@ -1,7 +1,7 @@
-import ListItem, { List } from '.';
-import { Button } from '../index';
-import AvatarView from '../avatarView';
 import { FastFlag } from '@transferwise/icons';
+import Button from '../button';
+import AvatarView from '../avatarView';
+import ListItem, { List, type ListItemProps } from '.';
 
 export default {
   component: ListItem,
@@ -9,22 +9,27 @@ export default {
 };
 
 export const LongText = () => {
+  const sharedProps: Partial<ListItemProps> = {
+    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
+    action: (
+      <Button v2 size="sm" onClick={() => {}}>
+        Action
+      </Button>
+    ),
+  };
+
   return (
     <div style={{ width: '35rem' }}>
       <List>
         <ListItem
-          title="Wise"
+          {...sharedProps}
+          title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
-          media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-          action={
-            <Button v2 size="sm" onClick={() => {}}>
-              Action
-            </Button>
-          }
         />
 
         <ListItem
-          title="Wise"
+          {...sharedProps}
+          title="Wrapping the long word with a 'span.text-word-break'"
           value={
             <>
               {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
@@ -34,12 +39,12 @@ export const LongText = () => {
               {' word.'}
             </>
           }
-          media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-          action={
-            <Button v2 size="sm" onClick={() => {}}>
-              Action
-            </Button>
-          }
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Using '&amp;shy;' HTML entitty"
+          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
         />
       </List>
     </div>

package/src/summary/Summary.tests.story.tsx

@@ -1,7 +1,6 @@
 import { Home as HomeIcon } from '@transferwise/icons';
 import { Status } from '../common';
-import Summary from './Summary';
-import { InfoPresentation } from '../info';
+import Summary, { type SummaryProps } from '.';
 
 export default {
   component: Summary,
@@ -9,46 +8,47 @@ export default {
 };
 
 export const LongText = () => {
+  const sharedProps: Partial<SummaryProps> = {
+    action: {
+      text: 'Change address',
+      href: '#change-address',
+      'aria-label': ' Click here to change address',
+    },
+    as: 'li',
+    icon: <HomeIcon size={24} />,
+    status: Status.NOT_DONE,
+    info: {
+      title: 'Title',
+    },
+  };
   return (
-    <ul style={{ width: '30rem' }}>
+    <ul style={{ width: '34rem' }}>
       <Summary
-        action={{
-          text: 'Change address',
-          href: '#change-address',
-          'aria-label': ' Click here to change address',
-        }}
-        as="li"
-        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
-        icon={<HomeIcon size={24} />}
-        title="Summary title"
-        status={Status.NOT_DONE}
-        info={{
-          title: 'Title',
-        }}
+        title="Default behaviour"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        {...sharedProps}
       />
 
       <Summary
-        action={{
-          text: 'Change address',
-          href: '#change-address',
-          'aria-label': ' Click here to change address',
-        }}
-        as="li"
+        title="Wrapping the long word with a 'span.text-word-break'"
         description={
           <>
-            {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
+            {
+              'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
+            }
             <span className="text-word-break">
               breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
             </span>
             {' word.'}
           </>
         }
-        icon={<HomeIcon size={24} />}
-        title="Summary title"
-        status={Status.NOT_DONE}
-        info={{
-          title: 'Title',
-        }}
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Using '&amp;shy;' HTML entitty"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        {...sharedProps}
       />
     </ul>
   );

package/src/upload/Upload.spec.tsx

@@ -184,7 +184,9 @@ describe('Upload Component', () => {
 
     await waitForUpload();
 
-    expect(await screen.findByText(/File type not supported. Please try again with a different file/i)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/File type not supported. Please try again with a different file/i),
+    ).toBeInTheDocument();
   });
 
   test('should handle canceling the upload', async () => {

package/src/upload/steps/processingStep/processingStep.spec.tsx

@@ -27,7 +27,7 @@ describe('ProcessingStep', () => {
       expect(processing).toBeInTheDocument();
     });
   });
-  
+
   test('renders ProcessIndicator with default status', () => {
     expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
   });

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -66,11 +66,11 @@ describe('uploadImageStep', () => {
     const errorIconLabel = 'Error icon label';
     const errorMessage = 'Maximum filesize is 2MB.';
     const { container } = render(
-      <UploadImageStep 
-        {...UPLOADIMAGE_STEP_PROPS} 
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
         errorMessage={errorMessage}
-        errorIconLabel={errorIconLabel} 
-      />
+        errorIconLabel={errorIconLabel}
+      />,
     );
 
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();