feat(client): Add Container Component to Component Library (#50963)

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

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;

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'
+    );
+  });
+});

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>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { Container } from './container';
+export type { ContainerProps } from './types';

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

@@ -0,0 +1,5 @@
+export type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  fluid?: boolean;
+};

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: {