@transferwise/components 0.0.0-experimental-5a9bfa5 → 0.0.0-experimental-0cfd3cc

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

@@ -3,9 +3,11 @@ export type FieldProps = {
     id?: string | null;
     label: React.ReactNode;
     hint?: React.ReactNode;
+    success?: React.ReactNode;
+    warning?: React.ReactNode;
     error?: React.ReactNode;
     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, hint, success, warning, error, className, children, }: 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":"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,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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,uEASf,UAAU,gCA4DZ,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,+BAclB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5a9bfa5",
+  "version": "0.0.0-experimental-0cfd3cc",
   "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",
-    "@wise/components-theming": "1.3.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "0.0.0-experimental-0cfd3cc",
+    "@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-0cfd3cc",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/field/Field.story.tsx

@@ -17,6 +17,22 @@ export const Basic = () => {
   );
 };
 
+export const WithSuccessMessage = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Field label="Phone number" success="Positive message">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
+export const WithWarningMessage = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Field label="Phone number" warning="Warning message">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
 export const WithErrorMessage = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (

package/src/field/Field.tsx

@@ -16,12 +16,25 @@ export type FieldProps = {
   id?: string | null;
   label: React.ReactNode;
   hint?: React.ReactNode;
+  success?: React.ReactNode;
+  warning?: React.ReactNode;
   error?: React.ReactNode;
   className?: string;
   children?: React.ReactNode;
 };
 
-export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
+export const Field = ({
+  id,
+  label,
+  hint,
+  success,
+  warning,
+  error,
+  className,
+  children,
+}: FieldProps) => {
+  const hasSuccess = Boolean(success);
+  const hasWarning = Boolean(warning);
   const hasError = Boolean(error);
   const hasHint = Boolean(hint) && !hasError;
 
@@ -41,6 +54,8 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
               className={classNames(
                 'form-group d-block',
                 {
+                  'has-positive': hasSuccess,
+                  'has-warning': hasWarning,
                   'has-error': hasError,
                   'has-info': hasHint,
                 },
@@ -56,6 +71,16 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
                   {hint}
                 </InlineAlert>
               )}
+              {hasSuccess && (
+                <InlineAlert type={Sentiment.POSITIVE} id={descriptionId}>
+                  {success}
+                </InlineAlert>
+              )}
+              {hasWarning && (
+                <InlineAlert type={Sentiment.WARNING} id={descriptionId}>
+                  {warning}
+                </InlineAlert>
+              )}
               {hasError && (
                 <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
                   {error}

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;
@@ -24,7 +28,9 @@ export default function InlineAlert({
       id={id}
       className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
     >
-      {danger && <AlertCircleIcon />}
+      {type === 'positive' && <CheckCircleIcon />}
+      {type === 'warning' && <StatusIcon sentiment={Sentiment.WARNING} size={Size.SMALL} />}
+      {danger && <CrossCircleIcon />}
       <div>{children}</div>
     </div>
   );