@transferwise/components 0.0.0-experimental-bd2aa28 → 0.0.0-experimental-1664fea

package/src/listItem/ListItem.story.tsx

@@ -1,461 +0,0 @@
-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