feat(client): add bootstrap grid component as container component (#49829)

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,27 @@
+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}>Random text to test the element width</Container>
+    );
+    expect(
+      screen.getByText('Random text to test the element width')
+    ).toHaveClass('mx-auto px-[15px] ');
+  });
+  it('should add className to it', () => {
+    render(
+      <Container className='certificate-outer-wrapper'>
+        Random text to test the element width
+      </Container>
+    );
+    expect(
+      screen.getByText('Random text to test the element width')
+    ).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,23 @@
+import React from 'react';
+import type { ContainerProps } from './types';
+
+export const Container = ({
+  children,
+  className,
+  fluid
+}: ContainerProps): JSX.Element => {
+  let elementClasses = '';
+  if (!fluid) {
+    elementClasses = `my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]`;
+  }
+
+  if (!className) {
+    className = '';
+  }
+
+  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;
+};