@transferwise/components 0.0.0-experimental-0192429 → 0.0.0-experimental-385bb2a

package/src/item/ItemNavigation.tsx

@@ -1,16 +0,0 @@
-import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
-import { ButtonProps } from '../button/Button.types';
-import Item, { ItemContext, ItemContextData } from './Item';
-import { useContext, useEffect } from 'react';
-
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-
-export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('navigation');
-  }, []);
-
-  return baseItemProps?.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
-};

package/src/item/index.ts

@@ -1,4 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';

package/src/item/prompt/Prompt.spec.tsx

@@ -1,77 +0,0 @@
-import { render, screen, mockMatchMedia } from '../../test-utils';
-import { ItemPrompt } from './Prompt';
-import { Sentiment } from '../../common';
-
-mockMatchMedia();
-
-describe('ItemPrompt', () => {
-  it('renders the aria-label when provided', () => {
-    const ariaLabel = 'Test aria-label';
-    render(
-      <ItemPrompt
-        type={Sentiment.POSITIVE}
-        action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
-      >
-        Positive prompt
-      </ItemPrompt>,
-    );
-
-    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
-  });
-
-  it('applies the interactive class when href is provided', () => {
-    render(
-      <ItemPrompt
-        type={Sentiment.POSITIVE}
-        action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
-      >
-        Interactive link
-      </ItemPrompt>,
-    );
-
-    expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
-  });
-
-  it('applies the interactive class when onClick is provided', () => {
-    render(
-      <ItemPrompt
-        type={Sentiment.POSITIVE}
-        action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
-      >
-        Interactive button
-      </ItemPrompt>,
-    );
-
-    expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
-  });
-
-  it('does not apply the interactive class when no action is provided', () => {
-    render(<ItemPrompt type={Sentiment.POSITIVE}>Non-interactive prompt</ItemPrompt>);
-
-    expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
-  });
-
-  it('renders the children content', () => {
-    render(<ItemPrompt type={Sentiment.POSITIVE}>This is a child prompt</ItemPrompt>);
-
-    expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
-  });
-
-  it('spreads additional props to the wrapper element', () => {
-    render(
-      <ItemPrompt
-        type={Sentiment.POSITIVE}
-        action={{
-          href: 'https://example.com',
-          target: '_blank',
-          'aria-label': 'Custom props prompt',
-        }}
-      >
-        Custom props prompt
-      </ItemPrompt>,
-    );
-
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-});

package/src/item/prompt/Prompt.story.tsx

@@ -1,170 +0,0 @@
-import Link from '../../link';
-import { Sentiment } from '../../common';
-import { ItemPrompt, ItemPromptProps } from './Prompt';
-import { lorem40 } from '../../test-utils';
-import { StoryObj } from '@storybook/react';
-
-export default {
-  component: ItemPrompt,
-  title: 'Content/Item/Prompt',
-  args: {
-    type: Sentiment.NEGATIVE,
-    children: 'You have done a terrible thing',
-  },
-  argTypes: {
-    type: {
-      options: [
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        'discount',
-        'savings',
-      ],
-      control: { type: 'radio' },
-      description: 'The type of prompt to display',
-    },
-    action: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      type: {
-        name: 'string',
-        required: true,
-        description: 'The content of the prompt',
-      },
-    },
-  },
-};
-
-type CustomStory = StoryObj<
-  ItemPromptProps & {
-    interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
-  }
->;
-
-export const Basic: CustomStory = {
-  args: {
-    interactivity: 'none',
-  },
-  argTypes: {
-    interactivity: {
-      options: ['none', 'full-button', 'full-anchor', 'link'],
-      control: { type: 'radio' },
-      description: 'The type of interactivity to display',
-    },
-  },
-  render: ({ interactivity, ...args }) => {
-    return (
-      <div>
-        <ItemPrompt
-          type={args.type}
-          action={
-            interactivity === 'full-anchor'
-              ? { href: 'wise.com' }
-              : interactivity === 'full-button'
-                ? {
-                    onClick: () => {
-                      console.log('clicked');
-                    },
-                  }
-                : undefined
-          }
-        >
-          {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
-        </ItemPrompt>
-      </div>
-    );
-  },
-};
-
-export const Variants = () => {
-  return (
-    <>
-      <div className="m-b-2">
-        <ItemPrompt type={Sentiment.POSITIVE}>
-          Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt type={Sentiment.NEGATIVE}>
-          Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt type={Sentiment.NEUTRAL}>
-          Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt type={Sentiment.WARNING}>
-          Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt type="discount">
-          Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt type="savings">
-          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt
-          type="discount"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'hidden anchor tags are accessible, right?',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt
-          type="negative"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable <a>',
-          }}
-        >
-          The whole prompt is secretly clickable as an anchor tag
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt
-          type="warning"
-          action={{
-            onClick: () => {
-              console.log('clicked');
-            },
-            'aria-label': 'clickable button',
-          }}
-        >
-          The whole prompt is secretly clickable as a button
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2">
-        <ItemPrompt
-          type="neutral"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable prompt',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </ItemPrompt>
-      </div>
-      <div className="m-b-2" style={{ maxWidth: '300px' }}>
-        <ItemPrompt type="warning">The prompt has very long text that wraps {lorem40}</ItemPrompt>
-      </div>
-    </>
-  );
-};

package/src/item/prompt/Prompt.tsx

@@ -1,44 +0,0 @@
-import { Confetti, Tags } from '@transferwise/icons';
-import { Sentiment } from '../../common';
-import StatusIcon from '../../statusIcon';
-import { clsx } from 'clsx';
-import { LinkProps } from '../../link';
-import Body from '../../body';
-
-export type ItemPromptProps = {
-  type:
-    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
-    | 'discount'
-    | 'savings';
-  children: React.ReactNode;
-  action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
-};
-
-export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
-  const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
-
-  const icon =
-    type === 'discount' ? (
-      <Tags size={16} />
-    ) : type === 'savings' ? (
-      <Confetti size={16} />
-    ) : (
-      <StatusIcon size={16} sentiment={type} />
-    );
-
-  return (
-    <Wrapper
-      className={clsx(
-        'np-item-prompt',
-        type,
-        (action?.href || action?.onClick) && 'np-prompt-interactive',
-      )}
-      {...(action ?? {})}
-    >
-      <div className="np-prompt-icon">{icon}</div>
-      <Body>{children}</Body>
-    </Wrapper>
-  );
-};
-
-export default ItemPrompt;