@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-feb2ddf

package/src/listItem/ListItem.story.tsx

@@ -1,120 +1,273 @@
-import { action } from '@storybook/addon-actions';
-import { Documents, FastFlag } from '@transferwise/icons';
-import { ComponentProps } from 'react';
+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 { Button, IconButton } from '..';
-import AvatarView from '../avatarView';
-import Info from '../info';
-import Title from '../title/Title';
-import ListItem, { List } from '.';
+import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
+import { Flag } from '@wise/art';
+import { List } from '../legacylistItem/List';
+import Money from '../money';
+import Section from '../section';
+import Header from '../header';
 
 export default {
   component: ListItem,
-  title: 'Other/ListItem',
-  tags: ['autodocs'],
+  title: 'Content/Item',
+} satisfies Meta<ItemProps>;
+
+type Story = StoryObj<ItemProps>;
+
+// TODO: delete this story later when we have more peace of the List Item puzzle
+export const TempPlayground: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <div>
+        <ListItem
+          media={
+            <ListItem.AvatarView badge={{ type: 'action' }}>
+              <Flag code="BBD" />
+            </ListItem.AvatarView>
+          }
+          title="Test title"
+          subtitle="Test subtitle"
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
+        />
+        <ListItem
+          media={
+            <ListItem.AvatarLayout
+              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
+            />
+          }
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+        />
+        <ListItem
+          media={
+            <ListItem.AvatarLayout
+              size={72}
+              orientation="diagonal"
+              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
+            />
+          }
+          title="Test title"
+          subtitle={lorem10}
+          valueTitle="100 GBP"
+          valueSubtitle="100 USD"
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+        />
+        <ListItem
+          media={<ListItem.AvatarView profileType="BUSINESS" notification />}
+          title="Test title"
+          subtitle="Test subtitle"
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
+            >
+              {lorem10}
+            </ListItem.AdditionalInfo>
+          }
+          prompt={<ListItem.Prompt type="negative">You have done something wrong</ListItem.Prompt>}
+        />
+        <ListItem
+          media={<ListItem.AvatarView imgSrc="../avatar-square-dude.webp" selected />}
+          title="Test title"
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
+          prompt={
+            <ListItem.Prompt
+              type="discount"
+              action={{
+                href: 'https://wise.com',
+                target: '_blank',
+                'aria-label': 'clickable prompt',
+              }}
+            >
+              The whole prompt is secretly clickable
+            </ListItem.Prompt>
+          }
+        />
+
+        <ListItem
+          media={<ListItem.Image src="../apple-pay-logo.svg" />}
+          title="Accepting Apple Pay"
+          subtitle={lorem10}
+        />
+
+        <ListItem
+          media={<ListItem.Image src="../wise-card.svg" />}
+          title="Wise Business Card"
+          subtitle={lorem5}
+        />
+
+        <ListItem
+          title="Test title"
+          disabled
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={<ListItem.Button priority="secondary-neutral">as Button</ListItem.Button>}
+        />
+        <ListItem
+          title="Test title"
+          disabled
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.IconButton>
+              <Plus />
+            </ListItem.IconButton>
+          }
+        />
+
+        <ListItem
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              as="a"
+              target="dfdf"
+              aria-label="adsfasfd"
+              href="wise.com"
+            >
+              as Link
+            </ListItem.Button>
+          }
+        />
+
+        <ListItem
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={<ListItem.Checkbox indeterminate />}
+        />
+
+        <ListItem
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Switch
+              checked={checked}
+              onClick={() => {
+                setChecked(!checked);
+              }}
+            />
+          }
+        />
+      </div>
+    );
+  },
 };
 
