From 3d9e9f836d5b51795c38f83e55a5254c0576b89f Mon Sep 17 00:00:00 2001 From: Dario-Felipe Date: Fri, 23 Dec 2022 17:14:36 -0300 Subject: [PATCH 1/4] feat(header): add new prop for header get contained or fluid fill --- .../components/components/header/index.mdx | 97 +++++++++++++++---- packages/yoga/src/Header/web/Header.jsx | 52 ++++++---- 2 files changed, 110 insertions(+), 39 deletions(-) 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..d0479e6e6c 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'; @@ -20,31 +21,37 @@ const StyledHeader = styled(Box)` height: ${header.height.xxs}px; ${media.lg` - padding: 0 ${header.padding.lg}px; - height: ${header.height.lg}px; + 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 +62,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; From 04a429db8b8c2a5fea584b962d464c29627048a7 Mon Sep 17 00:00:00 2001 From: Dario-Felipe Date: Wed, 28 Dec 2022 18:31:59 -0300 Subject: [PATCH 2/4] refactor(header): adjust header to get padding only on fluid variant --- packages/yoga/src/Header/web/Header.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/yoga/src/Header/web/Header.jsx b/packages/yoga/src/Header/web/Header.jsx index d0479e6e6c..bb3da65565 100644 --- a/packages/yoga/src/Header/web/Header.jsx +++ b/packages/yoga/src/Header/web/Header.jsx @@ -17,11 +17,19 @@ 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; `} `} From 968962edebdf01cb6b90aa8047de6c4fa31a0c69 Mon Sep 17 00:00:00 2001 From: Dario-Felipe Date: Thu, 29 Dec 2022 16:36:07 -0300 Subject: [PATCH 3/4] test(header): update header snapshot test --- .../web/__snapshots__/Header.test.jsx.snap | 166 +++++++++++++----- 1 file changed, 120 insertions(+), 46 deletions(-) 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`] = `
- - - Gympass Logo - - - - - - - - - +
+
+
+ + + Gympass Logo + + + + + + + + + +
+
+
+
`; From 77f331b4f047462a5f3d5a23dd22016207f7186e Mon Sep 17 00:00:00 2001 From: Dario-Felipe Date: Fri, 6 Jan 2023 13:00:57 -0300 Subject: [PATCH 4/4] style(header): remove white-space on header style --- packages/yoga/src/Header/web/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yoga/src/Header/web/Header.jsx b/packages/yoga/src/Header/web/Header.jsx index bb3da65565..0d018a4514 100644 --- a/packages/yoga/src/Header/web/Header.jsx +++ b/packages/yoga/src/Header/web/Header.jsx @@ -30,7 +30,7 @@ const StyledHeader = styled(Box)` height: ${header.height.xxs}px; ${media.lg` - height: ${header.height.lg}px; + height: ${header.height.lg}px; `} `} `;