npm - @transferwise/components - Versions diffs - 0.0.0-experimental-7fb2742 → 0.0.0-experimental-e240700 - Mend

@transferwise/components 0.0.0-experimental-7fb2742 → 0.0.0-experimental-e240700

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 (116) hide show

package/build/flowNavigation/animatedLabel/AnimatedLabel.js +1 -1
package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs +1 -1
package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
package/build/index.js +4 -3
package/build/index.js.map +1 -1
package/build/index.mjs +3 -3
package/build/listItem/List.js.map +1 -0
package/build/listItem/List.mjs.map +1 -0
package/build/{legacylistItem/LegacyListItem.js → listItem/ListItem.js} +3 -3
package/build/listItem/ListItem.js.map +1 -0
package/build/{legacylistItem/LegacyListItem.mjs → listItem/ListItem.mjs} +3 -3
package/build/listItem/ListItem.mjs.map +1 -0
package/build/main.css +185 -3
package/build/phoneNumberInput/PhoneNumberInput.js +1 -1
package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -1
package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js +2 -2
package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js.map +1 -1
package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.mjs +2 -2
package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.mjs.map +1 -1
package/build/styles/item/Item.css +185 -0
package/build/styles/main.css +185 -3
package/build/styles/switch/Switch.css +0 -3
package/build/test-utils/assets/apple-pay-logo.svg +84 -0
package/build/types/index.d.ts +4 -2
package/build/types/index.d.ts.map +1 -1
package/build/types/item/Item.d.ts +43 -0
package/build/types/item/Item.d.ts.map +1 -0
package/build/types/item/ItemAdditionalInfo.d.ts +9 -0
package/build/types/item/ItemAdditionalInfo.d.ts.map +1 -0
package/build/types/item/ItemButton.d.ts +4 -0
package/build/types/item/ItemButton.d.ts.map +1 -0
package/build/types/item/ItemCheckbox.d.ts +4 -0
package/build/types/item/ItemCheckbox.d.ts.map +1 -0
package/build/types/item/ItemIconButton.d.ts +7 -0
package/build/types/item/ItemIconButton.d.ts.map +1 -0
package/build/types/item/ItemMedia.d.ts +19 -0
package/build/types/item/ItemMedia.d.ts.map +1 -0
package/build/types/item/ItemNavigation.d.ts +4 -0
package/build/types/item/ItemNavigation.d.ts.map +1 -0
package/build/types/item/ItemSwitch.d.ts +3 -0
package/build/types/item/ItemSwitch.d.ts.map +1 -0
package/build/types/item/index.d.ts +6 -0
package/build/types/item/index.d.ts.map +1 -0
package/build/types/item/prompt/Prompt.d.ts +12 -0
package/build/types/item/prompt/Prompt.d.ts.map +1 -0
package/build/types/item/useItemControl.d.ts +5 -0
package/build/types/item/useItemControl.d.ts.map +1 -0
package/build/types/listItem/List.d.ts.map +1 -0
package/build/types/{legacylistItem/LegacyListItem.d.ts → listItem/ListItem.d.ts} +4 -4
package/build/types/listItem/ListItem.d.ts.map +1 -0
package/build/types/listItem/index.d.ts +5 -0
package/build/types/listItem/index.d.ts.map +1 -0
package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts +2 -2
package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts.map +1 -1
package/build/types/test-utils/fake-data.d.ts +2 -0
package/build/types/test-utils/fake-data.d.ts.map +1 -1
package/build/upload/Upload.js +3 -14
package/build/upload/Upload.js.map +1 -1
package/build/upload/Upload.mjs +3 -14
package/build/upload/Upload.mjs.map +1 -1
package/package.json +3 -3
package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +1 -1
package/src/index.ts +4 -2
package/src/item/Item.css +185 -0
package/src/item/Item.less +180 -0
package/src/item/Item.story.tsx +273 -0
package/src/item/Item.tsx +181 -0
package/src/item/ItemAdditionalInfo.tsx +31 -0
package/src/item/ItemButton.spec.tsx +90 -0
package/src/item/ItemButton.tsx +18 -0
package/src/item/ItemCheckbox.tsx +11 -0
package/src/item/ItemIconButton.tsx +13 -0
package/src/item/ItemMedia.tsx +52 -0
package/src/item/ItemNavigation.tsx +11 -0
package/src/item/ItemSwitch.tsx +8 -0
package/src/item/index.ts +6 -0
package/src/item/prompt/Prompt.spec.tsx +77 -0
package/src/item/prompt/Prompt.story.tsx +170 -0
package/src/item/prompt/Prompt.tsx +44 -0
package/src/item/useItemControl.tsx +12 -0
package/src/{legacylistItem/LegacyListItem.tests.story.tsx → listItem/ListItem.tests.story.tsx} +2 -2
package/src/{legacylistItem/LegacyListItem.tsx → listItem/ListItem.tsx} +3 -3
package/src/listItem/index.ts +4 -0
package/src/main.css +185 -3
package/src/main.less +2 -1
package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +4 -4
package/src/phoneNumberInput/PhoneNumberInput.story.tsx +0 -22
package/src/phoneNumberInput/PhoneNumberInput.tsx +1 -1
package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts +3 -4
package/src/switch/Switch.css +0 -3
package/src/switch/Switch.less +0 -1
package/src/test-utils/assets/apple-pay-logo.svg +84 -0
package/src/test-utils/fake-data.ts +5 -0
package/src/upload/Upload.story.tsx +0 -52
package/src/upload/Upload.tsx +3 -15
package/build/legacylistItem/LegacyListItem.js.map +0 -1
package/build/legacylistItem/LegacyListItem.mjs.map +0 -1
package/build/legacylistItem/List.js.map +0 -1
package/build/legacylistItem/List.mjs.map +0 -1
package/build/types/legacylistItem/LegacyListItem.d.ts.map +0 -1
package/build/types/legacylistItem/List.d.ts.map +0 -1
package/build/types/legacylistItem/index.d.ts +0 -5
package/build/types/legacylistItem/index.d.ts.map +0 -1
package/src/legacylistItem/index.ts +0 -4
/package/build/{legacylistItem → listItem}/List.js +0 -0
/package/build/{legacylistItem → listItem}/List.mjs +0 -0
/package/build/styles/{legacylistItem/LegacyListItem.css → listItem/ListItem.css} +0 -0
/package/build/types/{legacylistItem → listItem}/List.d.ts +0 -0
/package/src/{legacylistItem → listItem}/List.tsx +0 -0
/package/src/{legacylistItem/LegacyListItem.css → listItem/ListItem.css} +0 -0
/package/src/{legacylistItem/LegacyListItem.less → listItem/ListItem.less} +0 -0
/package/src/{legacylistItem/LegacyListItem.spec.tsx → listItem/ListItem.spec.tsx} +0 -0
/package/src/{legacylistItem/LegacyListItem.story.tsx → listItem/ListItem.story.tsx} +0 -0

