From 42d16a62f6d0781eba44dc1e0b76b28cae37d89a Mon Sep 17 00:00:00 2001
From: Evgeny Sergeev <SiebenSieben@gmail.com>
Date: Mon, 19 Jul 2021 18:02:43 +0300
Subject: [PATCH] feat(typography): monospaceNumbers prop (PDS-255) (#697)

* feat(typography): text monospaceNumbers prop

* chore(typography): remove old docs

* chore(typography): revert mono

Co-authored-by: Dmitry Savkin <dmitrsavk@yandex.ru>
Co-authored-by: reme3d2y <AYatsenko@alfabank.ru>
Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com>
---
 packages/typography/src/docs/Component.stories.mdx | 5 +++--
 packages/typography/src/text/component.test.tsx    | 6 ++++++
 packages/typography/src/text/component.tsx         | 8 +++++++-
 packages/typography/src/text/index.module.css      | 4 ++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/typography/src/docs/Component.stories.mdx b/packages/typography/src/docs/Component.stories.mdx
index b13c36b560..0146bff505 100644
--- a/packages/typography/src/docs/Component.stories.mdx
+++ b/packages/typography/src/docs/Component.stories.mdx
@@ -83,11 +83,12 @@ import { colors } from '../colors';
         const color = select('color', colors, '');
         const tag = select('tag', ['div', 'p', 'span'], 'p');
         const weight = select('weight', ['regular', 'medium', 'bold'], 'regular');
+        const monospace = boolean('monospaceNumbers', false);
         return VIEW_TYPES.map(view => (
-            <Typography.Text view={view} color={color} tag={tag} weight={weight} key={view}>
+            <Typography.Text view={view} color={color} tag={tag} weight={weight} monospaceNumbers={monospace} key={view}>
                 {view}. Космологи́ческая сингуля́рность — состояния Вселенной в определённый момент времени в прошлом,
                 когда плотность энергии (материи) и кривизна пространства-времени были очень велики — порядка
-                планковских значений.
+                планковских значений. 1234567890, например.
             </Typography.Text>
         ));
     })}
diff --git a/packages/typography/src/text/component.test.tsx b/packages/typography/src/text/component.test.tsx
index 82d2b67810..5f5bd96920 100644
--- a/packages/typography/src/text/component.test.tsx
+++ b/packages/typography/src/text/component.test.tsx
@@ -66,6 +66,12 @@ describe('Text', () => {
                 expect(container.firstElementChild).toHaveClass(weight);
             });
         });
+
+        it('should set `monospace` class if prop `monospaceNumbers` is present', () => {
+            const { container } = render(<Text monospaceNumbers={true}>12345</Text>);
+
+            expect(container.firstElementChild).toHaveClass('monospace');
+        });
     });
 
     describe('Attributes tests', () => {
diff --git a/packages/typography/src/text/component.tsx b/packages/typography/src/text/component.tsx
index 95620d5592..31758a8727 100644
--- a/packages/typography/src/text/component.tsx
+++ b/packages/typography/src/text/component.tsx
@@ -32,6 +32,11 @@ export type TextProps = Omit<NativeProps, 'color'> & {
      */
     weight?: 'regular' | 'medium' | 'bold';
 
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+
     /**
      * HTML тег
      */
@@ -57,6 +62,7 @@ export const Text: FC<TextProps> = ({
     view = 'primary-medium',
     tag: Component = 'span',
     weight = 'regular',
+    monospaceNumbers = false,
     color,
     className,
     dataTestId,
@@ -65,7 +71,7 @@ export const Text: FC<TextProps> = ({
 }) => (
     <Component
         className={cn(
-            { [styles.paragraph]: Component === 'p' },
+            { [styles.paragraph]: Component === 'p', [styles.monospace]: monospaceNumbers },
             className,
             color && colors[color],
             styles[view],
diff --git a/packages/typography/src/text/index.module.css b/packages/typography/src/text/index.module.css
index 35de0b63f4..d4cec33102 100644
--- a/packages/typography/src/text/index.module.css
+++ b/packages/typography/src/text/index.module.css
@@ -52,3 +52,7 @@
 .regular {
     font-weight: normal;
 }
+
+.monospace {
+    font-variant-numeric: tabular-nums;
+}