@indico-data/design-system 2.18.0 → 2.19.0

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -1,33 +1,81 @@
 import { render, screen } from '@testing-library/react';
-import { Label } from '@/components/forms/subcomponents/Label';
+import { Label, withLabel } from '@/components/forms/subcomponents/Label';
+
+// Mock component to wrap with HOC
+const MockComponent: React.FC = (props) => {
+  return <input {...props} />;
+};
+
+const LabeledMockComponent = withLabel(MockComponent);
 
 describe('Label', () => {
-  it('renders the `required` astherisc when the label is required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={true} hasHiddenLabel={false} />);
+  it('renders the `required` asterisk when the label is required', () => {
+    render(<Label label="name" name="name" isRequired={true} />);
     expect(screen.getByText('*')).toBeInTheDocument();
     expect(screen.getByText('*')).toBeVisible();
   });
-  it('does not render the `required` astherisc when the label is not required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+
+  it('does not render the `required` asterisk when the label is not required', () => {
+    render(<Label label="name" name="name" isRequired={false} />);
     expect(screen.queryByText('*')).not.toBeInTheDocument();
     expect(screen.queryByText('*')).toBeNull();
   });
-  it('renders the label for screen readers while hidden visually', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
-    expect(screen.getByText('name')).toBeInTheDocument();
-    expect(screen.getByText('name')).toBeVisible();
-  });
+
   it('renders the label text', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    render(<Label label="name" name="name" isRequired={false} />);
     const label = screen.getByTestId('name-testId');
     expect(label).toBeInTheDocument();
     expect(label).toBeVisible();
-    expect(label).not.toHaveClass('is-visually-hidden');
   });
+});
 
-  it('renders the label text when the label is hidden', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+describe('withLabel HOC', () => {
+  it('renders the wrapped component with a visible label', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
     const label = screen.getByTestId('name-testId');
-    expect(label).toHaveClass('is-visually-hidden');
+    const input = screen.getByRole('textbox');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toBeVisible();
+    expect(input).toBeInTheDocument();
+  });
+
+  it('renders the wrapped component with an aria-label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name');
+  });
+
+  it('renders the wrapped component with an aria-label including "required" when isRequired is true and hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name (required)');
+  });
+
+  it('does not render the visible label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    expect(screen.queryByTestId('name-testId')).not.toBeInTheDocument();
+  });
+
+  it('renders the `required` asterisk when isRequired is true and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel={false} />,
+    );
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeVisible();
+  });
+
+  it('does not render the `required` asterisk when isRequired is false and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+    expect(screen.queryByText('*')).toBeNull();
   });
 });

package/src/components/forms/textarea/Textarea.mdx

@@ -5,13 +5,23 @@ import * as Textarea from './Textarea.stories';
 
 # Textarea
 
-The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (**_Our components are compatible with but do not provide the plugin_**)
 
 <Canvas
   of={Textarea.Default}
   source={{
     code: `
-    <Textarea name="first_name" isRequired helpText="This Is Help Text" placeholder="This is a placeholder" value="''" onChange={handleChange} label="Label Name"  />
+<Textarea 
+  label="Label Name"
+  name="textarea"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}
+/>
     `,
   }}
 />

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -1,6 +1,7 @@
+import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Textarea, TextareaProps } from './Textarea';
-import { SetStateAction, useEffect, useState } from 'react';
+import labelArgTypes from '@/storybook/labelArgTypes';
+import { Textarea } from './Textarea';
 
 const meta: Meta = {
   title: 'Forms/Textarea',
@@ -17,28 +18,6 @@ const meta: Meta = {
       },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the textarea field',
@@ -61,17 +40,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required astherisc on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     isDisabled: {
       control: 'boolean',
       description: 'Toggles the disabled state of the textarea field',
@@ -105,17 +73,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     autofocus: {
       control: 'boolean',
       description: '	Specifies that a text area should automatically get focus when the page loads',
@@ -198,6 +155,7 @@ const meta: Meta = {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 

package/src/components/forms/textarea/Textarea.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { Label } from '../subcomponents/Label';
+import classNames from 'classnames';
+
+import { withLabel, LabelProps, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface TextareaProps {
+export interface TextareaProps extends WithLabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
-  label: string;
-  name: string;
-  placeholder: string;
+  placeholder?: string;
   value?: string | undefined;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   rows?: number;
   cols?: number;
   readonly?: boolean;
@@ -23,7 +21,7 @@ export interface TextareaProps {
   autofocus?: boolean;
   defaultValue?: string;
 }
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       label,
@@ -49,9 +47,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ) => {
     const hasErrors = errorMessage && errorMessage.length > 0;
 
+    const textareaClasses = classNames('textarea', { error: hasErrors });
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="textarea-wrapper">
           <textarea
             ref={ref}
@@ -67,11 +66,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`textarea ${hasErrors ? 'error' : ''}`}
+            className={textareaClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
         </div>
@@ -81,7 +79,11 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledTextarea = withLabel(Textarea);
+
+export { LabeledTextarea as Textarea };

package/src/components/forms/textarea/styles/Textarea.scss

@@ -84,17 +84,6 @@
     color: var(--pf-textarea-help-text-color);
     font-size: var(--pf-font-size-subtitle2);
   }
-  .is-visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
   .form-label {
     margin-bottom: var(--pf-margin-2);
   }

package/src/storybook/labelArgTypes.ts

@@ -0,0 +1,50 @@
+// Common argTypes for form components that include a label
+import { ArgTypes } from '@storybook/react';
+
+const labelArgTypes: ArgTypes = {
+  label: {
+    control: 'text',
+    description: 'The text to display as the label for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+  isRequired: {
+    control: 'boolean',
+    description: 'Toggles the required asterisk on the label',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  hasHiddenLabel: {
+    control: 'boolean',
+    description:
+      'Determines whether the label should be displayed or not. Included as aria-label if true',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  name: {
+    control: 'text',
+    description: 'The name attribute for the form component, used for identifying the field',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+};
+
+export default labelArgTypes;