From 3ce5043595212cbe34413f2f91c5b0240ce3dbc6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Wed, 19 Jul 2023 12:52:26 +0300
Subject: [PATCH] feat(client): create row component (#50989)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 tools/ui-components/src/row/index.ts        |  2 ++
 tools/ui-components/src/row/row.stories.tsx | 19 +++++++++++++++++++
 tools/ui-components/src/row/row.test.tsx    | 13 +++++++++++++
 tools/ui-components/src/row/row.tsx         | 11 +++++++++++
 tools/ui-components/src/row/types.ts        |  4 ++++
 5 files changed, 49 insertions(+)
 create mode 100644 tools/ui-components/src/row/index.ts
 create mode 100644 tools/ui-components/src/row/row.stories.tsx
 create mode 100644 tools/ui-components/src/row/row.test.tsx
 create mode 100644 tools/ui-components/src/row/row.tsx
 create mode 100644 tools/ui-components/src/row/types.ts

diff --git a/tools/ui-components/src/row/index.ts b/tools/ui-components/src/row/index.ts
new file mode 100644
index 00000000000..12b23aebfb5
--- /dev/null
+++ b/tools/ui-components/src/row/index.ts
@@ -0,0 +1,2 @@
+export { Row } from './row';
+export type { RowProps } from './types';
diff --git a/tools/ui-components/src/row/row.stories.tsx b/tools/ui-components/src/row/row.stories.tsx
new file mode 100644
index 00000000000..0205b5c5104
--- /dev/null
+++ b/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;
diff --git a/tools/ui-components/src/row/row.test.tsx b/tools/ui-components/src/row/row.test.tsx
new file mode 100644
index 00000000000..7897bcae93c
--- /dev/null
+++ b/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'
+    );
+  });
+});
diff --git a/tools/ui-components/src/row/row.tsx b/tools/ui-components/src/row/row.tsx
new file mode 100644
index 00000000000..34703b0c0e4
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/tools/ui-components/src/row/types.ts b/tools/ui-components/src/row/types.ts
new file mode 100644
index 00000000000..cfe0a0b95df
--- /dev/null
+++ b/tools/ui-components/src/row/types.ts
@@ -0,0 +1,4 @@
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}