@transferwise/components 0.0.0-experimental-22400c4 → 0.0.0-experimental-1c8c18d

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
+import { ListItemIconButtonProps } from './ListItemIconButton';
 import { ListItemCheckboxProps } from './ListItemCheckbox';
 import { ListItemNavigationProps } from './ListItemNavigation';
 import { ListItemButtonProps } from './ListItemButton';
 export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
-export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps;
+export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps | ListItemIconButtonProps;
 export type Props = {
     as?: 'li' | 'div' | 'span';
     inverted?: boolean;
@@ -39,7 +40,7 @@ export declare const ListItem: {
     AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;
     AdditionalInfo: ({ children, action }: import("./ListItemAdditionalInfo").ListItemAdditionalInfoProps) => import("react").JSX.Element;
     Checkbox: (props: ListItemCheckboxProps) => import("react").JSX.Element;
-    IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
+    IconButton: (props: ListItemIconButtonProps) => import("react").JSX.Element;
     Navigation: ({ href, ...props }: ListItemNavigationProps) => import("react").JSX.Element;
     Button: ({ priority, partiallyInteractive, ...props }: ListItemButtonProps) => import("react").JSX.Element;
     Switch: (props: import("..").SwitchProps) => 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,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,CAAC;AAExB,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,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,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,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA6GP,CAAC;AAiFF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,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,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,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,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA8GP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}

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

@@ -2,6 +2,7 @@ import { IconButtonProps } from '../iconButton';
 import { ReactNode } from 'react';
 export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
     children: ReactNode;
+    partiallyInteractive?: boolean;
 };
 export declare const IconButton: (props: ListItemIconButtonProps) => import("react").JSX.Element;
 //# sourceMappingURL=ListItemIconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC3F,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAa,OAAO,uBAAuB,gCAIjE,CAAC"}
+{"version":3,"file":"ListItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAa,OAAO,uBAAuB,gCAMjE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-22400c4",
+  "version": "0.0.0-experimental-1c8c18d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,8 +91,8 @@
     "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",
+    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/listItem/ListItem.story.tsx

@@ -433,6 +433,26 @@ export const ButtonInteractivity: Story = {
             </ListItem.Button>
           }
         />
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.IconButton onClick={() => setClicked(clicked + 1)}>
+              <Plus />
+            </ListItem.IconButton>
+          }
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.IconButton partiallyInteractive onClick={() => setClicked(clicked + 1)}>
+              <Plus />
+            </ListItem.IconButton>
+          }
+        />
       </>
     );
   },

package/src/listItem/ListItem.tsx

@@ -10,7 +10,7 @@ import {
 import { Typography } from '../common';
 import Body from '../body';
 import { AdditionalInfo } from './ListItemAdditionalInfo';
-import { IconButton } from './ListItemIconButton';
+import { IconButton, ListItemIconButtonProps } from './ListItemIconButton';
 import { Checkbox, ListItemCheckboxProps } from './ListItemCheckbox';
 import { ListItemNavigationProps, Navigation } from './ListItemNavigation';
 import { clsx } from 'clsx';
@@ -34,7 +34,8 @@ export type ListItemControlProps =
   | ListItemNavigationProps
   // TODO: add more types for control props here;
   | ListItemCheckboxProps
-  | ListItemButtonProps;
+  | ListItemButtonProps
+  | ListItemIconButtonProps;
 
 export type Props = {
   as?: 'li' | 'div' | 'span';
@@ -133,7 +134,8 @@ export const ListItem = ({
           {
             'wds-list-item-interactive':
               controlType !== 'non-interactive' &&
-              !(controlProps as ListItemButtonProps)?.partiallyInteractive,
+              !(controlProps as ListItemButtonProps | ListItemIconButtonProps)
+                ?.partiallyInteractive,
           },
           `wds-list-item-${controlType}`,
           {
@@ -202,9 +204,13 @@ type ViewProps = PropsWithChildren<{
 
 function View({ children, prompt, controlType = 'non-interactive', controlProps }: ViewProps) {
   const isLinkControl = ['navigation' /* TODO: add other link controls */].includes(controlType);
+
   const isPartiallyInteractive =
     (controlType === 'button' || controlType === 'icon-button') &&
-    !!(controlProps && (controlProps as ListItemButtonProps).partiallyInteractive);
+    !!(
+      controlProps &&
+      (controlProps as ListItemButtonProps | ListItemIconButtonProps).partiallyInteractive
+    );
   const isHrefProvided = isLinkControl
     ? (controlProps as ListItemNavigationProps)?.href !== '#'
     : false;

package/src/listItem/ListItemIconButton.tsx

@@ -4,10 +4,13 @@ import { ReactNode } from 'react';
 
 export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
   children: ReactNode;
+  partiallyInteractive?: boolean;
 };
 
 export const IconButton = function (props: ListItemIconButtonProps) {
-  const { baseItemProps } = useItemControl('icon-button');
+  const { partiallyInteractive, ...restProps } = props;
 
-  return <IconButtonComp {...props} size={32} disabled={baseItemProps.disabled} />;
+  const { baseItemProps } = useItemControl('icon-button', { partiallyInteractive, ...restProps });
+
+  return <IconButtonComp {...restProps} size={32} disabled={baseItemProps.disabled} />;
 };