@eeacms/volto-n2k 1.0.27 → 1.0.28

package/CHANGELOG.md

@@ -4,11 +4,14 @@ 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.27](https://github.com/eea/volto-n2k/compare/1.0.26...1.0.27) - 6 June 2023
+### [1.0.28](https://github.com/eea/volto-n2k/compare/1.0.27...1.0.28) - 7 June 2023
 
 #### :hammer_and_wrench: Others
 
-- fix navigation-anchors [Miu Razvan - [`5b140f7`](https://github.com/eea/volto-n2k/commit/5b140f7eea69aa5f310d62c25147a8c153415d2c)]
+- prettier fix [Miu Razvan - [`3bf6510`](https://github.com/eea/volto-n2k/commit/3bf651046ff9f7cfb7e26fe97a2ac61f4ce00a48)]
+- add more custom blocks [Miu Razvan - [`a94fe36`](https://github.com/eea/volto-n2k/commit/a94fe366dbd4fe5c679489e85950437dbed881e5)]
+### [1.0.27](https://github.com/eea/volto-n2k/compare/1.0.26...1.0.27) - 6 June 2023
+
 ### [1.0.26](https://github.com/eea/volto-n2k/compare/1.0.25...1.0.26) - 29 May 2023
 
 ### [1.0.25](https://github.com/eea/volto-n2k/compare/1.0.24...1.0.25) - 26 April 2023

package/package.json

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

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

@@ -10,7 +10,6 @@ export default () => ({
   properties: {
     theme: {
       title: 'Theme',
-      type: 'array',
       choices: [
         ['light', 'Light'],
         ['dark', 'Dark'],

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

@@ -15,12 +15,10 @@ const getSchema = (props) => {
     properties: {
       value: {
         title: 'Value',
-        type: 'array',
         choices,
       },
       linkValue: {
         title: 'Link value',
-        type: 'array',
         choices,
       },
       textTemplate: {

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

@@ -14,7 +14,6 @@ const getContactFields = (props) => {
     properties: {
       icon: {
         title: 'Icon',
-        type: 'array',
         choices: [
           ['domain', 'Domain'],
           ['location', 'Location'],
@@ -23,7 +22,6 @@ const getContactFields = (props) => {
       },
       dataEntity: {
         title: 'Data entity',
-        type: 'array',
         choices,
       },
     },

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

@@ -17,7 +17,6 @@ const xColorSchema = (props) => {
     properties: {
       label: {
         title: 'Label',
-        type: 'array',
         choices,
       },
       color: {
@@ -48,12 +47,10 @@ const getSchema = (props) => {
     properties: {
       x: {
         title: 'Value',
-        type: 'array',
         choices,
       },
       y: {
         title: 'Label',
-        type: 'array',
         choices,
       },
       x_colors: {

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

@@ -20,7 +20,6 @@ export default () => ({
   properties: {
     theme: {
       title: 'Theme',
-      type: 'array',
       choices: [
         ['light', 'Light'],
         ['grey', 'Grey'],

package/src/components/manage/Blocks/LabeledList/View.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import './style.less';
+
+const View = (props) => {
+  const { data = {} } = props;
+  const provider_data = props.provider_data || {};
+  const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+
+  return (
+    <div className="connected-labeled-list">
+      {props.mode === 'edit' ? <p>Connected labeled list</p> : ''}
+      <ul className={data.theme || 'default'}>
+        {Array(Math.max(0, columns))
+          .fill()
+          .map((_, column) => {
+            return (
+              <li key={`connected-list-${column}`}>
+                <span>
+                  {(data.values || [])
+                    .map((value) => provider_data[value.field]?.[column])
+                    .join(data.separator || '')}
+                </span>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import LabeledListView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      labeled_list: {
+        view: LabeledListView,
+        getSchema: getSchema,
+        title: 'Labeled list',
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,56 @@
+import config from '@plone/volto/registry';
+
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  const valueSchema = {
+    title: 'Value',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['field'] }],
+    properties: {
+      field: {
+        title: 'Field',
+        choices,
+      },
+    },
+  };
+
+  return {
+    title: 'Labeled list',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['theme', 'values', 'separator'],
+      },
+    ],
+
+    properties: {
+      values: {
+        title: 'Values',
+        widget: 'object_list',
+        schema: valueSchema,
+      },
+      separator: {
+        title: 'Separator',
+      },
+      theme: {
+        title: 'Theme',
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+        ],
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,41 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+@type: extra;
+@element: custom;
+
+.connected-labeled-list {
+  ul {
+    padding-left: 0;
+    margin-left: -0.5rem;
+    list-style-type: none;
+
+    li {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.25rem 0.5rem;
+      margin: 0.5rem;
+      border-radius: 6px;
+      font-size: 0.9rem;
+      font-weight: bold;
+    }
+
+    &.default li {
+      background-color: @grey-2;
+    }
+
+    &.primary li {
+      background-color: @primaryColor;
+      color: #fff;
+    }
+
+    &.secondary li {
+      background-color: @secondaryColor;
+      color: #fff;
+    }
+
+    &.tertiary li {
+      background-color: @tertiaryColor;
+      color: #fff;
+    }
+  }
+}

package/src/components/manage/Blocks/List/View.jsx

@@ -1,35 +1,52 @@
 import React from 'react';
-import { Grid } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+import arrowSVG from '@plone/volto/icons/up-key.svg';
+
 import './style.less';
 
 const View = (props) => {
   const { data = {} } = props;
   const provider_data = props.provider_data || {};
-  const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+  const columns = React.useMemo(() => {
+    const temp = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+    if (data.count < temp && data.count > 0) {
+      return data.count;
+    }
+
+    return temp;
+  }, [provider_data, data.count]);
 
   return (
     <div className="connected-list">
       {props.mode === 'edit' ? <p>Connected list</p> : ''}
-      <Grid columns={data.grid_size}>
-        <Grid.Row>
-          {Array(Math.max(0, columns))
-            .fill()
-            .map((_, column) => (
-              <Grid.Column key={`connected-list-${column}`}>
-                {(data.labeled ?? true) && data.label ? (
-                  <p className="label">{provider_data[data.label][column]}</p>
-                ) : (
-                  ''
-                )}
-                {data.value ? (
-                  <p className="value">{provider_data[data.value][column]}</p>
-                ) : (
-                  ''
+      <ul className={data.theme || 'default'}>
+        {Array(Math.max(0, columns))
+          .fill()
+          .map((_, column) => {
+            return (
+              <React.Fragment key={`connected-list-${column}`}>
+                <li>
+                  {(data.labeled ?? true) && data.label ? (
+                    <p className="label">{provider_data[data.label][column]}</p>
+                  ) : (
+                    ''
+                  )}
+                  {data.value ? (
+                    <p className="value">{provider_data[data.value][column]}</p>
+                  ) : (
+                    ''
+                  )}
+                </li>
+                {column < columns - 1 && data.theme === 'theme_1' && (
+                  <li>
+                    <Icon name={arrowSVG} size="64px" />
+                  </li>
                 )}
-              </Grid.Column>
-            ))}
-        </Grid.Row>
-      </Grid>
+              </React.Fragment>
+            );
+          })}
+      </ul>
     </div>
   );
 };

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

@@ -11,9 +11,10 @@ const getSchema = (props) => {
         title: 'Default',
         fields: [
           'labeled',
+          'count',
+          'theme',
           'value',
           ...(props.data.labeled ?? true ? ['label'] : []),
-          'grid_size',
         ],
       },
     ],
@@ -24,21 +25,27 @@ const getSchema = (props) => {
         type: 'boolean',
         default: true,
       },
+      theme: {
+        title: 'Theme',
+        choices: [
+          ['default', 'Default'],
+          ['theme_1', 'Theme 1'],
+          ['theme_2', 'Theme 2'],
+        ],
+      },
       value: {
         title: 'Value',
-        type: 'array',
         choices,
       },
       label: {
         title: 'Label',
-        type: 'array',
         choices,
       },
-      grid_size: {
-        title: 'Grid size',
-        widget: 'number',
-        min: 0,
-        max: 12,
+      count: {
+        title: 'Max items',
+        type: 'number',
+        minimum: 0,
+        maximum: Infinity,
       },
     },
 

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

@@ -1,12 +1,67 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+@type: extra;
+@element: custom;
+
 .connected-list {
-  .column {
-    .label {
-      margin-bottom: 0;
-      font-weight: bold;
+  ul {
+    padding-left: 0;
+    margin-left: -1rem;
+    list-style-type: none;
+
+    li {
+      display: inline-flex;
+      flex-flow: column;
+      align-items: flex-start;
+      margin: 1rem;
+
+      .icon {
+        color: @grey-2;
+        rotate: 90deg;
+      }
+
+      > * {
+        margin-bottom: 0;
+      }
+
+      .label {
+        color: @primaryColor;
+        font-weight: bold;
+      }
     }
 
-    .value {
-      margin-bottom: 1rem;
+    &.theme_1 {
+      display: flex;
+      align-items: center;
+      margin-left: 0;
+
+      li {
+        margin: 0;
+      }
+    }
+
+    &.theme_2 {
+      display: grid;
+      margin-left: 0;
+      grid-template-columns: 1fr 1fr;
+
+      li {
+        display: grid;
+        align-items: center;
+        margin: 0.5rem 0;
+        grid-template-columns: auto 1fr;
+
+        &::before {
+          position: relative;
+          display: block;
+          width: 16px;
+          height: 16px;
+          margin-right: 1rem;
+          background-color: @secondaryColor;
+          border-radius: 50%;
+          content: '';
+        }
+      }
     }
   }
 }

package/src/components/manage/Blocks/SimpleDataTable/templates/colored/schema.js

@@ -44,7 +44,7 @@ const coloredTableSchema = (props) => {
     properties: {
       td_color: {
         title: 'Table rows color',
-        widget: 'objectlist',
+        widget: 'object_list',
         schema: colorSchema(props),
       },
     },

package/src/components/manage/Blocks/StatusList/View.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import cx from 'classnames';
+import { Icon } from '@plone/volto/components';
+
+import arrowSVG from '@plone/volto/icons/ahead.svg';
+
+import './style.less';
+
+const status_labels = {
+  good: {
+    title: 'GOOD',
+    value: 'good',
+  },
+  poor: {
+    title: 'POOR',
+    value: 'poor',
+  },
+  bad: {
+    title: 'BAD',
+    value: 'bad',
+  },
+  unknown: {
+    title: 'UNKNOWN',
+    value: 'unkown',
+  },
+};
+
+const View = (props) => {
+  const { data = {} } = props;
+  const provider_data = props.provider_data || {};
+  const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+
+  return (
+    <div className="connected-status-list">
+      {props.mode === 'edit' ? <p>Connected status list</p> : ''}
+      <ul>
+        {Array(Math.max(0, columns))
+          .fill()
+          .map((_, column) => {
+            const status =
+              status_labels[
+                provider_data[data.status]?.[column]?.toLowerCase()
+              ] || status_labels.unknown;
+            return (
+              <li
+                key={`connected-list-${column}`}
+                className={cx(`status-${status.value}`)}
+              >
+                <span className="value">
+                  {provider_data[data.value][column]}
+                </span>
+                <Icon name={arrowSVG} size="16px" />
+                <span className="status">{status.title}</span>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import StatusListView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      status_list: {
+        view: StatusListView,
+        getSchema: getSchema,
+        title: 'Status list',
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,31 @@
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'Status list',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['value', 'status'],
+      },
+    ],
+
+    properties: {
+      value: {
+        title: 'Value',
+        choices,
+      },
+      status: {
+        title: 'Status',
+        choices,
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,54 @@
+.connected-status-list {
+  ul {
+    padding-left: 0;
+    margin-left: -0.5rem;
+    list-style-type: none;
+
+    li {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.25rem 0.5rem;
+      margin: 0.5rem;
+      border-radius: 6px;
+      font-size: 0.9rem;
+      font-weight: bold;
+
+      .value {
+        padding-right: 0.25rem;
+      }
+
+      .status {
+        padding-left: 0.25rem;
+      }
+
+      &.status-good {
+        background-color: #15957d;
+        color: #fff;
+
+        .icon {
+          rotate: -45deg;
+        }
+      }
+
+      &.status-poor {
+        background-color: #faea8a;
+
+        .icon {
+          rotate: 45deg;
+        }
+      }
+
+      &.status-bad {
+        background-color: #dd552b;
+
+        .icon {
+          rotate: 45deg;
+        }
+      }
+
+      &.status-unkown {
+        background-color: #afb0b3;
+      }
+    }
+  }
+}

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

@@ -54,7 +54,6 @@ export default () => ({
     },
     theme: {
       title: 'Theme',
-      type: 'array',
       choices: [
         ['light', 'Light'],
         ['grey', 'Grey'],

package/src/index.js

@@ -13,6 +13,8 @@ import installBubbleChart from './components/manage/Blocks/BubbleChart';
 import installCarouselHorizontal from './components/manage/Blocks/CarouselHorizontal';
 import installCddaShape from './components/manage/Blocks/CddaShape';
 import installConnectedList from './components/manage/Blocks/List';
+import installConnectedStatusList from './components/manage/Blocks/StatusList';
+import installConnectedLabeledList from './components/manage/Blocks/LabeledList';
 import installConnectedLinkList from './components/manage/Blocks/ConnectedLinkList';
 import installContactBlock from './components/manage/Blocks/ContactBlock';
 import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
@@ -127,6 +129,8 @@ const applyConfig = (config) => {
     installCarouselHorizontal,
     installCddaShape,
     installConnectedList,
+    installConnectedStatusList,
+    installConnectedLabeledList,
     installConnectedLinkList,
     installContactBlock,
     installExplodedPiesChart,