@transferwise/components 0.0.0-experimental-d16bb5a → 0.0.0-experimental-fe2498c

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -0,0 +1,174 @@
+import { Bank } from '@transferwise/icons';
+import { ActionPrompt } from './ActionPrompt';
+
+export default {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+  tags: ['early-access'],
+};
+
+export const AllSentiments = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+      <ActionPrompt
+        sentiment="negative"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="negative"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+      />
+      <ActionPrompt
+        sentiment="warning"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="warning"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+      />
+      <ActionPrompt
+        sentiment="neutral"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="neutral"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+      />
+      <ActionPrompt
+        sentiment="success"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="success"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Title"
+        description="Description"
+        actionPrimary={{ label: 'Primary', onClick: () => {} }}
+        actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+      />
+    </div>
+  );
+};
+
+export const PrimaryActionOnly = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 340 }}>
+      <ActionPrompt
+        sentiment="success"
+        title="Payment successful"
+        description="Your money is on its way"
+        actionPrimary={{ label: 'View details', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="negative"
+        title="Payment failed"
+        description="Please try again"
+        actionPrimary={{ label: 'Retry', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+    </div>
+  );
+};
+
+export const CustomMedia = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 340 }}>
+      <ActionPrompt
+        sentiment="negative"
+        title="Special offer!"
+        description="Invite a friend and get £50"
+        media={{ avatar: { imgSrc: '../../tapestry-01.png', badge: { status: 'negative' } } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        actionSecondary={{ label: 'Maybe later', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="warning"
+        title="Special offer!"
+        description="Invite a friend and get £50"
+        media={{ avatar: { asset: <Bank />, badge: { status: 'warning' } } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        actionSecondary={{ label: 'Maybe later', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="success"
+        title="Special offer!"
+        description="Invite a friend and get £50"
+        media={{ avatar: { profileName: 'John Doe', badge: { status: 'success' } } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        actionSecondary={{ label: 'Maybe later', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+    </div>
+  );
+};
+
+export const WithLinks = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 340 }}>
+      <ActionPrompt
+        sentiment="neutral"
+        title="Update available"
+        description="A new version is ready"
+        actionPrimary={{ label: 'Update now', href: '#update' }}
+        actionSecondary={{ label: 'Release notes', href: '#notes', target: '_blank' }}
+        onDismiss={() => {}}
+      />
+    </div>
+  );
+};
+
+export const WithoutDescription = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 340 }}>
+      <ActionPrompt
+        sentiment="warning"
+        title="Session expiring soon"
+        actionPrimary={{ label: 'Stay logged in', onClick: () => {} }}
+        actionSecondary={{ label: 'Log out', onClick: () => {} }}
+        onDismiss={() => {}}
+      />
+    </div>
+  );
+};

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import Button from '../../button';
+import { Typography } from '../../common';
+import Title from '../../title';
+import AvatarView, { AvatarViewProps } from '../../avatarView';
+import Image from '../../image';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePrompt } from '../PrimitivePrompt';
+import { SentimentSurfaceProps } from '../../sentimentSurface';
+import { BadgeAssetsProps } from '../../badge';
+
+export type ActionPromptProps = {
+  sentiment?: SentimentSurfaceProps['sentiment'];
+  title: ReactNode;
+  description?: ReactNode;
+  onDismiss?: () => void;
+  media?: {
+    imgSrc?: string;
+    avatar: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+      asset?: AvatarViewProps['children'];
+      badge?: Pick<BadgeAssetsProps, 'flagCode' | 'status'>;
+    };
+    'aria-label'?: string;
+  };
+  actionPrimary: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+};
+
+export const ActionPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onDismiss,
+  media,
+  actionPrimary,
+  actionSecondary,
+  id,
+  className,
+  'data-testid': testId,
+}: ActionPromptProps) => {
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return <Image src={media.imgSrc} alt={media['aria-label'] ?? ''} />;
+    }
+    if (media?.avatar) {
+      return (
+        <AvatarView {...media.avatar} size={48}>
+          {media.avatar.asset}
+        </AvatarView>
+      );
+    }
+    return <StatusIcon size={48} sentiment={sentiment === 'proposition' ? 'success' : sentiment} />;
+  };
+
+  return (
+    <PrimitivePrompt
+      id={id}
+      sentiment={sentiment}
+      data-testid={testId}
+      className={clsx('wds-action-prompt', `wds-action-prompt--${sentiment}`, className)}
+      media={renderMedia()}
+      actions={
+        <>
+          {actionSecondary && (
+            // @ts-expect-error later
+            <Button
+              size="md"
+              priority="secondary"
+              href={actionSecondary.href}
+              v2
+              onClick={actionSecondary.onClick}
+            >
+              {actionSecondary.label}
+            </Button>
+          )}
+          {/* @ts-expect-error later */}
+          <Button
+            v2
+            size="md"
+            priority="primary"
+            href={actionPrimary.href}
+            onClick={actionPrimary.onClick}
+          >
+            {actionPrimary.label}
+          </Button>
+        </>
+      }
+      onDismiss={onDismiss}
+    >
+      <div>
+        <Title type={Typography.TITLE_BODY}>{title}</Title>
+        {description && <Body>{description}</Body>}
+      </div>
+    </PrimitivePrompt>
+  );
+};
+
+export default ActionPrompt;

