feat: add Caption Text component (#528)

Author: PolinaGurinovich97

src/components/CaptionText/CaptionText.spec.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { DialCaptionText } from './CaptionText';
+
+describe('Dial UI Kit :: DialCaptionText', () => {
+  test('Should render text when provided', () => {
+    render(<DialCaptionText text="This is an text" />);
+    expect(screen.getByText('This is an text')).toBeInTheDocument();
+  });
+
+  test('Should render nothing when text is not provided', () => {
+    const { container } = render(<DialCaptionText />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test('Should pass through span props and merge className', () => {
+    render(
+      <DialCaptionText
+        text="With extra props"
+        className="extra-class"
+        aria-label="caption-label"
+      />,
+    );
+
+    const el = screen.getByText('With extra props');
+
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveTextContent('With extra props');
+    expect(el).toHaveAttribute('aria-label', 'caption-label');
+    expect(el.className).toContain('dial-tiny-text');
+    expect(el.className).toContain('extra-class');
+  });
+
+  test('Should pass through span props and merge className', () => {
+    render(
+      <DialCaptionText
+        text="With extra props"
+        className="extra-class"
+        aria-label="caption-label"
+      />,
+    );
+
+    const el = screen.getByText('With extra props');
+
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveTextContent('With extra props');
+    expect(el).toHaveAttribute('aria-label', 'caption-label');
+    expect(el.className).toContain('dial-tiny-text');
+    expect(el.className).toContain('extra-class');
+  });
+});

src/components/CaptionText/CaptionText.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CaptionType } from '@/types/caption';
+import { DialCaptionText } from './CaptionText';
+
+const meta = {
+  title: 'DIAL/Elements/CaptionText',
+  component: DialCaptionText,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A component for displaying messages with consistent styling.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: [CaptionType.Error, CaptionType.Description],
+      description: 'The visual style variant of the caption text.',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'The message text to display',
+    },
+    className: {
+      control: { type: 'text' },
+      description: 'Additional CSS classes merged with base classes.',
+    },
+    'aria-label': {
+      control: { type: 'text' },
+      description: 'ARIA label to improve accessibility.',
+    },
+  },
+  args: {
+    text: 'Field is required. Please provide a valid input to proceed.',
+  },
+} satisfies Meta<typeof DialCaptionText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomClassName: Story = {
+  args: {
+    text: 'This is an error with custom class',
+    className: 'border border-secondary p-2',
+  },
+};
+
+export const AriaAttributes: Story = {
+  args: {
+    text: 'Error with aria attributes',
+    'aria-label': 'Error message',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: CaptionType.Error,
+  },
+};

src/components/CaptionText/CaptionText.tsx

@@ -0,0 +1,48 @@
+import { mergeClasses } from '@/utils/merge-classes';
+import type { FC, HTMLAttributes } from 'react';
+import { CaptionType } from '@/types/caption';
+
+export interface DialCaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
+  text?: string;
+  variant?: CaptionType;
+}
+
+/**
+ * A component for displaying error messages with consistent styling
+ *
+ * @example
+ * ```tsx
+ * <DialCaptionText text="This field is required" variant={CaptionType.Error} />
+ * ```
+ *
+ * @param [text] - The text to display. If undefined or empty, nothing is rendered
+ * @param [variant] - The variant of the caption text, e.g., error or description.
+ */
+export const DialCaptionText: FC<DialCaptionTextProps> = ({
+  text,
+  className,
+  variant = CaptionType.Description,
+  ...props
+}) => {
+  if (!text) return null;
+
+  return (
+    <span
+      {...props}
+      role="alert"
+      className={mergeClasses(
+        'dial-tiny-text',
+        variant === CaptionType.Error ? 'text-error' : 'text-secondary',
+        className,
+      )}
+    >
+      {text}
+    </span>
+  );
+};
+
+export const DialErrorText: FC<Omit<DialCaptionTextProps, 'variant'>> = ({
+  ...props
+}) => {
+  return <DialCaptionText {...props} variant={CaptionType.Error} />;
+};

src/components/ErrorText/ErrorText.spec.tsx

@@ -1,6 +1,6 @@
 import { useCallback, type FC, type ReactNode } from 'react';
 
-import { DialErrorText } from '@/components/ErrorText/ErrorText';
+import { DialErrorText } from '@/components/CaptionText/CaptionText';
 
 import { DialLabel } from '@/components/Label/Label';
 import {
@@ -106,7 +106,7 @@ export const DialFormItem: FC<DialFormItemProps> = ({
     if (typeof error === 'string' || typeof error === 'undefined') {
       return error ? (
         <div id={errorId} aria-live="polite" className={errorClassName}>
-          <DialErrorText errorText={error} />
+          <DialErrorText text={error} />
         </div>
       ) : null;
     }

src/components/ErrorText/ErrorText.stories.tsx

@@ -37,7 +37,10 @@ export const DialInfoButton: FC<DialInfoButtonProps> = ({
     />
   );
   return caption ? (
-    <DialTooltip tooltip={caption} triggerClassName="flex">
+    <DialTooltip
+      tooltip={caption}
+      triggerClassName="flex justify-center items-center"
+    >
       {button}
     </DialTooltip>
   ) : (

src/components/ErrorText/ErrorText.tsx

@@ -1,2 +1,2 @@
 export const infoButtonClassName =
-  'w-auto h-auto border border-solid rounded-[6px] border-transparent p-1 text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active focus-within:border-focus';
+  'w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent p-1 text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active focus-within:border-focus';

src/components/FormItem/FormItem.tsx

@@ -134,7 +134,7 @@ export const MaxView: Story = {
               id="error-input"
               invalid={true}
               value="Text"
-              errorText="Error message"
+              error="Error message"
               {...props}
             />
           </div>
@@ -236,7 +236,7 @@ export const AllVariants: Story = {
               placeholder="Placeholder"
               invalid={true}
               value="Text"
-              errorText="Error message"
+              error="Error message"
               iconBefore={<IconSearch size={16} />}
               iconAfter={<IconEye size={16} />}
             />