diff --git a/packages/doc/content/components/components/header/index.mdx b/packages/doc/content/components/components/header/index.mdx
index 4ab7ea991e..a18b1a83a9 100644
--- a/packages/doc/content/components/components/header/index.mdx
+++ b/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 = () => ;
render(() => {
@@ -84,24 +84,85 @@ render(() => {
return (
-
-
- Link button
- Link button
-
+
+
+ Link button
+ Link button
+
+
+
+
+
-
+
+
+
+
+
+
+
+ );
+});
+```
+
+### 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 (
+
+
+
+
+ Link button
+ Link button
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
);
diff --git a/packages/yoga/src/Header/web/Header.jsx b/packages/yoga/src/Header/web/Header.jsx
index 919b296232..0d018a4514 100644
--- a/packages/yoga/src/Header/web/Header.jsx
+++ b/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 (
-
- {link ? (
-
-
-
- ) : (
-
- )}
- {children}
-
+
+
+
+
+
+ {link ? (
+
+
+
+ ) : (
+
+ )}
+ {children}
+
+
+
+
+
);
};
@@ -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;
diff --git a/packages/yoga/src/Header/web/__snapshots__/Header.test.jsx.snap b/packages/yoga/src/Header/web/__snapshots__/Header.test.jsx.snap
index 79c6005a3d..dcb1ce703c 100644
--- a/packages/yoga/src/Header/web/__snapshots__/Header.test.jsx.snap
+++ b/packages/yoga/src/Header/web/__snapshots__/Header.test.jsx.snap
@@ -5,6 +5,27 @@ exports[` should match snapshot 1`] = `
background-color: #FFFFFF;
box-shadow: 0 5px 5px -3px rgba(152,152,166,0.2),0 8px 10px 1px rgba(152,152,166,0.14),0 3px 14px 2px rgba(152,152,166,0.12);
width: 100%;
+}
+
+.c1 {
+ box-sizing: border-box;
+ max-width: 1600px;
+}
+
+.c2 {
+ display: grid;
+ box-sizing: border-box;
+ grid-template-columns: repeat(12,1fr);
+}
+
+.c3 {
+ box-sizing: border-box;
+ min-width: 0;
+ min-height: 0;
+}
+
+.c4 {
+ background-color: #FFFFFF;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -13,13 +34,50 @@ exports[` should match snapshot 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
- padding: 0 20px;
height: 56px;
}
+@media (min-width:0px) {
+ .c1 {
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+}
+
+@media (min-width:1024px) {
+ .c1 {
+ margin-left: 71px;
+ margin-right: 71px;
+ }
+}
+
+@media (min-width:1742px) {
+ .c1 {
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+@media (min-width:0px) {
+ .c2 {
+ grid-column-gap: 16px;
+ }
+}
+
+@media (min-width:1024px) {
+ .c2 {
+ grid-column-gap: 24px;
+ }
+}
+
+@media (min-width:360px) {
+ .c3 {
+ grid-column-end: span 12;
+ }
+}
+
@media (min-width:1024px) {
- .c0 {
- padding: 0 72px;
+ .c4 {
height: 72px;
}
}
@@ -27,52 +85,68 @@ exports[` should match snapshot 1`] = `
-
+
+
+
+
+
+
+
`;