package/src/prompt/ActionPrompt/index.ts

@@ -0,0 +1,2 @@
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -0,0 +1,3 @@
+.wds-info-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+}

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -0,0 +1,3 @@
+.wds-info-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+}

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -0,0 +1,216 @@
+import { InfoPrompt } from './InfoPrompt';
+
+export default {
+  title: 'Prompts/InfoPrompt',
+  component: InfoPrompt,
+};
+
+export const AllSentiments = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+      {/* Positive */}
+      <InfoPrompt
+        sentiment="positive"
+        title="Title (Positive)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="positive"
+        title="Title (Positive)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Link)', as: 'a', href: '#' }}
+      />
+
+      {/* Warning */}
+      <InfoPrompt
+        sentiment="warning"
+        title="Title (Warning)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="warning"
+        title="Title (Warning)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Link)', as: 'a', href: '#' }}
+      />
+
+      {/* Negative */}
+      <InfoPrompt
+        sentiment="negative"
+        title="Title (Negative)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="negative"
+        title="Title (Negative)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Link)', as: 'a', href: '#' }}
+      />
+
+      {/* Neutral */}
+      <InfoPrompt
+        sentiment="neutral"
+        title="Title (Neutral)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="neutral"
+        title="Title (Neutral)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Link)', as: 'a', href: '#' }}
+      />
+
+      {/* Proposition */}
+      <InfoPrompt
+        sentiment="proposition"
+        title="Title (Proposition)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="proposition"
+        title="Title (Proposition)"
+        description="Description"
+        primaryAction={{ label: 'Link/Action (Link)', as: 'a', href: '#' }}
+      />
+    </div>
+  );
+};
+
+export const TitleAndActionOnly = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+      <InfoPrompt
+        sentiment="positive"
+        title="Title (Positive)"
+        description=""
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="warning"
+        title="Title (Warning)"
+        description=""
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="negative"
+        title="Title (Negative)"
+        description=""
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="neutral"
+        title="Title (Neutral)"
+        description=""
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+      <InfoPrompt
+        sentiment="proposition"
+        title="Title (Proposition)"
+        description=""
+        primaryAction={{ label: 'Link/Action (Button)', as: 'button', onClick: () => {} }}
+        onClose={() => {}}
+      />
+    </div>
+  );
+};
+
+export const DescriptionOnly = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+      <InfoPrompt sentiment="positive" description="Description" onClose={() => {}} />
+      <InfoPrompt sentiment="positive" description="Description" />
+      <InfoPrompt sentiment="warning" description="Description" onClose={() => {}} />
+      <InfoPrompt sentiment="warning" description="Description" />
+      <InfoPrompt sentiment="negative" description="Description" onClose={() => {}} />
+      <InfoPrompt sentiment="negative" description="Description" />
+      <InfoPrompt sentiment="neutral" description="Description" onClose={() => {}} />
+      <InfoPrompt sentiment="neutral" description="Description" />
+      <InfoPrompt sentiment="proposition" description="Description" onClose={() => {}} />
+      <InfoPrompt sentiment="proposition" description="Description" />
+    </div>
+  );
+};
+
+export const TitleAndDescriptionOnly = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+      <InfoPrompt
+        sentiment="positive"
+        title="Title (Positive)"
+        description="Description"
+        onClose={() => {}}
+      />
+      <InfoPrompt sentiment="positive" title="Title (Positive)" description="Description" />
+      <InfoPrompt
+        sentiment="warning"
+        title="Title (Warning)"
+        description="Description"
+        onClose={() => {}}
+      />
+      <InfoPrompt sentiment="warning" title="Title (Warning)" description="Description" />
+      <InfoPrompt
+        sentiment="negative"
+        title="Title (Negative)"
+        description="Description"
+        onClose={() => {}}
+      />
+      <InfoPrompt sentiment="negative" title="Title (Negative)" description="Description" />
+      <InfoPrompt
+        sentiment="neutral"
+        title="Title (Neutral)"
+        description="Description"
+        onClose={() => {}}
+      />
+      <InfoPrompt sentiment="neutral" title="Title (Neutral)" description="Description" />
+      <InfoPrompt
+        sentiment="proposition"
+        title="Title (Proposition)"
+        description="Description"
+        onClose={() => {}}
+      />
+      <InfoPrompt sentiment="proposition" title="Title (Proposition)" description="Description" />
+    </div>
+  );
+};
+
+export const PrimaryActionAsButton = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
+      <InfoPrompt
+        sentiment="neutral"
+        title="Action with Button"
+        description="This example uses as='button' for the primary action"
+        primaryAction={{ label: 'Click me', as: 'button', onClick: () => alert('Button clicked!') }}
+        onClose={() => {}}
+      />
+    </div>
+  );
+};
+
+export const PrimaryActionAsLink = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
+      <InfoPrompt
+        sentiment="neutral"
+        title="Action with Link"
+        description="This example uses as='a' (anchor) for the primary action"
+        primaryAction={{ label: 'Visit page', as: 'a', href: 'https://wise.com', target: '_blank' }}
+        onClose={() => {}}
+      />
+    </div>
+  );
+};

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -0,0 +1,92 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import Button from '../../button';
+import { Typography } from '../../common';
+import Title from '../../title';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePrompt } from '../PrimitivePrompt';
+
+type PrimaryAction = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+  label: ButtonProps['children'];
+  as?: 'button' | 'a';
+};
+
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+  sentiment?: 'positive' | 'neutral' | 'warning' | 'negative' | 'proposition';
+  title?: ReactNode;
+  description: ReactNode;
+  onClose?: () => void;
+  media?: {
+    asset: ReactNode;
+    'aria-label': string;
+  };
+  primaryAction?: PrimaryAction;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+};
+
+export const InfoPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onClose,
+  media,
+  primaryAction,
+  id,
+  className,
+  'data-testid': testId,
+  ...restProps
+}: InfoPromptProps) => {
+  const surfaceSentiment = sentiment === 'positive' ? 'success' : sentiment;
+
+  const renderMedia = () => {
+    if (media?.asset) {
+      return media.asset;
+    }
+    return (
+      <StatusIcon
+        size={48}
+        sentiment={surfaceSentiment === 'proposition' ? 'success' : surfaceSentiment}
+      />
+    );
+  };
+
+  return (
+    <PrimitivePrompt
+      id={id}
+      sentiment={surfaceSentiment}
+      data-testid={testId}
+      className={clsx('wds-info-prompt', `wds-info-prompt--${sentiment}`, className)}
+      media={renderMedia()}
+      actions={
+        primaryAction ? (
+          // @ts-expect-error later
+          <Button
+            v2
+            size="md"
+            priority="tertiary"
+            as={primaryAction.as}
+            href={primaryAction.href}
+            target={primaryAction.target}
+            onClick={primaryAction.onClick}
+          >
+            {primaryAction.label}
+          </Button>
+        ) : undefined
+      }
+      onDismiss={onClose}
+      {...restProps}
+    >
+      <div>
+        {title && <Title type={Typography.TITLE_BODY}>{title}</Title>}
+        <Body>{description}</Body>
+      </div>
+    </PrimitivePrompt>
+  );
+};
+
+export default InfoPrompt;

package/src/prompt/InfoPrompt/index.ts

@@ -0,0 +1,2 @@
+export type { InfoPromptProps } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';

package/src/prompt/index.ts

@@ -4,3 +4,11 @@
 // InlinePrompt
 export type { InlinePromptProps } from './InlinePrompt';
 export { InlinePrompt } from './InlinePrompt';
+
+// ActionPrompt
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';
+
+// InfoPrompt
+export type { InfoPromptProps } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';