@transferwise/components 0.0.0-experimental-8978349 → 0.0.0-experimental-a918fce

package/build/main.css

@@ -5370,7 +5370,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
@@ -7423,3 +7423,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/build/styles/main.css

@@ -5370,7 +5370,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
@@ -7423,3 +7423,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,12 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -33,7 +33,7 @@
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;

package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { AvatarViewProps } from '../../avatarView';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePromptProps } from '../PrimitivePrompt';
+import { BadgeAssetsProps } from '../../badge';
+export type ActionPromptProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    media?: {
+        imgSrc?: string;
+        avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+            asset?: AvatarViewProps['children'];
+            badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+        };
+        'aria-label'?: string;
+    };
+    actionPrimary: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+        label: ButtonProps['children'];
+    };
+    actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+        label: ButtonProps['children'];
+    };
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, actionPrimary, actionSecondary, id, className, "data-testid": testId, }: ActionPromptProps) => import("react").JSX.Element;
+export default ActionPrompt;
+//# sourceMappingURL=ActionPrompt.d.ts.map

package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAChE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;CACH,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,4HAW1B,iBAAiB,gCA6EnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/prompt/ActionPrompt/index.d.ts

@@ -0,0 +1,3 @@
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';
+//# sourceMappingURL=index.d.ts.map

package/build/types/prompt/ActionPrompt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8978349",
+  "version": "0.0.0-experimental-a918fce",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.26.1",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.1"
+    "@wise/components-theming": "1.10.1",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/main.css

@@ -5370,7 +5370,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
@@ -7423,3 +7423,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/src/main.less

