From 9fa6218fb291a569fe45e0158d02aa65b7e89243 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Nogueira?= <nogueira@textkernel.nl>
Date: Fri, 6 Dec 2024 12:08:35 +0000
Subject: [PATCH 1/2] feat(Textarea): new design

---
 .../PillButtonEnhanced.spec.tsx.snap          |   4 -
 .../__snapshots__/Pill.spec.tsx.snap          |   2 -
 src/components/TextArea/TextArea.scss         | 127 +++++++++++++++---
 src/components/TextArea/TextArea.tsx          | 111 +++++++++++++--
 .../TextArea/__tests__/TextArea.spec.tsx      |  41 ++++--
 .../__snapshots__/TextArea.spec.tsx.snap      |  57 ++++++--
 stories/atoms/TextArea.stories.tsx            |  38 ++++--
 .../molecules/FieldWithValidation.stories.tsx |   2 +-
 .../BooleanQueryTokenizer.stories.tsx         |   3 +-
 9 files changed, 312 insertions(+), 73 deletions(-)

diff --git a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
index e64de446a..3ccfdf924 100644
--- a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
+++ b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
@@ -47,7 +47,6 @@ exports[`<PillButtonEnhanced> component in active, collapsed state (with content
     </div>
     <button
       class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-      style="width: auto;"
       tabindex="0"
       type="button"
     >
@@ -111,7 +110,6 @@ exports[`<PillButtonEnhanced> component in active, open state (content and isOpe
     </div>
     <button
       class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-      style="width: auto;"
       tabindex="0"
       type="button"
     >
@@ -276,7 +274,6 @@ exports[`<PillButtonEnhanced> component with additional props should render corr
     </div>
     <button
       class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-      style="width: auto;"
       tabindex="0"
       type="button"
     >
@@ -341,7 +338,6 @@ exports[`<PillButtonEnhanced> component with additional props should set style a
     </div>
     <button
       class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-      style="width: auto;"
       tabindex="0"
       type="button"
     >
diff --git a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
index 067d63e8e..b396b2c2b 100644
--- a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
+++ b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
@@ -197,7 +197,6 @@ exports[`<Pill> component with enhanced button variant should open dropdown when
       </div>
       <button
         class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-        style="width: auto;"
         tabindex="0"
         type="button"
       >
@@ -295,7 +294,6 @@ exports[`<Pill> component with enhanced button variant should render correctly 1
       </div>
       <button
         class="Button Button--variant_ghost Button--context_secondary IconButton--size_medium PillButtonEnhanced__clear"
-        style="width: auto;"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/TextArea/TextArea.scss b/src/components/TextArea/TextArea.scss
index 9a2f11ebe..cf907c6c4 100644
--- a/src/components/TextArea/TextArea.scss
+++ b/src/components/TextArea/TextArea.scss
@@ -1,31 +1,116 @@
-@use '../../themes/oneui/placeholders/input';
-
 .TextArea {
-    @extend %input;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-50);
+}
 
-    &::placeholder {
-        color: var(--color-neutral-30);
-        opacity: 1;
+.TextArea__row {
+    display: flex;
+}
+
+.TextArea__column {
+    display: flex;
+    flex-direction: column;
+}
+
+.TextArea__labelRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.TextArea__label {
+    composes: OneUI-caption-text-bold from global;
+}
+
+.TextArea__labelStatus {
+    margin-left: var(--space-50);
+    composes: OneUI-caption-text from global;
+    color: var(--color-text-subtlest, #808080);
+}
+
+.TextArea__letterCount {
+    composes: OneUI-caption-text from global;
+    color: var(--color-text-subtlest, #808080);
+}
+
+.TextArea__container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-100);
+    border: 1px solid var(--color-border-input, #808080);
+    border-radius: var(--space-100);
+    padding: var(--space-125) var(--space-150);
+
+    &:hover {
+        background: var(--color-background-input-hover, #f2f2f2);
+    }
+
+    &:has(.TextArea__textarea:invalid) {
+        border: 2px solid var(--color-border-critical-bold-default, #ff3b2f);
+        padding: calc(var(--space-125) - 1px) calc(var(--space-150) - 1px);
     }
 
-    &:focus {
-        border-color: var(--color-brand-50);
+    &:has(.TextArea__textarea:read-only) {
+        background: var(--color-background-input-read-only, #f2f2f2);
     }
 
-    &--isBlock {
-        width: 100%;
+    &:has(.TextArea__textarea:disabled) {
+        border: 1px solid var(--color-border-disabled, #cccccc);
+        color: var(--color-text-disabled, #b3b3b3);
     }
 
-    &--size {
-        &_small {
-            font-size: var(--font-size-small);
-            line-height: var(--line-height-small);
-            padding: var(--space-50);
-        }
-        &_large {
-            font-size: var(--font-size-large);
-            line-height: var(--line-height-large);
-            padding: var(--space-100);
-        }
+    &:has(.TextArea__textarea[aria-invalid='true']) {
+        border: 2px solid var(--color-text-critical-default);
+        padding: calc(var(--space-125) - 1px) calc(var(--space-150) - 1px);
     }
+
+    &:has(.TextArea__textarea:focus):not(
+            :has(.TextArea__textarea:disabled),
+            :has(.TextArea__textarea:read-only),
+            :has(.TextArea__textarea[aria-invalid='true'])
+        ) {
+        border: 2px solid var(--color-border-selected, #007aff);
+        padding: calc(var(--space-125) - 1px) calc(var(--space-150) - 1px);
+    }
+}
+
+.TextArea__textarea {
+    font-family: var(--font-family-primary);
+    outline: none;
+    composes: OneUI-label-text from global;
+    resize: none;
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    &::placeholder {
+        color: var(--color-text-subtlest, #808080);
+    }
+}
+
+.TextArea__iconContainer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.TextArea__icon {
+    height: 20px;
+    width: 20px;
+}
+
+.TextArea__helperText {
+    composes: OneUI-caption-text from global;
+    color: var(--color-text-subtle, #4d4d4d);
+}
+
+.TextArea__errorContainer {
+    display: flex;
+    gap: var(--space-25);
+    align-items: center;
+    color: var(--color-text-critical-default);
+}
+
+.TextArea__errorText {
+    composes: OneUI-caption-text from global;
 }
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index 3c29e5b96..ff27301da 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -1,23 +1,116 @@
 import React, { forwardRef } from 'react';
+import CopyAll from '@material-design-icons/svg/round/copy_all.svg';
+import Error from '@material-design-icons/svg/round/error.svg';
 import { bem } from '../../utils';
+import { Text } from '../Text/Text';
+import { IconButton } from '../Buttons';
 import styles from './TextArea.scss';
-import { OldSize as Size } from '../../constants';
 
 export interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** Should the input field be disabled or not */
     disabled?: boolean;
-    /** Whether or not to show block-level textarea (full width) */
-    isBlock?: boolean;
-    /** The size of the textarea */
-    size?: Size;
+    /** Should the input field be readOnly or not */
+    readOnly?: boolean;
+    /** Label text, displayey above the textarea */
+    label: string;
+    /** Label status, eg. required or optional, rendered between parenthesis */
+    labelStatus?: string;
+    /** Textarea maximum number of characters allowed */
+    maxLength?: number;
+    /** Helper text, displayed below the textarea */
+    helperText?: string;
+    /** Error text, displayed below the textarea */
+    errorText?: string;
+    /** Callback executed after clicking on Copy button */
+    copyCallback?: (text: string) => void;
 }
 
-const { block } = bem('TextArea', styles);
+const { block, elem } = bem('TextArea', styles);
 
 export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
-    ({ disabled = false, isBlock = false, size = 'normal', ...rest }, ref) => (
-        <textarea {...rest} {...block({ ...rest, size, isBlock })} ref={ref} disabled={disabled} />
-    )
+    (
+        {
+            disabled = false,
+            readOnly = false,
+            maxLength = 240,
+            label,
+            labelStatus,
+            helperText,
+            errorText,
+            defaultValue,
+            value,
+            copyCallback,
+            onChange,
+            ...rest
+        },
+        ref
+    ) => {
+        const [text, setText] = React.useState((defaultValue ?? value ?? '').toString());
+
+        const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setText(e.target.value);
+            onChange?.(e);
+        };
+
+        const handleOnCopy = () => {
+            navigator.clipboard.writeText(text);
+            copyCallback?.(text);
+        };
+
+        return (
+            <div {...block({ ...rest })}>
+                <div {...elem('labelRow')}>
+                    <div>
+                        <Text inline {...elem('label')}>
+                            {label}
+                        </Text>
+                        {labelStatus && (
+                            <Text inline {...elem('labelStatus')}>
+                                ({labelStatus})
+                            </Text>
+                        )}
+                    </div>
+                    <Text inline {...elem('letterCount')}>
+                        {text.length} / {maxLength}
+                    </Text>
+                </div>
+                <div {...elem('container')}>
+                    <textarea
+                        {...rest}
+                        {...elem('textarea', { ...rest })}
+                        ref={ref}
+                        value={value}
+                        defaultValue={defaultValue}
+                        maxLength={maxLength}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        aria-invalid={!!errorText}
+                        onChange={handleOnChange}
+                    />
+                    {copyCallback && (
+                        <div {...elem('iconContainer')}>
+                            <IconButton onClick={handleOnCopy} variant="ghost" size="large">
+                                <CopyAll viewBox="0 0 24 24" {...elem('icon')} />
+                            </IconButton>
+                        </div>
+                    )}
+                </div>
+                {errorText && !helperText && (
+                    <div {...elem('errorContainer')}>
+                        <Error viewBox="0 0 24 24" fill="currentColor" {...elem('icon')} />
+                        <Text inline {...elem('errorText')}>
+                            {errorText}
+                        </Text>
+                    </div>
+                )}
+                {helperText && !errorText && (
+                    <Text inline {...elem('helperText')}>
+                        {helperText}
+                    </Text>
+                )}
+            </div>
+        );
+    }
 );
 
 TextArea.displayName = 'TextArea';
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx b/src/components/TextArea/__tests__/TextArea.spec.tsx
index be9869082..dba80bfb9 100644
--- a/src/components/TextArea/__tests__/TextArea.spec.tsx
+++ b/src/components/TextArea/__tests__/TextArea.spec.tsx
@@ -9,28 +9,47 @@ describe('<TextArea> that renders a textarea', () => {
 
     let view: RenderResult;
 
-    it('should render default textarea correctly', () => {
-        view = render(<TextArea defaultValue="Some value" />);
+    it('should render textarea correctly', () => {
+        view = render(
+            <TextArea
+                defaultValue="Some value"
+                label="label"
+                labelStatus="required"
+                helperText="helper"
+            />
+        );
 
         expect(view.container).toMatchSnapshot();
         expect(screen.getByRole('textbox')).toBeInTheDocument();
+        expect(screen.getByText('label')).toBeInTheDocument();
+        expect(screen.getByText('(required)')).toBeInTheDocument();
+        expect(screen.getByText('helper')).toBeInTheDocument();
     });
 
-    it('should add classes when props are changed', () => {
-        view = render(<TextArea size="large" isBlock disabled />);
+    it('should render error message', () => {
+        view = render(
+            <TextArea
+                defaultValue="Some value"
+                label="label"
+                labelStatus="required"
+                errorText="It should contain a number"
+            />
+        );
 
-        const textarea = screen.getByRole('textbox');
+        expect(screen.getByTestId('default-icon')).toBeInTheDocument();
+        expect(screen.getByText('It should contain a number')).toBeInTheDocument();
+    });
 
-        expect(view.container).toMatchSnapshot();
-        expect(textarea).toBeInTheDocument();
-        expect(textarea).toBeDisabled();
-        expect(textarea).toHaveClass('TextArea TextArea--size_large TextArea--isBlock');
+    it('should render letter count correctly', () => {
+        view = render(<TextArea label="label" defaultValue="12345" maxLength={250} />);
+
+        expect(screen.getByText('5 / 250')).toBeInTheDocument();
     });
 
     it('should call change callback correctly', async () => {
         const user = userEvent.setup();
         const onChange = jest.fn();
-        view = render(<TextArea onChange={onChange} />);
+        view = render(<TextArea label="label" onChange={onChange} />);
 
         const textarea = screen.getByRole('textbox');
 
@@ -42,7 +61,7 @@ describe('<TextArea> that renders a textarea', () => {
     });
 
     it('should add string html attributes correctly', () => {
-        view = render(<TextArea data-test="something" />);
+        view = render(<TextArea label="label" data-test="something" />);
 
         const textarea = screen.getByRole('textbox');
 
diff --git a/src/components/TextArea/__tests__/__snapshots__/TextArea.spec.tsx.snap b/src/components/TextArea/__tests__/__snapshots__/TextArea.spec.tsx.snap
index ef21eeb0a..3911dab5f 100644
--- a/src/components/TextArea/__tests__/__snapshots__/TextArea.spec.tsx.snap
+++ b/src/components/TextArea/__tests__/__snapshots__/TextArea.spec.tsx.snap
@@ -1,20 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextArea> that renders a textarea should add classes when props are changed 1`] = `
+exports[`<TextArea> that renders a textarea should render textarea correctly 1`] = `
 <div>
-  <textarea
-    class="TextArea TextArea--size_large TextArea--isBlock"
-    disabled=""
-  />
-</div>
-`;
-
-exports[`<TextArea> that renders a textarea should render default textarea correctly 1`] = `
-<div>
-  <textarea
+  <div
     class="TextArea"
   >
-    Some value
-  </textarea>
+    <div
+      class="TextArea__labelRow"
+    >
+      <div>
+        <span
+          class="TextArea__label"
+        >
+          label
+        </span>
+        <span
+          class="TextArea__labelStatus"
+        >
+          (
+          required
+          )
+        </span>
+      </div>
+      <span
+        class="TextArea__letterCount"
+      >
+        10
+         / 
+        240
+      </span>
+    </div>
+    <div
+      class="TextArea__container"
+    >
+      <textarea
+        aria-invalid="false"
+        class="TextArea__textarea"
+        maxlength="240"
+      >
+        Some value
+      </textarea>
+    </div>
+    <span
+      class="TextArea__helperText"
+    >
+      helper
+    </span>
+  </div>
 </div>
 `;
diff --git a/stories/atoms/TextArea.stories.tsx b/stories/atoms/TextArea.stories.tsx
index fd493b217..35f0452a7 100644
--- a/stories/atoms/TextArea.stories.tsx
+++ b/stories/atoms/TextArea.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { TextArea } from '@textkernel/oneui';
-import { OLD_SIZES as SIZES } from '@textkernel/oneui/constants';
 
 const meta: Meta<typeof TextArea> = {
     title: 'Atoms/TextArea',
@@ -17,7 +16,12 @@ export const DefaultBehavior: Story = {
     args: {
         defaultValue: 'This is a default value',
         placeholder: 'Some text goes here...',
-        size: SIZES[1],
+        label: 'Label',
+        labelStatus: 'Required',
+        helperText: 'Help text',
+        readOnly: false,
+        disabled: false,
+        copyCallback: (text) => console.log(text),
     },
     render: (args) => <TextArea {...args} />,
 };
@@ -25,13 +29,27 @@ export const DefaultBehavior: Story = {
 export const ControlledComponent: Story = {
     name: 'Controlled component',
     args: {
-        onChange: (e) => {
-            const { value } = e.target;
-            console.log(value);
-        },
-        placeholder: 'While typing, check your console log...',
-        size: SIZES[1],
-        value: '',
+        placeholder: 'Type to get rid of the error...',
+        label: 'Label',
+        labelStatus: 'Required',
+        readOnly: false,
+        disabled: false,
+        maxLength: 250,
+        copyCallback: (text) => console.log(`Copied text: ${text}`),
+    },
+    render: (args) => {
+        const [text, setText] = React.useState('');
+
+        return (
+            <TextArea
+                {...args}
+                value={text}
+                errorText={text.length === 0 ? 'Field should not be empty' : undefined}
+                onChange={(event) => {
+                    setText(event.target.value);
+                    console.log(event.target.value);
+                }}
+            />
+        );
     },
-    render: (args) => <TextArea {...args} />,
 };
diff --git a/stories/molecules/FieldWithValidation.stories.tsx b/stories/molecules/FieldWithValidation.stories.tsx
index 45d1af868..91ba51974 100644
--- a/stories/molecules/FieldWithValidation.stories.tsx
+++ b/stories/molecules/FieldWithValidation.stories.tsx
@@ -32,7 +32,7 @@ export const _FieldWithValidation: Story = {
             </div>
             <div>
                 <FieldWithValidation errorMessage={errorMessage2} useTooltip={useTootip2}>
-                    <TextArea />
+                    <TextArea label="FieldWithValidation" />
                 </FieldWithValidation>
             </div>
         </>
diff --git a/stories/packages/BooleanQueryTokenizer.stories.tsx b/stories/packages/BooleanQueryTokenizer.stories.tsx
index 7d34832e0..4145858ba 100644
--- a/stories/packages/BooleanQueryTokenizer.stories.tsx
+++ b/stories/packages/BooleanQueryTokenizer.stories.tsx
@@ -48,10 +48,9 @@ export const _BooleanQueryTokenizer: Story = {
                     <TextArea
                         defaultValue={initialValue}
                         disabled={false}
-                        isBlock
                         onChange={tokenizeBooleanQuery}
                         placeholder="Enter a boolean query..."
-                        size="normal"
+                        label="Query"
                         style={{
                             resize: 'vertical',
                             height: '100%',

From bcc950dee20924726610ee291c226787e042356f Mon Sep 17 00:00:00 2001
From: AlsasaAmmar <zarosho@gmail.com>
Date: Fri, 13 Dec 2024 14:08:02 +0100
Subject: [PATCH 2/2] fixed a typo

---
 src/components/TextArea/TextArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index ff27301da..5e1aa2f2a 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -11,7 +11,7 @@ export interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement>
     disabled?: boolean;
     /** Should the input field be readOnly or not */
     readOnly?: boolean;
-    /** Label text, displayey above the textarea */
+    /** Label text, display above the textarea */
     label: string;
     /** Label status, eg. required or optional, rendered between parenthesis */
     labelStatus?: string;