@transferwise/components 0.0.0-experimental-24e63f3 → 0.0.0-experimental-1d9df7f

package/build/index.mjs

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, CheckCircleFill, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -4849,12 +4849,29 @@ function InlineAlert({
   className,
   children
 }) {
-  const danger = type === 'negative' || type === 'error';
+  const getStatusIcon = sentiment => {
+    // TODO: When `Sentiment.SUCCESS` and `Sentiment.ERROR` will be completely removed from the codebase, we should rewrite this component to StatusIcon using only
+    switch (sentiment) {
+      case Sentiment.POSITIVE:
+      case Sentiment.SUCCESS:
+        return /*#__PURE__*/jsx(CheckCircleFill, {});
+      case Sentiment.WARNING:
+        return /*#__PURE__*/jsx(StatusIcon, {
+          sentiment: sentiment,
+          size: Size.SMALL
+        });
+      case Sentiment.NEGATIVE:
+      case Sentiment.ERROR:
+        return /*#__PURE__*/jsx(CrossCircleFill, {});
+      default:
+        return null;
+    }
+  };
   return /*#__PURE__*/jsxs("div", {
     role: "alert",
     id: id,
-    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
+    className: classNames('alert alert-detach', `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
+    children: [getStatusIcon(type), /*#__PURE__*/jsx("div", {
       children: children
     })]
   });
@@ -4869,7 +4886,7 @@ const Label = ({
   return /*#__PURE__*/jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    className: classNames('control-label d-flex flex-column gap-y-xs m-b-0', className),
     children: children
   });
 };
@@ -4877,13 +4894,15 @@ const Label = ({
 const Field = ({
   id,
   label,
-  hint,
-  error,
+  message: propMessage,
+  type: propType,
   className,
-  children
+  children,
+  ...props
 }) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+  const type = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = type === Sentiment.NEGATIVE;
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4893,26 +4912,24 @@ const Field = ({
     children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
+        value: message ? descriptionId : undefined,
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
+              'has-success': type === Sentiment.POSITIVE,
+              'has-warning': type === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': hasHint
+              'has-info': type === Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEUTRAL,
+            }), message && /*#__PURE__*/jsx(InlineAlert, {
+              type: type,
               id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
+              children: message
             })]
           })
         })