@@ -86,6 +86,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,12 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -0,0 +1,10 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-gap: var(--size-10) var(--size-16);
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+}

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

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { Bank } from '@transferwise/icons';
+import { ActionPrompt } from './ActionPrompt';
+import { lorem10 } from '../../test-utils';
+import { allModes } from '../../../.storybook/modes';
+
+export default {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+};
+
+export const AllSentiments = {
+  render: () => {
+    return (['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
+      (sentiment) => (
+        <ActionPrompt
+          key={sentiment}
+          sentiment={sentiment}
+          title="Title"
+          description={lorem10}
+          actionPrimary={{ label: 'Primary', onClick: () => {} }}
+          actionSecondary={{ label: 'Secondary', onClick: () => {} }}
+          className="m-b-2"
+          onDismiss={() => {
+            console.log('empty callback');
+          }}
+        />
+      ),
+    );
+  },
+};
+
+export const Mobile = {
+  ...AllSentiments,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
+
+export const PrimaryActionOnly = () => {
+  return (
+    <ActionPrompt
+      sentiment="proposition"
+      title="Payment successful"
+      description="Your money is on its way"
+      actionPrimary={{ label: 'View details', onClick: () => {} }}
+      onDismiss={() => {}}
+    />
+  );
+};
+
+export const WithoutDescription = () => {
+  return (
+    <>
+      <ActionPrompt
+        sentiment="warning"
+        title="Session expiring soon"
+        actionPrimary={{ label: 'Stay logged in', onClick: () => {} }}
+        actionSecondary={{ label: 'Log out', onClick: () => {} }}
+        className="m-b-2"
+        onDismiss={() => {}}
+      />
+      <ActionPrompt
+        sentiment="success"
+        title="Session expiring soon"
+        actionPrimary={{ label: 'Stay logged in', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        title="Session expiring soon"
+        actionPrimary={{ label: 'Stay logged in', onClick: () => {} }}
+      />
+    </>
+  );
+};
+
+export const Media = () => {
+  return (
+    <>
+      <ActionPrompt
+        sentiment="neutral"
+        title="Custom image"
+        description={lorem10}
+        media={{ imgSrc: '../../wise-card.svg' }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        sentiment="neutral"
+        title="Profile Image"
+        description={lorem10}
+        media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Business Profile"
+        description={lorem10}
+        media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        sentiment="negative"
+        title="Personal Profile"
+        description={lorem10}
+        media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        sentiment="warning"
+        title="Custom Icon"
+        description={lorem10}
+        media={{ avatar: { asset: <Bank /> } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        className="m-b-2"
+      />
+      <ActionPrompt
+        sentiment="success"
+        title="Initials"
+        description={lorem10}
+        media={{ avatar: { profileName: 'John Doe' } }}
+        actionPrimary={{ label: 'Invite now', onClick: () => {} }}
+        actionSecondary={{ label: 'Maybe later', onClick: () => {} }}
+      />
+    </>
+  );
+};
+
+export const OnDismiss = () => {
+  const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
+  const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);
+  return (
+    <>
+      {showNeutralPrompt && (
+        <ActionPrompt
+          sentiment="proposition"
+          title="Payment successful"
+          description="Your money is on its way"
+          actionPrimary={{ label: 'View details', onClick: () => {} }}
+          className="m-b-2"
+          onDismiss={() => setShowNeutralPrompt(false)}
+        />
+      )}
+      {showSuccessPrompt && (
+        <ActionPrompt
+          sentiment="success"
+          title="Payment successful"
+          description="Your money is on its way"
+          actionPrimary={{ label: 'View details', onClick: () => {} }}
+          onDismiss={() => setShowSuccessPrompt(false)}
+        />
+      )}
+    </>
+  );
+};

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -0,0 +1,125 @@
+import { ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import Button from '../../button';
+import { Breakpoint, Typography } from '../../common';
+import AvatarView, { AvatarViewProps } from '../../avatarView';
+import Image from '../../image';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+import { BadgeAssetsProps } from '../../badge';
+import { useScreenSize } from '../../common/hooks/useScreenSize';
+import { GiftBox } from '@transferwise/icons';
+
+export type ActionPromptProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  media?: {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+      asset?: AvatarViewProps['children'];
+      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+  };
+  actionPrimary: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+
+export const ActionPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onDismiss,
+  media,
+  actionPrimary,
+  actionSecondary,
+  id,
+  className,
+  'data-testid': testId,
+}: ActionPromptProps) => {
+  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return (
+        <Image
+          src={media.imgSrc}
+          className="wds-action-prompt--media-image"
+          alt={media['aria-label'] ?? ''}
+        />
+      );
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge
+        ? media.avatar.badge
+        : sentiment === 'proposition'
+          ? {}
+          : { status: sentiment };
+      return (
+        <AvatarView {...media.avatar} badge={badge} size={48}>
+          {media.avatar.asset}
+        </AvatarView>
+      );
+    }
+    return sentiment === 'proposition' ? (
+      <AvatarView size={48}>
+        <GiftBox />
+      </AvatarView>
+    ) : (
+      <StatusIcon size={48} sentiment={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 onClick type mismatch
+            <Button
+              v2
+              size="md"
+              priority="secondary"
+              href={actionSecondary.href}
+              block={isMobile}
+              onClick={actionSecondary?.onClick}
+            >
+              {actionSecondary.label}
+            </Button>
+          )}
+          {/* @ts-expect-error onClick type mismatch */}
+          <Button
+            v2
+            size="md"
+            priority="primary"
+            href={actionPrimary.href}
+            block={isMobile}
+            onClick={actionPrimary.onClick}
+          >
+            {actionPrimary.label}
+          </Button>
+        </>
+      }
+      onDismiss={onDismiss}
+    >
+      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
+        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
+        {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/PrimitivePrompt/PrimitivePrompt.css

@@ -33,7 +33,7 @@
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -29,7 +29,7 @@
     gap: var(--Prompt-actions-gap, var(--size-8));
     grid-column-start: 2;
 
-    @media (--screen-md-max) {
+    @media (--screen-sm-max) {
       grid-column: span 2;
       width: 100%;
     }