@transferwise/components 0.0.0-experimental-dbd40fc → 0.0.0-experimental-b5a5d96

package/src/Nudge/Nudge.tsx

@@ -25,7 +25,7 @@ const getLocalStorage = (): string[] => {
         return storage.map((item) => String(item));
       }
     }
-  } catch (error) {}
+  } catch {}
 
   return [];
 };
@@ -47,18 +47,41 @@ type MediaNameType =
   | `${Assets.DOCUMENTS}`;
 
 type BaseProps = {
-  /** @deprecated Use `mediaName` property instead. */
+  /**
+   * @deprecated Use `mediaName` instead.
+   * Legacy custom media content is no longer used by `Nudge`.
+   */
   media?: ReactNode;
-  /** Media name  */
+  /**
+   * Illustration asset name shown at the start of the nudge.
+   */
   mediaName?: MediaNameType;
+  /** Main nudge message content. */
   title: ReactNode;
+  /**
+   * Legacy CTA label content.
+   * Rendered only when `action` is not provided.
+   */
   link?: ReactNode;
+  /**
+   * Legacy CTA destination for `link`.
+   * Ignored when `action` is provided.
+   */
   href?: string;
+  /**
+   * Legacy click handler for `link`.
+   * Ignored when `action` is provided.
+   */
   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 */
+  /**
+   * Preferred CTA configuration rendered under the nudge body.
+   * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.
+   * If your label is short, use `aria-label` to provide more context.
+   */
   action?: AlertAction;
+  /** Optional class name applied to the root nudge container. */
   className?: string;
 };
 
@@ -97,6 +120,19 @@ const Nudge = ({
   action,
 }: NudgeProps) => {
   const intl = useIntl();
+  const hasLegacyLink = Boolean(link);
+  const hasAction = action != null;
+  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {
+      // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.
+      console.warn(
+        'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',
+      );
+    }
+  }, [hasAction, hasLegacyLink, href]);
+
   const getIsDismissed = useCallback(
     () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),
     [persistDismissal, id],
@@ -166,8 +202,7 @@ const Nudge = ({
           <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
             {title}
           </Body>
-          {/* Merge these two Link instances into one */}
-          {link && (
+          {shouldRenderLegacyLink && (
             <Link
               href={href}
               type={Typography.LINK_LARGE}

package/src/index.ts

@@ -94,6 +94,7 @@ export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
 export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
+export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup';
 export type { ModalProps } from './Modal';
 export type { MoneyProps } from './Money';
 export type {
@@ -253,6 +254,7 @@ export { default as LegacyListItem } from './_deprecated/LegacyListItem';
 export { default as Loader } from './Loader';
 export { default as Logo } from './Logo';
 export { default as Markdown } from './Markdown';
+export { default as Markup } from './Markup';
 export { default as Modal } from './Modal';
 export { default as Money } from './Money';
 export { default as MoneyInput } from './MoneyInput';

package/src/main.css

@@ -27121,7 +27121,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
-  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27140,7 +27139,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
-  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27159,7 +27157,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
-  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27168,7 +27165,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
-  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27203,13 +27199,6 @@ a[data-toggle="tooltip"] {
   position: relative;
 }
 
-.wds-Button:has(.wds-Button-icon--start):not(:has(.wds-Button-icon--end)) .wds-Button-label::after,
-.wds-Button:has(.wds-Button-icon--end):not(:has(.wds-Button-icon--start)) .wds-Button-label::before {
-  content: '';
-  width: var(--Button-iconSpacerSize);
-  flex-shrink: 0;
-}
-
 .wds-Button-loader {
   position: absolute;
   width: 100%;
@@ -30928,6 +30917,41 @@ button.np-link {
   height: var(--wds-logo-height);
 }
 
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+
+.wds-markup-paragraph {
+  margin: 0;
+}
+
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */

package/src/main.less

@@ -56,6 +56,7 @@
 @import "./Link/Link.less";
 @import "./Loader/Loader.less";
 @import "./Logo/Logo.less";
+@import "./Markup/Markup.less";
 @import "./Modal/Modal.less";
 @import "./MoneyInput/MoneyInput.less";
 @import "./ExpressiveMoneyInput/ExpressiveMoneyInput.less";