feat(core-components-amount): feat, change api, add PureAmount

core-ds · Jun 26, 2020 · f946776 · f946776
1 parent b8b4efa
commit f946776
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 71 deletions.
diff --git a/packages/amount/src/__snapshots__/component.test.tsx.snap b/packages/amount/src/__snapshots__/component.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`Amount should match snapshot 1`] = `
 <span
-  class="component amount"
+  class="component"
   data-test-id="test-id"
 >
   1
   <span
-    class="minorPart"
+    class="minorPartAndCurrency"
   >
     ,
     00

diff --git a/packages/amount/src/component.stories.mdx b/packages/amount/src/component.stories.mdx
@@ -1,5 +1,6 @@
-import { Meta, Story, Props, Title } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Props, Title, Preview } from '@storybook/addon-docs/blocks';
 import { text, select, boolean, number } from '@storybook/addon-knobs';
+import { Container, Row, Col } from 'storybook/blocks/grid';
 
 import { Amount } from '.';
 import { CURRENCY_CODES } from './utils/currencyCodes';
@@ -21,27 +22,66 @@ import { Amount } from '@alfalab/core-components-amount';
  https://design.alfabank.ru/patterns/amount
 
 <Story name='Песочница'>
-    <Amount
-        value={number('value', 100)}
-        currency={select('currency', Object.keys(CURRENCY_CODES), 'RUR')}
-        minority={number('minority', 100)}
-        hideMinority={boolean('hideMinority', false)}
-        className={select('className', '')}
-        dataTestId={text('dataTestId', '')}
-        pure={ boolean('pure', false) }
-    />
+    {React.createElement(() => {
+        const value = number('value', 100);
+        const currency = select('currency', Object.keys(CURRENCY_CODES), 'RUR');
+        const minority = number('minority', 100);
+        const view = select('view', ['default', 'withZeroMinorPart'], 'default');
+        const className = select('className', '');
+        const dataTestId = text('dataTestId', '');
+        return (
+            <React.Fragment>
+                <Row>
+                    <Col>Amount</Col>
+                    <Col>Amount.Pure (Без стилей)</Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <Amount
+                            value={value}
+                            currency={currency}
+                            minority={minority}
+                            view={view}
+                            className={className}
+                            dataTestId={dataTestId}
+                        />
+                    </Col>
+                    <Col>
+                        <Amount.Pure
+                            value={value}
+                            currency={currency}
+                            minority={minority}
+                            view={view}
+                            className={className}
+                            dataTestId={dataTestId}
+                        />
+                    </Col>
+                </Row>
+            </React.Fragment>
+        );
+    })}
 </Story>
 
 <Props of={Amount} />
 
 ## Контекст использования
 <br/>
 
-- `hideMinority="true"`: не показывает минорную часть, если её значение равно 0.
-
+- `view="withZeroMinorPart"`: не показывает минорную часть, если её значение равно 0.
+TODO: siebian хотели красивую таблицу которая показывает разницу
 <Preview>
     <Container>
-        <Amount value={1234500} currency='RUR' minority={100} hideMinority={true} />
+        <Row>
+            <Col>Значение</Col>
+            <Col>view="default"</Col>
+            <Col>view="withZeroMinorPart"</Col>
+        </Row>
+        <Row>
+            <Col>1234500</Col>
+            <Col><Amount value={1234500} currency='RUR' minority={100} /></Col>
+            <Col><Amount view="withZeroMinorPart" value={1234500} currency='RUR' minority={100} /></Col>
+        </Row>
+        <Amount value={1234500} currency='RUR' minority={100} />
         <Amount value={1234567} currency='RUR' minority={100} hideMinority={true} />
     </Container>
 </Preview>
@@ -90,7 +130,7 @@ import { Amount } from '@alfalab/core-components-amount';
 <Preview>
     <Container>
         <span>
-            <Amount value={1234500} currency='RUR' minority={100} pure={true} />
+            <Amount.Pure value={1234500} currency='RUR' minority={100} />
         </span>
     </Container>
 </Preview>
diff --git a/packages/amount/src/component.tsx b/packages/amount/src/component.tsx
@@ -2,58 +2,19 @@ import React from 'react';
 import cn from 'classnames';
 
 import { formatAmount } from './utils';
-import { AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR, THINSP, CurrencyCodes } from './utils/currencyCodes';
-
+import { AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR, THINSP } from './utils/currencyCodes';
+import { AmounProps } from './types';
 import styles from './index.module.css';
 
-type Props = {
-    /**
-     * Денежное значение в минорных единицах
-     */
-    value: number;
-
-    /**
-     * Валюта
-     */
-    currency: CurrencyCodes;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    minority: number;
-
-    // TODO: подумать над описанием
-    /**
-     * Отображение минорной части, если она нулевая
-     */
-    hideMinority?: boolean;
-
-    /**
-     * Отключает стили
-     */
-    pure?: boolean;
-
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-
 /**
  * Компонент для отображения суммы, согласно следующему гайдлайну:
  * https://design.alfabank.ru/patterns/amount
  */
-export const Amount: React.FC<Props> = ({
+export const Amount: React.FC<AmounProps> = ({
     value,
     minority,
     currency,
-    hideMinority = false,
-    pure = false,
+    view = 'default',
     className,
     dataTestId,
 }) => {
@@ -63,17 +24,15 @@ export const Amount: React.FC<Props> = ({
             code: currency,
             minority,
         },
+        withZeroMinorPart: view === 'withZeroMinorPart',
     });
 
     return (
-        <span
-            className={cn(styles.component, { [styles.amount]: !pure }, className)}
-            data-test-id={dataTestId}
-        >
+        <span className={cn(styles.component, className)} data-test-id={dataTestId}>
             {majorPart}
-            <span className={cn(!pure && styles.minorPart)}>
-                {!hideMinority && minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
-                {!hideMinority && minorPart}
+            <span className={styles.minorPartAndCurrency}>
+                {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
+                {minorPart}
                 {THINSP}
                 {currencySymbol}
             </span>

diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css
@@ -2,13 +2,10 @@
 
 .component {
     white-space: nowrap;
-}
-
-.amount {
     font-weight: bold;
 }
 
-.minorPart {
+.minorPartAndCurrency {
     opacity: 0.6;
     font-weight: normal;
 }
diff --git a/packages/amount/src/index.ts b/packages/amount/src/index.ts
@@ -1 +1,9 @@
-export * from './component';
+import { Amount as DefaultAmount } from './component';
+import { PureAmount } from './pure/component';
+
+type AmountType = typeof DefaultAmount & { Pure: typeof PureAmount };
+// TODO: можно ли с этим что-то придумать?
+const Amount: AmountType = DefaultAmount as AmountType;
+Amount.Pure = PureAmount;
+
+export { Amount };
diff --git a/packages/amount/src/pure/__snapshots__/component.test.tsx.snap b/packages/amount/src/pure/__snapshots__/component.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PureAmount should match snapshot 1`] = `
+<span
+  class="component"
+  data-test-id="test-id"
+>
+  1
+  ,
+  00
+   
+  ₽
+</span>
+`;
diff --git a/packages/amount/src/pure/component.test.tsx b/packages/amount/src/pure/component.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PureAmount } from '.';
+
+describe('PureAmount', () => {
+    it('should match snapshot', () => {
+        const testId = 'test-id';
+
+        const { getByTestId } = render(
+            <PureAmount value={100} currency='RUR' minority={100} dataTestId={testId} />,
+        );
+        const amount = getByTestId(testId);
+        expect(amount).toMatchSnapshot();
+    });
+});
diff --git a/packages/amount/src/pure/component.tsx b/packages/amount/src/pure/component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { formatAmount } from '../utils';
+import { AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR, THINSP } from '../utils/currencyCodes';
+import { AmounProps } from '../types';
+import styles from './index.module.css';
+
+/**
+ * Компонент для отображения суммы, согласно следующему гайдлайну:
+ * https://design.alfabank.ru/patterns/amount
+ * Не содержит стилей кроме неразрывности строки
+ */
+export const PureAmount: React.FC<AmounProps> = ({
+    value,
+    minority,
+    currency,
+    view = 'default',
+    className,
+    dataTestId,
+}) => {
+    const { majorPart, minorPart, currencySymbol } = formatAmount({
+        value,
+        currency: {
+            code: currency,
+            minority,
+        },
+        withZeroMinorPart: view === 'withZeroMinorPart',
+    });
+
+    return (
+        <span className={cn(styles.component, className)} data-test-id={dataTestId}>
+            {majorPart}
+            {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
+            {minorPart}
+            {THINSP}
+            {currencySymbol}
+        </span>
+    );
+};
diff --git a/packages/amount/src/pure/index.module.css b/packages/amount/src/pure/index.module.css
@@ -0,0 +1,3 @@
+.component {
+    white-space: nowrap;
+}
diff --git a/packages/amount/src/pure/index.ts b/packages/amount/src/pure/index.ts
@@ -0,0 +1 @@
+export * from './component';
diff --git a/packages/amount/src/types/index.ts b/packages/amount/src/types/index.ts
@@ -0,0 +1,34 @@
+import { CurrencyCodes } from '../utils/currencyCodes';
+
+export type AmounProps = {
+    /**
+     * Денежное значение в минорных единицах
+     */
+    value: number;
+
+    /**
+     * Валюта
+     */
+    currency: CurrencyCodes;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    minority: number;
+
+    /**
+     * default - не отображаем копейки, если из значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     */
+    view?: 'default' | 'withZeroMinorPart';
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
diff --git a/packages/amount/src/utils/formatAmount.ts b/packages/amount/src/utils/formatAmount.ts
@@ -62,6 +62,7 @@ type AmountType = {
         code: CurrencyCodes;
         minority: number;
     };
+    withZeroMinorPart?: boolean;
 };
 
 export const formatAmount = ({ value, currency: { code, minority } }: AmountType) => {