@transferwise/components 0.0.0-experimental-fc7d1b1 → 0.0.0-experimental-59a94f4

package/build/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2664,8 +2665,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item {
   padding: 16px;
   padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   gap: 16px;
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.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:active {
+.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 {

package/build/styles/circularButton/CircularButton.css

@@ -6,6 +6,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,

package/build/styles/listItem/ListItem.css

@@ -1,8 +1,8 @@
 .wds-list-item {
   padding: 16px;
   padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   gap: 16px;
@@ -42,10 +42,10 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -58,10 +58,10 @@
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.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:active {
+.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 {

package/build/styles/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2664,8 +2665,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item {
   padding: 16px;
   padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   gap: 16px;
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.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:active {
+.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 {

package/build/types/listItem/ListItem.d.ts

@@ -13,6 +13,7 @@ export type Props = {
     media?: ReactNode;
     control?: ReactNode;
     prompt?: ReactNode;
+    className?: string;
 };
 export type ListItemContextData = {
     setControlType: (type: ListItemTypes) => void;
@@ -27,7 +28,7 @@ export type ListItemContextData = {
 };
 export declare const ListItemContext: import("react").Context<ListItemContextData>;
 export declare const ListItem: {
-    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
+    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, }: Props): import("react").JSX.Element;
     Image: ({ alt, size, ...props }: import("./ListItemMedia").ListItemImageProps) => import("react").JSX.Element;
     AvatarView: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarViewProps) => import("react").JSX.Element;
     AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;uIAalB,KAAK;;;;;;;;;;;CAqGP,CAAC;AAeF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;kJAclB,KAAK;;;;;;;;;;;CA0GP,CAAC;AAeF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-fc7d1b1",
+  "version": "0.0.0-experimental-59a94f4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/circularButton/CircularButton.css

@@ -6,6 +6,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,

package/src/circularButton/CircularButton.less

@@ -7,6 +7,7 @@
   &-primary-default,
   &-secondary-default {
     .np-circular-btn-label {
+      text-align: center;
       color: var(--color-interactive-primary);
       &:not(.disabled, :disabled):hover {
         color: var(--color-interactive-primary-hover);

package/src/circularButton/CircularButton.tests.story.tsx

@@ -0,0 +1,23 @@
+import { Freeze } from '@transferwise/icons';
+
+import { Meta, StoryObj } from '@storybook/react';
+import CircularButton from './CircularButton';
+
+export default {
+  component: CircularButton,
+  title: 'Actions/CircularButton/Tests',
+} satisfies Meta<typeof CircularButton>;
+
+type Story = StoryObj<typeof CircularButton>;
+
+export const CenteredText: Story = {
+  render: () => {
+    return (
+      <div style={{ maxWidth: '100px' }}>
+        <CircularButton priority="primary" type="default" icon={<Freeze />}>
+          Very long text for a circular button that will be centered
+        </CircularButton>
+      </div>
+    );
+  },
+};

package/src/listItem/ListItem.css

@@ -1,8 +1,8 @@
 .wds-list-item {
   padding: 16px;
   padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   gap: 16px;
@@ -42,10 +42,10 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -58,10 +58,10 @@
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.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:active {
+.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 {

package/src/listItem/ListItem.less

@@ -1,6 +1,6 @@
 .wds-list-item {
     padding: var(--size-16);
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-large);
     background-color: var(--color-background-screen);
     gap: var(--size-16);
 
@@ -45,11 +45,10 @@
     &-spotlight {
         &-active {
             background-color: var(--color-background-neutral);
-
-            &:hover {
+            &:not(.disabled, :disabled):hover {
                 background-color: var(--color-background-neutral-hover);
             }
-            &:active {
+            &:not(.disabled, :disabled):active {
                 background-color: var(--color-background-neutral-active);
             }
         }
@@ -57,11 +56,10 @@
         &-inactive {
             background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
             border: 1px dashed var(--color-border-neutral);
-        
-            &:hover {
+            &:not(.disabled, :disabled):hover {
                 background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
             }
-            &:active {
+            &:not(.disabled, :disabled):active {
                 background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
             }
         }

package/src/listItem/ListItem.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '../test-utils';
+import ListItem from './ListItem';
+
+describe('ListItem', () => {
+  describe('spotlight', () => {
+    it('only fully interactive variant can have spotlight:active', () => {
+      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+    });
+
+    it('only fully interactive variant can have spotlight:inactive', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          spotlight="inactive"
+          control={<ListItem.Switch onClick={() => {}} />}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+    });
+
+    it('non interactive variant can have spotlight', () => {
+      render(<ListItem title="Test Title" spotlight="inactive" />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-non-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+    });
+  });
+});

package/src/listItem/ListItem.story.tsx

@@ -1,7 +1,15 @@
 import ListItem, { Props as ItemProps } from './ListItem';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { FastFlag, MultiCurrency, Plus, Receipt, Savings } from '@transferwise/icons';
+import {
+  Bank,
+  BankTransfer,
+  FastFlag,
+  MultiCurrency,
+  Plus,
+  Receipt,
+  Savings,
+} from '@transferwise/icons';
 
 import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
 import { Flag } from '@wise/art';
@@ -138,16 +146,30 @@ export const TempPlayground: Story = {
         />
 
         <ListItem
+          media={
+            <ListItem.AvatarView>
+              <Bank />
+            </ListItem.AvatarView>
+          }
+          spotlight="inactive"
           title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          subtitle={lorem5}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
           control={<ListItem.Checkbox indeterminate />}
+          className="m-t-2"
         />
 
         <ListItem
+          media={
+            <ListItem.AvatarLayout
+              orientation="diagonal"
+              avatars={[{ asset: <BankTransfer /> }, { asset: <Bank /> }]}
+            />
+          }
+          spotlight="active"
           title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          subtitle={lorem5}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
           control={
             <ListItem.Switch
               checked={checked}
@@ -156,6 +178,7 @@ export const TempPlayground: Story = {
               }}
             />
           }
+          className="m-t-2 m-b-4"
         />
       </div>
     );

package/src/listItem/ListItem.tsx

@@ -33,6 +33,7 @@ export type Props = {
   media?: ReactNode;
   control?: ReactNode;
   prompt?: ReactNode;
+  className?: string;
 };
 
 export type ListItemContextData = {
@@ -64,6 +65,7 @@ export const ListItem = ({
   valueSubtitle,
   control = null,
   disabled,
+  className,
 }: Props) => {
   /*
   const returnType = (): ReactNode => {
@@ -98,6 +100,10 @@ export const ListItem = ({
     additionalInfo: `${idPrefix}_additional-info`,
   };
 
+  // TODO: add partially interactive check from Button and IconButtons
+  // (https://transferwise.atlassian.net/browse/DS-7562)
+  const isFullyInteractive = controlType !== 'non-interactive';
+
   const listItemContext = useMemo(
     () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
     [],
@@ -113,8 +119,9 @@ export const ListItem = ({
           'd-flex flex-row',
           { 'align-items-center': !subtitle },
           {
-            [`wds-list-item-spotlight-${spotlight}`]: !!spotlight,
+            [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
           },
+          className,
         )}
         aria-describedby={[ids.additionalInfo].join(' ')}
       >

package/src/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2664,8 +2665,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item {
   padding: 16px;
   padding: var(--size-16);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   gap: 16px;
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.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:active {
+.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 {