@eeacms/volto-cca-policy 1.0.12 → 1.0.13

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.0.13](https://github.com/eea/volto-cca-policy/compare/1.0.12...1.0.13) - 31 August 2026
+
+#### :hammer_and_wrench: Others
+
+- Refs #307245 - Visualizations: fix order in view mode. [GhitaB - [`bfbe754`](https://github.com/eea/volto-cca-policy/commit/bfbe7549af5a4f767c3d023b894b55b5eb81918e)]
+- Refs #307245 - Visualizations: order and descriptions. [GhitaB - [`5fff846`](https://github.com/eea/volto-cca-policy/commit/5fff846b623250e89cbf2a844828f545c0f2f9f9)]
 ### [1.0.12](https://github.com/eea/volto-cca-policy/compare/1.0.11...1.0.12) - 24 August 2026
 
 #### :bug: Bug Fixes
@@ -301,8 +307,24 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`659ec82`](https://github.com/eea/volto-cca-policy/commit/659ec823dd71fe592a3a7accda22effbe1fb07bc)]
-## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.24...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.26...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.26](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.25...1.0.0-alpha.26) - 28 August 2026
+
+### [1.0.0-alpha.25](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.24...1.0.0-alpha.25) - 27 August 2026
+
+#### :bug: Bug Fixes
+
+- fix: disable unavailable navigator guide options [kreafox - [`4b114c2`](https://github.com/eea/volto-cca-policy/commit/4b114c2b0ea7a6a6528ae8ae378c2e671b640945)]
+
+#### :nail_care: Enhancements
+
+- change: add custom hook for guide facet options and add tests [kreafox - [`872eb9b`](https://github.com/eea/volto-cca-policy/commit/872eb9b35c41fc2094c605b113411448a8cef9a8)]
+
+#### :hammer_and_wrench: Others
 
+- Refs #307245 - Visualizations: order and descriptions. [GhitaB - [`5fff846`](https://github.com/eea/volto-cca-policy/commit/5fff846b623250e89cbf2a844828f545c0f2f9f9)]
+- test: increase utility coverage [kreafox - [`d9c3db8`](https://github.com/eea/volto-cca-policy/commit/d9c3db8cc6fb91ead00f83b822f6fe48c26a70b1)]
 ### [1.0.0-alpha.24](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.23...1.0.0-alpha.24) - 24 August 2026
 
 ### [1.0.0-alpha.23](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.22...1.0.0-alpha.23) - 19 August 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Widgets/VisualizationsWidget.jsx

@@ -7,6 +7,7 @@ import './visualizations.less';
 
 const emptyVisualization = {
   title: '',
+  description: '',
   embed_code: '',
   height: '',
   full_width: false,
@@ -43,6 +44,19 @@ const VisualizationsWidget = (props) => {
     );
   };
 
+  const moveItem = (index, direction) => {
+    const nextIndex = index + direction;
+
+    if (nextIndex < 0 || nextIndex >= visualizations.length) return;
+
+    const nextVisualizations = [...visualizations];
+    [nextVisualizations[index], nextVisualizations[nextIndex]] = [
+      nextVisualizations[nextIndex],
+      nextVisualizations[index],
+    ];
+    updateVisualizations(nextVisualizations);
+  };
+
   return (
     <FormFieldWrapper {...props}>
       <div className="visualizations-widget">
@@ -53,16 +67,30 @@ const VisualizationsWidget = (props) => {
           >
             <div className="visualizations-widget-item-header">
               <h4>Visualization {index + 1}</h4>
-              <Button
-                type="button"
-                basic
-                compact
-                negative
-                disabled={isDisabled}
-                onClick={() => deleteItem(index)}
-              >
-                Delete
-              </Button>
+              <Button.Group basic compact>
+                <Button
+                  type="button"
+                  disabled={isDisabled || index === 0}
+                  onClick={() => moveItem(index, -1)}
+                >
+                  Up
+                </Button>
+                <Button
+                  type="button"
+                  disabled={isDisabled || index === visualizations.length - 1}
+                  onClick={() => moveItem(index, 1)}
+                >
+                  Down
+                </Button>
+                <Button
+                  type="button"
+                  negative
+                  disabled={isDisabled}
+                  onClick={() => deleteItem(index)}
+                >
+                  Delete
+                </Button>
+              </Button.Group>
             </div>
 
             <Form.Field>
@@ -77,6 +105,19 @@ const VisualizationsWidget = (props) => {
               />
             </Form.Field>
 
+            <Form.Field>
+              <label htmlFor={`${id}-${index}-description`}>Description</label>
+              <TextArea
+                id={`${id}-${index}-description`}
+                value={item.description || ''}
+                disabled={isDisabled}
+                rows={3}
+                onChange={(event) =>
+                  updateItem(index, 'description', event.target.value)
+                }
+              />
+            </Form.Field>
+
             <Form.Field>
               <label htmlFor={`${id}-${index}-embed-code`}>
                 Embed code or URL

package/src/components/manage/Widgets/visualizations.less

@@ -22,6 +22,10 @@
       color: #1f405c;
       font-size: 1rem;
     }
+
+    .ui.buttons {
+      flex-shrink: 0;
+    }
   }
 
   .field {

package/src/components/theme/Views/DatabaseItemView.jsx

@@ -107,6 +107,9 @@ const MaybeIframeVisualization = ({ visualization }) => {
 const Visualization = ({ visualization }) => (
   <>
     {visualization?.title && <h2>{visualization.title}</h2>}
+    {visualization?.description && (
+      <p className="visualization-description">{visualization.description}</p>
+    )}
     <MaybeFlourishVisualization visualization={visualization} />
     <MaybeIframeVisualization visualization={visualization} />
   </>
@@ -129,6 +132,20 @@ const getVisualizations = (content) => {
     : [];
 };
 
+const groupVisualizations = (visualizations) =>
+  visualizations.reduce((groups, visualization) => {
+    const fullWidth = !!visualization.full_width;
+    const lastGroup = groups[groups.length - 1];
+
+    if (lastGroup && lastGroup.fullWidth === fullWidth) {
+      lastGroup.items.push(visualization);
+    } else {
+      groups.push({ fullWidth, items: [visualization] });
+    }
+
+    return groups;
+  }, []);
+
 const BottomInfo = (props) => {
   const { content } = props;
   const { organisational_websites, organisational_contact_information } =
@@ -185,13 +202,11 @@ const DatabaseItemView = (props) => {
   const item_title = acronym ? title + ' (' + acronym + ')' : title;
   const subtitle = CONTENT_TYPE_LABELS[type] ?? '';
   const visualizations = getVisualizations(content);
-  const columnVisualizations = visualizations.filter(
-    (visualization) => !visualization.full_width,
+  const visualizationGroups = groupVisualizations(visualizations);
+  const firstVisualizationGroup = visualizationGroups[0];
+  const hasFullWidthVisualizations = visualizationGroups.some(
+    (group) => group.fullWidth,
   );
-  const fullWidthVisualizations = visualizations.filter(
-    (visualization) => visualization.full_width,
-  );
-  const hasFullWidthVisualizations = !!fullWidthVisualizations.length;
 
   const is_cmshare_video = SHARE_EEA.some((domain) =>
     content?.embed_url?.includes(domain),
@@ -284,9 +299,12 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {!!columnVisualizations.length && (
-                <Visualizations visualizations={columnVisualizations} />
-              )}
+              {firstVisualizationGroup &&
+                !firstVisualizationGroup.fullWidth && (
+                  <Visualizations
+                    visualizations={firstVisualizationGroup.items}
+                  />
+                )}
 
               {!hasFullWidthVisualizations && <BottomInfo {...props} />}
             </Grid.Column>
@@ -304,11 +322,22 @@ const DatabaseItemView = (props) => {
 
           {hasFullWidthVisualizations && (
             <>
-              <Grid.Row>
-                <Grid.Column mobile={12} tablet={12} computer={12}>
-                  <Visualizations visualizations={fullWidthVisualizations} />
-                </Grid.Column>
-              </Grid.Row>
+              {visualizationGroups.map((group, index) => {
+                if (index === 0 && !group.fullWidth) return null;
+
+                return (
+                  <Grid.Row key={`visualization-group-${index}`}>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={12}
+                      computer={group.fullWidth ? 12 : 8}
+                      className={group.fullWidth ? undefined : 'col-left'}
+                    >
+                      <Visualizations visualizations={group.items} />
+                    </Grid.Column>
+                  </Grid.Row>
+                );
+              })}
               <Grid.Row>
                 <Grid.Column
                   mobile={12}

package/src/components/theme/Views/DatabaseItemView.test.jsx

@@ -46,6 +46,7 @@ const visualizationEmbedCode =
 
 const getVisualization = (overrides = {}) => ({
   title: '',
+  description: '',
   embed_code: visualizationEmbedCode,
   height: '',
   full_width: false,
@@ -125,6 +126,39 @@ describe('DatabaseItemView', () => {
     expect(fullWidthColumn.findAllByType('iframe')).toHaveLength(1);
   });
 
+  it('renders visualization descriptions', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      visualizations: [
+        getVisualization({ description: 'Visualization summary text.' }),
+      ],
+    });
+
+    expect(
+      component.root.findByProps({
+        className: 'visualization-description',
+      }).children,
+    ).toEqual(['Visualization summary text.']);
+  });
+
+  it('preserves visualization order when full-width and column items are mixed', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      visualizations: [
+        getVisualization({ title: 'First', full_width: true }),
+        getVisualization({ title: 'Second' }),
+        getVisualization({ title: 'Third', full_width: true }),
+      ],
+    });
+
+    const headings = component.root
+      .findAllByType('h2')
+      .map((heading) => heading.children.join(''))
+      .filter((title) => ['First', 'Second', 'Third'].includes(title));
+
+    expect(headings).toEqual(['First', 'Second', 'Third']);
+  });
+
   it('does not render a visualization when the visualizations field is empty', () => {
     const component = renderDatabaseItemView({
       ...baseContent,