feat(pure-cell): resolves #285 (#288)

core-ds · Oct 18, 2022 · 946e1e8 · 946e1e8
1 parent fa63028
commit 946e1e8
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 119 deletions.
diff --git a/.changeset/rare-peaches-matter.md b/.changeset/rare-peaches-matter.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-comment': minor
+---
+
+-   Добавлен проп rowLimit для управления количеством строк для отображения
diff --git a/.changeset/thick-monkeys-speak.md b/.changeset/thick-monkeys-speak.md
@@ -0,0 +1,10 @@
+---
+'@alfalab/core-components-pure-cell': major
+---
+
+-   Для `PureCell.AmountTitle` props были объеденены с `AmountType`, удален проп `amount`
+-   Для `PureCell.Amount` props были объеденены с `AmountType`, удален проп `amount`, `view` переименован в `textView`
+-   Добавлен проп rowLimit для управления количеством строк для отображения
+-   Для `PureCell.Addon` расширено значение пропа `verticalAlign`
+-   Для `PureCell.Category` добавлен проп `rightAddons`
+-   В `PureCell.Text` исправлен `render` блока `value`
diff --git a/packages/comment/src/Component.tsx b/packages/comment/src/Component.tsx
@@ -6,6 +6,10 @@ import { Typography } from '@alfalab/core-components-typography';
 import styles from './index.module.css';
 
 export type CommentProps = {
+    /**
+     * Количество строк
+     */
+    rowLimit?: 2 | 5;
     /**
      *  Сss класс для стилизации общей обёртки
      */
@@ -22,10 +26,13 @@ export type CommentProps = {
     children?: ReactNode;
 };
 
-export const Comment: React.FC<CommentProps> = ({ className, dataTestId, children }) => (
-    <div className={cn(styles.component, className)} data-test-id={dataTestId}>
-        <Typography.Text tag='div' view='component' className={styles.text} color='primary'>
-            {children}
-        </Typography.Text>
-    </div>
-);
+export const Comment: React.FC<CommentProps> = ({ className, dataTestId, children, rowLimit }) => {
+    const textClassName = rowLimit && styles[`rowLimit${rowLimit}`];
+    return (
+        <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+            <Typography.Text tag='div' view='component' className={textClassName} color='primary'>
+                {children}
+            </Typography.Text>
+        </div>
+    );
+};
diff --git a/packages/comment/src/component.test.tsx b/packages/comment/src/component.test.tsx
@@ -27,4 +27,10 @@ describe('comment', () => {
 
         expect(screen.getByTestId('test-children')).toBeInTheDocument();
     });
+
+    it('should use a rowLimit prop', () => {
+        render(<Comment dataTestId='test-identifier' rowLimit={2} />);
+
+        expect(screen.getByTestId('test-identifier').firstElementChild).toHaveClass('rowLimit2');
+    });
 });
diff --git a/packages/comment/src/docs/component.stories.mdx b/packages/comment/src/docs/component.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Story, Props } from '@storybook/addon-docs';
-import { text } from '@storybook/addon-knobs';
+import { text, select } from '@storybook/addon-knobs';
 import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 import { Comment } from '@alfalab/core-components-comment';
 
@@ -18,9 +18,10 @@ import styles from '!!raw-loader!../index.module.css';
 <Story name='Comment'>
     {React.createElement(() => {
         const children = text('Текст комментария', 'Comment');
+        const rowLimit = select('Количество строк', ['', '2', '5'], '');
         return (
             <div>
-                <Comment>{children}</Comment>
+                <Comment rowLimit={rowLimit}>{children}</Comment>
             </div>
         )
     })}

diff --git a/packages/comment/src/index.module.css b/packages/comment/src/index.module.css
@@ -8,9 +8,16 @@
         var(--border-radius-xxl);
 }
 
