@transferwise/components 0.0.0-experimental-e72bc9f → 0.0.0-experimental-7646a35

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-e72bc9f",
+  "version": "0.0.0-experimental-7646a35",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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(' ')}
       >