feat(header): 🚀💣 add new prop to become header fluid or contained

packages/doc/content/components/components/header/index.mdx

@@ -13,9 +13,10 @@ import { FlagBrazil } from '@gympass/yoga-icons';
 
 ### Reference
 
-The Header defines the top of a page, and displays information and actions relating to the current page. 
+The Header defines the top of a page, and displays information and actions relating to the current page.
 
 ### Usage
+
 ### Default
 
 ```javascript
@@ -39,7 +40,6 @@ The header is prepared to have a link to redirect the user clicking on the Gympa
 The header changes the logo by passing a component to the logo prop. If nothing is passed, the default Gympass logo will be shown.
 
 ```javascript state
-
 const CustomLogo = () => <Icon as={FlagBrazil} size="large" />;
 
 render(() => {
@@ -84,24 +84,85 @@ render(() => {
   return (
     <Box width="100%">
       <Header>
-          <Hide xxs xs sm md>
-            <LeftContent>
-              <LinkButton>Link button</LinkButton>
-              <LinkButton>Link button</LinkButton>
-            </LeftContent>
+        <Hide xxs xs sm md>
+          <LeftContent>
+            <LinkButton>Link button</LinkButton>
+            <LinkButton>Link button</LinkButton>
+          </LeftContent>
+        </Hide>
+        <RightContent>
+          <Hide xs>
+            <Button.Outline small />
           </Hide>
-          <RightContent>
+          <SmallButton small />
+          <Hide lg-start>
+            <Icon
+              size="medium"
+              fill="vibin"
+              as={MenuList}
+              style={{ marginLeft: '20px' }}
+            />
+          </Hide>
+        </RightContent>
+      </Header>
+    </Box>
+  );
+});
+```
+
+### Fluid
+
+The header can fill all container size.
+
+```javascript state
+const LeftContent = styled.div`
+  display: flex;
+  flex-grow: 3;
+  padding-left: 48px;
+`;
+
+const RightContent = styled.div`
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const LinkButton = styled(Button.Link)`
+  padding-right: 32px;
+`;
+
+const SmallButton = styled(Button)`
+  margin-left: 8px;
+  ${media.lg`
+    margin-left: 20px;
+  `}
+`;
+
+render(() => {
+  return (
+    <Box width="100%">
+      <Header fluid>
+        <Hide xxs xs sm md>
+          <LeftContent>
+            <LinkButton>Link button</LinkButton>
+            <LinkButton>Link button</LinkButton>
+          </LeftContent>
+        </Hide>
+        <RightContent>
+          <Hide xs>
             <Button.Outline small />
-            <SmallButton small />
-            <Hide lg-start>
-              <Icon
-                size="medium"
-                fill="vibin"
-                as={MenuList}
-                style={{ marginLeft: '20px' }}
-              />
-            </Hide>
-          </RightContent>
+          </Hide>
+          <SmallButton small />
+          <Hide lg-start>
+            <Icon
+              size="medium"
+              fill="vibin"
+              as={MenuList}
+              style={{ marginLeft: '20px' }}
+            />
+          </Hide>
+        </RightContent>
       </Header>
     </Box>
   );

packages/yoga/src/Header/web/Header.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { string, node, elementType } from 'prop-types';
+import { string, node, elementType, bool } from 'prop-types';
 
 import { media } from '@gympass/yoga-helpers';
+import { Container, Row, Col } from '@gympass/yoga';
 
 import Box from '../../Box';
 
@@ -16,35 +17,49 @@ const StyledHeader = styled(Box)`
       },
     },
   }) => css`
-    padding: 0 ${header.padding.xxs}px;
+    ${({ fluid }) =>
+      fluid &&
+      css`
+        padding: 0 ${header.padding.xxs}px;
+
+        ${media.lg`
+          padding: 0 ${header.padding.lg}px;
+        `}
+      `}
+
     height: ${header.height.xxs}px;
 
     ${media.lg`
-      padding: 0 ${header.padding.lg}px;
       height: ${header.height.lg}px;
     `}
   `}
 `;
 
-const Header = ({ link, children, logo }) => {
+const Header = ({ link, children, logo, fluid }) => {
   return (
-    <StyledHeader
-      as="header"
-      d="flex"
-      elevation="medium"
-      bgColor="white"
-      alignItems="center"
-      w="100%"
-    >
-      {link ? (
-        <a href={link}>
-          <Logo customLogo={logo} />
-        </a>
-      ) : (
-        <Logo customLogo={logo} />
-      )}
-      {children}
-    </StyledHeader>
+    <Box as="header" elevation="medium" bgColor="white" w="100%">
+      <Container fluid={fluid}>
+        <Row>
+          <Col xs={12}>
+            <StyledHeader
+              d="flex"
+              bgColor="white"
+              alignItems="center"
+              fluid={fluid}
+            >
+              {link ? (
+                <a href={link}>
+                  <Logo customLogo={logo} />
+                </a>
+              ) : (
+                <Logo customLogo={logo} />
+              )}
+              {children}
+            </StyledHeader>
+          </Col>
+        </Row>
+      </Container>
+    </Box>
   );
 };
 
@@ -55,12 +70,15 @@ Header.propTypes = {
   children: node,
   /** Use logo to change headers image */
   logo: elementType,
+  /** Use to fill all container size */
+  fluid: bool,
 };
 
 Header.defaultProps = {
   link: null,
   children: null,
   logo: null,
+  fluid: false,
 };
 
 export default Header;