add statistic block

CHANGELOG.md

@@ -1,5 +1,17 @@
-# Changelog
+### Changelog
 
-## 0.1.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [0.1.1](https://github.com/eea/volto-statistic-block/compare/0.1.0...0.1.1)
+
+- add statistic block [`df367cb`](https://github.com/eea/volto-statistic-block/commit/df367cbf7912d99ae7fbd0c5f20f1c9f590d1512)
+- Update README.md [`2ecde42`](https://github.com/eea/volto-statistic-block/commit/2ecde424229d79e12d2c91223d56117255f33cfc)
+- Fix package.json [`91bb2e8`](https://github.com/eea/volto-statistic-block/commit/91bb2e8a0ad0d3bd99165751f319bceb99e181e0)
+
+#### 0.1.0
+
+> 9 March 2022
+
+- Initial commit [`2e19fe2`](https://github.com/eea/volto-statistic-block/commit/2e19fe2708f89887d2d79f88696e197643ea10f4)

README.md

@@ -19,7 +19,7 @@
 
 ## Features
 
-Demo GIF
+https://eea.github.io/volto-kitkat-frontend/?path=/story/components-statistic--default
 
 ## Getting started
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-statistic-block",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "@eeacms/volto-statistic-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -41,6 +41,3 @@
     "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
   }
 }
-s/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
-  }
-}

src/StatisticBlock/Edit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import View from './View';
+import schema from './schema';
+
+const Edit = (props) => {
+  const { data = {}, block = null, selected = false, onChangeBlock } = props;
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

src/StatisticBlock/View.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Statistic } from 'semantic-ui-react';
+
+const View = ({ data, mode }) => {
+  const {
+    horizontal = false,
+    inverted = false,
+    size = 'small',
+    widths = 'one',
+    items = [],
+  } = data;
+
+  if (!items.length && mode === 'edit') return <p>Add statistic items</p>;
+  return (
+    <div>
+      <Statistic.Group
+        horizontal={horizontal}
+        inverted={inverted}
+        size={size}
+        widths={widths}
+      >
+        {items.map((item, index) => {
+          return (
+            <Statistic
+              key={`${index}-${item.label}`}
+              className="eea-statistics"
+            >
+              <Statistic.Value>{item.value}</Statistic.Value>
+              <Statistic.Label>{item.label}</Statistic.Label>
+            </Statistic>
+          );
+        })}
+      </Statistic.Group>
+    </div>
+  );
+};
+
+export default View;

src/StatisticBlock/index.js

@@ -0,0 +1,22 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import StatisticBlockEdit from './Edit';
+import StatisticBlockView from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.statistic_block = {
+    id: 'statistic_block',
+    title: 'Statistic block',
+    icon: worldSVG,
+    group: 'text',
+    view: StatisticBlockView,
+    edit: StatisticBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

src/StatisticBlock/schema.js

@@ -0,0 +1,64 @@
+const statisticSchema = {
+  title: 'Statistic item',
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['value', 'label'] }],
+  properties: {
+    value: {
+      title: 'Value',
+    },
+    label: {
+      title: 'Label',
+    },
+  },
+  required: [],
+};
+
+export default {
+  title: 'Statistic block',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['horizontal', 'inverted', 'size', 'widths', 'items'],
+    },
+  ],
+
+  properties: {
+    horizontal: {
+      title: 'Horizontal',
+      description: 'Can present its measurement horizontally',
+      type: 'boolean',
+    },
+    inverted: {
+      title: 'Inverted',
+      description: 'Can be formatted to fit on a dark background.',
+      type: 'boolean',
+    },
+    size: {
+      title: 'Size',
+      choices: [
+        ['mini', 'Mini'],
+        ['tiny', 'Tiny'],
+        ['small', 'Small'],
+        ['large', 'Large'],
+        ['huge', 'Huge'],
+      ],
+    },
+    widths: {
+      title: 'Columns',
+      choices: [
+        ['one', 'One'],
+        ['two', 'Two'],
+        ['three', 'Three'],
+        ['four', 'Four'],
+      ],
+    },
+    items: {
+      title: 'Statistic items',
+      widget: 'object_list',
+      schema: statisticSchema,
+    },
+  },
+
+  required: [],
+};

src/index.js

@@ -1,5 +1,7 @@
+import installStatisticBlock from './StatisticBlock';
+
 const applyConfig = (config) => {
-  return config;
+  return [installStatisticBlock].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;