@transferwise/components 0.0.0-experimental-a2f9b4e → 0.0.0-experimental-21d2352

package/src/inputs/TextArea.story.tsx

@@ -0,0 +1,56 @@
+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>
+    );
+  },
+};

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useInputAttributes } from './contexts';
+import { useTextareaCharacterCount, useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,15 +13,20 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, ...restProps }: TextAreaProps,
+  { className, maxLength, ...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 } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,6 +36,23 @@ 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,12 +30193,29 @@ 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__prompt {
+.np-field-control {
   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-counter {
+  margin-left: auto;
+  white-space: nowrap;
+  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,6 +21,7 @@ export const Basic: Story = {
         <TextareaWithDisplayFormat
           id={id}
           value="0000"
+          maxLength={20}
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />

package/src/flowNavigation/FlowNavigation.test.story.tsx

@@ -1,88 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import AvatarView from '../avatarView';
-import { ProfileType } from '../common';
-import Logo from '../logo';
-import { allModes } from '../../.storybook/modes';
-
-import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';
-
-const meta: Meta<typeof FlowNavigation> = {
-  component: FlowNavigation,
-  title: 'Navigation/FlowNavigation/Tests',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    padding: '0',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof FlowNavigation>;
-
-/**
- * Verifies no extra spacing when steps is empty at tablet viewport.
- */
-export const EmptySteps: Story = {
-  parameters: {
-    chromatic: {
-      modes: {
-        tablet: allModes.tablet,
-      },
-    },
-  },
-  globals: {
-    viewport: 'tablet',
-  },
-  render: () => {
-    const commonProps: FlowNavigationProps = {
-      steps: [],
-      activeStep: 0,
-      avatar: <AvatarView profileType={ProfileType.PERSONAL} />,
-      logo: <Logo />,
-      onClose: () => {},
-      onGoBack: () => {},
-    };
-
-    return <FlowNavigation {...commonProps} />;
-  },
-};
-
-/**
- * Verifies FlowNavigation handles long step labels (e.g. Hungarian) at a narrow viewport.
- */
-export const LongLabel: Story = {
-  parameters: {
-    chromatic: {
-      viewports: [360],
-    },
-    viewport: {
-      options: {
-        narrow: {
-          name: '360px',
-          styles: { width: '360px', height: '600px' },
-          type: 'mobile',
-        },
-      },
-    },
-  },
-  globals: {
-    viewport: 'narrow',
-  },
-  render: () => {
-    const commonProps: FlowNavigationProps = {
-      steps: [
-        { label: 'Amount', hoverLabel: '100 GBP', onClick: () => {} },
-        { label: 'You', hoverLabel: 'Elena Durante', onClick: () => {} },
-        { label: 'Kedvezményezett', hoverLabel: 'Daniele Tomboro', onClick: () => {} },
-        { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => {} },
-        { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => {} },
-      ],
-      activeStep: 2,
-      avatar: <AvatarView profileType={ProfileType.PERSONAL} />,
-      logo: <Logo />,
-      onClose: () => {},
-      onGoBack: () => {},
-    };
-
-    return <FlowNavigation {...commonProps} />;
-  },
-};