@transferwise/components 0.0.0-experimental-72362bd → 0.0.0-experimental-b20fb95

package/src/flowNavigation/FlowNavigation.tsx

@@ -95,16 +95,13 @@ const FlowNavigation = ({
           </div>
         }
         bottomContent={
-          !done &&
-          (steps.length > 0 ? (
+          !done && steps.length > 0 ? (
             <Stepper
               activeStep={activeStep}
               steps={steps}
               className={clsx('np-flow-navigation__stepper')}
             />
-          ) : (
-            <div className="np-flow-navigation__stepper" />
-          ))
+          ) : null
         }
         layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
       />

package/src/i18n/en.json

@@ -20,7 +20,6 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
-  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useTextareaCharacterCount, useInputAttributes } from './contexts';
+import { useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,20 +13,15 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, maxLength, ...restProps }: TextAreaProps,
+  { className, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
-  const value = restProps.value ?? restProps.defaultValue ?? '';
-  const currentLength = typeof value === 'string' ? value.length : String(value).length;
-
-  useTextareaCharacterCount(currentLength, maxLength);
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
-      maxLength={maxLength}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react';
+import { createContext, useContext } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,23 +36,6 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
-export type TextareaCharacterCountState = { current: number; max: number } | null;
-
-const TextareaCharacterCountContext = createContext<
-  ((state: TextareaCharacterCountState) => void) | undefined
->(undefined);
-export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
-
-export function useTextareaCharacterCount(current: number, max: number | undefined) {
-  const setCharacterCount = useContext(TextareaCharacterCountContext);
-  useEffect(() => {
-    if (setCharacterCount && max != null) {
-      setCharacterCount({ current, max });
-      return () => setCharacterCount(null);
-    }
-  }, [setCharacterCount, current, max]);
-}
-
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/main.css

@@ -30193,28 +30193,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
 
-.np-field-validation {
-  display: flex;
-  align-items: flex-start;
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  gap: 8px;
-  gap: var(--size-8);
-}
-
-.np-field-textarea-char-counter {
-  margin-left: auto;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -21,7 +21,6 @@ export const Basic: Story = {
         <TextareaWithDisplayFormat
           id={id}
           value="0000"
-          maxLength={20}
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />

package/build/field/Field.messages.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-
-var messages = reactIntl.defineMessages({
-  characterCount: {
-    id: "neptune.Field.characterCount"
-  }
-});
-
-exports.default = messages;
-//# sourceMappingURL=Field.messages.js.map

package/build/field/Field.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.js","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/field/Field.messages.mjs

@@ -1,10 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-var messages = defineMessages({
-  characterCount: {
-    id: "neptune.Field.characterCount"
-  }
-});
-
-export { messages as default };
-//# sourceMappingURL=Field.messages.mjs.map

package/build/field/Field.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.mjs","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

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

@@ -1,8 +0,0 @@
-declare const _default: {
-    characterCount: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Field.messages.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.d.ts","sourceRoot":"","sources":["../../../src/field/Field.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/src/field/Field.messages.ts

@@ -1,8 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  characterCount: {
-    id: 'neptune.Field.characterCount',
-    defaultMessage: '{current} of {max} characters used',
-  },
-});

package/src/inputs/TextArea.story.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import { Field } from '../field/Field';
-import { Sentiment } from '../common';
-import { TextArea } from './TextArea';
-
-const meta: Meta<typeof TextArea> = {
-  title: 'Forms/TextArea',
-  component: TextArea,
-};
-
-export default meta;
-type Story = StoryObj<typeof TextArea>;
-
-export const Basic: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-
-    return (
-      <Field label="Message" required={false}>
-        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Field label="Message" required={false}>
-  <TextArea
-    maxLength={200}
-    value={value}
-    onChange={({ target }) => setValue(target.value)}
-  />
-</Field>`,
-      },
-    },
-  },
-};
-
-export const WithError: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-
-    return (
-      <Field
-        label="Message"
-        required={false}
-        sentiment={Sentiment.NEGATIVE}
-        message="You have exceeded the character limit"
-      >
-        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    );
-  },
-};