@transferwise/components 0.0.0-experimental-1664fea → 0.0.0-experimental-850e2db

package/src/listItem/ListItem.less

@@ -0,0 +1,210 @@
+.wds-list-item {
+    list-style: none;
+    width: 100%;
+    padding: 0;
+    border-radius: var(--radius-medium);
+    background-color: var(--color-background-screen);
+    gap: var(--size-16);
+
+    .partially-interactive {
+      padding: var(--size-16);
+    }
+
+    label, a {
+      padding: var(--size-16);
+    }
+
+    &-interactive {
+      label {
+        cursor: pointer;
+      }
+      &:hover {
+          background-color: var(--color-background-screen-hover);
+          .wds-list-item-control {
+             .wds-Button {
+               background-color: var(--Button-background-hover);
+               color: var(--Button-color-hover);
+               transition: none;
+             }
+         }
+      }
+      &:active {
+          background-color: var(--color-background-screen-active);
+      }
+      .wds-list-item-control {
+         .wds-Button {
+           transition: none;
+         }
+       }
+    }
+
+    &-media {
+
+        &-image {
+            width: var(--item-media-image-size);
+            height: var(--item-media-image-size);
+        }
+    }
+
+    &-body {
+      width: 100%;
+    }
+
+    &-title {
+        color: var(--color-content-primary);
+    }
+
+    &-additional-info {
+        color: var(--color-content-tertiary);
+    }
+
+    &-value {
+      flex: 0 0 auto;
+    }
+    
+    &-control {
+        flex: 0 0 auto;
+    }
+
+    &-navigation {
+      &, &:hover, &:focus {
+        text-decoration: none;
+      }
+    }
+
+    &-spotlight {
+        &-active {
+            background-color: var(--color-background-neutral);
+            &:not(.disabled, :disabled):hover {
+                background-color: var(--color-background-neutral-hover);
+            }
+            &:not(.disabled, :disabled):active {
+                background-color: var(--color-background-neutral-active);
+            }
+        }
+
+        &-inactive {
+            background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+            border: 1px dashed var(--color-border-neutral);
+            &:not(.disabled, :disabled):hover {
+                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+            }
+            &:not(.disabled, :disabled):active {
+                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+            }
+        }
+    }
+
+    &-prompt {
+        display: inline-flex;
+        padding-top: calc(var(--padding-x-small) / 2);
+        padding-bottom: calc(var(--padding-x-small) / 2);
+        padding-left: calc(var(--padding-x-small) - 1px);
+        padding-right: var(--padding-x-small);
+        border-radius: var(--radius-small);
+        word-break: break-word;
+        overflow-wrap: break-word;
+        
+        .np-prompt-icon {
+          padding-right: calc(var(--size-12) / 2);
+          padding-top: calc(var(--size-4) - 1px);
+          padding-bottom: calc(var(--size-4) - 1px);
+      
+          .tw-icon-tags,
+          .tw-icon-confetti {
+            color: var(--color-sentiment-positive-primary);
+          }
+        }
+      
+        a {
+          text-underline-offset: calc(var(--size-4) / 2); 
+        }
+      
+        &.np-prompt-interactive {
+          text-decoration: none;
+          cursor: pointer;
+          border: none;
+        }
+      
+        &.negative {
+          background-color: var(--color-sentiment-negative-secondary);
+          color: var(--color-sentiment-negative-primary);
+          a {
+            color: var(--color-sentiment-negative-primary);
+            &:hover {
+              color: var(--color-sentiment-negative-primary-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-negative-primary-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+            }
+          }
+        }
+        &.positive,
+        &.discount,
+        &.savings {
+          background-color: var(--color-sentiment-positive-secondary);
+          color: var(--color-sentiment-positive-primary);
+          a {
+            color: var(--color-sentiment-positive-primary);
+            &:hover {
+              color: var(--color-sentiment-positive-primary-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-positive-primary-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+            }
+          }
+        }
+        &.neutral {
+          background-color: var(--color-background-neutral);
+          color: var(--color-content-primary);
+          a {
+            color: var(--color-content-primary);
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: var(--color-background-neutral-hover);
+            }
+            &:active {
+              background-color: var(--color-background-neutral-active);
+            }
+          }
+        }
+        &.warning {
+          background-color: var(--color-sentiment-warning-secondary);
+          color: var(--color-sentiment-warning-content);
+          a {
+            color: var(--color-sentiment-warning-content);
+            &:hover {
+              color: var(--color-sentiment-warning-content-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-warning-content-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+            }
+          }
+        } 
+    }
+}

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

@@ -0,0 +1,461 @@
+import ListItem, { Props as ItemProps } from './ListItem';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import {
+  Bank,
+  BankTransfer,
+  FastFlag,
+  MultiCurrency,
+  Plus,
+  Receipt,
+  Savings,
+} from '@transferwise/icons';
+
+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: 'Content/ListItem',
+} 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
+          media={
+            <ListItem.AvatarView>
+              <Bank />
+            </ListItem.AvatarView>
+          }
+          spotlight="inactive"
+          title="Test title"
+          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={lorem5}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Switch
+              checked={checked}
+              onClick={() => {
+                setChecked(!checked);
+              }}
+            />
+          }
+          className="m-t-2 m-b-4"
+        />
+      </div>
+    );
+  },
+};
+
+export const Navigation: Story = {
+  render: () => (
+    <div>
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Test title"
+        subtitle={lorem5}
+        control={
+          <ListItem.Navigation
+            onClick={() => {
+              console.log('clicked');
+            }}
+          />
+        }
+        className="m-b-2"
+      />
+
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        spotlight="inactive"
+        title="Test title"
+        subtitle={lorem5}
+        control={
+          <ListItem.Navigation
+            onClick={() => {
+              console.log('clicked');
+            }}
+          />
+        }
+        className="m-b-2"
+      />
+
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        spotlight="inactive"
+        title="Test title"
+        subtitle={lorem5}
+        control={<ListItem.Navigation href="https://wise.com" target="_blank" />}
+        className="m-b-2"
+      />
+
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        disabled
+        title="Test title"
+        subtitle={lorem5}
+        control={
+          <ListItem.Navigation
+            onClick={() => {
+              console.log('clicked');
+            }}
+          />
+        }
+        className="m-b-2"
+      />
+
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        spotlight="inactive"
+        disabled
+        title="Test title"
+        subtitle={lorem5}
+        control={
+          <ListItem.Navigation
+            onClick={() => {
+              console.log('clicked');
+            }}
+          />
+        }
+        className="m-b-2"
+      />
+
+      <ListItem
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        spotlight="inactive"
+        disabled
+        title="Test title"
+        subtitle={lorem5}
+        control={<ListItem.Navigation href="https://wise.com" target="_blank" />}
+        className="m-b-2"
+      />
+    </div>
+  ),
+};
+
+export const Radio: Story = {
+  render: () => (
+    <div>
+      {/* Basic */}
+      {/* with additional info */}
+      {/* with prompt */}
+      {/* Disabled */}
+      {/* Spotlight */}
+      {/* Active */}
+    </div>
+  ),
+};
+
+export const Button: Story = {
+  render: () => (
+    <div>
+      {/* Basic */}
+      {/* with additional info */}
+      {/* with prompt */}
+      {/* partially interactive */}
+      {/* Disabled */}
+      {/* Spotlight */}
+      {/* Active */}
+    </div>
+  ),
+};
+
+export const NonInteractive: Story = {
+  render: () => (
+    <div>
+      <Section>
+        <Header title="Transcation Details" />
+        <List>
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <MultiCurrency />
+              </ListItem.AvatarView>
+            }
+            title="Estimated costs"
+            subtitle="Other providers"
+            valueTitle={<Money amount={100} currency="GBP" />}
+          />
+          <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" />}
+          />
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <Receipt />
+              </ListItem.AvatarView>
+            }
+            title="Total fees"
+            subtitle={lorem5}
+            valueSubtitle={<Money amount={5.5} currency="GBP" />}
+          />
+          <ListItem
+            media={
+              <ListItem.AvatarView>
+                <Savings />
+              </ListItem.AvatarView>
+            }
+            title="You saved"
+            valueSubtitle={<Money amount={1000} currency="GBP" />}
+          />
+        </List>
+      </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>
+  ),
+};
+
+export const ButtonInteractivity: Story = {
+  render: () => {
+    const [clicked, setClicked] = useState(0);
+
+    return (
+      <>
+        <label>Count: {clicked}</label>
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Button priority="secondary-neutral" onClick={() => setClicked(clicked + 1)}>
+              as Button
+            </ListItem.Button>
+          }
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              partiallyInteractive
+              onClick={() => setClicked(clicked + 1)}
+            >
+              as Button
+            </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>
+          }
+        />
+      </>
+    );
+  },
+};
+
+// add intaces with dark mode