feat(statistic-block): count-up + link + color/background variation

src/StatisticBlock/Edit.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
 import View from './View';
 import schema from './schema';
 
+import './styles.less';
+
 const Edit = (props) => {
   const { data = {}, block = null, selected = false, onChangeBlock } = props;
 
@@ -12,7 +13,7 @@ const Edit = (props) => {
       <View {...props} mode="edit" />
 
       <SidebarPortal selected={selected}>
-        <InlineForm
+        <BlockDataForm
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
@@ -22,6 +23,7 @@ const Edit = (props) => {
             });
           }}
           formData={data}
+          block={block}
         />
       </SidebarPortal>
     </>

src/StatisticBlock/View.jsx

@@ -1,35 +1,78 @@
 import React from 'react';
+import cx from 'classnames';
+import CountUp from 'react-countup';
 import { Statistic } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
 import { serializeText } from '@eeacms/volto-statistic-block/helpers';
 
+import './styles.less';
+
 const View = ({ data, mode }) => {
   const {
     horizontal = false,
     inverted = false,
     size = 'small',
     widths = 'one',
     items = [],
+    styles = {},
+    animation = {},
   } = data;
+  const {
+    backgroundInverted = 'primary',
+    valueVariation = 'secondary',
+    labelVariation = 'tertiary',
+    slateVariation = 'tertiary',
+  } = styles;
 
   if (!items.length && mode === 'edit') return <p>Add statistic items</p>;
   return (
-    <div>
+    <div
+      className={cx({
+        [`color-bg-${backgroundInverted}`]: inverted,
+      })}
+    >
       <Statistic.Group
         horizontal={horizontal}
         inverted={inverted}
         size={size}
         widths={widths}
+        backgroundvariant={backgroundInverted}
+        valuevariation={valueVariation}
+        labelvariation={labelVariation}
+        slatevariation={slateVariation}
+        className={styles.align === 'full' ? 'ui container' : ''}
       >
         {items.map((item, index) => {
+          const StatisticWrapper = item.href ? UniversalLink : Statistic;
           return (
-            <Statistic
+            <StatisticWrapper
               key={`${index}-${item.label}`}
-              className="eea-statistics"
+              {...(item.href
+                ? { className: 'ui statistic', href: item.href }
+                : {})}
             >
-              <Statistic.Value>{item.value}</Statistic.Value>
-              <Statistic.Label>{item.label}</Statistic.Label>
-              <Statistic.Label>{serializeText(item.info)}</Statistic.Label>
-            </Statistic>
+              <Statistic.Value className={cx(valueVariation)}>
+                <CountUp
+                  end={Number(item.value)}
+                  duration={
+                    animation.enabled
+                      ? animation.duration > 0
+                        ? animation.duration
+                        : 2
+                      : 0
+                  }
+                  decimals={animation.decimals > 0 ? animation.decimals : 0}
+                  prefix={animation.prefix || ''}
+                  suffix={animation.suffix || ''}
+                />
+              </Statistic.Value>
+              <Statistic.Label className={cx(labelVariation)}>
+                {item.label}
+              </Statistic.Label>
+              <div className={cx('slate text-center', slateVariation)}>
+                {serializeText(item.info)}
+              </div>
+            </StatisticWrapper>
           );
         })}
       </Statistic.Group>

src/StatisticBlock/animationSchema.js

@@ -0,0 +1,36 @@
+export default () => {
+  return {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['enabled', 'duration', 'decimals', 'prefix', 'suffix'],
+      },
+    ],
+
+    properties: {
+      enabled: {
+        title: 'Enable animation',
+        type: 'boolean',
+      },
+      duration: {
+        title: 'Duration (seconds)',
+        type: 'number',
+        minimum: 0,
+      },
+      decimals: {
+        title: 'Decimals',
+        type: 'number',
+        minimum: 0,
+      },
+      prefix: {
+        title: 'Prefix',
+      },
+      suffix: {
+        title: 'Suffix',
+      },
+    },
+
+    required: [],
+  };
+};

src/StatisticBlock/index.js

@@ -1,6 +1,7 @@
 import iconSVG from '@plone/volto/icons/special-character.svg';
 import StatisticBlockEdit from './Edit';
 import StatisticBlockView from './View';
+import editSchema from './schema';
 
 export default (config) => {
   config.blocks.blocksConfig.statistic_block = {
@@ -17,6 +18,7 @@ export default (config) => {
       addPermission: [],
       view: [],
     },
+    editSchema,
   };
   return config;
 };

src/StatisticBlock/schema.js

@@ -1,7 +1,14 @@
+import animationSchema from './animationSchema';
+import stylesSchema from './stylesSchema';
+
 const statisticSchema = {
   title: 'Statistic item',
   fieldsets: [
-    { id: 'default', title: 'Default', fields: ['value', 'label', 'info'] },
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['value', 'label', 'info', 'href'],
+    },
   ],
   properties: {
     value: {
@@ -14,6 +21,10 @@ const statisticSchema = {
       title: 'Extra info',
       widget: 'slate_richtext',
     },
+    href: {
+      title: 'Link',
+      widget: 'url',
+    },
   },
   required: [],
 };
@@ -27,6 +38,16 @@ export default {
       title: 'Default',
       fields: ['horizontal', 'inverted', 'size', 'widths', 'items'],
     },
+    {
+      id: 'animation',
+      title: 'Animation',
+      fields: ['animation'],
+    },
+    {
+      id: 'styling',
+      title: 'Styling',
+      fields: ['styles'],
+    },
   ],
 
   properties: {
@@ -64,6 +85,16 @@ export default {
       widget: 'object_list',
       schema: statisticSchema,
     },
+    animation: {
+      widget: 'object',
+      title: 'Animation',
+      schema: animationSchema(),
+    },
+    styles: {
+      widget: 'object',
+      title: 'Styles',
+      schema: stylesSchema(),
+    },
   },
 
   required: [],

src/StatisticBlock/styles.less

@@ -0,0 +1,8 @@
+.ui.statistic {
+  .slate {
+    p {
+      margin-bottom: 0;
+      color: inherit;
+    }
+  }
+}

src/StatisticBlock/stylesSchema.js

@@ -0,0 +1,63 @@
+export default () => {
+  return {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'align',
+          'backgroundInverted',
+          'valueVariation',
+          'labelVariation',
+          'slateVariation',
+        ],
+      },
+    ],
+
+    properties: {
+      align: {
+        widget: 'align',
+        title: 'Align',
+        actions: ['center', 'wide', 'full'],
+      },
+      backgroundInverted: {
+        title: 'Background when inverted',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+        defaultValue: 'primary',
+      },
+      valueVariation: {
+        title: 'Value variation',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+        defaultValue: 'secondary',
+      },
+      labelVariation: {
+        title: 'Label variation',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+        defaultValue: 'tertiary',
+      },
+      slateVariation: {
+        title: 'Slate variation',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+        defaultValue: 'tertiary',
+      },
+    },
+
+    required: [],
+  };
+};