@eeacms/volto-cca-policy 1.0.4 → 1.0.6

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

@@ -24,11 +24,11 @@ const ExtendedToolView = (props) => {
     acronym = '',
     long_description,
     tool_provider,
-    public_private_mode,
+    // public_private_mode,
     hyperlink,
     description,
-    coder_1,
-    coder_2,
+    // coder_1,
+    // coder_2,
     only_interactive_support_tool,
     adaptation_cycle_step,
     updating_cycle_of_the_tool,
@@ -78,8 +78,8 @@ const ExtendedToolView = (props) => {
   const { isSelected, isLimitReached, toggle } = useCompareTools(compareTool);
 
   const messages = defineMessages({
-    yes: { id: 'YES', defaultMessage: 'YES' },
-    no: { id: 'NO', defaultMessage: 'NO' },
+    yes: { id: 'Yes', defaultMessage: 'Yes' },
+    no: { id: 'No', defaultMessage: 'No' },
     intended_user_groups: {
       id: 'Intended User Groups',
       defaultMessage: 'Intended User Groups',
@@ -125,8 +125,8 @@ const ExtendedToolView = (props) => {
       defaultMessage: 'Number of users / uptake',
     },
     tool_provider_mode: {
-      id: 'Tool provider',
-      defaultMessage: 'Tool provider',
+      id: 'Tool provider mode',
+      defaultMessage: 'Tool provider mode',
     },
     adaptation_support_cycle_step: {
       id: 'Adaptation Support Cycle Step',
@@ -165,10 +165,10 @@ const ExtendedToolView = (props) => {
       id: 'Strengths and possible limitations of the tool',
       defaultMessage: 'Strengths and possible limitations of the tool',
     },
-    public_private_mode: {
-      id: 'Public/private',
-      defaultMessage: 'Public/private',
-    },
+    // public_private_mode: {
+    //   id: 'Public/private',
+    //   defaultMessage: 'Public/private',
+    // },
     spatial_resolution: {
       id: 'Spatial resolution',
       defaultMessage: 'Spatial resolution',
@@ -266,13 +266,13 @@ const ExtendedToolView = (props) => {
                 label={intl.formatMessage(messages.tool_provider)}
                 value={tool_provider}
               />
-              <TextField
+              {/* <TextField
                 label={intl.formatMessage(messages.public_private_mode)}
                 value={public_private_mode}
-              />
+              /> */}
               <HTMLField value={description} />
-              <TextField label="Coder1" value={coder_1} />
-              <TextField label="Coder2" value={coder_2} />
+              {/* <TextField label="Coder1" value={coder_1} />
+              <TextField label="Coder2" value={coder_2} /> */}
               <BooleanField
                 label={intl.formatMessage(
                   messages.only_interactive_support_tool,
@@ -342,6 +342,7 @@ const ExtendedToolView = (props) => {
                 values={tool_provider_mode}
               />
               <VocabularyField
+                asList
                 label={intl.formatMessage(
                   messages.adaptation_support_cycle_step,
                 )}

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

@@ -35,11 +35,19 @@ jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
     </div>
   ),
 
-  VocabularyField: ({ label, values = [] }) =>
+  VocabularyField: ({ label, values = [], asList }) =>
     values.length > 0 ? (
       <div>
         <span>{label}</span>
-        <span>{values.join(', ')}</span>
+        {asList ? (
+          <ul>
+            {values.map((value, index) => (
+              <li key={`${value}-${index}`}>{value}</li>
+            ))}
+          </ul>
+        ) : (
+          <span>{values.join(', ')}</span>
+        )}
       </div>
     ) : null,
 
@@ -315,34 +323,32 @@ describe('ExtendedToolView', () => {
     expect(formatFunctionalityScore).not.toHaveBeenCalled();
   });
 
-  it('renders text fields', () => {
+  it('renders the supported text fields', () => {
     renderComponent({
       title: 'Climate Tool',
       tool_provider: 'Example Provider',
-      public_private_mode: 'Public',
       spatial_resolution: 'Regional',
       underlying_data_maintenance: 'Updated yearly',
       strengths_and_possible_limitations: 'Easy to use',
     });
 
     expect(screen.getByText('Example Provider')).toBeInTheDocument();
-    expect(screen.getByText('Public')).toBeInTheDocument();
     expect(screen.getByText('Regional')).toBeInTheDocument();
     expect(screen.getByText('Updated yearly')).toBeInTheDocument();
     expect(screen.getByText('Easy to use')).toBeInTheDocument();
   });
 
-  it('renders coder fields', () => {
+  it('does not render removed coder fields', () => {
     renderComponent({
       title: 'Climate Tool',
       coder_1: 'Coder One',
       coder_2: 'Coder Two',
     });
 
-    expect(screen.getByText('Coder1')).toBeInTheDocument();
-    expect(screen.getByText('Coder One')).toBeInTheDocument();
-    expect(screen.getByText('Coder2')).toBeInTheDocument();
-    expect(screen.getByText('Coder Two')).toBeInTheDocument();
+    expect(screen.queryByText('Coder1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Coder One')).not.toBeInTheDocument();
+    expect(screen.queryByText('Coder2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Coder Two')).not.toBeInTheDocument();
   });
 
   it('renders HTML descriptions', () => {
@@ -356,7 +362,7 @@ describe('ExtendedToolView', () => {
     expect(screen.getByText('Short tool description')).toBeInTheDocument();
   });
 
-  it('renders boolean fields with YES values', () => {
+  it('renders boolean fields with Yes values', () => {
     renderComponent({
       title: 'Climate Tool',
       only_interactive_support_tool: true,
@@ -366,10 +372,10 @@ describe('ExtendedToolView', () => {
       free_access: true,
     });
 
-    expect(screen.getAllByText('YES')).toHaveLength(5);
+    expect(screen.getAllByText('Yes')).toHaveLength(5);
   });
 
-  it('renders boolean fields with NO values', () => {
+  it('renders boolean fields with No values', () => {
     renderComponent({
       title: 'Climate Tool',
       only_interactive_support_tool: false,
@@ -379,7 +385,7 @@ describe('ExtendedToolView', () => {
       free_access: false,
     });
 
-    expect(screen.getAllByText('NO')).toHaveLength(5);
+    expect(screen.getAllByText('No')).toHaveLength(5);
   });
 
   it('renders vocabulary fields', () => {

package/src/helpers/Utils.jsx

@@ -77,18 +77,27 @@ export const BooleanField = ({ label, value, yesLabel, noLabel }) => (
   <TextField label={label} value={value ? yesLabel : noLabel} />
 );
 
-export const VocabularyField = ({ label, values }) => {
-  if (!values?.length) return null;
+export const VocabularyField = ({ label, values, asList }) => {
+  const items = values
+    ?.map((value) => value?.title || value?.token || value)
+    .filter(Boolean);
 
-  return (
-    <TextField
-      label={label}
-      value={values
-        .map((value) => value?.title || value?.token || value)
-        .filter(Boolean)
-        .join(', ')}
-    />
-  );
+  if (!items?.length) return null;
+
+  if (asList) {
+    return (
+      <>
+        <h5>{label}</h5>
+        <ul>
+          {items.map((item, index) => (
+            <li key={`${item}-${index}`}>{item}</li>
+          ))}
+        </ul>
+      </>
+    );
+  }
+
+  return <TextField label={label} value={items.join(', ')} />;
 };
 
 export const ExternalLink = (props) => {

package/src/helpers/index.js

@@ -98,3 +98,5 @@ export const fixEmbedURL = (url, is_cmshare_video) => {
 
   return base + suffix;
 };
+
+export * from './countryMap';

package/src/hocs/index.js

@@ -1,2 +1,3 @@
 export { default as withResponsiveContainer } from './withResponsiveContainer';
 export { default as withVisibilitySensor } from './withVisibilitySensor';
+export { withGeoJsonData } from './withGeoJsonData';

package/src/index.js

@@ -48,8 +48,8 @@ import {
 
 import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
 import PromotionalImageWidget from './components/theme/Widgets/PromotionalImageWidget';
-import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
-import ClusterHorizontalCardItem from './components/Result/ClusterHorizontalCardItem';
+import HealthHorizontalCardItem from './components/Search/Result/HealthHorizontalCardItem';
+import ClusterHorizontalCardItem from './components/Search/Result/ClusterHorizontalCardItem';
 import NavigatorCatalogueCardItem from './components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem';
 import NavigatorCatalogueMapView from './components/Search/NavigatorCatalogue/NavigatorCatalogueMapView';
 import NavigatorCatalogueContentView from './components/Search/NavigatorCatalogue/NavigatorCatalogueContentView';

package/theme/globals/navigator.less

@@ -49,7 +49,7 @@
   box-sizing: border-box;
   border: 1px solid @navigatorIconBorderColor;
   border-radius: 4px;
-  background-color: #fff;
+  background-color: #f7f8fa;
   color: @navigatorIconColor;
 
   i.icon {
@@ -110,6 +110,10 @@
     margin: 0 !important;
   }
 
+  .navigator-tool-icon {
+    background-color: #fff;
+  }
+
   .compare-panel-content {
     padding: 1rem;
   }
@@ -210,15 +214,12 @@
     }
   }
 
-  .ui.button.compare-panel-submit {
-    margin: 0;
-  }
-
-  .compare-panel-clear-all {
+  .ui.button.compare-panel-clear-all {
     padding: 0;
     margin: 0;
-    background: transparent;
-    color: @linkColor;
+    border: none;
+    background: none !important;
+    color: @primaryColor;
 
     &:hover,
     &:focus {
@@ -469,19 +470,11 @@
 }
 
 .navigator-catalogue-map-loading {
+  text-align: center;
   display: flex;
-  min-height: 400px;
-  align-items: center;
-  justify-content: center;
-  color: #7c8a96;
-  font-size: 1rem;
-  gap: 1rem;
-
-  i.icon.loading {
-    font-size: 1.5rem;
-  }
+  flex-direction: column;
+  gap: 1em;
 }
-
 .navigator-catalogue-map-tooltip {
   position: absolute;
   z-index: 1000;
@@ -700,7 +693,7 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
   }
 
   .license-type {
-    gap: 0.5em;
+    gap: 0.7em;
   }
 
   .navigator-catalogue-cycle-elements {
@@ -775,7 +768,6 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
   min-height: 24px;
   align-items: center;
   padding: 0 0.45rem;
-  border-radius: 2px;
   font-weight: 500;
   font-size: 12px;
 
@@ -1025,7 +1017,6 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
     &.selected {
       border-color: @primaryColor;
       background: fade(@primaryColor, 5%);
-      font-weight: 500;
     }
 
     > span {