@transferwise/components 0.0.0-experimental-1d9df7f → 0.0.0-experimental-a44fd6f

package/build/types/inlineAlert/InlineAlert.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Sentiment } from '../common';
 export interface InlineAlertProps {
     id?: string;
@@ -6,5 +6,5 @@ export interface InlineAlertProps {
     className?: string;
     children: ReactNode;
 }
-export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): import("react").JSX.Element;
+export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): React.JSX.Element;
 //# sourceMappingURL=InlineAlert.d.ts.map

package/build/types/inlineAlert/InlineAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BA+BlB"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,qBAoDlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1d9df7f",
+  "version": "0.0.0-experimental-a44fd6f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup": "^4.17.2",
     "storybook": "^8.1.10",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-1d9df7f",
+    "@transferwise/neptune-css": "0.0.0-experimental-a44fd6f",
     "@wise/components-theming": "1.3.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-1d9df7f",
+    "@transferwise/neptune-css": "0.0.0-experimental-a44fd6f",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/inlineAlert/InlineAlert.tsx

@@ -3,7 +3,7 @@ import {
   CrossCircleFill as CrossCircleIcon,
 } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';
@@ -37,6 +37,26 @@ export default function InlineAlert({
     }
   };
 
+  const hasTextChildren = (content: ReactNode) => {
+    let label = '';
+
+    const fillLabel = (childrenNodes: ReactNode) => {
+      React.Children.map(childrenNodes, (child: ReactNode) => {
+        if (typeof child === 'string') {
+          label += child;
+        }
+        if (typeof child === 'object' && React.isValidElement(child)) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          fillLabel(child?.props?.children as ReactNode);
+        }
+      });
+    };
+
+    fillLabel(content);
+
+    return !!label.length;
+  };
+
   return (
     <div
       role="alert"
@@ -47,7 +67,8 @@ export default function InlineAlert({
         className,
       )}
     >
-      {getStatusIcon(type as Sentiment)}
+      {/* We should show the status icon only if we have some text to show */}
+      {hasTextChildren(children) && getStatusIcon(type as Sentiment)}
       <div>{children}</div>
     </div>
   );