@transferwise/components 0.0.0-experimental-ffd4b26 → 0.0.0-experimental-dfa8310

package/build/main.css

@@ -4198,14 +4198,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/main.css

@@ -4198,14 +4198,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/build/types/common/hooks/useVirtualKeyboard.d.ts

@@ -1,2 +1,7 @@
+/**
+ * This progressive enhancement uses an experimental API, it might change,
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
 export declare function useVirtualKeyboard(): void;
 //# sourceMappingURL=useVirtualKeyboard.d.ts.map

package/build/types/common/hooks/useVirtualKeyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,SAajC"}
+{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,kBAAkB,SAajC"}

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;
+    sentiment?: `${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, sentiment: 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,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA4CZ,CAAC"}

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":"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":"AACA,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,qBAmBlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ffd4b26",
+  "version": "0.0.0-experimental-dfa8310",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,7 +93,7 @@
     "rollup": "^4.17.2",
     "storybook": "^8.1.10",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.10.0",
+    "@transferwise/neptune-css": "14.11.0",
     "@wise/components-theming": "1.3.0"
   },
   "peerDependencies": {

package/src/common/hooks/useVirtualKeyboard.ts

@@ -1,5 +1,10 @@
 import { useEffect } from 'react';
 
+/**
+ * This progressive enhancement uses an experimental API, it might change, 
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
 export function useVirtualKeyboard() {
   useEffect(() => {
     /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */

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,43 +19,22 @@ 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>
-  );
-};
-
-export const WithHelp = () => {
-  const [value, setValue] = useState<string | undefined>('This is some text');
-  return (
-    <Field label="Phone number" hint="This is a helpful message">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
-  );
-};
-
-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}>
-      <Input
-        value={value}
-        onChange={({ target }) => {
-          setValue(target.value);
-          setError(undefined);
-        }}
-        onBlur={() => {
-          if (!value) {
-            setError('This is a required field');
-          } else {
-            setError(undefined);
-          }
-        }}
-      />
-    </Field>
+    <div>
+      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" message="This is a helpful message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    </div>
   );
 };

package/src/field/Field.tests.story.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { Input } from '../inputs/Input';
+import { Field } from './Field';
+import { Sentiment } from '../common';
+
+export default {
+  component: Field,
+  title: 'Field/Tests',
+};
+
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field
+      label="Phone number"
+      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
+    >
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          setError('Something went wrong');
+        }}
+      />
+    </Field>
+  );
+};

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;
+  sentiment?: `${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,
+  sentiment: propType = Sentiment.NEUTRAL,
+  className,
+  children,
+  ...props
+}: FieldProps) => {
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === 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': sentiment === Sentiment.POSITIVE,
+                  'has-warning': sentiment === Sentiment.WARNING,
                   'has-error': hasError,
-                  'has-info': hasHint,
+                  'has-info': sentiment === 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={sentiment} 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,14 +77,18 @@ 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>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{message}</InlineAlert>
+        <InlineAlert type="positive">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </InlineAlert>
       </div>
       <div className="form-group has-neutral">
         <label className="control-label" htmlFor="id3">

package/src/inlineAlert/InlineAlert.tsx

@@ -1,8 +1,8 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
-import { Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,15 +17,22 @@ export default function InlineAlert({
   className,
   children,
 }: InlineAlertProps) {
-  const danger = type === 'negative' || type === 'error';
   return (
     <div
       role="alert"
       id={id}
-      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+      className={classNames(
+        'alert alert-detach',
+        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
+        className,
+      )}
     >
-      {danger && <AlertCircleIcon />}
-      <div>{children}</div>
+      <div className="d-inline-flex">
+        {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
+          <StatusIcon sentiment={type} size={Size.SMALL} />
+        )}
+        <div className="np-text-body-default">{children}</div>
+      </div>
     </div>
   );
 }

package/src/main.css

@@ -4198,14 +4198,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/src/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.less

@@ -60,7 +60,8 @@
   }
 }
 
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 
@@ -68,6 +69,7 @@
   background-color: var(--color-content-secondary);
 }
 
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.tsx

@@ -26,7 +26,7 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
   return (
     <span
       data-testid="status-icon"
-      className={classNames('status-circle', 'status-circle-' + size, sentiment)}
+      className={classNames('status-circle', `status-circle-${size}`, sentiment)}
     >
       <Icon className={classNames('status-icon', iconColor)} />
     </span>