package/src/item/Item.tsx ADDED Viewed

@@ -0,0 +1,181 @@
+import { createContext, ReactNode, useId, useMemo, useState } from 'react';
+import { Typography } from '../common';
+import Body from '../body';
+import { AdditionalInfo } from './ItemAdditionalInfo';
+import { IconButton } from './ItemIconButton';
+import { Checkbox } from './ItemCheckbox';
+import { Navigation } from './ItemNavigation';
+import { clsx } from 'clsx';
+import { Button } from './ItemButton';
+import { Switch } from './ItemSwitch';
+import { AvatarLayout, AvatarView, Image } from './ItemMedia';
+import Prompt from './prompt/Prompt';
+export type ItemTypes =
+  | '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 ItemContextData = {
+  setControlType: (type: ItemTypes) => 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 ItemContext = createContext<ItemContextData>(null);
+export const Item = ({
+  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<ItemTypes>('non-interactive');
+  const ids = {
+    label: `${idPrefix}_label`,
+    value: `${idPrefix}_value`,
+    control: `${idPrefix}_control`,
+    prompt: `${idPrefix}_prompt`,
+    additionalInfo: `${idPrefix}_additional-info`,
+  };
+  const itemCtx = useMemo(
+    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
+    [],
+  );
+  return (
+    <ItemContext.Provider value={itemCtx}>
+      <View
+        className={clsx(
+          'np-item',
+          { 'np-item-interactive': controlType !== 'non-interactive' },
+          `np-item-${controlType}`,
+          'd-flex flex-row',
+          { 'align-items-center': !subtitle },
+          {
+            [`np-item-spotlight-${spotlight}`]: !!spotlight,
+          },
+        )}
+        aria-describedby={[ids.additionalInfo].join(' ')}
+      >
+        {media && <div className="np-item-media">{media}</div>}
+        {/* Title + Subtitle + Values + Additional Info - Group */}
+        <div className="np-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="np-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="np-item-subtitle">{subtitle}</Body>
+            </span>
+            {(valueTitle || valueSubtitle) && (
+              <span
+                id={ids.value}
+                className={clsx('np-item-value', 'd-flex align-items-center', {
+                  'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
+                })}
+              >
+                {valueTitle && (
+                  <Body type={Typography.BODY_LARGE_BOLD} className="np-item-title-value">
+                    {valueTitle}
+                  </Body>
+                )}
+                {valueSubtitle && <Body className="np-item-subtitle-value">{valueSubtitle}</Body>}
+              </span>
+            )}
+          </div>
+          {/* Additional Info and Prompt here */}
+          {Boolean(subtitle) && additionalInfo}
+        </div>
+        {control === null ? null : <Body className="np-item-control">{control}</Body>}
+        {prompt}
+      </View>
+    </ItemContext.Provider>
+  );
+};
+/* eslint-disable functional/immutable-data */
+Item.Image = Image;
+Item.AvatarView = AvatarView;
+Item.AvatarLayout = AvatarLayout;
+Item.AdditionalInfo = AdditionalInfo;
+Item.Checkbox = Checkbox;
+Item.IconButton = IconButton;
+Item.Navigation = Navigation;
+Item.Button = Button;
+Item.Switch = Switch;
+Item.Prompt = Prompt;
+/* eslint-enable functional/immutable-data */
+export default Item;

package/src/item/ItemAdditionalInfo.tsx ADDED Viewed

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

package/src/item/ItemButton.spec.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { Button as ItemButton } from './ItemButton';
+import { ButtonPriority } from '../button/Button.types';
+import { ItemContext } from './Item';
+mockMatchMedia();
+describe('ItemButton', () => {
+  const mockSetControlType = jest.fn();
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          ids: {
+            label: 'label',
+            additionalInfo: 'additional Info',
+            value: 'value',
+            control: 'control',
+            prompt: 'prompt',
+          },
+          props: {},
+        }}
+      >
+        {ui}
+      </ItemContext.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/item/ItemButton.tsx ADDED Viewed

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

package/src/item/ItemCheckbox.tsx ADDED Viewed

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

package/src/item/ItemIconButton.tsx ADDED Viewed

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

package/src/item/ItemMedia.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+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 ItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+export const AvatarView = ({ className, size = 48, ...props }: ItemAvatarViewProps) => {
+  return (
+    <AvatarViewComp
+      {...props}
+      size={size}
+      className={clsx('np-item-media-avatar-view', className)}
+    />
+  );
+};
+export type ItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+export const AvatarLayout = ({ className, size = 48, ...props }: ItemAvatarLayoutProps) => {
+  return (
+    <AvatarLayoutComp
+      {...props}
+      size={size}
+      className={clsx('np-item-media-avatar-layout', className)}
+    />
+  );
+};
+export type ItemImageProps = 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 }: ItemImageProps) => {
+  return (
+    <div
+      className={clsx('np-item-media-image')}
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--item-media-image-size': `${size}px`,
+      }}
+    >
+      <ImageComp {...props} alt={alt} />
+    </div>
+  );
+};

package/src/item/ItemNavigation.tsx ADDED Viewed

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

package/src/item/ItemSwitch.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+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/item/index.ts ADDED Viewed

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

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

@@ -0,0 +1,77 @@
+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 ADDED Viewed

@@ -0,0 +1,170 @@
+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>
+    </>
+  );
+};