@kitconcept/volto-light-theme 8.0.0-alpha.19 → 8.0.0-alpha.20

package/.changelog.draft

@@ -1,15 +1,7 @@
-## 8.0.0-alpha.19 (2026-04-17)
-
-### Breaking
-
-- Improve Card component link handling by using a CSS stretched-link pattern & other minor style fixes for consistency. Breaking: custom `Summary` components must now accept and use the `LinkToItem` prop; category labels changed from heading tags to `<ul>` elements. See the upgrade guide for migration steps. @danalvrz 
+## 8.0.0-alpha.20 (2026-04-21)
 
 ### Bugfix
 
-- Fixed the font-color in the table block with h2 or h3 font-size. @TimoBroeskamp [#820](https://github.com/kitconcept/volto-light-theme/pull/820)
-- + display footer links with an underline, remove gap between seperate lines in footer colophon text and fixed richtext-editor combinations to work together. @TimoBroeskamp 
-- Fix navigation text color not loading on hard reload. @iFlameing 
-- Fix spacings for navigation items when using the Intranet header. @danlavrz 
-- Fix styles for text in colophon. @danalvrz 
+- Allow address in Footer to take all available space based on number of links columns. @danalvrz 
 
 

package/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.20 (2026-04-21)
+
+### Bugfix
+
+- Allow address in Footer to take all available space based on number of links columns. @danalvrz 
+
 ## 8.0.0-alpha.19 (2026-04-17)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.19",
+  "version": "8.0.0-alpha.20",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -26,11 +26,20 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha",
+    "release-rc": "release-it --preRelease=rc"
+  },
   "addons": [
     "@kitconcept/volto-bm3-compat"
   ],
   "devDependencies": {
     "@plone/scripts": "^3.6.2",
+    "@plone/types": "workspace:*",
     "@storybook/react": "^8.6.12",
     "@testing-library/cypress": "10.0.3",
     "@testing-library/jest-dom": "^6.8.0",
@@ -46,21 +55,20 @@
     "redux-mock-store": "1.5.4",
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
-    "vitest": "^3.1.2",
-    "@plone/types": "2.0.0-alpha.14"
+    "vitest": "^3.1.2"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
+    "@kitconcept/volto-bm3-compat": "workspace:^",
+    "@plone/components": "workspace:^",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
     "react-aria-components": "^1.14.0",
     "react-colorful": "^5.6.1",
-    "uuid": "^11.0.0",
-    "@plone/components": "^4.0.0-alpha.4",
-    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1"
+    "uuid": "^11.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.5.1",
@@ -70,13 +78,5 @@
     "react-intl": "^3.12.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5.2.0"
-  },
-  "scripts": {
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
-    "dry-release": "release-it --dry-run",
-    "release": "release-it",
-    "release-major-alpha": "release-it major --preRelease=alpha",
-    "release-alpha": "release-it --preRelease=alpha",
-    "release-rc": "release-it --preRelease=rc"
   }
-}
+}

package/src/components/Footer/ColumnLinks.tsx

@@ -14,8 +14,8 @@ const ColumnLinks = (props: ColumnLinksProps) => {
         ? links.map((link) => {
             if (isEmpty(link) || !link.href) return null;
 
-            const title = link.title || link.href[0]['title'];
-            const href = flattenToAppURL(link.href[0]?.['@id']);
+            const title = link?.title || link?.href[0]?.['title'];
+            const href = flattenToAppURL(link?.href[0]?.['@id']);
 
             if (!href) return null;
 

package/src/components/Footer/slots/CoreFooter.tsx

@@ -38,8 +38,10 @@ const CoreFooter = ({ content }: { content: Content }) => {
       <Container className="default">
         <div className="footer-grid">
           <div className="address-column">
-            {/* @ts-ignore the Logo definition is different from the Volto one */}
-            <Logo isFooterLogo />
+            <div className="logo">
+              {/* @ts-ignore the Logo definition is different from the Volto one */}
+              <Logo isFooterLogo />
+            </div>
             <p
               style={{ whiteSpace: 'pre-line' }}
               dangerouslySetInnerHTML={{

package/src/theme/_footer.scss

@@ -13,7 +13,7 @@
     --footer-foreground: var(--primary-foreground-color, #{$black});
   }
 
-  .container {
+  .container:not(> .container) {
     padding: 0 1rem;
   }
 
@@ -35,7 +35,10 @@
     --footer-background: var(--secondary-color, #{$white});
     --footer-foreground: var(--secondary-foreground-color, #{$black});
 
-    padding: $spacing-xlarge 2rem;
+    padding: $spacing-xlarge 2rem 100px 2rem;
+    @media only screen and (max-width: $largest-mobile-screen) {
+      padding: $spacing-xlarge $spacing-small;
+    }
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
 
@@ -94,13 +97,12 @@
 
     .logo {
       display: flex;
-      justify-content: center;
-      margin: 5rem 0 1.8rem 0;
-
+      max-width: 300px;
+      max-height: 90px;
+      margin-bottom: $spacing-medium;
       a {
         display: block;
-        max-width: 200px;
-        max-height: 80px;
+        max-width: 100%;
 
         img {
           max-width: 100%;
@@ -111,8 +113,10 @@
 
     .footer-grid {
       display: grid;
-      gap: 1rem;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: $spacing-small;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      grid-template-columns: auto;
       text-align: left;
 
       h2 {
@@ -128,8 +132,8 @@
         list-style: none;
 
         li {
-          padding: 0 7px;
           font-size: 18px;
+          line-height: 30px;
 
           a {
             text-decoration: underline;
@@ -141,34 +145,48 @@
         justify-self: start;
         @include body-text();
 
-        img {
-          margin-bottom: 38px;
+        &:has(~ div li),
+        &:has(~ div h2) {
+          width: 380px;
+          .logo ~ * {
+            padding-right: $spacing-xlarge;
+          }
         }
       }
 
-      @media only screen and (max-width: $largest-mobile-screen) {
-        gap: $spacing-xlarge;
+      .column-left,
+      .column-middle,
+      .column-right {
+        &:has(ul:empty):not(:has(h2)) {
+          display: none;
+        }
+      }
 
-        text-align: center;
+      @media only screen and (max-width: $largest-mobile-screen) {
+        gap: $spacing-medium;
+        grid-auto-flow: row;
+        grid-template-columns: 1fr;
 
         .address-column {
           display: flex;
+          width: 100% !important;
           flex-direction: column;
-          align-items: center;
+          align-items: flex-start;
+          margin-bottom: $spacing-medium;
         }
 
         .address-column,
         .column-left,
         .column-middle,
         .column-right {
-          justify-self: center;
+          justify-self: start;
         }
       }
     }
   }
 
   .post-footer {
-    padding: $spacing-xlarge 2rem;
+    padding: $spacing-xlarge $spacing-small;
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
     font-size: 18px;