feat(tools): add helpblock component (#45399)

* feat: add helpblock component

* fix: clean up

* Update tools/ui-components/src/helpblock/helpblock.stories.tsx

Co-authored-by: Ismail Tlemcani <ismail.tlemcani@gmail.com>
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

tools/ui-components/src/helpblock/helpblock.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { HelpBlock } from './helpblock';
+import { HelpBlockProps } from './types';
+
+const story = {
+  title: 'Example/HelpBlock',
+  component: HelpBlock,
+  parameters: {
+    controls: {
+      include: ['className', 'children']
+    }
+  }
+};
+
+const Template: Story<HelpBlockProps> = args => {
+  return <HelpBlock {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'This is a HelpBlock'
+};
+
+export default story;

tools/ui-components/src/helpblock/helpblock.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { HelpBlock } from './helpblock';
+
+describe('Render the helpblock component', () => {
+  it('should render the helpblock component', () => {
+    render(<HelpBlock />);
+    expect(screen.getByTestId('help-block')).toBeInTheDocument();
+    expect(screen.getByTestId('help-block')).toHaveClass(
+      'block mt-1 mb-2 text-default-foreground-quaternary',
+      { exact: true }
+    );
+  });
+});

tools/ui-components/src/helpblock/helpblock.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { HelpBlockProps } from './types';
+
+export const HelpBlock = React.forwardRef<HTMLSpanElement, HelpBlockProps>(
+  ({ className, children }, ref): JSX.Element => {
+    const defaultClasses = 'block mt-1 mb-2 text-default-foreground-quaternary';
+    const classes = [defaultClasses, className].join(' ');
+    return (
+      <span ref={ref} data-testid='help-block' className={classes}>
+        {children}
+      </span>
+    );
+  }
+);
+
+HelpBlock.displayName = 'HelpBlock';

tools/ui-components/src/helpblock/index.ts

@@ -0,0 +1,2 @@
+export { HelpBlock } from './helpblock';
+export type { HelpBlockProps } from './types';

tools/ui-components/src/helpblock/types.ts

@@ -0,0 +1,4 @@
+export interface HelpBlockProps {
+  className?: string;
+  children?: React.ReactNode;
+}