@kitconcept/volto-light-theme 6.0.0-alpha.24 → 6.0.0-alpha.25

package/.changelog.draft

@@ -1,9 +1,13 @@
-## 6.0.0-alpha.24 (2025-05-06)
+## 6.0.0-alpha.25 (2025-05-14)
 
 ### Feature
 
-- Added `sticky_menu` slot. @sneridagh [#523](https://github.com/kitconcept/volto-light-theme/pull/523)
-- Better naming for the specific kitconcept's behaviors for distributions. @sneridagh [#530](https://github.com/kitconcept/volto-light-theme/pull/530)
-- Use `--image-aspect-ratio` for all images. @danalvrz [#533](https://github.com/kitconcept/volto-light-theme/pull/533)
+- Add --image-aspect-ratio docs & make Slider use the CSS prop. @danalvrz [#535](https://github.com/kitconcept/volto-light-theme/pull/535)
+- Integration with the intranet control panel settings for the intranet header. @sneridagh [#542](https://github.com/kitconcept/volto-light-theme/pull/542)
+
+### Bugfix
+
+- Fixed props for Summary component in Teaser view. @sneridagh [#536](https://github.com/kitconcept/volto-light-theme/pull/536)
+- Color fixes for Footer & metadata block. @danalvrz [#544](https://github.com/kitconcept/volto-light-theme/pull/544)
 
 

package/CHANGELOG.md

@@ -8,6 +8,18 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.25 (2025-05-14)
+
+### Feature
+
+- Add --image-aspect-ratio docs & make Slider use the CSS prop. @danalvrz [#535](https://github.com/kitconcept/volto-light-theme/pull/535)
+- Integration with the intranet control panel settings for the intranet header. @sneridagh [#542](https://github.com/kitconcept/volto-light-theme/pull/542)
+
+### Bugfix
+
+- Fixed props for Summary component in Teaser view. @sneridagh [#536](https://github.com/kitconcept/volto-light-theme/pull/536)
+- Color fixes for Footer & metadata block. @danalvrz [#544](https://github.com/kitconcept/volto-light-theme/pull/544)
+
 ## 6.0.0-alpha.24 (2025-05-06)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.24",
+  "version": "6.0.0-alpha.25",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,7 +33,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "release-it": "^17.7.0",
-    "@plone/types": "1.4.3"
+    "@plone/types": "1.4.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

package/src/components/Blocks/Teaser/DefaultBody.jsx

@@ -21,7 +21,7 @@ const messages = defineMessages({
 const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode, style } = props;
   const intl = useIntl();
-  const href = data.href?.[0];
+  const href = data.href?.[0] || {};
   const image = data.preview_image?.[0];
   const url = data.preview_image?.[0]?.['@id'];
 
@@ -29,7 +29,7 @@ const TeaserDefaultTemplate = (props) => {
   const Summary =
     config.getComponent({
       name: 'Summary',
-      dependencies: [data['@type']],
+      dependencies: [href['@type']],
     }).component || DefaultSummary;
   const { openExternalLinkInNewTab } = config.settings;
 
@@ -75,7 +75,7 @@ const TeaserDefaultTemplate = (props) => {
                 )
               )}
               <div className="content">
-                <Summary item={data} HeadingTag="h2" />
+                <Summary item={{ ...href, ...data }} HeadingTag="h2" />
               </div>
             </div>
           </MaybeWrap>

package/src/components/SearchWidget/IntranetSearchWidget.jsx

@@ -9,6 +9,7 @@ import { Form, Input } from 'semantic-ui-react';
 import { compose } from 'redux';
 import { PropTypes } from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -78,13 +79,24 @@ class IntranetSearchWidget extends Component {
    * @returns {undefined}
    */
   onSubmit(event) {
+    const searchURL =
+      this.props.site['kitconcept.intranet.external_search_url'];
     const path =
       this.props.pathname?.length > 0
         ? `&path=${encodeURIComponent(this.props.pathname)}`
         : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+
+    if (searchURL) {
+      window.open(
+        `${searchURL}?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+        '_blank',
+        'noopener,noreferrer',
+      );
+    } else {
+      this.props.history.push(
+        `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+      );
+    }
     // reset input value
     this.setState({
       text: '',
@@ -99,6 +111,8 @@ class IntranetSearchWidget extends Component {
    */
   render() {
     const { intl } = this.props;
+    const searchFieldPlaceholder =
+      this.props.site['kitconcept.intranet.search_field_placeholder'];
     return (
       <Form action="/search" onSubmit={this.onSubmit}>
         <Form.Field className="searchbox">
@@ -109,7 +123,14 @@ class IntranetSearchWidget extends Component {
             value={this.state.text}
             transparent
             autoComplete="off"
-            placeholder={intl.formatMessage(messages.placeholder)}
+            placeholder={
+              searchFieldPlaceholder
+                ? intl.formatMessage({
+                    id: searchFieldPlaceholder,
+                    defaultMessage: searchFieldPlaceholder,
+                  })
+                : intl.formatMessage(messages.placeholder)
+            }
             title={intl.formatMessage(messages.search)}
           />
           <button aria-label={intl.formatMessage(messages.search)}>
@@ -121,4 +142,10 @@ class IntranetSearchWidget extends Component {
   }
 }
 
-export default compose(withRouter, injectIntl)(IntranetSearchWidget);
+export default compose(
+  withRouter,
+  injectIntl,
+  connect((state, props) => ({
+    site: state.site.data,
+  })),
+)(IntranetSearchWidget);

package/src/theme/_bgcolor-blocks-layout.scss

@@ -82,6 +82,9 @@
 
 // Color map
 @mixin use-theme-colors() {
+  #page-document {
+    background: var(--primary-color);
+  }
   // Page title
   h1.documentFirstHeading {
     color: var(--theme-foreground-color);
@@ -96,6 +99,11 @@
     h2 {
       color: var(--theme-foreground-color);
     }
+    .ui.bulleted.list li {
+      &::before {
+        color: var(--link-foreground-color) !important;
+      }
+    }
   }
 
   // Blocks
@@ -727,6 +735,12 @@
       }
     }
 
+    &.eventMetadata {
+      .details-container {
+        color: var(--theme-foreground-color);
+      }
+    }
+
     .cookie-consent-buttons {
       button.button {
         color: black;
@@ -838,8 +852,11 @@
     }
 
     [class^='block-editor-'] {
-      a.slate-editor-link {
-        color: var(--theme-foreground-color);
+      a.slate-editor-link span[data-slate-string='true'] {
+        color: var(
+          --link-foreground-color,
+          --theme-foreground-color
+        ) !important;
       }
 
       .block {
@@ -907,6 +924,14 @@
             }
           }
         }
+
+        .eventMetadata {
+          color: var(--theme-foreground-color);
+
+          a {
+            color: var(--link-foreground-color, --theme-foreground-color);
+          }
+        }
       }
     }
   }
@@ -1133,6 +1158,26 @@
         & > span,
         & > div {
           color: var(--primary-foreground-color);
+
+          .ui.pagination.menu {
+            background: var(--primary-color);
+
+            a.item {
+              color: var(--primary-foreground-color);
+
+              &:not([aria-current='true']) {
+                color: var(--link-foreground-color);
+              }
+
+              &.disabled {
+                color: var(--primary-foreground-color) !important;
+                opacity: 0.8;
+              }
+            }
+            a.item:not([aria-current='true']) {
+              color: var(--link-foreground-color);
+            }
+          }
         }
 
         #content-core {

package/src/theme/_content.scss

@@ -4,6 +4,7 @@
   // the required vertical spacing
   padding: 0;
   margin-top: 0;
+  margin-bottom: 0;
 }
 
 .contenttype-news-item {
@@ -18,6 +19,7 @@
     @include adjustMarginsToContainer($default-container-width);
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
+    color: var(--primary-foreground-color);
     .day {
       @include body-text-bold();
       letter-spacing: 1px;
@@ -79,6 +81,7 @@
   .dates {
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
+    color: var(--primary-foreground-color);
     @container (max-width: #{$largest-mobile-screen} ) {
       margin-bottom: $spacing-small;
     }

package/src/theme/_footer.scss

@@ -1,5 +1,6 @@
 #footer {
-  margin-top: $footer-vertical-spacing-top;
+  padding-top: $footer-vertical-spacing-top;
+  background: var(--footer-background);
   text-align: center;
 
   .container {

package/src/theme/blocks/_eventMetadata.scss

@@ -2,6 +2,7 @@
   .details-container {
     padding-top: $spacing-xlarge;
     padding-bottom: $spacing-xlarge;
+    border-color: var(--theme-foreground-color);
     border-top: 1px solid $black;
     border-bottom: 1px solid $black;
     margin-top: 0px;
@@ -44,6 +45,7 @@
           .separator {
             width: 170px;
             height: 30px;
+            border-color: var(--theme-foreground-color);
             border-right: none;
             border-bottom: 1px solid #000;
           }
@@ -62,14 +64,15 @@
       .event-btn {
         padding: 8px 20px;
         border: 1px solid #000;
+        border-color: var(--theme-foreground-color);
         border-radius: 5px;
         background-color: transparent;
-        color: #000;
+        color: var(--theme-foreground-color, #000);
         font-size: 16px;
         font-weight: $bolder;
         line-height: 20px;
         a {
-          color: #000;
+          color: var(--theme-foreground-color, #000);
           font-size: 16px;
           font-weight: $bolder;
           line-height: 20px;

package/src/theme/blocks/_slider.scss

@@ -20,7 +20,10 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
 
     img {
       // Override Volto's Image Component inline style aspect ratio.
-      aspect-ratio: $sliderImagesAspectRatio !important;
+      aspect-ratio: var(
+        --image-aspect-ratio,
+        $sliderImagesAspectRatio
+      ) !important;
     }
   }