npm - @transferwise/components - Versions diffs - 0.0.0-experimental-e72bc9f → 0.0.0-experimental-6272ca7 - Mend

@transferwise/components 0.0.0-experimental-e72bc9f → 0.0.0-experimental-6272ca7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/build/index.js +0 -1
package/build/index.js.map +1 -1
package/build/index.mjs +1 -1
package/build/main.css +1 -188
package/build/styles/circularButton/CircularButton.css +1 -0
package/build/styles/main.css +1 -188
package/build/types/index.d.ts +0 -2
package/build/types/index.d.ts.map +1 -1
package/build/types/test-utils/fake-data.d.ts +0 -2
package/build/types/test-utils/fake-data.d.ts.map +1 -1
package/package.json +2 -2
package/src/circularButton/CircularButton.css +1 -0
package/src/circularButton/CircularButton.less +1 -0
package/src/circularButton/CircularButton.tests.story.tsx +23 -0
package/src/index.ts +0 -2
package/src/legacylistItem/LegacyListItem.story.tsx +5 -5
package/src/legacylistItem/LegacyListItem.tests.story.tsx +6 -6
package/src/main.css +1 -188
package/src/main.less +0 -1
package/src/test-utils/fake-data.ts +0 -5
package/build/styles/listItem/ListItem.css +0 -188
package/build/test-utils/assets/apple-pay-logo.svg +0 -84
package/build/types/listItem/ListItem.d.ts +0 -43
package/build/types/listItem/ListItem.d.ts.map +0 -1
package/build/types/listItem/ListItemAdditionalInfo.d.ts +0 -9
package/build/types/listItem/ListItemAdditionalInfo.d.ts.map +0 -1
package/build/types/listItem/ListItemButton.d.ts +0 -4
package/build/types/listItem/ListItemButton.d.ts.map +0 -1
package/build/types/listItem/ListItemCheckbox.d.ts +0 -4
package/build/types/listItem/ListItemCheckbox.d.ts.map +0 -1
package/build/types/listItem/ListItemIconButton.d.ts +0 -7
package/build/types/listItem/ListItemIconButton.d.ts.map +0 -1
package/build/types/listItem/ListItemMedia.d.ts +0 -19
package/build/types/listItem/ListItemMedia.d.ts.map +0 -1
package/build/types/listItem/ListItemNavigation.d.ts +0 -4
package/build/types/listItem/ListItemNavigation.d.ts.map +0 -1
package/build/types/listItem/ListItemSwitch.d.ts +0 -3
package/build/types/listItem/ListItemSwitch.d.ts.map +0 -1
package/build/types/listItem/index.d.ts +0 -6
package/build/types/listItem/index.d.ts.map +0 -1
package/build/types/listItem/prompt/Prompt.d.ts +0 -12
package/build/types/listItem/prompt/Prompt.d.ts.map +0 -1
package/build/types/listItem/useItemControl.d.ts +0 -5
package/build/types/listItem/useItemControl.d.ts.map +0 -1
package/src/listItem/ListItem.css +0 -188
package/src/listItem/ListItem.less +0 -182
package/src/listItem/ListItem.story.tsx +0 -273
package/src/listItem/ListItem.tsx +0 -183
package/src/listItem/ListItemAdditionalInfo.tsx +0 -31
package/src/listItem/ListItemButton.spec.tsx +0 -90
package/src/listItem/ListItemButton.tsx +0 -18
package/src/listItem/ListItemCheckbox.tsx +0 -14
package/src/listItem/ListItemIconButton.tsx +0 -13
package/src/listItem/ListItemMedia.tsx +0 -52
package/src/listItem/ListItemNavigation.tsx +0 -11
package/src/listItem/ListItemSwitch.tsx +0 -8
package/src/listItem/index.ts +0 -10
package/src/listItem/prompt/Prompt.spec.tsx +0 -77
package/src/listItem/prompt/Prompt.story.tsx +0 -170
package/src/listItem/prompt/Prompt.tsx +0 -44
package/src/listItem/useItemControl.tsx +0 -12
package/src/test-utils/assets/apple-pay-logo.svg +0 -84

package/src/listItem/ListItem.tsx DELETED Viewed

