feat(client): create row component (#50989)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

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

@@ -0,0 +1,2 @@
+export { Row } from './row';
+export type { RowProps } from './types';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Row, RowProps } from '.';
+
+const story = {
+  title: 'Example/Row',
+  component: Row
+};
+
+const Template: Story<RowProps> = args => {
+  return <Row {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <p>Random text to test the element width</p>
+};
+
+export default story;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Row } from '.';
+
+describe('<Row />', () => {
+  it('Row can accept className', () => {
+    render(<Row className='h-full'>Learn to code for free.</Row>);
+    expect(screen.getByText('Learn to code for free.')).toHaveClass(
+      'mx-[-15px] h-full'
+    );
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { RowProps } from './types';
+
+export const Row = ({ className, children, ...rest }: RowProps) => {
+  return (
+    <div className={`mx-[-15px] ${className ?? ''}`} {...rest}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,4 @@
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}