@eeacms/volto-eea-website-theme 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -4,11 +4,16 @@ 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).
 
-### [4.2.0](https://github.com/eea/volto-eea-website-theme/compare/4.1.1...4.2.0) - 21 April 2026
+### [4.3.0](https://github.com/eea/volto-eea-website-theme/compare/4.2.0...4.3.0) - 23 April 2026
 
-#### :nail_care: Enhancements
+#### :rocket: New Features
+
+- feat: Align Toast with EEA Design System Message - refs #294806 [Alin Voinea - [`53106b1`](https://github.com/eea/volto-eea-website-theme/commit/53106b1099b4bfae59a1746e7dc62c49a8ae63cd)]
 
-- refactor: replace eea-settings controlpanel with header-settings via asyncPropsExtenders [Miu Razvan - [`f7d169b`](https://github.com/eea/volto-eea-website-theme/commit/f7d169b1bd12446cef74b78969cca1ddb19a7531)]
+#### :hammer_and_wrench: Others
+
+- Release 4.3.0 [Alin Voinea - [`707331f`](https://github.com/eea/volto-eea-website-theme/commit/707331fa7d26a22e5dfdbcb816d62ff18277ac07)]
+### [4.2.0](https://github.com/eea/volto-eea-website-theme/compare/4.1.1...4.2.0) - 21 April 2026
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/@root/theme.js

@@ -1,2 +1,3 @@
 import '@eeacms/volto-eea-design-system/semantic.less';
 import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';
+import './toast.less';

package/src/customizations/@root/toast.less

@@ -0,0 +1,99 @@
+.Toastify__toast-container--bottom-center {
+  top: 24px;
+  bottom: auto;
+  left: 50%;
+  width: ~'min(480px, calc(100vw - 32px))';
+  padding: 0;
+  margin-left: 0;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+
+  .Toastify__toast {
+    display: flex;
+    overflow: visible;
+    min-height: 0;
+    align-items: flex-start;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    margin-bottom: 12px;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    cursor: default;
+  }
+
+  .Toastify__toast-body {
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 0;
+    margin: 0;
+  }
+
+  .Toastify__close-button {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    padding: 4px;
+    border: 0;
+    margin: -4px -4px -4px 12px;
+    background: transparent;
+    color: inherit;
+    opacity: 1;
+  }
+
+  .Toastify__close-button:hover,
+  .Toastify__close-button:focus {
+    opacity: 1;
+  }
+
+  .Toastify__toast--info .Toastify__close-button {
+    color: #003052;
+  }
+
+  .Toastify__toast--success .Toastify__close-button {
+    color: #005248;
+  }
+
+  .Toastify__toast--error .Toastify__close-button {
+    color: #b83230;
+  }
+
+  .Toastify__toast--warning .Toastify__close-button {
+    color: #3d2201;
+  }
+
+  .toast-dismiss-action {
+    display: none;
+  }
+
+  .toast-dismiss-action svg {
+    fill: currentColor;
+  }
+
+  .ui.message.eea-toast {
+    width: 100%;
+    margin: 0;
+    cursor: default;
+  }
+
+  .toast-inner-content {
+    min-width: 0;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .Toastify__toast-container--bottom-center {
+    top: 16px;
+    bottom: auto;
+    width: ~'min(480px, calc(100vw - 24px))';
+
+    .Toastify__toast {
+      margin-bottom: 8px;
+    }
+
+    .Toastify__close-button {
+      margin-left: 8px;
+    }
+  }
+}

package/src/customizations/volto/components/manage/Toast/Toast.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Icon, Message } from 'semantic-ui-react';
+
+const Toast = (props) => {
+  function getStatus(props) {
+    if (props.info) {
+      return 'info';
+    } else if (props.success) {
+      return 'success';
+    } else if (props.error) {
+      return 'error';
+    } else if (props.warning) {
+      return 'warning';
+    } else {
+      return 'success';
+    }
+  }
+
+  const { title, content } = props;
+  const status = getStatus(props);
+  const statusProps = {
+    info: status === 'info',
+    success: status === 'success',
+    error: status === 'error',
+    warning: status === 'warning',
+  };
+
+  return (
+    <Message
+      icon
+      size="large"
+      className={cx('eea-toast', `eea-toast--${status}`)}
+      {...statusProps}
+    >
+      <Icon name="exclamation circle" />
+      <Message.Content className="toast-inner-content">
+        {title && <Message.Header>{title}</Message.Header>}
+        <div>{content}</div>
+      </Message.Content>
+    </Message>
+  );
+};
+
+Toast.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  info: PropTypes.bool,
+  success: PropTypes.bool,
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+};
+
+export default Toast;

package/src/customizations/volto/components/manage/Toast/Toast.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import Toast from './Toast';
+
+describe('Toast', () => {
+  it('renders the title, content, and Volto compatibility class', () => {
+    const { container, getByText } = render(
+      <Toast success title="Saved" content="The content was saved." />,
+    );
+
+    expect(getByText('Saved')).toBeInTheDocument();
+    expect(getByText('The content was saved.')).toBeInTheDocument();
+    expect(container.querySelector('.eea-toast')).toHaveClass(
+      'ui',
+      'message',
+      'success',
+      'large',
+      'icon',
+      'eea-toast--success',
+    );
+    expect(
+      container.querySelector('.exclamation.circle.icon'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.toast-inner-content')).toBeInTheDocument();
+  });
+
+  it.each([
+    ['info', { info: true }, 'eea-toast--info'],
+    ['success', { success: true }, 'eea-toast--success'],
+    ['error', { error: true }, 'eea-toast--error'],
+    ['warning', { warning: true }, 'eea-toast--warning'],
+  ])('applies the %s status class', (status, props, className) => {
+    const { container } = render(
+      <Toast {...props} title={status} content={`${status} content`} />,
+    );
+
+    expect(container.querySelector('.eea-toast')).toHaveClass(className);
+  });
+});