feat: added text aligment option

eea · Jun 8, 2023 · 10dc32d · 10dc32d
1 parent 3dc3490
commit 10dc32d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/StatisticBlock/View.jsx b/src/StatisticBlock/View.jsx
@@ -48,6 +48,7 @@ const View = ({ data, mode }) => {
     animation = {},
   } = data;
   const {
+    textAlign = 'center',
     backgroundInverted = 'primary',
     valueVariation = 'secondary',
     labelVariation = 'tertiary',
@@ -70,7 +71,7 @@ const View = ({ data, mode }) => {
         valuevariation={valueVariation}
         labelvariation={labelVariation}
         extravariation={extraVariation}
-        className={styles.align === 'full' ? 'ui container' : ''}
+        className={cx(textAlign, { 'ui container': styles.align === 'full' })}
       >
         {items.map((item, index) => {
           const href = getFieldURL(item.href);

diff --git a/src/StatisticBlock/styles.less b/src/StatisticBlock/styles.less
@@ -1,8 +1,28 @@
-.ui.statistic {
-  .slate {
-    p {
-      margin-bottom: 0;
-      color: inherit;
+.ui.statistics {
+  .ui.statistic {
+    .slate {
+      p {
+        margin-bottom: 0;
+        color: inherit;
+      }
+    }
+  }
+
+  &.left {
+    .ui.statistic {
+      align-items: flex-start;
+    }
+  }
+
+  &.center {
+    .ui.statistic {
+      align-items: center;
+    }
+  }
+
+  &.right {
+    .ui.statistic {
+      align-items: flex-end;
     }
   }
 }
diff --git a/src/StatisticBlock/stylesSchema.js b/src/StatisticBlock/stylesSchema.js
@@ -6,6 +6,7 @@ export default () => {
         title: 'Default',
         fields: [
           'align',
+          'textAlign',
           'backgroundInverted',
           'valueVariation',
           'labelVariation',
@@ -20,6 +21,11 @@ export default () => {
         title: 'Align',
         actions: ['center', 'wide', 'full'],
       },
+      textAlign: {
+        title: 'Text align',
+        widget: 'style_text_align',
+        default: 'center',
+      },
       backgroundInverted: {
         title: 'Background when inverted',
         choices: [