fix(Header): Fix height when wrapper is shown

src/components/Header/Header.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 import { Header } from '.';
+import { Box } from '@chakra-ui/react';
 
 export default {
   title: 'components/Header',
@@ -43,7 +44,11 @@ export default {
   },
 } as Meta<typeof Header>;
 
-const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
+const Template: StoryFn<typeof Header> = (args) => (
+  <Box height="20" backgroundColor="primary.50">
+    <Header {...args} />
+  </Box>
+);
 
 export const DefaultProps = Template.bind({});
 DefaultProps.args = {};

src/components/Header/Header.test.tsx

@@ -34,7 +34,7 @@ describe('The Header component', () => {
   it('renders the wrapper if the showWrapper prop is true', () => {
     setup({ showWrapper: true });
 
-    expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    expect(screen.getByText('center')).toBeInTheDocument();
   });
 
   it('renders the left prop', () => {

src/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import { Flex } from '@chakra-ui/react';
-import { Wrapper } from '../Wrapper';
 
 export interface HeaderProps {
   left: ReactNode;
@@ -17,13 +16,15 @@ export const Header: React.FC<HeaderProps> = ({
   hideCenter = false,
   showWrapper = false,
 }) => {
-  const Content = (
+  return (
     <Flex
-      mx={['6', null, null, '8']}
-      height="100%"
+      height="full"
       flexDir="row"
       alignItems="center"
       justifyContent="space-between"
+      maxWidth={showWrapper ? '7xl' : 'full'}
+      marginX={showWrapper ? 'auto' : ['6', null, null, '8']}
+      paddingX={showWrapper ? ['6', null, '8'] : undefined}
     >
       <Flex
         width={hideCenter ? '50%' : ['76%', null, null, '24%']}
@@ -48,5 +49,4 @@ export const Header: React.FC<HeaderProps> = ({
       </Flex>
     </Flex>
   );
-  return showWrapper ? <Wrapper>{Content}</Wrapper> : Content;
 };

src/components/Wrapper/Wrapper.tsx

@@ -5,13 +5,7 @@ interface WrapperProps {
   children: JSX.Element | JSX.Element[];
 }
 export const Wrapper: React.FC<WrapperProps> = ({ children }: WrapperProps) => (
-  <Box
-    maxWidth="7xl"
-    marginX="auto"
-    paddingX={['6', null, '8']}
-    position="relative"
-    data-testid="wrapper"
-  >
+  <Box maxWidth="7xl" marginX="auto" paddingX={['6', null, '8']} position="relative">
     {children}
   </Box>
 );