@transferwise/components 0.0.0-experimental-9f4c334 → 0.0.0-experimental-4a0eb84

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

@@ -13,6 +13,7 @@ export type Props = {
     media?: ReactNode;
     control?: ReactNode;
     prompt?: ReactNode;
+    partiallyInteractive?: boolean;
     className?: string;
 };
 export type ListItemContextData = {
@@ -24,11 +25,11 @@ export type ListItemContextData = {
         control: string;
         prompt: string;
     };
-    props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
+    props: Pick<Props, 'as' | 'disabled' | 'partiallyInteractive' | 'inverted'>;
 };
 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, className, }: Props): import("react").JSX.Element;
+    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, partiallyInteractive, 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;
@@ -36,6 +37,7 @@ export declare const ListItem: {
     Checkbox: (props: import("./ListItemCheckbox").ListItemCheckboxProps) => import("react").JSX.Element;
     IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
     Navigation: ({ onClick }: import("./ListItemNavigation").ListItemNavigationProps) => import("react").JSX.Element;
+    Radio: (props: import("../common/RadioButton/RadioButton").RadioButtonProps) => import("react").JSX.Element;
     Button: ({ priority, ...props }: import("./ListItemButton").ListItemButtonProps) => import("react").JSX.Element;
     Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
     Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => 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;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"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAc3E,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,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,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,sBAAsB,GAAG,UAAU,CAAC,CAAC;CAC7E,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;wKAelB,KAAK;;;;;;;;;;;;CAsHP,CAAC;AAgBF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,3 @@
+import { RadioButtonProps } from '../common/RadioButton/RadioButton';
+export declare const Radio: (props: RadioButtonProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemRadio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRadio.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGlF,eAAO,MAAM,KAAK,GAAa,OAAO,gBAAgB,gCAYrD,CAAC"}

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

@@ -0,0 +1,12 @@
+import { ListItemTypes } from './ListItem';
+export declare function useItemControl(controlType: ListItemTypes): {
+    ids: {
+        label: string;
+        additionalInfo: string;
+        value: string;
+        control: string;
+        prompt: string;
+    };
+    baseItemProps: Pick<import("./ListItem").Props, "as" | "disabled" | "partiallyInteractive" | "inverted">;
+};
+//# sourceMappingURL=useListItemControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,aAAa,EAAE,MAAM,YAAY,CAAC;AAEjF,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa;;;;;;;;;EAYxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9f4c334",
+  "version": "0.0.0-experimental-4a0eb84",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
+    "@transferwise/neptune-css": "14.24.4",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/listItem/ListItem.story.tsx

@@ -29,6 +29,7 @@ type Story = StoryObj<ItemProps>;
 export const TempPlayground: Story = {
   render: () => {
     const [checked, setChecked] = useState(false);
+    const [radio, setRadio] = useState('option2');
 
     return (
       <div>
@@ -111,11 +112,15 @@ export const TempPlayground: Story = {
 
         <ListItem
           title="Test title"
-          disabled
           subtitle={lorem10}
           additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={<ListItem.Button priority="secondary-neutral">as Button</ListItem.Button>}
+          control={
+            <ListItem.Button priority="secondary-neutral" onClick={() => console.log('clicked')}>
+              as Button
+            </ListItem.Button>
+          }
         />
+
         <ListItem
           title="Test title"
           disabled
@@ -144,6 +149,31 @@ export const TempPlayground: Story = {
             </ListItem.Button>
           }
         />
+        <ListItem
+          title="Fully Interactive"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Radio
+              name="option1"
+              checked={radio === 'option1'}
+              onChange={() => setRadio('option1')}
+            />
+          }
+        />
+        <ListItem
+          title="Partially Interactive"
+          partiallyInteractive
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Radio
+              name="option2"
+              checked={radio === 'option2'}
+              onChange={() => setRadio('option2')}
+            />
+          }
+        />
 
         <ListItem
           media={

package/src/listItem/ListItem.tsx

@@ -4,6 +4,7 @@ import Body from '../body';
 import { AdditionalInfo } from './ListItemAdditionalInfo';
 import { IconButton } from './ListItemIconButton';
 import { Checkbox } from './ListItemCheckbox';
+import { Radio } from './ListItemRadio';
 import { Navigation } from './ListItemNavigation';
 import { clsx } from 'clsx';
 import { Button } from './ListItemButton';
@@ -33,6 +34,7 @@ export type Props = {
   media?: ReactNode;
   control?: ReactNode;
   prompt?: ReactNode;
+  partiallyInteractive?: boolean;
   className?: string;
 };
 
@@ -45,7 +47,7 @@ export type ListItemContextData = {
     control: string;
     prompt: string;
   };
-  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
+  props: Pick<Props, 'as' | 'disabled' | 'partiallyInteractive' | 'inverted'>;
 };
 
 // @ts-expect-error for now let's mock it with `null` value
@@ -65,6 +67,7 @@ export const ListItem = ({
   valueSubtitle,
   control = null,
   disabled,
+  partiallyInteractive,
   className,
 }: Props) => {
   /*
@@ -105,13 +108,12 @@ export const ListItem = ({
   const isFullyInteractive = controlType !== 'non-interactive';
 
   const listItemContext = useMemo(
-    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
+    () => ({ setControlType, ids, props: { as: View, disabled, inverted, partiallyInteractive } }),
     [],
   );
 
-  return (
-    <ListItemContext.Provider value={listItemContext}>
-      <View
+  const content = (
+    <View
         className={clsx(
           'wds-list-item',
           { 'wds-list-item-interactive': controlType !== 'non-interactive' },
@@ -125,53 +127,66 @@ export const ListItem = ({
         )}
         aria-describedby={[ids.additionalInfo].join(' ')}
       >
-        {media && <div className="wds-list-item-media">{media}</div>}
-
-        {/* Title + Subtitle + Values + Additional Info - Group */}
-        <div className="wds-list-item-body">
-          {/* Title + Subtitle + Values - Group */}
-          <div className="d-flex justify-content-between">
-            <span>
-              {/* @ts-expect-error div can have role and aria-lavel props */}
-              <Body
-                type={Typography.BODY_LARGE_BOLD}
-                className="wds-list-item-title"
-                // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-                // so we enable header semantics via `role` and `aria-level` attrs
-                role="heading"
-                aria-level="4"
-              >
-                {title}
-              </Body>
-              <Body className="wds-list-item-subtitle">{subtitle}</Body>
+      {media && <div className="wds-list-item-media">{media}</div>}
+      {/* Title + Subtitle + Values + Additional Info - Group */}
+      <div className="wds-list-item-body">
+        {/* Title + Subtitle + Values - Group */}
+        <div className="d-flex justify-content-between">
+          <span>
+            {/* @ts-expect-error div can have role and aria-lavel props */}
+            <Body
+              type={Typography.BODY_LARGE_BOLD}
+              className="wds-list-item-title"
+              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
+              // so we enable header semantics via `role` and `aria-level` attrs
+              role="heading"
+              aria-level="4"
+            >
+              {title}
+            </Body>
+            <Body className="wds-list-item-subtitle">{subtitle}</Body>
+          </span>
+          {(valueTitle || valueSubtitle) && (
+            <span
+              id={ids.value}
+              className={clsx('wds-list-item-value', 'd-flex align-items-center', {
+                'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
+              })}
+            >
+              {valueTitle && (
+                <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
+                  {valueTitle}
+                </Body>
+              )}
+              {valueSubtitle && (
+                <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
+              )}
             </span>
-            {(valueTitle || valueSubtitle) && (
-              <span
-                id={ids.value}
-                className={clsx('wds-list-item-value', 'd-flex align-items-center', {
-                  'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
-                })}
-              >
-                {valueTitle && (
-                  <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
-                    {valueTitle}
-                  </Body>
-                )}
-                {valueSubtitle && (
-                  <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
-                )}
-              </span>
-            )}
-          </div>
-
-          {/* Additional Info and Prompt here */}
-          {Boolean(subtitle) && additionalInfo}
+          )}
         </div>
-        {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
-        {prompt}
-      </View>
-    </ListItemContext.Provider>
+
+        {/* Additional Info and Prompt here */}
+        {Boolean(subtitle) && additionalInfo}
+      </div>
+      {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
+      {prompt}
+    </View>
   );
+
+  // only apply partiallyInteractive check for button and button icon??
+  if (
+    !partiallyInteractive &&
+    (controlType === 'radio' || controlType === 'button') &&
+    ids.control
+  ) {
+    return (
+      <ListItemContext.Provider value={listItemContext}>
+        <label htmlFor={ids.control}>{content}</label>
+      </ListItemContext.Provider>
+    );
+  }
+
+  return <ListItemContext.Provider value={listItemContext}>{content}</ListItemContext.Provider>;
 };
 
 /* eslint-disable functional/immutable-data */
@@ -182,6 +197,7 @@ ListItem.AdditionalInfo = AdditionalInfo;
 ListItem.Checkbox = Checkbox;
 ListItem.IconButton = IconButton;
 ListItem.Navigation = Navigation;
+ListItem.Radio = Radio;
 ListItem.Button = Button;
 ListItem.Switch = Switch;
 ListItem.Prompt = Prompt;

package/src/listItem/ListItemButton.tsx

@@ -1,10 +1,10 @@
 import { default as ButtonComp, NewButtonProps } from '../button';
-import { useItemControl } from './useItemControl';
+import { useItemControl } from './useListItemControl';
 
 export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
 
 export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps) => {
-  const { baseItemProps } = useItemControl('button');
+  const { ids, baseItemProps } = useItemControl('button');
 
   const commonProps = {
     ...props,
@@ -14,5 +14,5 @@ export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps
     disabled: baseItemProps.disabled,
   };
 
-  return <ButtonComp {...(commonProps as NewButtonProps)} />;
+  return <ButtonComp {...(commonProps as NewButtonProps)} id={ids.control} />;
 };

package/src/listItem/ListItemCheckbox.tsx

@@ -1,6 +1,6 @@
 import CheckboxButton from '../checkboxButton';
 import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-import { useItemControl } from './useItemControl';
+import { useItemControl } from './useListItemControl';
 
 export type ListItemCheckboxProps = Pick<
   CheckboxButtonProps,

package/src/listItem/ListItemIconButton.tsx

@@ -1,5 +1,5 @@
 import { default as IconButtonComp, IconButtonProps } from '../iconButton';
-import { useItemControl } from './useItemControl';
+import { useItemControl } from './useListItemControl';
 import { ReactNode } from 'react';
 
 export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {

package/src/listItem/ListItemNavigation.tsx

@@ -1,6 +1,6 @@
 import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
 import { ButtonProps } from '../button/Button.types';
-import { useItemControl } from './useItemControl';
+import { useItemControl } from './useListItemControl';
 
 export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
 

package/src/listItem/ListItemRadio.tsx

@@ -0,0 +1,16 @@
+import RadioButton, { RadioButtonProps } from '../common/RadioButton/RadioButton';
+import { useItemControl } from './useListItemControl';
+
+export const Radio = function (props: RadioButtonProps) {
+  const { ids, baseItemProps } = useItemControl('radio');
+
+  if (baseItemProps.partiallyInteractive) {
+    return (
+      <label htmlFor={ids.control}>
+        <RadioButton disabled={baseItemProps.disabled} {...props} id={ids.control} />
+      </label>
+    );
+  }
+
+  return <RadioButton disabled={baseItemProps.disabled} {...props} id={ids.control} />;
+};

package/src/listItem/ListItemSwitch.tsx

@@ -1,5 +1,5 @@
 import { default as SwitchComp, SwitchProps } from '../switch';
-import { useItemControl } from './useItemControl';
+import { useItemControl } from './useListItemControl';
 
 export const Switch = function (props: SwitchProps) {
   const { baseItemProps } = useItemControl('switch');

package/src/listItem/{useItemControl.tsx → useListItemControl.tsx}

@@ -2,11 +2,15 @@ import { useContext, useEffect } from 'react';
 import { ListItemContext, ListItemContextData, ListItemTypes } from './ListItem';
 
 export function useItemControl(controlType: ListItemTypes) {
-  const { setControlType, props: baseItemProps } = useContext<ListItemContextData>(ListItemContext);
+  const {
+    ids,
+    setControlType,
+    props: baseItemProps,
+  } = useContext<ListItemContextData>(ListItemContext);
 
   useEffect(() => {
     setControlType(controlType);
   }, [controlType, setControlType]);
 
-  return { baseItemProps };
+  return { ids, baseItemProps };
 }

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

@@ -1,5 +0,0 @@
-import { ListItemTypes } from './ListItem';
-export declare function useItemControl(controlType: ListItemTypes): {
-    baseItemProps: Pick<import("./ListItem").Props, "as" | "disabled" | "inverted">;
-};
-//# sourceMappingURL=useItemControl.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,aAAa,EAAE,MAAM,YAAY,CAAC;AAEjF,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa;;EAQxD"}