@transferwise/components 0.0.0-experimental-fed4f10 → 0.0.0-experimental-8d08be7

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;