-.text {
+.rowLimit2 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+.rowLimit5 {
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
diff --git a/...age_snapshots__/pure-cell-screenshots-direction-horizontal-direction-0-snap.png b/...age_snapshots__/pure-cell-screenshots-direction-horizontal-direction-0-snap.png
diff --git a/packages/pure-cell/src/components/addon/component.tsx b/packages/pure-cell/src/components/addon/component.tsx
@@ -10,7 +10,7 @@ type Props = {
     /**
      * Вертикальное выравнивание
      */
-    verticalAlign?: 'center';
+    verticalAlign?: 'top' | 'center' | 'bottom';
 
     /**
      * Горизонтальные отступы
@@ -30,14 +30,12 @@ type Props = {
 
 export const Addon: React.FC<Props> = ({
     children,
-    verticalAlign,
+    verticalAlign = 'top',
     addonPadding = 'default',
     dataTestId,
 }) => (
     <section
-        className={cn(styles.component, styles[addonPadding], {
-            [styles.center]: verticalAlign,
-        })}
+        className={cn(styles.component, styles[addonPadding], styles[verticalAlign])}
         data-test-id={getDataTestId(dataTestId, 'addon')}
     >
         {children}

diff --git a/packages/pure-cell/src/components/addon/index.module.css b/packages/pure-cell/src/components/addon/index.module.css
@@ -3,6 +3,7 @@
 .component {
     display: flex;
     flex-direction: column;
+    align-items: flex-end;
 
     & > * {
         justify-content: flex-end;
@@ -20,7 +21,15 @@
         padding-left: var(--gap-m);
     }
 
+    &.top {
+        align-self: flex-start;
+    }
+
     &.center {
         align-self: center;
     }
+
+    &.bottom {
+        align-self: flex-end;
+    }
 }
diff --git a/packages/pure-cell/src/components/amount-title/component.tsx b/packages/pure-cell/src/components/amount-title/component.tsx
@@ -10,24 +10,20 @@ import { getDataTestId } from '../../../../utils/getDataTestId';
 import styles from './index.module.css';
 
 type Props = {
-    /**
-     * Props свойственные для компонента Amount
-     */
-    amount: AmountType;
-
     /**
      * Цвет денежного значения
      */
     color?: Color;
+} & AmountType;
 
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-
-export const AmountTitle: React.FC<Props> = ({ amount, color = 'primary', dataTestId }) => {
-    const { value, currency, minority, minorUnits, rightAddons, showPlus, className } = amount;
+export const AmountTitle: React.FC<Props> = ({
+    minority,
+    minorUnits = 100,
+    className,
+    color = 'primary',
+    dataTestId,
+    ...restProps
+}) => {
     return (
         <Typography.Title
             tag='h4'
@@ -37,14 +33,11 @@ export const AmountTitle: React.FC<Props> = ({ amount, color = 'primary', dataTe
             color={color}
         >
             <CoreAmount
-                minority={minority === undefined ? minorUnits : minority}
-                value={value}
-                rightAddons={rightAddons}
-                showPlus={showPlus}
+                minority={minority || minorUnits}
                 className={cn(styles.weight, className)}
-                currency={currency}
                 dataTestId={getDataTestId(dataTestId, 'core-amount-title')}
-                view='withZeroMinorPart'
+                {...restProps}
+                bold='none'
             />
         </Typography.Title>
     );

diff --git a/packages/pure-cell/src/components/amount/component.tsx b/packages/pure-cell/src/components/amount/component.tsx
@@ -10,11 +10,6 @@ import { getDataTestId } from '../../../../utils/getDataTestId';
 import styles from './index.module.css';
 
 type Props = {
-    /**
-     * Props свойственные для компонента Amount
-     */
-    amount: AmountType;
-
     /**
      * Начертание шрифта денежного значения
      */
@@ -23,7 +18,7 @@ type Props = {
     /**
      * Размер денежного значения
      */
-    view?: 'component' | 'primary-small';
+    textView?: 'component' | 'primary-small';
 
     /**
      * Цвет денежного значения
@@ -34,44 +29,29 @@ type Props = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
-};
+} & AmountType;
 
 export const Amount: React.FC<Props> = ({
-    amount,
     weight = 'normal',
-    view = 'component',
+    textView = 'component',
     color = 'primary',
+    minority,
+    minorUnits = 100,
     dataTestId,
+    ...restProps
 }) => {
-    const {
-        value,
-        currency,
-        minority,
-        minorUnits,
-        rightAddons,
-        showPlus,
-        className,
-        transparentMinor,
-        view: viewAmount,
-    } = amount;
     return (
         <Typography.Text
-            view={view}
+            view={textView}
             dataTestId={getDataTestId(dataTestId, 'amount-text')}
             className={cn(styles.component)}
             color={color}
         >
             <CoreAmount
-                minority={minority === undefined ? minorUnits : minority}
-                value={value}
-                transparentMinor={transparentMinor}
+                minority={minority || minorUnits}
                 bold={weight === 'bold' ? 'full' : 'none'}
-                rightAddons={rightAddons}
-                showPlus={showPlus}
-                className={className}
-                currency={currency}
                 dataTestId={getDataTestId(dataTestId, 'amount')}
-                view={viewAmount}
+                {...restProps}
             />
         </Typography.Text>
     );

diff --git a/packages/pure-cell/src/components/category/component.tsx b/packages/pure-cell/src/components/category/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { Typography } from '@alfalab/core-components-typography';
 import { getDataTestId } from '../../../../utils/getDataTestId';
@@ -16,13 +16,23 @@ type Props = {
      */
     categoryPercent?: number;
 
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
 };
 
-export const Category: React.FC<Props> = ({ categoryName, categoryPercent, dataTestId }) => (
+export const Category: React.FC<Props> = ({
+    categoryName,
+    categoryPercent,
+    rightAddons,
+    dataTestId,
+}) => (
     <div className={styles.component} data-test-id='cell-pure-category'>
         <Typography.Text
             view='primary-small'
@@ -43,5 +53,13 @@ export const Category: React.FC<Props> = ({ categoryName, categoryPercent, dataT
                 {categoryPercent}%
             </Typography.Text>
         )}
+        {rightAddons !== undefined && (
+            <div
+                className={styles.rightAddon}
+                data-test-id={getDataTestId(dataTestId, 'category-right-addon')}
+            >
+                {rightAddons}
+            </div>
+        )}
     </div>
 );
diff --git a/packages/pure-cell/src/components/category/index.module.css b/packages/pure-cell/src/components/category/index.module.css
@@ -11,6 +11,7 @@
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    word-break: break-all;
 }
 
 .categoryPercent {
@@ -19,3 +20,7 @@
     border-radius: var(--border-radius-xl);
     margin-left: var(--gap-2xs);
 }
+
+.rightAddon {
+    margin-left: var(--gap-2xs);
+}
diff --git a/packages/pure-cell/src/components/text/component.tsx b/packages/pure-cell/src/components/text/component.tsx
@@ -77,20 +77,22 @@ export const Text: React.FC<Props> = ({
                     children
                 )}
             </span>
-            <span>
-                {typeof value === 'string' ? (
-                    <Typography.Text
-                        view={view}
-                        color={valueColor}
-                        className={className}
-                        data-test-id={getDataTestId(dataTestId, 'text')}
-                    >
-                        {value}
-                    </Typography.Text>
-                ) : (
-                    value
-                )}
-            </span>
+            {value !== undefined && (
+                <span className={styles.value}>
+                    {typeof value === 'string' ? (
+                        <Typography.Text
+                            view={view}
+                            color={valueColor}
+                            className={className}
+                            data-test-id={getDataTestId(dataTestId, 'text')}
+                        >
+                            {value}
+                        </Typography.Text>
+                    ) : (
+                        value
+                    )}
+                </span>
+            )}
         </div>
     );
 };