-const Template = ({
-  title = 'Wise',
-  value = 'We’re building the world’s most international account',
-  ...props
-}: Partial<ComponentProps<typeof ListItem>>) => {
-  return <ListItem title={title} value={value} {...props} />;
+export const ItemRadio: Story = {
+  render: () => (
+    <div>
+      {/* Basic */}
+      {/* with additional info */}
+      {/* with prompt */}
+      {/* Disabled */}
+      {/* Spotlight */}
+      {/* Active */}
+    </div>
+  ),
 };
 
-export const Basic = () => {
-  return (
-    <List>
-      <Template />
-    </List>
-  );
+export const ItemButton: Story = {
+  render: () => (
+    <div>
+      {/* Basic */}
+      {/* with additional info */}
+      {/* with prompt */}
+      {/* partially interactive */}
+      {/* Disabled */}
+      {/* Spotlight */}
+      {/* Active */}
+    </div>
+  ),
 };
 
-export const Variants = () => {
-  return (
+export const ItemNonInteractive: Story = {
+  render: () => (
     <div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">With Icon Avatar</Title>
+      <Section>
+        <Header title="Transcation Details" />
         <List>
-          <Template media={<AvatarView imgSrc="../tapestry-01.png" />} />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">With Contact Avatar</Title>
-        <List>
-          <Template
-            title="Sandra Pepper"
-            value="Personal account"
-            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-          />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">With Avatar and Action</Title>
-        <List>
-          <Template
-            title="Account holder"
-            value="Sandra Pepper"
-            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-            action={
-              <Button v2 size="sm">
-                Share details
-              </Button>
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <MultiCurrency />
+              </ListItem.AvatarView>
             }
+            title="Estimated costs"
+            subtitle="Other providers"
+            valueTitle={<Money amount={100} currency="GBP" />}
           />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">Text Only List</Title>
-        <List>
-          <Template title="Sort code" value="23-14-71" />
-          <Template title="Account number" value="12345678" />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">Text With Action Button</Title>
-        <List>
-          <Template
-            title="SWIFT/BIC"
-            value="••• •••"
-            action={
-              <Button v2 size="sm" onClick={() => action('clicked')}>
-                Reveal
-              </Button>
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <FastFlag />
+              </ListItem.AvatarView>
             }
+            title="Total paid"
+            subtitle="Wise"
+            valueTitle={<Money amount={12.15} currency="GBP" />}
+            valueSubtitle={<Money amount={100.9} currency="GBP" />}
           />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">Text With Other Action</Title>
-        <List>
-          <Template
-            title="Account number"
-            value="123456789"
-            action={
-              <IconButton size={24} aria-label="Copy" priority="minimal">
-                <Documents />
-              </IconButton>
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <Receipt />
+              </ListItem.AvatarView>
             }
+            title="Total fees"
+            subtitle={lorem5}
+            valueSubtitle={<Money amount={5.5} currency="GBP" />}
           />
-        </List>
-      </div>
-      <div className="m-t-4 m-b-2">
-        <Title type="title-body">Text With Info Action</Title>
-        <List>
-          <Template
-            title="Routing number"
-            value="987654"
-            action={
-              <Info
-                size="lg"
-                aria-label="More information"
-                content="Use this routing number to receive ACH and Wire transfers."
-              />
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <Savings />
+              </ListItem.AvatarView>
             }
+            title="You saved"
+            valueSubtitle={<Money amount={1000} currency="GBP" />}
           />
         </List>
-      </div>
+      </Section>
+
+      <ListItem
+        as="div"
+        title="Bank name and address"
+        subtitle="Bank Ltd, 2 Street Boulevard, Singapore, 1213423"
+        additionalInfo={
+          <ListItem.AdditionalInfo
+            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
+          >
+            This is our partner bank in Singapore.
+          </ListItem.AdditionalInfo>
+        }
+      />
+      <ListItem
+        as="div"
+        title="Bank name and address"
+        subtitle="Capital Ltd, 2 Canal Street, London, E14 111"
+        additionalInfo={
+          <ListItem.AdditionalInfo
+            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
+          />
+        }
+      />
+      {/* Basic */}
+      {/* with additional info */}
+      {/* with prompt */}
+      {/* Disabled */}
+      {/* Spotlight */}
+      {/* Active */}
     </div>
-  );
+  ),
 };
+
+// add intaces with dark mode

package/src/listItem/ListItem.tsx

@@ -1,53 +1,183 @@
+import { createContext, ReactNode, useId, useMemo, useState } from 'react';
+import { Typography } from '../common';
+import Body from '../body';
+import { AdditionalInfo } from './ListItemAdditionalInfo';
+import { IconButton } from './ListItemIconButton';
+import { Checkbox } from './ListItemCheckbox';
+import { Navigation } from './ListItemNavigation';
 import { clsx } from 'clsx';
-import { ElementType, FC, ReactNode } from 'react';
+import { Button } from './ListItemButton';
+import { Switch } from './ListItemSwitch';
+import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
+import Prompt from './prompt/Prompt';
 
-import Body from '../body/Body';
+export type ListItemTypes =
+  | 'non-interactive'
+  | 'navigation'
+  | 'radio'
+  | 'checkbox'
+  | 'switch'
+  | 'button'
+  | 'icon-button';
 
-export type ListItemProps = {
+export type Props = {
+  as?: 'li' | 'div' | 'span';
+  inverted?: boolean;
+  disabled?: boolean;
+  spotlight?: 'active' | 'inactive';
   title: ReactNode;
-  value: ReactNode;
+  subtitle?: ReactNode;
+  additionalInfo?: ReactNode;
+  valueTitle?: ReactNode;
+  valueSubtitle?: ReactNode;
   media?: ReactNode;
-  action?: ReactNode;
-  className?: string;
-  isContainerAligned?: boolean;
-  as?: ElementType;
+  control?: ReactNode;
+  prompt?: ReactNode;
 };
 
-const ListItem: FC<ListItemProps> = ({
-  media,
-  action,
-  className,
+export type ListItemContextData = {
+  setControlType: (type: ListItemTypes) => void;
+  ids: {
+    label: string;
+    additionalInfo: string;
+    value: string;
+    control: string;
+    prompt: string;
+  };
+  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
+};
+
+// @ts-expect-error for now let's mock it with `null` value
+// but actually by default we should specify `setControlType('none')`
+export const ListItemContext = createContext<ListItemContextData>(null);
+
+export const ListItem = ({
+  as: View = 'li',
   title,
-  value,
-  isContainerAligned,
-  as = 'li',
-  ...rest
-}) => {
-  const Element = as;
+  subtitle,
+  additionalInfo,
+  prompt,
+  inverted,
+  media,
+  spotlight = undefined,
+  valueTitle,
+  valueSubtitle,
+  control = null,
+  disabled,
+}: Props) => {
+  /*
+  const returnType = (): ReactNode => {
+    switch (type) {
+      case 'Navigation':
+        return <Chevron orientation={Position.RIGHT} disabled />;
+      case 'Radio':
+        return <RadioButton name="Hello" checked />;
+      case 'Checkbox':
+        return <CheckboxButton name="Hello" checked />;
+      case 'Switch':
+        return <Switch onClick={() => console.log('clicked')} />;
+      case 'Button':
+        return <Button v2>Hello</Button>;
+      case 'IconButton':
+        return (
+          <IconButton size={40} priority="minimal">
+            <InfoCircle />
+          </IconButton>
+        );
+    }
+  };
+  */
+  const idPrefix = useId();
+
+  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
+  const ids = {
+    label: `${idPrefix}_label`,
+    value: `${idPrefix}_value`,
+    control: `${idPrefix}_control`,
+    prompt: `${idPrefix}_prompt`,
+    additionalInfo: `${idPrefix}_additional-info`,
+  };
+
+  const listItemContext = useMemo(
+    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
+    [],
+  );
 
   return (
-    <Element
-      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {
-        'p-x-2': !isContainerAligned,
-      })}
-      {...rest}
-    >
-      {media}
-
-      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
-        <Body type="body-default" className="text-secondary m-b-0">
-          {title}
-        </Body>
-        {value && (
-          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
-            {value}
-          </Body>
+    <ListItemContext.Provider value={listItemContext}>
+      <View
+        className={clsx(
+          'wds-list-item',
+          { 'wds-list-item-interactive': controlType !== 'non-interactive' },
+          `wds-list-item-${controlType}`,
+          'd-flex flex-row',
+          { 'align-items-center': !subtitle },
+          {
+            [`wds-list-item-spotlight-${spotlight}`]: !!spotlight,
+          },
         )}
-      </div>
+        aria-describedby={[ids.additionalInfo].join(' ')}
+      >
+        {media && <div className="wds-list-item-media">{media}</div>}
 
-      {action ? <div className="np-list-item__action m-l-auto">{action}</div> : null}
-    </Element>
+        {/* 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>
+            )}
+          </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>
   );
 };
 
+/* eslint-disable functional/immutable-data */
+ListItem.Image = Image;
+ListItem.AvatarView = AvatarView;
+ListItem.AvatarLayout = AvatarLayout;
+ListItem.AdditionalInfo = AdditionalInfo;
+ListItem.Checkbox = Checkbox;
+ListItem.IconButton = IconButton;
+ListItem.Navigation = Navigation;
+ListItem.Button = Button;
+ListItem.Switch = Switch;
+ListItem.Prompt = Prompt;
+/* eslint-enable functional/immutable-data */
+
 export default ListItem;

package/src/{item/ItemAdditionalInfo.tsx → listItem/ListItemAdditionalInfo.tsx}

@@ -1,5 +1,5 @@
 import { PropsWithChildren, useContext } from 'react';
-import { ItemContext, ItemContextData } from './Item';
+import { ListItemContext, ListItemContextData } from './ListItem';
 import Body from '../body';
 import Link, { LinkProps } from '../link';
 import { Typography } from '../common';
@@ -9,7 +9,7 @@ export type ItemAdditionalInfoProps = PropsWithChildren<{
 }>;
 
 export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
-  const { ids } = useContext<ItemContextData>(ItemContext);
+  const { ids } = useContext<ListItemContextData>(ListItemContext);
 
   return (
     <Body

package/src/{item/ItemButton.spec.tsx → listItem/ListItemButton.spec.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, mockMatchMedia } from '../test-utils';
-import { Button as ItemButton } from './ItemButton';
+import { Button as ItemButton } from './ListItemButton';
 import { ButtonPriority } from '../button/Button.types';
-import { ItemContext } from './Item';
+import { ListItemContext } from './ListItem';
 
 mockMatchMedia();
 
@@ -10,7 +10,7 @@ describe('ItemButton', () => {
 
   const renderWithItemContext = (ui: React.ReactNode) => {
     return render(
-      <ItemContext.Provider
+      <ListItemContext.Provider
         value={{
           setControlType: mockSetControlType,
           ids: {
@@ -24,7 +24,7 @@ describe('ItemButton', () => {
         }}
       >
         {ui}
-      </ItemContext.Provider>,
+      </ListItemContext.Provider>,
     );
   };
 

package/src/listItem/index.ts

@@ -1,4 +1,6 @@
-export { List } from './List';
-export type { ListProps } from './List';
+export type { Props as ItemProps } from './ListItem';
+export type { ItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+export type { ItemCheckboxProps } from './ListItemCheckbox';
+export type { ItemImageProps, ItemAvatarViewProps, ItemAvatarLayoutProps } from './ListItemMedia';
+
 export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';

package/src/listItem/useItemControl.tsx

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