@@ -1,183 +0,0 @@
-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 { Button } from './ListItemButton';
-import { Switch } from './ListItemSwitch';
-import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
-import Prompt from './prompt/Prompt';
-export type ListItemTypes =
-  | 'non-interactive'
-  | 'navigation'
-  | 'radio'
-  | 'checkbox'
-  | 'switch'
-  | 'button'
-  | 'icon-button';
-export type Props = {
-  as?: 'li' | 'div' | 'span';
-  inverted?: boolean;
-  disabled?: boolean;
-  spotlight?: 'active' | 'inactive';
-  title: ReactNode;
-  subtitle?: ReactNode;
-  additionalInfo?: ReactNode;
-  valueTitle?: ReactNode;
-  valueSubtitle?: ReactNode;
-  media?: ReactNode;
-  control?: ReactNode;
-  prompt?: ReactNode;
-};
-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,
-  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 (
-    <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,
-          },
-        )}
-        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>
-            </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/listItem/ListItemAdditionalInfo.tsx DELETED Viewed

@@ -1,31 +0,0 @@
-import { PropsWithChildren, useContext } from 'react';
-import { ListItemContext, ListItemContextData } from './ListItem';
-import Body from '../body';
-import Link, { LinkProps } from '../link';
-import { Typography } from '../common';
-export type ListItemAdditionalInfoProps = PropsWithChildren<{
-  action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
-}>;
-export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
-  const { ids } = useContext<ListItemContextData>(ListItemContext);
-  return (
-    <Body
-      type={Typography.BODY_DEFAULT}
-      id={ids.additionalInfo}
-      className="wds-list-item-additional-info"
-    >
-      {children}
-      {action ? (
-        <>
-          {' '}
-          <Link href={action.href} target={action.target} onClick={action.onClick}>
-            {action.label}
-          </Link>
-        </>
-      ) : null}
-    </Body>
-  );
-};

package/src/listItem/ListItemButton.spec.tsx DELETED Viewed

@@ -1,90 +0,0 @@
-import { render, screen, mockMatchMedia } from '../test-utils';
-import { Button as ItemButton } from './ListItemButton';
-import { ButtonPriority } from '../button/Button.types';
-import { ListItemContext } from './ListItem';
-mockMatchMedia();
-describe('ItemButton', () => {
-  const mockSetControlType = jest.fn();
-  const renderWithItemContext = (ui: React.ReactNode) => {
-    return render(
-      <ListItemContext.Provider
-        value={{
-          setControlType: mockSetControlType,
-          ids: {
-            label: 'label',
-            additionalInfo: 'additional Info',
-            value: 'value',
-            control: 'control',
-            prompt: 'prompt',
-          },
-          props: {},
-        }}
-      >
-        {ui}
-      </ListItemContext.Provider>,
-    );
-  };
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('always sets v2 to true', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(mockSetControlType).toHaveBeenCalledWith('button');
-  });
-  it('always sets size to "md"', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button--medium');
-  });
-  it('supports all priorities', () => {
-    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
-    priorities.forEach((priority) => {
-      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
-      const button = screen.getByRole('button', { name: `Test ${priority}` });
-      expect(button).toBeInTheDocument();
-    });
-  });
-  it('renders as a button by default', () => {
-    renderWithItemContext(<ItemButton>Click me</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button.tagName).toBe('BUTTON');
-  });
-  it('renders as an anchor when href is provided', () => {
-    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
-    const link = screen.getByRole('link', { name: 'Go to Example' });
-    expect(link).toBeInTheDocument();
-    expect(link.tagName).toBe('A');
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-  it('spreads additional props to the button', () => {
-    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
-    const button = screen.getByRole('button', { name: 'Custom Button' });
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-label', 'Custom Button');
-  });
-  it('spreads additional props to the anchor', () => {
-    renderWithItemContext(
-      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
-        Custom Link
-      </ItemButton>,
-    );
-    const link = screen.getByRole('link', { name: 'Custom Link' });
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', 'https://example.com');
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-});

package/src/listItem/ListItemButton.tsx DELETED Viewed

@@ -1,18 +0,0 @@
-import { default as ButtonComp, NewButtonProps } from '../button';
-import { useItemControl } from './useItemControl';
-export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
-export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps) => {
-  const { baseItemProps } = useItemControl('button');
-  const commonProps = {
-    ...props,
-    priority,
-    v2: true,
-    size: 'md',
-    disabled: baseItemProps.disabled,
-  };
-  return <ButtonComp {...(commonProps as NewButtonProps)} />;
-};

package/src/listItem/ListItemCheckbox.tsx DELETED Viewed

@@ -1,14 +0,0 @@
-import CheckboxButton from '../checkboxButton';
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-import { useItemControl } from './useItemControl';
-export type ListItemCheckboxProps = Pick<
-  CheckboxButtonProps,
-  'checked' | 'indeterminate' | 'onChange'
->;
-export const Checkbox = function (props: ListItemCheckboxProps) {
-  const { baseItemProps } = useItemControl('checkbox');
-  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
-};

package/src/listItem/ListItemIconButton.tsx DELETED Viewed

@@ -1,13 +0,0 @@
-import { default as IconButtonComp, IconButtonProps } from '../iconButton';
-import { useItemControl } from './useItemControl';
-import { ReactNode } from 'react';
-export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
-  children: ReactNode;
-};
-export const IconButton = function (props: ListItemIconButtonProps) {
-  const { baseItemProps } = useItemControl('icon-button');
-  return <IconButtonComp {...props} size={32} disabled={baseItemProps.disabled} />;
-};

