@eeacms/volto-clms-theme 1.1.254 → 1.1.255

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.255](https://github.com/eea/volto-clms-theme/compare/1.1.254...1.1.255) - 6 October 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`48b273a`](https://github.com/eea/volto-clms-theme/commit/48b273ab2e6a7a0a1f25a53de91029c2feb3acf8)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #289194 - Add ChatbotBannerBlock to be used in homepage. [GhitaB - [`e32d30e`](https://github.com/eea/volto-clms-theme/commit/e32d30e8995dbc73b6a62833949c2106e7244685)]
 ### [1.1.254](https://github.com/eea/volto-clms-theme/compare/1.1.253...1.1.254) - 24 September 2025
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.254",
+  "version": "1.1.255",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/ChatbotBannerBlock/ChatbotBannerBlockEdit.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import ChatbotBannerBlockSchema from './schema';
+import ChatbotBannerBlockView from './ChatbotBannerBlockView';
+
+const ChatbotBannerBlockEdit = (props) => {
+  const { data, block, onChangeBlock } = props;
+
+  return (
+    <div className="block-edit-wrapper">
+      <ChatbotBannerBlockView data={data} isEditMode />
+      <BlockDataForm
+        schema={ChatbotBannerBlockSchema}
+        title={ChatbotBannerBlockSchema.title}
+        onChangeField={(id, value) => {
+          onChangeBlock(block, {
+            ...data,
+            [id]: value,
+          });
+        }}
+        formData={data}
+      />
+    </div>
+  );
+};
+
+export default ChatbotBannerBlockEdit;

package/src/components/Blocks/ChatbotBannerBlock/ChatbotBannerBlockView.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import cx from 'classnames';
+import './chatbot-banner-block.less';
+
+const ChatbotBannerBlockView = ({ data, isEditMode }) => {
+  const { logo, logoLink, text, buttonText, buttonLink } = data;
+
+  const logoImage = logo ? (
+    <img src={logo} alt="Logo" className="chatbot-banner-logo" />
+  ) : null;
+
+  return (
+    <div
+      className={cx('chatbot-banner-block', 'ccl-container', {
+        edit: isEditMode,
+      })}
+    >
+      <div className="chatbot-banner-inner">
+        {logo &&
+          (logoLink ? (
+            <a
+              href={logoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="chatbot-banner-logo-link"
+            >
+              {logoImage}
+            </a>
+          ) : (
+            logoImage
+          ))}
+
+        <p className="chatbot-banner-text">{text || 'Your smart CLMS guide'}</p>
+
+        {buttonText && (
+          <a
+            href={buttonLink || '#'}
+            className="chatbot-banner-button"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {buttonText}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChatbotBannerBlockView;

package/src/components/Blocks/ChatbotBannerBlock/chatbot-banner-block.less

@@ -0,0 +1,92 @@
+.chatbot-banner-block {
+  padding: 1.5rem 2rem;
+  margin: 2rem 0;
+  background-color: #fafaf5;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+  .chatbot-banner-inner {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    gap: 2rem;
+
+    // Logo section (left)
+    .chatbot-banner-logo-link,
+    .chatbot-banner-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: auto;
+        max-height: 48px;
+      }
+    }
+
+    // Text section (center)
+    .chatbot-banner-text {
+      flex: 1;
+      margin: 0;
+      color: rgba(0, 0, 0, 0.68);
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    // Button section (right)
+    .chatbot-banner-button {
+      padding: 0.7rem 1.4rem;
+      background-color: #a0b128;
+      color: #fff;
+      font-weight: 500;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+  }
+
+  /* ===== Responsive adjustments ===== */
+  @media (max-width: 992px) {
+    .chatbot-banner-inner {
+      gap: 1.5rem;
+
+      .chatbot-banner-text {
+        font-size: 0.95rem;
+      }
+
+      .chatbot-banner-button {
+        padding: 0.6rem 1.2rem;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .chatbot-banner-inner {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+      text-align: left;
+
+      .chatbot-banner-logo-link,
+      .chatbot-banner-logo {
+        margin-bottom: 0.5rem;
+
+        img {
+          height: 40px;
+        }
+      }
+
+      .chatbot-banner-text {
+        max-width: 100%;
+        font-size: 0.95rem;
+      }
+
+      .chatbot-banner-button {
+        align-self: flex-start;
+        padding: 0.6rem 1.1rem;
+      }
+    }
+  }
+}

package/src/components/Blocks/ChatbotBannerBlock/schema.js

@@ -0,0 +1,38 @@
+const ChatbotBannerBlockSchema = {
+  title: 'Chatbot Banner Block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['logo', 'logoLink', 'text', 'buttonText', 'buttonLink'],
+    },
+  ],
+  properties: {
+    logo: {
+      title: 'Logo Image URL',
+      widget: 'url',
+      description:
+        'Direct URL to the logo image (e.g. https://example.com/logo.png/@@images/image-159-33658afa10134572e80822e139c721c4.png)',
+    },
+    logoLink: {
+      title: 'Logo Click Link',
+      widget: 'url',
+      description: 'Optional: URL to open when clicking the logo',
+    },
+    text: {
+      title: 'Banner Text',
+      widget: 'textarea',
+    },
+    buttonText: {
+      title: 'Button Text',
+      default: 'Open AI Assistant',
+    },
+    buttonLink: {
+      title: 'Button Link',
+      widget: 'url',
+    },
+  },
+  required: [],
+};
+
+export default ChatbotBannerBlockSchema;

package/src/components/Blocks/customBlocks.js

@@ -77,6 +77,8 @@ import RelatedListingSchema from '@eeacms/volto-clms-theme/components/Blocks/Ccl
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselEdit';
 import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
+import ChatbotBannerBlockView from '@eeacms/volto-clms-theme/components/Blocks/ChatbotBannerBlock/ChatbotBannerBlockView';
+import ChatbotBannerBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/ChatbotBannerBlock/ChatbotBannerBlockEdit';
 import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionView';
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import CclFAQBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBlock/CclFAQBlockEdit';
@@ -611,6 +613,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  chatbotBannerBlock: {
+    id: 'chatbotBannerBlock', // The name (id) of the block
+    title: 'Chatbot Banner', // The display name of the block
+    icon: homeBand, // The icon used in the block chooser
+    group: 'common', // The group (blocks can be grouped, displayed in the chooser)
+    view: ChatbotBannerBlockView, // The view mode component
+    edit: ChatbotBannerBlockEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
   homeProducts: {
     id: 'homeProducts', // The name (id) of the block
     title: 'Home Products', // The display name of the block