@transferwise/components 0.0.0-experimental-266e18f → 0.0.0-experimental-add7cf9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-266e18f",
+  "version": "0.0.0-experimental-add7cf9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,10 +91,10 @@
     "rollup": "^4.41.1",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
-    "@transferwise/neptune-css": "14.24.4",
     "@transferwise/less-config": "3.1.2",
     "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/neptune-css": "14.24.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/image/Image.spec.tsx

@@ -1,7 +1,7 @@
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 
-import { EmptyTransparentImage, ImageProps } from './Image';
+import { ImageProps } from './Image';
 
 import Image from '.';
 
@@ -32,14 +32,14 @@ describe('Image', () => {
   });
 
   describe('when lazy loading is enabled', () => {
-    it('renders the image with EmptyTransparentImage if element is not visible', () => {
+    it('renders the image with actual src even if element is not visible', () => {
       jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
       render(<Image {...props} />);
 
       const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
-      expect(image.src).toStrictEqual(EmptyTransparentImage);
+      expect(image.src).toStrictEqual(props.src);
     });
 
     it('renders the image with src if element is visible', () => {

package/src/image/Image.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 
 import { useHasIntersected } from '../common/hooks';
 
@@ -16,9 +16,6 @@ export interface ImageProps {
   shrink?: boolean;
 }
 
-export const EmptyTransparentImage =
-  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-
 const Image = ({
   id,
   src,
@@ -33,20 +30,21 @@ const Image = ({
 }: ImageProps) => {
   const elementReference = useRef<HTMLImageElement>(null);
   const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
 
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
 
   return (
     <img
       ref={elementReference}
       id={id}
       alt={alt}
-      src={imageSource}
+      src={src}
+      loading={loading}
       className={clsx([
         'tw-image',
         {
@@ -56,7 +54,7 @@ const Image = ({
         className,
       ])}
       role={role}
-      onLoad={imageOnLoad}
+      onLoad={handleLoad}
       onError={onError}
     />
   );

package/src/index.ts

@@ -109,7 +109,6 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -212,7 +211,6 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
-export { default as Item } from './table';
 
 /**
  * Hooks

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import LegacyListItem, { List } from '.';
+import ListItem, { List } from '.';
 
 export default {
-  component: LegacyListItem,
-  title: 'Other/LegacyListItem',
+  component: ListItem,
+  title: 'Other/ListItem',
   tags: ['autodocs'],
 };
 
@@ -18,8 +18,8 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof LegacyListItem>>) => {
-  return <LegacyListItem title={title} value={value} {...props} />;
+}: Partial<ComponentProps<typeof ListItem>>) => {
+  return <ListItem title={title} value={value} {...props} />;
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,11 +1,11 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import LegacyListItem, { List, type LegacyListItemProps } from '.';
+import ListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
-  component: LegacyListItem,
-  title: 'Other/LegacyListItem/tests',
+  component: ListItem,
+  title: 'Other/ListItem/tests',
 };
 
 export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
   return (
     <div style={{ width: '35rem' }}>
       <List>
-        <LegacyListItem
+        <ListItem
           {...sharedProps}
           title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
         />
 
-        <LegacyListItem
+        <ListItem
           {...sharedProps}
           title="Wrapping the long word with a 'span.text-word-break'"
           value={
@@ -41,7 +41,7 @@ export const LongText = () => {
           }
         />
 
-        <LegacyListItem
+        <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."

package/src/main.css

@@ -2662,194 +2662,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.wds-list-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  gap: 16px;
-  gap: var(--size-16);
-}
-.wds-list-item-interactive {
-  cursor: pointer;
-}
-.wds-list-item-interactive:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
-}
-.wds-list-item-body {
-  width: 100%;
-}
-.wds-list-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.wds-list-item-value {
-  flex: 0 0 auto;
-}
-.wds-list-item-control {
-  flex: 0 0 auto;
-}
-.wds-list-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.wds-list-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.wds-list-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-list-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-list-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.wds-list-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-list-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:hover,
-.np-prompt-interactive.wds-list-item-prompt.discount:hover,
-.np-prompt-interactive.wds-list-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:active,
-.np-prompt-interactive.wds-list-item-prompt.discount:active,
-.np-prompt-interactive.wds-list-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.wds-list-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-list-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -39,7 +39,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`PromoCard matches snapshot 1`] = `
     <img
       alt="Test Image"
       class="tw-image tw-image__stretch tw-image__shrink"
+      loading="lazy"
       src="test.jpg"
     />
   </div>

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -33,6 +33,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>
@@ -67,6 +68,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>

package/src/test-utils/fake-data.ts

@@ -1,11 +1,6 @@
-export const lorem5 = 'Lorem ipsum dolor sit amet.';
-
 export const lorem10 =
   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
 
-export const lorem20 =
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
-
 export const lorem40 =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';
 

package/build/styles/listItem/ListItem.css

@@ -1,188 +0,0 @@
-.wds-list-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  gap: 16px;
-  gap: var(--size-16);
-}
-.wds-list-item-interactive {
-  cursor: pointer;
-}
-.wds-list-item-interactive:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
-}
-.wds-list-item-body {
-  width: 100%;
-}
-.wds-list-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.wds-list-item-value {
-  flex: 0 0 auto;
-}
-.wds-list-item-control {
-  flex: 0 0 auto;
-}
-.wds-list-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.wds-list-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.wds-list-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-list-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-list-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.wds-list-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-list-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:hover,
-.np-prompt-interactive.wds-list-item-prompt.discount:hover,
-.np-prompt-interactive.wds-list-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:active,
-.np-prompt-interactive.wds-list-item-prompt.discount:active,
-.np-prompt-interactive.wds-list-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.wds-list-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-list-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}