@eeacms/volto-cca-policy 0.2.20 → 0.2.21

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).
 
+### [0.2.21](https://github.com/eea/volto-cca-policy/compare/0.2.20...0.2.21) - 9 May 2024
+
+#### :rocket: New Features
+
+- feat(block): add ContentLinks block [kreafox - [`4e7aaab`](https://github.com/eea/volto-cca-policy/commit/4e7aaab744ebc72dd98936a333a6df3e3315e945)]
+
+#### :nail_care: Enhancements
+
+- change: remove no needed info button [kreafox - [`6771435`](https://github.com/eea/volto-cca-policy/commit/677143541d515514a3b9541cce625319ab30425a)]
+- change: blocks icon [kreafox - [`100bab4`](https://github.com/eea/volto-cca-policy/commit/100bab435aa72b20d2fade206dfeb7b53dec76ab)]
+- change: share info button icon [kreafox - [`8ef908e`](https://github.com/eea/volto-cca-policy/commit/8ef908e3c26f2b80405c8cf480b73017e221d003)]
+
 ### [0.2.20](https://github.com/eea/volto-cca-policy/compare/0.2.19...0.2.20) - 8 May 2024
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/manage/Blocks/CollectionStatistics/index.js

@@ -4,7 +4,7 @@ import CollectionStatsView, {
   RemixIcon,
 } from './CollectionStatsView';
 
-import worldSVG from '@plone/volto/icons/world.svg';
+import dotsSVG from '@plone/volto/icons/dots.svg';
 import airPollutionSvg from '@eeacms/volto-cca-policy/icons/air_pollution_and_aero-allergens.svg';
 import heatSvg from '@eeacms/volto-cca-policy/icons/heat.svg';
 import climateSensitiveSvg from '@eeacms/volto-cca-policy/icons/climate-sensitive_diseases.svg';
@@ -57,7 +57,7 @@ export default function installCollectionStatsBlock(config) {
   config.blocks.blocksConfig.collectionStats = {
     id: 'collectionStats',
     title: 'Collection Statistics',
-    icon: worldSVG,
+    icon: dotsSVG,
     group: 'site',
     edit: CollectionStatsEdit,
     view: CollectionStatsView,

package/src/components/manage/Blocks/ContentLinks/ContentLinksEdit.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import schema from './schema';
+import ContentLinksView from './ContentLinksView';
+
+export default function ContentLinksEdit(props) {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  const { items = [] } = data;
+  const [refresh, forceRefresh] = React.useState(0);
+
+  React.useEffect(() => {
+    items.forEach((item, index) => {
+      if (item.source?.length && !item.item_title) {
+        item.item_title = item.source[0].title;
+        item.link = item.source['@id'];
+        forceRefresh(refresh + 1);
+      }
+    });
+  }, [items, refresh]);
+
+  return (
+    <div>
+      <ContentLinksView data={data} id={id} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+}

package/src/components/manage/Blocks/ContentLinks/ContentLinksView.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import cx from 'classnames';
+
+import './style.less';
+
+const ContentLinksView = (props) => {
+  const location = useLocation();
+  const { data, mode = 'view' } = props;
+  const { title, items = [], variation } = data;
+  const isEdit = mode === 'edit';
+
+  return items && items.length > 0 ? (
+    <div className={`block content-links ${variation}-view`}>
+      {title && <h4>{title}</h4>}
+
+      <List className="content-items">
+        {items.map((item, index) => {
+          const link = item?.source?.[0]?.['@id'];
+          const active = location.pathname === link;
+          return (
+            <List.Item
+              key={index}
+              className={cx({
+                active: active,
+              })}
+            >
+              <Link to={flattenToAppURL(link)}>{item.item_title}</Link>
+            </List.Item>
+          );
+        })}
+      </List>
+    </div>
+  ) : (
+    <>{isEdit && <div>No items</div>}</>
+  );
+};
+
+export default ContentLinksView;

package/src/components/manage/Blocks/ContentLinks/ContentLinksView.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import ContentLinksView from './ContentLinksView';
+
+const mockStore = configureStore();
+
+jest.mock('semantic-ui-react', () => ({
+  ...jest.requireActual('semantic-ui-react'),
+  Icon: () => <div>Icon</div>,
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Link: () => <div>Link</div>,
+}));
+
+describe('ContentLinksView', () => {
+  it('should render the component', () => {
+    const data = {
+      '@type': 'contentLinks',
+      items: [
+        {
+          item_title: 'Item 1',
+          source: [
+            {
+              '@id': '/item-1',
+              title: 'Item 1',
+            },
+          ],
+        },
+        {
+          '@id': '7e2af23d-3905-404c-895f-0d31ea5878ef',
+          item_title: 'Item 2',
+          source: [
+            {
+              '@id': '/item-2',
+              title: 'Item 2',
+            },
+          ],
+        },
+      ],
+      show_share_btn: false,
+      title: 'Navigation',
+      variation: 'default',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ContentLinksView data={data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/ContentLinks/index.js

@@ -0,0 +1,35 @@
+import listSVG from '@plone/volto/icons/list-bullet.svg';
+import ContentLinksEdit from './ContentLinksEdit';
+import ContentLinksView from './ContentLinksView';
+
+export default function installBlock(config) {
+  config.blocks.blocksConfig.contentLinks = {
+    id: 'contentLinks',
+    title: 'Content links',
+    icon: listSVG,
+    group: 'site',
+    view: ContentLinksView,
+    edit: ContentLinksEdit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [
+      {
+        id: 'default',
+        title: 'Simple list (default)',
+        isDefault: true,
+      },
+      {
+        id: 'navigationList',
+        title: 'Navigation list',
+        isDefault: false,
+        fullobjects: true,
+      },
+    ],
+    restricted: false,
+  };
+
+  return config;
+}

package/src/components/manage/Blocks/ContentLinks/schema.js

@@ -0,0 +1,47 @@
+const Item = () => ({
+  title: 'Item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['source', 'item_title'],
+    },
+  ],
+  properties: {
+    source: {
+      widget: 'object_browser',
+      mode: 'link',
+      title: 'Source',
+      description: 'Choose an existing content as source',
+    },
+    item_title: {
+      type: 'string',
+      title: 'Title',
+    },
+  },
+
+  required: ['title'],
+});
+
+export default {
+  title: 'Content links',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'items'],
+    },
+  ],
+  properties: {
+    items: {
+      widget: 'object_list',
+      title: 'Items',
+      description: 'Add a list of items',
+      schema: Item(),
+    },
+    title: {
+      title: 'Block title',
+    },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/ContentLinks/style.less

@@ -0,0 +1,33 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.content-items {
+  margin-bottom: 1em;
+
+  .item:hover,
+  .item.active {
+    color: @primaryColor;
+  }
+
+  a,
+  a:visited {
+    color: inherit;
+  }
+}
+
+.navigationList-view {
+  .item {
+    padding: 0.75rem 0 0.75rem 0.75rem !important;
+
+    &:hover {
+      color: @primaryColor;
+    }
+
+    &.active {
+      background: @primaryColor;
+      color: @white;
+    }
+  }
+}

package/src/components/manage/Blocks/RASTBlock/index.js

@@ -1,4 +1,4 @@
-import zoomSVG from '@plone/volto/icons/zoom.svg';
+import contentSVG from '@plone/volto/icons/content.svg';
 import RASTEdit from './RASTEdit';
 import RASTView from './RASTView';
 import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
@@ -9,7 +9,7 @@ export default function installBlock(config) {
   blocksConfig.rastBlock = {
     id: 'rastBlock',
     title: 'RAST',
-    icon: zoomSVG,
+    icon: contentSVG,
     group: 'site',
     view: RASTView,
     edit: RASTEdit,

package/src/components/manage/Blocks/RedirectBlock/index.js

@@ -1,4 +1,4 @@
-import zoomSVG from '@plone/volto/icons/zoom.svg';
+import redoSVG from '@plone/volto/icons/redo.svg';
 import RedirectBlockEdit from './RedirectBlockEdit';
 import RedirectBlockView from './RedirectBlockView';
 // import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
@@ -7,7 +7,7 @@ export default function installBlock(config) {
   config.blocks.blocksConfig.redirectBlock = {
     id: 'redirectBlock',
     title: 'Redirection Block',
-    icon: zoomSVG,
+    icon: redoSVG,
     group: 'site',
     view: RedirectBlockView,
     edit: RedirectBlockEdit,

package/src/components/manage/Blocks/index.js

@@ -20,6 +20,7 @@ import installReadMore from './ReadMore';
 import installCollectionStats from './CollectionStatistics';
 import installTabsBlock from './TabsBlock';
 import installRedirectBlock from './RedirectBlock';
+import installContentLinks from './ContentLinks';
 
 export default function installBlocks(config) {
   config.blocks.blocksConfig.title.restricted = false;
@@ -49,5 +50,6 @@ export default function installBlocks(config) {
     installTabsBlock,
     installListing,
     installRedirectBlock,
+    installContentLinks,
   )(config);
 }

package/src/components/theme/ShareInfoButton/ShareInfoButton.jsx

@@ -15,7 +15,7 @@ const ShareInfoButton = (props) => {
               id="Share your information"
               defaultMessage="Share your information"
             />
-            <Icon name="right arrow" />
+            <Icon name="ri-share-line" />
           </Button>
         </Link>
       </div>

package/src/index.js

@@ -313,12 +313,6 @@ const applyConfig = (config) => {
       bottomLevel: 2,
       rootPath: 'countries-regions/transnational-regions/carpathian-mountains',
     },
-    {
-      title: 'Share your info',
-      topLevel: 2,
-      bottomLevel: 2,
-      rootPath: 'help/share-your-info',
-    },
   ];
 
   config.settings.astNavigations = [