feat(client): Add Container Component to Component Library (#50963)
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>pull/51001/head
parent
7fd74c8f5c
commit
cf33ff9760
|
@ -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;
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
});
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,2 @@
|
|||
export { Container } from './container';
|
||||
export type { ContainerProps } from './types';
|
|
@ -0,0 +1,5 @@
|
|||
export type ContainerProps = {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
fluid?: boolean;
|
||||
};
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue