From 2c94692aeb43eff5c0180595aa3cb9167a8d7417 Mon Sep 17 00:00:00 2001 From: henrique-saenger Date: Fri, 17 Jul 2026 13:38:34 -0300 Subject: [PATCH] #1418975 - containers responsivos no Header, Footer e barras --- package-lock.json | 4 +- package.json | 2 +- .../BarraAcessibilidade.scss | 8 +-- src/components/BarraEstado/BarraEstado.scss | 6 +- src/components/Footer/Footer.scss | 64 +++++++++++++++++-- src/components/Footer/Footer.tsx | 48 ++++++++------ src/components/Footer/assets/procergs.svg | 7 ++ src/components/Header/Header.scss | 5 +- src/foundations/styles/_layout-container.scss | 45 +++++++++++++ src/foundations/styles/_variables.scss | 28 ++++++++ src/tokens/size.ts | 4 ++ 11 files changed, 185 insertions(+), 36 deletions(-) create mode 100644 src/components/Footer/assets/procergs.svg create mode 100644 src/foundations/styles/_layout-container.scss diff --git a/package-lock.json b/package-lock.json index 8b95708..e1df4b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@procergs/react-govrs-ds", - "version": "0.2.2", + "version": "0.2.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@procergs/react-govrs-ds", - "version": "0.2.2", + "version": "0.2.3", "dependencies": { "@fortawesome/fontawesome-svg-core": "^7.1.0", "@fortawesome/free-brands-svg-icons": "^7.2.0", diff --git a/package.json b/package.json index 0c2b4f7..bfecbef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@procergs/react-govrs-ds", - "version": "0.2.2", + "version": "0.2.3", "private": false, "type": "module", "sideEffects": [ diff --git a/src/components/BarraAcessibilidade/BarraAcessibilidade.scss b/src/components/BarraAcessibilidade/BarraAcessibilidade.scss index dfa92b4..570a180 100644 --- a/src/components/BarraAcessibilidade/BarraAcessibilidade.scss +++ b/src/components/BarraAcessibilidade/BarraAcessibilidade.scss @@ -1,19 +1,19 @@ @use '../../foundations/styles/variables' as vars; +@use '../../foundations/styles/layout-container' as layout; -@media (max-width: 767px) { +@media (max-width: calc(#{vars.$govrs-breakpoint-lg} - 0.0625rem)) { .acess-wrapper { display: none !important; } } .acess-wrapper { + @include layout.govrs-layout-container-barra; display: flex; - width: 100%; - max-width: none; flex-direction: row; justify-content: space-between; padding: 5px 12px; - margin: 0; + margin-block: 0; box-sizing: border-box; } diff --git a/src/components/BarraEstado/BarraEstado.scss b/src/components/BarraEstado/BarraEstado.scss index f50b6e4..b7c8889 100644 --- a/src/components/BarraEstado/BarraEstado.scss +++ b/src/components/BarraEstado/BarraEstado.scss @@ -1,4 +1,5 @@ @use '../../foundations/styles/variables' as vars; +@use '../../foundations/styles/layout-container' as layout; #rs-gov { color: var(--green-matriz-link); @@ -57,12 +58,11 @@ input.barra-estado__checkbox, } .barra-estado__container { + @include layout.govrs-layout-container-barra; position: relative; - width: 100%; - max-width: none; height: 100%; padding: 0 var(--padding-default); - margin: 0; + margin-block: 0; box-sizing: border-box; } .barra-estado__container a { diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 16b4b02..7ae031d 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -1,12 +1,21 @@ +@use '../../foundations/styles/layout-container' as layout; + .govrs-footer { position: relative; z-index: var(--govrs-z-index-header); - padding: 24px; + padding-block: 24px; + padding-inline: 0; background: var(--govrs-color-brand-primary, #1a7235); color: var(--govrs-color-text-inverse, #ffffff); font-size: var(--govrs-font-size-body-md, 1rem); } +.govrs-footer__container { + @include layout.govrs-layout-container; + padding-inline: 24px; + box-sizing: border-box; +} + .govrs-footer__brasao { margin: 0 0 16px 0; padding: 0; @@ -157,6 +166,31 @@ text-align: center; } +.govrs-footer__license-row { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0; + width: auto; + max-width: 100%; +} + +.govrs-footer__brand { + display: flex; + align-items: center; + border-left: 1px solid var(--govrs-color-text-inverse, #ffffff); + margin-left: 12px; + padding-left: 12px; +} + +.govrs-footer__brand-logo { + display: block; + width: 101px; + height: 21px; + object-fit: contain; +} + .govrs-footer__separator { border-top: 1px solid var(--govrs-color-text-inverse, #ffffff); height: 1px; @@ -173,7 +207,7 @@ color: inherit; font-size: 0.875rem; margin: 0; - max-width: 1200px; + flex: 0 0 auto; } .govrs-footer__license-link { @@ -210,8 +244,8 @@ background: var(--govrs-color-brand-primary-strong, #04290f); } - .govrs-footer[data-mobile='true'] { - padding: 16px; + .govrs-footer[data-mobile='true'] .govrs-footer__container { + padding-inline: 16px; } .govrs-footer[data-mobile='true'] .govrs-footer__sublist { @@ -267,6 +301,28 @@ .govrs-footer__images-list { margin-left: 0; } + + .govrs-footer__license-row { + flex-direction: column; + gap: 8px; + } + + .govrs-footer__brand { + border: none; + margin: 0; + padding: 0; + } +} + +.govrs-footer[data-mobile='true'] .govrs-footer__license-row { + flex-direction: column; + gap: 8px; +} + +.govrs-footer[data-mobile='true'] .govrs-footer__brand { + border: none; + margin: 0; + padding: 0; } .govrs-footer[data-mobile='true'] .govrs-footer__sitemap { diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 692d98c..87f163c 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -10,6 +10,7 @@ import facebookIcon from './assets/facebook.svg?url'; import instaIcon from './assets/insta.svg?url'; import ytIcon from './assets/yt.svg?url'; import xIcon from './assets/x.svg?url'; +import procergsLogo from './assets/procergs.svg?url'; export namespace Footer { export type Item = { @@ -78,10 +79,11 @@ export function Footer({ items = [], images = [], className = '', navigationLabe return ( ); diff --git a/src/components/Footer/assets/procergs.svg b/src/components/Footer/assets/procergs.svg new file mode 100644 index 0000000..05b4ec6 --- /dev/null +++ b/src/components/Footer/assets/procergs.svg @@ -0,0 +1,7 @@ + diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 8122097..76c0778 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -1,4 +1,5 @@ @use '../../foundations/styles/variables' as vars; +@use '../../foundations/styles/layout-container' as layout; .govrs-header-wrapper { position: relative; @@ -21,9 +22,9 @@ } .govrs-header { - width: 100%; + @include layout.govrs-layout-container-header; padding-inline: var(--govrs-header-padding-inline, var(--govrs-space-2-5, 0.625rem)); - margin: 0; + margin-block: 0; box-sizing: border-box; } diff --git a/src/foundations/styles/_layout-container.scss b/src/foundations/styles/_layout-container.scss new file mode 100644 index 0000000..785ea48 --- /dev/null +++ b/src/foundations/styles/_layout-container.scss @@ -0,0 +1,45 @@ +@use 'variables' as vars; + +@mixin govrs-layout-container-barra { + width: 100%; + margin-inline: auto; + box-sizing: border-box; + + @media (min-width: #{vars.$govrs-breakpoint-lg}) { + max-width: var( + --govrs-layout-container-barra-max-lg, + #{vars.$govrs-layout-container-barra-max-lg} + ); + } + + @media (min-width: #{vars.$govrs-breakpoint-xl}) { + max-width: var( + --govrs-layout-container-barra-max-xl, + #{vars.$govrs-layout-container-barra-max-xl} + ); + } + + @media (min-width: #{vars.$govrs-breakpoint-xxxl}) { + max-width: var( + --govrs-layout-container-barra-max-xxxl, + #{vars.$govrs-layout-container-barra-max-xxxl} + ); + } +} + +@mixin govrs-layout-container-header { + width: 100%; + margin-inline: auto; + box-sizing: border-box; + + @media (min-width: #{vars.$govrs-breakpoint-tv-min}) { + max-width: var( + --govrs-layout-container-header-max-width, + #{vars.$govrs-layout-container-header-max-width} + ); + } +} + +@mixin govrs-layout-container { + @include govrs-layout-container-header; +} diff --git a/src/foundations/styles/_variables.scss b/src/foundations/styles/_variables.scss index bb34768..fdfe4d1 100644 --- a/src/foundations/styles/_variables.scss +++ b/src/foundations/styles/_variables.scss @@ -33,6 +33,19 @@ $govrs-breakpoint-tablet-landscape-max: 79.9375rem; $govrs-breakpoint-desktop-min: 80rem; $govrs-breakpoint-desktop-max: 99.9375rem; $govrs-breakpoint-tv-min: 100rem; +$govrs-breakpoint-xs: 25rem; +$govrs-breakpoint-xs-wide: 26.25rem; +$govrs-breakpoint-sm: 36rem; +$govrs-breakpoint-md: 40rem; +$govrs-breakpoint-lg: 48rem; +$govrs-breakpoint-xl: 62rem; +$govrs-breakpoint-xxl: 64rem; +$govrs-breakpoint-xxxl: 75rem; + +$govrs-layout-container-barra-max-lg: 46.875rem; +$govrs-layout-container-barra-max-xl: 60.625rem; +$govrs-layout-container-barra-max-xxxl: 73.125rem; +$govrs-layout-container-header-max-width: 100rem; :root { /* Color tokens */ @@ -116,6 +129,21 @@ $govrs-breakpoint-tv-min: 100rem; --govrs-breakpoint-desktop-min: #{$govrs-breakpoint-desktop-min}; --govrs-breakpoint-desktop-max: #{$govrs-breakpoint-desktop-max}; --govrs-breakpoint-tv-min: #{$govrs-breakpoint-tv-min}; + --govrs-breakpoint-xs: #{$govrs-breakpoint-xs}; + --govrs-breakpoint-xs-wide: #{$govrs-breakpoint-xs-wide}; + --govrs-breakpoint-sm: #{$govrs-breakpoint-sm}; + --govrs-breakpoint-md: #{$govrs-breakpoint-md}; + --govrs-breakpoint-lg: #{$govrs-breakpoint-lg}; + --govrs-breakpoint-xl: #{$govrs-breakpoint-xl}; + --govrs-breakpoint-xxl: #{$govrs-breakpoint-xxl}; + --govrs-breakpoint-xxxl: #{$govrs-breakpoint-xxxl}; + + --govrs-layout-container-barra-max-lg: #{$govrs-layout-container-barra-max-lg}; + --govrs-layout-container-barra-max-xl: #{$govrs-layout-container-barra-max-xl}; + --govrs-layout-container-barra-max-xxxl: #{$govrs-layout-container-barra-max-xxxl}; + --govrs-layout-container-header-max-width: #{$govrs-layout-container-header-max-width}; + --govrs-layout-container-max-width: var(--govrs-layout-container-header-max-width); + --layout-container-width: var(--govrs-layout-container-header-max-width); /* Spacing tokens */ --govrs-space-0: 0rem; diff --git a/src/tokens/size.ts b/src/tokens/size.ts index 8c11c28..3b2ba7d 100644 --- a/src/tokens/size.ts +++ b/src/tokens/size.ts @@ -31,6 +31,10 @@ export const size = { foundation: '45rem', story: '65.3125rem', content: '75rem', + header: '100rem', + barraAtLg: '46.875rem', + barraAtXl: '60.625rem', + barraAtXxxl: '73.125rem', }, card: { minWidth: '15.625rem',