@eeacms/volto-eea-design-system 1.32.2 → 1.32.4

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.32.4](https://github.com/eea/volto-eea-design-system/compare/1.32.3...1.32.4) - 29 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Improve sites button to use design system classes - refs #265857 [dobri1408 - [`274ec63`](https://github.com/eea/volto-eea-design-system/commit/274ec63b45e8a69af3cf44b45e0a29a4d109750d)]
+
+### [1.32.3](https://github.com/eea/volto-eea-design-system/compare/1.32.2...1.32.3) - 29 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Update FooterSitesButton.jsx to use UniversalLink - refs #265857 [dobri1408 - [`c53fc12`](https://github.com/eea/volto-eea-design-system/commit/c53fc1297456290de0906552d873c00f8228758d)]
+
 ### [1.32.2](https://github.com/eea/volto-eea-design-system/compare/1.32.1...1.32.2) - 28 August 2024
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.32.2",
+  "version": "1.32.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Footer/Footer.stories.test.js

@@ -3,8 +3,10 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { Default } from './Footer.stories';
+import { Provider } from 'react-redux';
 import Footer from './Footer';
 import '@testing-library/jest-dom/extend-expect';
+import configureStore from 'redux-mock-store';
 
 describe('Default', () => {
   let history;
@@ -22,11 +24,21 @@ describe('Default', () => {
     });
   });
 
+  const mockStore = configureStore();
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
   it('renders correctly', () => {
     const { container } = render(
-      <Router history={history}>
-        <Default {...Default.args} />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Default {...Default.args} />
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();
@@ -49,21 +61,23 @@ describe('Default', () => {
 
   it('renders correctly', () => {
     const { container, getByText } = render(
-      <Router history={history}>
-        <Footer>
-          <Footer.SubFooter {...Default.args}>
-            <div>SubFooter test</div>
-          </Footer.SubFooter>
-          <Footer.Header>{Default.args.header}</Footer.Header>
-          <Footer.Sites sites={Default.args.sites}>
-            <div>Sites test</div>
-          </Footer.Sites>
-          <Footer.Actions
-            actions={Default.args.actions}
-            copyright={Default.args.copyright}
-          />
-        </Footer>
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Footer>
+            <Footer.SubFooter {...Default.args}>
+              <div>SubFooter test</div>
+            </Footer.SubFooter>
+            <Footer.Header>{Default.args.header}</Footer.Header>
+            <Footer.Sites sites={Default.args.sites}>
+              <div>Sites test</div>
+            </Footer.Sites>
+            <Footer.Actions
+              actions={Default.args.actions}
+              copyright={Default.args.copyright}
+            />
+          </Footer>
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();
@@ -82,23 +96,25 @@ describe('Default', () => {
 
   it('renders correctly', () => {
     const { container, getByText } = render(
-      <Router history={history}>
-        <Footer>
-          <Footer.SubFooter
-            {...Default.args}
-            description={'test description'}
-            social={undefined}
-          />
-          <Footer.Header>{Default.args.header}</Footer.Header>
-          <Footer.Sites sites={Default.args.sites} />
-          <Footer.Actions
-            actions={Default.args.actions}
-            copyright={Default.args.copyright}
-          >
-            <div>Actions test</div>
-          </Footer.Actions>
-        </Footer>
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Footer>
+            <Footer.SubFooter
+              {...Default.args}
+              description={'test description'}
+              social={undefined}
+            />
+            <Footer.Header>{Default.args.header}</Footer.Header>
+            <Footer.Sites sites={Default.args.sites} />
+            <Footer.Actions
+              actions={Default.args.actions}
+              copyright={Default.args.copyright}
+            >
+              <div>Actions test</div>
+            </Footer.Actions>
+          </Footer>
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();

package/src/ui/Footer/FooterSitesButton.jsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 
 const SitesButton = (props) => {
   if (props.children) {
@@ -11,20 +9,13 @@ const SitesButton = (props) => {
   //fallback to props
   return (
     <div className="theme-sites">
-      <Button
-        className="theme-sites-button"
-        onClick={() => {
-          if (__CLIENT__ && window) {
-            window.location.assign(
-              isInternalURL(props.hrefButton)
-                ? flattenToAppURL(props.hrefButton)
-                : props.hrefButton,
-            );
-          }
-        }}
+      <UniversalLink
+        href={props.hrefButton}
+        className="ui button white inverted theme-sites-button"
+        openLinkInNewTab={false}
       >
         {props.buttonName}
-      </Button>
+      </UniversalLink>
     </div>
   );
 };

package/theme/themes/eea/extras/footer.less

@@ -25,17 +25,19 @@ footer {
     width: @wrapperWidth;
     padding: @mobileWrapperPadding;
   }
+  .theme-sites {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
   .theme-sites-button {
-    background: @themeSitesButtonBackground !important;
     font-size: @themeSitesButtonFontSize !important;
     padding: @themeSitesButtonPadding !important;
-    color: @themeSitesButtonColor !important;
     border: @themeSitesButtonBorder !important;
   }
-  .theme-sites {
-    display: flex;
-    width: 100%;
-    justify-content: center;
+
+  .ui.button.theme-sites-button {
+    box-shadow: @themeSitesButtonBoxShadow !important;
   }
 }
 

package/theme/themes/eea/extras/footer.variables

@@ -31,6 +31,7 @@
 @themeSitesButtonPadding            : 1rem 2rem;
 @themeSitesButtonColor              : white;
 @themeSitesButtonBorder             : 1px solid white;
+@themeSitesButtonBoxShadow          : none;
 
 /* Sub-footer Item */
 @subFooterItemDisplay: flex;