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 <[email protected]> Co-authored-by: reme3d2y <[email protected]> Co-authored-by: Alexander Yatsenko <[email protected]>
alfa-laboratory · Jul 19, 2021 · 42d16a6 · 42d16a6
1 parent 9659b38
commit 42d16a6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -52,3 +52,7 @@
 .regular {
     font-weight: normal;
 }
+
+.monospace {
+    font-variant-numeric: tabular-nums;
+}