refactor: replace Footer __content __wrapper with rhc-page-footer-layout

Author: Robbert

.changeset/stale-moose-wonder.md

@@ -0,0 +1,9 @@
+---
+'@rijkshuisstijl-community/components-react': patch
+'@rijkshuisstijl-community/components-css': patch
+'@rijkshuisstijl-community/components-angular': patch
+---
+
+Use new Utrecht Page Footer CSS that provides `utrecht-page-footer__content`, which replaces `rhc-page-footer__content`.
+
+Replace `rhc-page-footer__wrapper` new nested `rhc-page-footer-layout` div.

packages/components-angular/src/footer/footer.component.html

@@ -7,18 +7,20 @@
 }
 
 <footer [class]="`utrecht-page-footer rhc-page-footer ${backgroundClass}`">
-  <div class="rhc-page-footer__content rhc-page-footer__wrapper">
-    @if (heading) {
-      <h2 aria-hidden="true" hidden>{{ heading }}</h2>
-    }
-    @if (tagline) {
-      <div class="rhc-page-footer__tagline">
-        <rhc-heading [level]="2" [appearanceLevel]="appearanceLevel" role="presentation">{{ tagline }}</rhc-heading>
-      </div>
-    }
-    <rhc-column-layout>
-      <ng-content select="[columns]"></ng-content>
-    </rhc-column-layout>
+  <div class="utrecht-page-footer__content">
+    <div class="rhc-page-footer-layout">
+      @if (heading) {
+        <h2 aria-hidden="true" hidden>{{ heading }}</h2>
+      }
+      @if (tagline) {
+        <div class="rhc-page-footer__tagline">
+          <rhc-heading [level]="2" [appearanceLevel]="appearanceLevel" role="presentation">{{ tagline }}</rhc-heading>
+        </div>
+      }
+      <rhc-column-layout>
+        <ng-content select="[columns]"></ng-content>
+      </rhc-column-layout>
+    </div>
   </div>
 
   @if (subFooter) {

packages/components-css/library-css/src/footer/index.scss

@@ -51,7 +51,7 @@
   border-block-start-width: var(--rhc-page-footer-border-block-start-width);
 }
 
-.rhc-page-footer__content {
+.rhc-page-footer-layout {
   column-gap: var(--rhc-page-footer-column-gap);
   display: flex;
   flex: 1;
@@ -63,24 +63,14 @@
   }
 }
 
-.rhc-page-footer__wrapper {
-  box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: var(--rhc-page-footer-content-max-inline-size);
-  padding-block-end: var(--utrecht-page-footer-padding-block-end);
-  padding-block-start: var(--utrecht-page-footer-padding-block-start);
-  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
-  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
-}
-
 .rhc-page-footer__section,
 .rhc-page-footer__tagline {
   break-inside: avoid;
   line-height: var(--rhc-text-line-height-md, inherit);
   padding-block-end: var(--rhc-page-footer-padding-block-end);
 }
 
-.rhc-page-footer__content > * {
+.rhc-page-footer-layout > * {
   flex: 1;
 }
 
@@ -112,15 +102,6 @@
   }
 }
 
-@media (width <= 780px) {
-  .rhc-page-footer__wrapper {
-    --utrecht-page-footer-padding-inline-end: var(--rhc-page-footer-padding-inline-end);
-    --utrecht-page-footer-padding-inline-start: var(--rhc-page-footer-padding-inline-start);
-    --utrecht-page-footer-padding-block-end: var(--rhc-page-footer-padding-block-end);
-    --utrecht-page-footer-padding-block-start: var(--rhc-page-footer-padding-block-start);
-  }
-}
-
 .rhc-page-prefooter {
   display: flex;
   justify-content: center;

packages/components-react/library-react/src/Footer.tsx

@@ -73,30 +73,32 @@ export const Footer = ({
         className,
       )}
     >
-      {heading ? (
-        <Heading hidden aria-hidden="true" id={headingId} level={2}>
-          {heading}
-        </Heading>
-      ) : null}
-      <div className="rhc-page-footer__content rhc-page-footer__wrapper">
-        {tagline && (
-          <div className="rhc-page-footer__tagline" key={'heading'}>
-            <Heading appearanceLevel={appearanceLevel} level={2} role="presentation">
-              {tagline}
-            </Heading>
-          </div>
-        )}
-        <ColumnLayout>
-          {columns?.map(({ heading: columnHeading, children }: ColumnProps, index: number) => (
-            <div className="rhc-page-footer__section" key={index}>
-              <Heading appearanceLevel={appearanceLevel} level={heading ? 3 : 2}>
-                {columnHeading}
+      <div className="utrecht-page-footer__content">
+        {heading ? (
+          <Heading hidden aria-hidden="true" id={headingId} level={2}>
+            {heading}
+          </Heading>
+        ) : null}
+        <div className="rhc-page-footer-layout">
+          {tagline && (
+            <div className="rhc-page-footer__tagline" key={'heading'}>
+              <Heading appearanceLevel={appearanceLevel} level={2} role="presentation">
+                {tagline}
               </Heading>
-              {children}
             </div>
-          ))}
-          {children}
-        </ColumnLayout>
+          )}
+          <ColumnLayout>
+            {columns?.map(({ heading: columnHeading, children }: ColumnProps, index: number) => (
+              <div className="rhc-page-footer__section" key={index}>
+                <Heading appearanceLevel={appearanceLevel} level={heading ? 3 : 2}>
+                  {columnHeading}
+                </Heading>
+                {children}
+              </div>
+            ))}
+            {children}
+          </ColumnLayout>
+        </div>
       </div>
       {(backtotop || subFooter) && (
         <div