From cf33ff976003e3f3c954da83e9da19fcdb32b9d4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Tue, 18 Jul 2023 10:31:06 +0300
Subject: [PATCH] feat(client): Add Container Component to Component Library
 (#50963)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .../src/container/container.stories.tsx       | 37 +++++++++++++++++++
 .../src/container/container.test.tsx          | 23 ++++++++++++
 .../ui-components/src/container/container.tsx | 18 +++++++++
 tools/ui-components/src/container/index.ts    |  2 +
 tools/ui-components/src/container/types.ts    |  5 +++
 tools/ui-components/tailwind.config.js        |  4 +-
 6 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 tools/ui-components/src/container/container.stories.tsx
 create mode 100644 tools/ui-components/src/container/container.test.tsx
 create mode 100644 tools/ui-components/src/container/container.tsx
 create mode 100644 tools/ui-components/src/container/index.ts
 create mode 100644 tools/ui-components/src/container/types.ts

diff --git a/tools/ui-components/src/container/container.stories.tsx b/tools/ui-components/src/container/container.stories.tsx
new file mode 100644
index 00000000000..5452a04c98a
--- /dev/null
+++ b/tools/ui-components/src/container/container.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Container, ContainerProps } from '.';
+
+const story = {
+  title: 'Example/Container',
+  component: Container
+};
+
+const Template: Story<ContainerProps> = args => {
+  return (
+    <Container {...args}>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+      <p>Random text to test the element width</p>
+    </Container>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Fluid = Template.bind({});
+Fluid.args = {
+  fluid: true
+};
+
+export default story;
diff --git a/tools/ui-components/src/container/container.test.tsx b/tools/ui-components/src/container/container.test.tsx
new file mode 100644
index 00000000000..b8196c83c81
--- /dev/null
+++ b/tools/ui-components/src/container/container.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Container } from '.';
+
+describe('<Container />', () => {
+  it('remove width when the container is fluid', () => {
+    render(<Container fluid={true}>Learn to code for free.</Container>);
+    expect(screen.getByText('Learn to code for free.')).toHaveClass(
+      'mx-auto px-[15px] '
+    );
+  });
+  it('should add className to it', () => {
+    render(
+      <Container className='certificate-outer-wrapper'>
+        Learn to code for free.
+      </Container>
+    );
+    expect(screen.getByText('Learn to code for free.')).toHaveClass(
+      'mx-auto px-[15px] my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px] certificate-outer-wrapper'
+    );
+  });
+});
diff --git a/tools/ui-components/src/container/container.tsx b/tools/ui-components/src/container/container.tsx
new file mode 100644
index 00000000000..6558a3a916d
--- /dev/null
+++ b/tools/ui-components/src/container/container.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ContainerProps } from './types';
+
+export const Container = ({
+  children,
+  className,
+  fluid
+}: ContainerProps): JSX.Element => {
+  const elementClasses = fluid
+    ? ''
+    : 'my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]';
+
+  return (
+    <div className={`mx-auto px-[15px] ${elementClasses} ${className ?? ''}`}>
+      {children}
+    </div>
+  );
+};
diff --git a/tools/ui-components/src/container/index.ts b/tools/ui-components/src/container/index.ts
new file mode 100644
index 00000000000..b2cb8411b9a
--- /dev/null
+++ b/tools/ui-components/src/container/index.ts
@@ -0,0 +1,2 @@
+export { Container } from './container';
+export type { ContainerProps } from './types';
diff --git a/tools/ui-components/src/container/types.ts b/tools/ui-components/src/container/types.ts
new file mode 100644
index 00000000000..12bab782dce
--- /dev/null
+++ b/tools/ui-components/src/container/types.ts
@@ -0,0 +1,5 @@
+export type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  fluid?: boolean;
+};
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 72cd0ddad1c..374f621df83 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -9,8 +9,10 @@ module.exports = {
     './src/**/*.html',
     './src/**/*.js',
     './src/**/*.ts',
-    './src/**/*.tsx'
+    './src/**/*.tsx',
+    '!./src/**/*.test.tsx'
   ],
+  blocklist: ['container'],
   darkMode: 'class',
   theme: {
     colors: {