[Feature] Character counter for TextInput and Textarea

src/core/Form/TextInput/TextInput.baseStyles.tsx

@@ -7,6 +7,27 @@ export const baseStyles = (theme: SuomifiTheme) => css`
   ${font(theme)('bodyText')}
   width: 290px;
 
+  & .fi-text-input_character-counter {
+    ${font(theme)('bodyTextSmall')};
+    color: ${theme.colors.blackBase};
+    font-size: 14px;
+    line-height: 20px;
+    flex: none;
+    margin-top: 4px;
+
+    &.fi-text-input_character-counter--error {
+      color: ${theme.colors.alertBase};
+      ${font(theme)('bodySemiBoldSmall')};
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  & .fi-text-input_bottom-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
   & .fi-text-input_wrapper {
     width: 100%;
     display: inline-block;

src/core/Form/TextInput/TextInput.md

@@ -136,3 +136,49 @@ import { IconMapLocation } from 'suomifi-icons';
   />
 </>;
 ```
+
+### TextInput with character counter
+
+```js
+import { TextInput } from 'suomifi-ui-components';
+import React, { useState } from 'react';
+
+const [isError, setIsError] = useState(false);
+const [statusText, setStatusText] = useState('');
+
+const maxCharAmount = 20;
+
+/**
+ * Check if maximum amount of characters has exceed, and set status and statusText accordingly.
+ * You can also add any other desired input validation rules here.
+ */
+const validateText = (text) => {
+  if (text.length > maxCharAmount) {
+    setIsError(true);
+    setStatusText('Description must be 20 characters or less');
+  } else {
+    setIsError(false);
+    setStatusText('');
+  }
+};
+
+<>
+  <TextInput
+    hintText="Please provide details pertaining to the case"
+    labelText="Description"
+    onChange={(value) => validateText(value)}
+    characterLimit={maxCharAmount}
+    ariaCharactersRemainingText={(amount) =>
+      `You have ${amount} characters remaining`
+    }
+    ariaCharactersExceededText={(amount) =>
+      `You have ${amount} characters too many`
+    }
+    statusText={statusText}
+    status={isError ? 'error' : 'default'}
+    fullWidth
+    debounce={300}
+    defaultValue="Lorem ipsum dolor"
+  ></TextInput>
+</>;
+```

src/core/Form/TextInput/TextInput.test.tsx

@@ -304,3 +304,76 @@ describe('props', () => {
     });
   });
 });
+
+describe('Character counter', () => {
+  it('should display correct character count', () => {
+    const { container, getByTestId } = render(
+      <TextInput
+        labelText="label"
+        defaultValue="Lorem ipsum"
+        data-testid="cc-input"
+        characterLimit={20}
+        ariaCharactersRemainingText={(amount) =>
+          `You have ${amount} characters remaining`
+        }
+        ariaCharactersExceededText={(amount) =>
+          `You have ${amount} characters too many`
+        }
+      />,
+    );
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')
+        .length,
+    ).toBe(1);
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')[0],
+    ).toHaveTextContent('11/20');
+
+    const textInput = getByTestId('cc-input') as HTMLTextAreaElement;
+    fireEvent.change(textInput, {
+      target: { value: 'Lorem ipsum dolor sit amet' },
+    });
+
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')[0],
+    ).toHaveTextContent('26/20');
+  });
+
+  it('should have correct screen reader status text', () => {
+    jest.useFakeTimers();
+    const { container, getByTestId } = render(
+      <TextInput
+        labelText="label"
+        defaultValue="Lorem ipsum"
+        data-testid="cc-input1"
+        characterLimit={20}
+        ariaCharactersRemainingText={(amount) =>
+          `You have ${amount} characters remaining`
+        }
+        ariaCharactersExceededText={(amount) =>
+          `You have ${amount} characters too many`
+        }
+      />,
+    );
+
+    expect(
+      container.getElementsByClassName('fi-status-text')[0].firstChild,
+    ).toHaveTextContent('');
+
+    const textInput = getByTestId('cc-input1') as HTMLTextAreaElement;
+    fireEvent.change(textInput, {
+      target: { value: 'Lorem ipsum dolor sit amet' },
+    });
+
+    // Testing if the delayed update works as intended
+    expect(
+      container.getElementsByClassName('fi-status-text')[0].firstChild,
+    ).toHaveTextContent('');
+
+    jest.advanceTimersByTime(2000);
+
+    expect(
+      container.getElementsByClassName('fi-status-text')[0].firstChild,
+    ).toHaveTextContent('You have 6 characters too many');
+  });
+});