From b2941665ca8b0120d3f7f2f048ed900f02720b88 Mon Sep 17 00:00:00 2001
From: Mikel Larreategi <mlarreategi@codesyntax.com>
Date: Mon, 25 Nov 2024 14:33:53 -0300
Subject: [PATCH] make use of styling options

---
 packages/volto-countup-block/src/View.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/volto-countup-block/src/View.jsx b/packages/volto-countup-block/src/View.jsx
index 082a145..2c39e1b 100644
--- a/packages/volto-countup-block/src/View.jsx
+++ b/packages/volto-countup-block/src/View.jsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { Segment } from 'semantic-ui-react';
 import { withBlockExtensions } from '@plone/volto/helpers';
 
-const CountUpBlockView = ({ data, className }) => {
+const CountUpBlockView = ({ data, className, style }) => {
   const values = config.blocks.blocksConfig['countUpBlock'].schemaValues;
   const {
     delay = values.delay ?? 0,
@@ -50,15 +50,17 @@ const CountUpBlockView = ({ data, className }) => {
   const TitleTag = titleTag || 'h2';
 
   return (
-    <Segment
-      className={cx('countup-block-wrapper', className)}
-      {...segmentData}
-    >
-      {title && titlePosition === 'above' && <TitleTag>{title}</TitleTag>}
+    <div className={cx('block countup-block', className)} style={style}>
+      <Segment
+        className={cx('countup-block-wrapper', className)}
+        {...segmentData}
+      >
+        {title && titlePosition === 'above' && <TitleTag>{title}</TitleTag>}
 
-      <CountUp {...data} {...countUpData} />
-      {title && titlePosition === 'below' && <TitleTag>{title}</TitleTag>}
-    </Segment>
+        <CountUp {...data} {...countUpData} />
+        {title && titlePosition === 'below' && <TitleTag>{title}</TitleTag>}
+      </Segment>
+    </div>
   );
 };