package/src/listItem/ListItemMedia.tsx DELETED Viewed

@@ -1,52 +0,0 @@
-import { default as AvatarViewComp, AvatarViewProps } from '../avatarView';
-import { default as AvatarLayoutComp, AvatarLayoutProps } from '../avatarLayout';
-import { default as ImageComp, ImageProps } from '../image/Image';
-import { clsx } from 'clsx';
-type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
-export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
-export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
-  return (
-    <AvatarViewComp
-      {...props}
-      size={size}
-      className={clsx('wds-list-item-media-avatar-view', className)}
-    />
-  );
-};
-export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
-export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
-  return (
-    <AvatarLayoutComp
-      {...props}
-      size={size}
-      className={clsx('wds-list-item-media-avatar-layout', className)}
-    />
-  );
-};
-export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
-  SizeProp & {
-    alt?: string;
-  };
-/**
- * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
- */
-export const Image = ({ alt = '', size = 48, ...props }: ListItemImageProps) => {
-  return (
-    <div
-      className={clsx('wds-list-item-media-image')}
-      style={{
-        // @ts-expect-error CSS custom props allowed
-        '--item-media-image-size': `${size}px`,
-      }}
-    >
-      <ImageComp {...props} alt={alt} />
-    </div>
-  );
-};

package/src/listItem/ListItemNavigation.tsx DELETED Viewed

@@ -1,11 +0,0 @@
-import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
-import { ButtonProps } from '../button/Button.types';
-import { useItemControl } from './useItemControl';
-export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-export const Navigation = function Navigation({ onClick }: ListItemNavigationProps) {
-  const { baseItemProps } = useItemControl('navigation');
-  return baseItemProps.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
-};

package/src/listItem/ListItemSwitch.tsx DELETED Viewed

@@ -1,8 +0,0 @@
-import { default as SwitchComp, SwitchProps } from '../switch';
-import { useItemControl } from './useItemControl';
-export const Switch = function (props: SwitchProps) {
-  const { baseItemProps } = useItemControl('switch');
-  return <SwitchComp disabled={baseItemProps.disabled} {...props} />;
-};

package/src/listItem/index.ts DELETED Viewed

@@ -1,10 +0,0 @@
-export type { Props as ListItemProps } from './ListItem';
-export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
-export type { ListItemCheckboxProps } from './ListItemCheckbox';
-export type {
-  ListItemImageProps,
-  ListItemAvatarViewProps,
-  ListItemAvatarLayoutProps,
-} from './ListItemMedia';
-export { default } from './ListItem';

package/src/listItem/prompt/Prompt.spec.tsx DELETED Viewed

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

package/src/listItem/prompt/Prompt.story.tsx DELETED Viewed

@@ -1,170 +0,0 @@
-import Link from '../../link';
-import { Sentiment } from '../../common';
-import { Prompt, ListItemPromptProps } from './Prompt';
-import { lorem40 } from '../../test-utils';
-import { StoryObj } from '@storybook/react';
-export default {
-  component: Prompt,
-  title: 'Content/ListItem/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<
-  ListItemPromptProps & {
-    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>
-        <Prompt
-          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>}
-        </Prompt>
-      </div>
-    );
-  },
-};
-export const Variants = () => {
-  return (
-    <>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.POSITIVE}>
-          Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.NEGATIVE}>
-          Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.NEUTRAL}>
-          Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.WARNING}>
-          Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type="discount">
-          Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type="savings">
-          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="discount"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'hidden anchor tags are accessible, right?',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="negative"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable <a>',
-          }}
-        >
-          The whole prompt is secretly clickable as an anchor tag
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="warning"
-          action={{
-            onClick: () => {
-              console.log('clicked');
-            },
-            'aria-label': 'clickable button',
-          }}
-        >
-          The whole prompt is secretly clickable as a button
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="neutral"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable prompt',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </Prompt>
-      </div>
-      <div className="m-b-2" style={{ maxWidth: '300px' }}>
-        <Prompt type="warning">The prompt has very long text that wraps {lorem40}</Prompt>
-      </div>
-    </>
-  );
-};