@transferwise/components 46.33.0 → 46.34.0

package/build/types/alert/Alert.d.ts

@@ -2,9 +2,10 @@
 import { Sentiment, Size, Variant } from '../common';
 export type AlertAction = {
     'aria-label'?: string;
-    href: string;
+    href?: string;
     target?: string;
     text: React.ReactNode;
+    onClick?: () => void;
 };
 /** @deprecated Use `"top" | "bottom"` instead. */
 type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
@@ -26,7 +27,7 @@ export interface AlertProps {
     icon?: React.ReactElement;
     /** Title for the alert component */
     title?: string;
-    /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
+    /** The main body of the alert. Accepts plain text and bold words specified with **double stars */
     message?: string;
     /** The presence of the onDismiss handler will trigger the visibility of the close button */
     onDismiss?: React.MouseEventHandler<HTMLButtonElement>;

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,GACpB,EAAE,UAAU,+BA+GZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,GACpB,EAAE,UAAU,+BAqGZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.33.0",
+  "version": "46.34.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -97,8 +97,8 @@
     "rollup": "^4.17.2",
     "storybook": "^7.6.19",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.10.0",
-    "@wise/components-theming": "1.2.2"
+    "@wise/components-theming": "1.2.2",
+    "@transferwise/neptune-css": "14.10.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/alert/Alert.spec.tsx

@@ -175,6 +175,18 @@ describe('Alert', () => {
       expect(element).not.toHaveAttribute('target');
     });
 
+    it('sets text and onClick', () => {
+      action = {
+        onClick: jest.fn(),
+        text: 'Learn more',
+      };
+      render(<Alert action={action} message={message} />);
+
+      userEvent.click(screen.getByText('Learn more'));
+
+      expect(action.onClick).toHaveBeenCalled();
+    });
+
     it('adds additional attributes', () => {
       action = {
         'aria-label': 'Learn more about fluffy kittens',

package/src/alert/Alert.story.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-alert */
 import { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
@@ -46,7 +47,7 @@ export const Basic: Story = {
   },
 };
 
-export const WithAction: Story = {
+export const WithLinkAction: Story = {
   args: {
     action: {
       href: '/',
@@ -55,6 +56,15 @@ export const WithAction: Story = {
   },
 };
 
+export const WithButtonAction: Story = {
+  args: {
+    action: {
+      onClick: action('alert action clicked'),
+      text: 'Open',
+    },
+  },
+};
+
 export const WithArrow: Story = {
   args: {
     arrow: AlertArrowPosition.TOP_LEFT,

package/src/alert/Alert.tsx

@@ -13,9 +13,10 @@ import InlineMarkdown from './inlineMarkdown';
 
 export type AlertAction = {
   'aria-label'?: string;
-  href: string;
+  href?: string;
   target?: string;
   text: React.ReactNode;
+  onClick?: () => void;
 };
 
 /** @deprecated Use `"top" | "bottom"` instead. */
@@ -44,7 +45,7 @@ export interface AlertProps {
   icon?: React.ReactElement;
   /** Title for the alert component */
   title?: string;
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
+  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */
   message?: string;
   /** The presence of the onDismiss handler will trigger the visibility of the close button */
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
@@ -144,7 +145,7 @@ export default function Alert({
       onTouchEnd={(event) => {
         if (
           shouldFire &&
-          action &&
+          action?.href &&
           // Check if current event is triggered from closeButton
           event.target instanceof Node &&
           closeButtonReference.current &&
@@ -180,17 +181,7 @@ export default function Alert({
               {children || <InlineMarkdown>{message}</InlineMarkdown>}
             </Body>
           </div>
-          {action && (
-            <Link
-              href={action.href}
-              className="m-t-1"
-              aria-label={action['aria-label']}
-              target={action.target}
-              type={Typography.LINK_LARGE}
-            >
-              {action.text}
-            </Link>
-          )}
+          {action && <Action action={action} />}
         </div>
       </div>
       {onDismiss && (
@@ -217,3 +208,31 @@ function alertArrowClassNames(arrow: `${AlertArrowPosition}`) {
       return 'arrow';
   }
 }
+
+function Action({ action }: { action: AlertAction }) {
+  if ('href' in action) {
+    return (
+      <Link
+        href={action.href}
+        className="m-t-1"
+        aria-label={action['aria-label']}
+        target={action.target}
+        type={Typography.LINK_LARGE}
+        onClick={action.onClick}
+      >
+        {action.text}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      aria-label={action['aria-label']}
+      className="btn-unstyled np-text-link-large m-t-1"
+      onClick={action.onClick}
+    >
+      {action.text}
+    </button>
+  );
+}