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

package/build/types/field/Field.d.ts

@@ -1,11 +1,16 @@
+import { Sentiment } from '../common';
 export type FieldProps = {
     /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
     id?: string | null;
     label: React.ReactNode;
+    /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
     hint?: React.ReactNode;
+    message?: React.ReactNode;
+    /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
     error?: React.ReactNode;
+    type?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
     className?: string;
     children?: React.ReactNode;
 };
-export declare const Field: ({ id, label, hint, error, className, children }: FieldProps) => import("react").JSX.Element;
+export declare const Field: ({ id, label, message: propMessage, type: propType, className, children, ...props }: FieldProps) => import("react").JSX.Element;
 //# sourceMappingURL=Field.d.ts.map

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,oDAAqD,UAAU,gCA8ChF,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,uFAQf,UAAU,gCA4CZ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,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,+BAYlB"}
+{"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"}

package/package.json

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

package/src/field/Field.story.tsx

@@ -2,10 +2,12 @@ import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
+import { Sentiment } from '../common';
 
 export default {
   component: Field,
   title: 'Field',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {
@@ -17,19 +19,27 @@ export const Basic = () => {
   );
 };
 
-export const WithErrorMessage = () => {
+export const WithStatusMessages = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number" error="This is a required field">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
+    <div>
+      <Field label="Phone number" type={Sentiment.POSITIVE} message="Positive message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" type={Sentiment.WARNING} message="Warning message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" type={Sentiment.NEGATIVE} message="This is a required field">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    </div>
   );
 };
 
 export const WithHelp = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number" hint="This is a helpful message">
+    <Field label="Phone number" message="This is a helpful message">
       <Input value={value} onChange={({ target }) => setValue(target.value)} />
     </Field>
   );
@@ -39,7 +49,11 @@ export const WithHelpAndErrorOnBlur = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   const [error, setError] = useState<string | undefined>(undefined);
   return (
-    <Field label="Phone number" hint="Please include country code" error={error}>
+    <Field
+      label="Phone number"
+      type={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
+    >
       <Input
         value={value}
         onChange={({ target }) => {

package/src/field/Field.tsx

@@ -15,15 +15,28 @@ export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   label: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
+  message?: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
+  type?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
   className?: string;
   children?: React.ReactNode;
 };
 
-export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+export const Field = ({
+  id,
+  label,
+  message: propMessage,
+  type: propType,
+  className,
+  children,
+  ...props
+}: FieldProps) => {
+  const type = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = type === Sentiment.NEGATIVE;
 
   const labelId = useId();
 
@@ -35,14 +48,16 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={hasError || hasHint ? descriptionId : undefined}>
+        <InputDescribedByProvider value={message ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <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,
               )}
@@ -51,14 +66,9 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
                 {label}
                 {children}
               </Label>
-              {hasHint && (
-                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
-                  {hint}
-                </InlineAlert>
-              )}
-              {hasError && (
-                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
-                  {error}
+              {message && (
+                <InlineAlert type={type} id={descriptionId}>
+                  {message}
                 </InlineAlert>
               )}
             </div>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -51,7 +51,7 @@ export const Basic = () => {
 
   return (
     <>
-      {/*eslint-disable-next-line react/no-adjacent-inline-elements */}
+      {/* eslint-disable-next-line react/no-adjacent-inline-elements */}
       <p>
         The styling for the input (the coloured border) and the visibility of the inline alert is
         controlled through the use of <code>has-***</code> classes which are applied to the{' '}
@@ -60,7 +60,11 @@ export const Basic = () => {
         element. The available classes are <code>has-error</code>, <code>has-info</code>,{' '}
         <code>has-warning</code> and <code>has-success</code>.
       </p>
-      <p>Where possible consumers should use Field instead of doing this manually.</p>
+      <p>
+        Where possible consumers should use{' '}
+        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
+        this manually.
+      </p>
       <div className={`form-group ${typeClass}`}>
         <label className="control-label" htmlFor="id0">
           Toggleable
@@ -73,9 +77,9 @@ export const Basic = () => {
           Negative
         </label>
         <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="error">{message}</InlineAlert>
+        <InlineAlert type="negative">{message}</InlineAlert>
       </div>
-      <div className="form-group has-positive">
+      <div className="form-group has-success">
         <label className="control-label" htmlFor="id2">
           Positive
         </label>

package/src/inlineAlert/InlineAlert.tsx

@@ -1,8 +1,12 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
+import {
+  CheckCircleFill as CheckCircleIcon,
+  CrossCircleFill as CrossCircleIcon,
+} from '@transferwise/icons';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 
-import { Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,14 +21,33 @@ export default function InlineAlert({
   className,
   children,
 }: InlineAlertProps) {
-  const danger = type === 'negative' || type === 'error';
+  const getStatusIcon = (sentiment: 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 <CheckCircleIcon />;
+      case Sentiment.WARNING:
+        return <StatusIcon sentiment={sentiment} size={Size.SMALL} />;
+      case Sentiment.NEGATIVE:
+      case Sentiment.ERROR:
+        return <CrossCircleIcon />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div
       role="alert"
       id={id}
-      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+      className={classNames(
+        'alert alert-detach',
+        `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type as Sentiment) ? 'danger' : type}`,
+        className,
+      )}
     >
-      {danger && <AlertCircleIcon />}
+      {getStatusIcon(type as Sentiment)}
       <div>{children}</div>
     </div>
   );

package/src/label/Label.tsx

@@ -12,7 +12,7 @@ export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
     <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}
     </label>