#1418975 - containers responsivos no Header, Footer e barras

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procergs/react-govrs-ds",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "type": "module",
   "sideEffects": [

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;
 }
 

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 {

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 {

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 (
     <footer className={`govrs-footer ${className}`} data-mobile={isMobile}>
-      <figure className="govrs-footer__brasao" aria-hidden="true">
-        <img src={brasao} alt="Brasão do RS" />
-      </figure>
-      <div className="govrs-footer__content">
+      <div className="govrs-footer__container">
+        <figure className="govrs-footer__brasao" aria-hidden="true">
+          <img src={brasao} alt="Brasão do RS" />
+        </figure>
+        <div className="govrs-footer__content">
         {asidePosition === 'before' && children ? (
           <aside className={`govrs-footer__aside govrs-footer__aside--before`} aria-label="footer-aside">
             {children}
@@ -169,9 +171,9 @@ export function Footer({ items = [], images = [], className = '', navigationLabe
             {children}
           </aside>
         ) : null}
-      </div>
+        </div>
 
-      <div className="govrs-footer__images">
+        <div className="govrs-footer__images">
         {hasSocial ? (
           <div className="govrs-footer__socialBlock">
             <div className="govrs-footer__social-title">Redes Sociais</div>
@@ -205,20 +207,26 @@ export function Footer({ items = [], images = [], className = '', navigationLabe
             <img key={i} src={src} alt="rodape-logo" />
           ))}
         </div>
-      </div>
-      <div className="govrs-footer__bottom">
-        <div className="govrs-footer__separator" />
-        <p className="govrs-footer__license">
-          Texto destinado a exibição das informações relacionadas à{' '}
-          {license ? (
-            <a href={license} className="govrs-footer__license-link" target="_blank" rel="noopener noreferrer">
-              <strong>licença de uso</strong>
-            </a>
-          ) : (
-            <strong>licença de uso</strong>
-          )}
-          .
-        </p>
+        </div>
+        <div className="govrs-footer__bottom">
+          <div className="govrs-footer__separator" />
+          <div className="govrs-footer__license-row">
+            <p className="govrs-footer__license">
+              Texto destinado a exibição das informações relacionadas à{' '}
+              {license ? (
+                <a href={license} className="govrs-footer__license-link" target="_blank" rel="noopener noreferrer">
+                  <strong>licença de uso</strong>
+                </a>
+              ) : (
+                <strong>licença de uso</strong>
+              )}
+              .
+            </p>
+            <div className="govrs-footer__brand" aria-hidden="true">
+              <img className="govrs-footer__brand-logo" src={procergsLogo} alt="" />
+            </div>
+          </div>
+        </div>
       </div>
     </footer>
   );

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;
 }
 

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;
+}

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;

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',