@transferwise/components 46.35.0 → 46.36.0

package/build/main.css

@@ -3637,6 +3637,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   align-self: var(--nudge-content-flex-alignment);
   display: flex;
   flex-direction: column;
+  align-items: start;
 }
 .wds-nudge-container .wds-nudge-content .wds-nudge-title {
   color: var(--nudge-title-color);

package/build/styles/main.css

@@ -3637,6 +3637,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   align-self: var(--nudge-content-flex-alignment);
   display: flex;
   flex-direction: column;
+  align-items: start;
 }
 .wds-nudge-container .wds-nudge-content .wds-nudge-title {
   color: var(--nudge-title-color);

package/build/styles/nudge/Nudge.css

@@ -155,6 +155,7 @@
   align-self: var(--nudge-content-flex-alignment);
   display: flex;
   flex-direction: column;
+  align-items: start;
 }
 .wds-nudge-container .wds-nudge-content .wds-nudge-title {
   color: var(--nudge-title-color);

package/build/types/common/action/Action.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type ActionOptions = {
+    'aria-label'?: string;
+    href?: string;
+    target?: string;
+    text: React.ReactNode;
+    onClick?: () => void;
+};
+type Props = {
+    action: ActionOptions;
+    className?: string;
+};
+export declare function Action({ action, className }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Action.d.ts.map

package/build/types/common/action/Action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B,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,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,+BA0BlD"}

package/build/types/nudge/Nudge.d.ts

@@ -1,5 +1,6 @@
 import { Assets } from '@wise/art';
 import { ReactNode, MouseEvent } from 'react';
+import { ActionOptions } from '../common/action/Action';
 export declare const STORAGE_NAME = "dismissedNudges";
 type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}`;
 type BaseProps = {
@@ -8,14 +9,13 @@ type BaseProps = {
     /** Media name  */
     mediaName?: MediaNameType;
     title: ReactNode;
-    /** Element inside link */
     link?: ReactNode;
-    /** Href for the link */
     href?: string;
-    /** Fired when the user clicks on the link */
     onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
     /** Fired when the user clicks on close button */
     onDismiss?: () => void;
+    /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
+    action?: ActionOptions;
     className?: string;
 };
 export interface OptionalId extends BaseProps {
@@ -36,6 +36,6 @@ export interface RequiredPersistProps extends BaseProps {
     isPreviouslyDismissed?: (value: boolean) => void;
 }
 export type Props = OptionalId | RequiredPersistProps;
-declare const Nudge: ({ media, mediaName, title, link, href, onClick, onDismiss, persistDismissal, isPreviouslyDismissed, id, className, }: Props) => import("react").JSX.Element | null;
+declare const Nudge: ({ media, mediaName, title, link, href, onClick, onDismiss, persistDismissal, isPreviouslyDismissed, id, className, action, }: Props) => import("react").JSX.Element | null;
 export default Nudge;
 //# sourceMappingURL=Nudge.d.ts.map

package/build/types/nudge/Nudge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAQnE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAmB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;AAE7B,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,yHAYR,KAAK,uCA+EP,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAmB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;AAE7B,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,iIAaR,KAAK,uCAgFP,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA+EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}

package/build/types/summary/Summary.d.ts

@@ -1,14 +1,12 @@
 import { ElementType, ReactNode } from 'react';
 import { StatusDone, StatusNotDone, StatusPending } from '../common';
 import { InfoProps } from '../info';
-import { LinkProps } from '../link';
+import { ActionOptions } from '../common/action/Action';
 export interface Props {
     /**
      * Action displayed at the bottom of the Summary
      */
-    action?: Pick<LinkProps, 'href' | 'aria-label' | 'target' | 'onClick'> & {
-        text: ReactNode;
-    };
+    action?: ActionOptions;
     /**
      * Decides which html element should wrap the Summary
      */

package/build/types/summary/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QACvE,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCA0FP,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAkBhE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCAgFP,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.35.0",
+  "version": "46.36.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,9 +94,9 @@
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
     "storybook": "^7.6.19",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.10.0",
-    "@wise/components-theming": "1.3.0"
+    "@wise/components-theming": "1.3.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/alert/Alert.tsx

@@ -4,12 +4,12 @@ import { useState, useRef, useEffect } from 'react';
 import Body from '../body/Body';
 import { Sentiment, Size, Typography, Variant } from '../common';
 import { CloseButton } from '../common/closeButton';
-import Link from '../link';
 import StatusIcon from '../statusIcon';
 import Title from '../title/Title';
 import { logActionRequired } from '../utilities';
 
 import InlineMarkdown from './inlineMarkdown';
+import { Action } from '../common/action/Action';
 
 export type AlertAction = {
   'aria-label'?: string;
@@ -181,7 +181,7 @@ export default function Alert({
               {children || <InlineMarkdown>{message}</InlineMarkdown>}
             </Body>
           </div>
-          {action && <Action action={action} />}
+          {action && <Action action={action} className="m-t-1" />}
         </div>
       </div>
       {onDismiss && (
@@ -208,31 +208,3 @@ 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>
-  );
-}

package/src/common/action/Action.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import Link from '../../link';
+import { Typography } from '../propsValues/typography';
+
+export type ActionOptions = {
+  'aria-label'?: string;
+  href?: string;
+  target?: string;
+  text: React.ReactNode;
+  onClick?: () => void;
+};
+
+type Props = {
+  action: ActionOptions;
+  className?: string;
+};
+
+export function Action({ action, className }: Props) {
+  if ('href' in action) {
+    return (
+      <Link
+        href={action.href}
+        className={className}
+        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={classNames('btn-unstyled np-text-link-large', className)}
+      onClick={action.onClick}
+    >
+      {action.text}
+    </button>
+  );
+}

package/src/main.css

@@ -3637,6 +3637,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   align-self: var(--nudge-content-flex-alignment);
   display: flex;
   flex-direction: column;
+  align-items: start;
 }
 .wds-nudge-container .wds-nudge-content .wds-nudge-title {
   color: var(--nudge-title-color);

package/src/nudge/Nudge.css

@@ -155,6 +155,7 @@
   align-self: var(--nudge-content-flex-alignment);
   display: flex;
   flex-direction: column;
+  align-items: start;
 }
 .wds-nudge-container .wds-nudge-content .wds-nudge-title {
   color: var(--nudge-title-color);

package/src/nudge/Nudge.less

@@ -90,6 +90,7 @@
       align-self: var(--nudge-content-flex-alignment);
       display: flex;
       flex-direction: column;
+      align-items: start;
 
       .wds-nudge-title {
         color: var(--nudge-title-color);

package/src/nudge/Nudge.story.tsx

@@ -135,3 +135,37 @@ export const DefaultWithPersist = () => {
     </div>
   );
 };
+
+export const WithAction = () => {
+  return (
+    <div>
+      <Nudge
+        mediaName="globe"
+        title="Text that is no longer than two lines."
+        id="NEPTUNE_TEST_COMPONENT"
+        className="m-y-2"
+        persistDismissal
+        isPreviouslyDismissed={action('is previously dismissed first alert')}
+        action={{
+          href: '#',
+          text: 'Learn more',
+        }}
+        onDismiss={action('dismissed')}
+      />
+
+      <Nudge
+        mediaName="globe"
+        title="Text that is no longer than two lines2."
+        id="NEPTUNE_TEST_COMPONENT_2"
+        className="m-y-2"
+        persistDismissal
+        isPreviouslyDismissed={action('is previously dismissed second alert')}
+        action={{
+          onClick: action('action click'),
+          text: 'Perform action',
+        }}
+        onDismiss={action('dismissed')}
+      />
+    </div>
+  );
+};

package/src/nudge/Nudge.tsx

@@ -3,9 +3,10 @@ import classNames from 'classnames';
 import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 
 import Body from '../body';
-import { Size, Typography } from '../common';
+import { Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
 import Link from '../link';
+import { Action, ActionOptions } from '../common/action/Action';
 
 // WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
 export const STORAGE_NAME = 'dismissedNudges';
@@ -45,14 +46,13 @@ type BaseProps = {
   /** Media name  */
   mediaName?: MediaNameType;
   title: ReactNode;
-  /** Element inside link */
   link?: ReactNode;
-  /** Href for the link */
   href?: string;
-  /** Fired when the user clicks on the link */
   onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
   /** Fired when the user clicks on close button */
   onDismiss?: () => void;
+  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
+  action?: ActionOptions;
   className?: string;
 };
 
@@ -89,6 +89,7 @@ const Nudge = ({
   isPreviouslyDismissed,
   id,
   className,
+  action,
 }: Props) => {
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
@@ -161,6 +162,7 @@ const Nudge = ({
               {link}
             </Link>
           )}
+          {action && <Action action={action} className="m-t-1" />}
         </div>
         {onDismiss || persistDismissal ? (
           <CloseButton className="wds-nudge-control" size="sm" onClick={handleOnDismiss} />

package/src/select/Select.js

@@ -1,8 +1,7 @@
-import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, useId } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';

package/src/summary/Summary.tsx

@@ -18,10 +18,10 @@ import {
   Sentiment,
 } from '../common';
 import Info, { InfoProps } from '../info';
-import Link, { LinkProps } from '../link';
 import StatusIcon from '../statusIcon';
 
 import messages from './Summary.messages';
+import { Action, ActionOptions } from '../common/action/Action';
 
 const BadgeIcons = {
   [Status.DONE]: CheckCircleIcon,
@@ -43,9 +43,7 @@ export interface Props {
   /**
    * Action displayed at the bottom of the Summary
    */
-  action?: Pick<LinkProps, 'href' | 'aria-label' | 'target' | 'onClick'> & {
-    text: ReactNode;
-  };
+  action?: ActionOptions;
   /**
    * Decides which html element should wrap the Summary
    */
@@ -168,17 +166,7 @@ const Summary = ({
             {description}
           </Body>
         )}
-        {action && (
-          <Link
-            href={action.href}
-            target={action.target}
-            className="np-summary__action"
-            aria-label={action['aria-label']}
-            onClick={action.onClick}
-          >
-            {action.text}
-          </Link>
-        )}
+        {action && <Action action={action} className="np-summary__action" />}
       </div>
       {info && (
         <Info