@alfalab/core-components-pure-cell 4.3.2 → 4.4.0

package/src/components/amount-title/component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Amount as CoreAmount } from '@alfalab/core-components-amount';
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+import { AmountProps as AmountType } from '../typesProps';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Цвет денежного значения
+     */
+    color?: Color;
+} & AmountType;
+
+export const AmountTitle: React.FC<Props> = ({
+    minority,
+    minorUnits = 100,
+    className,
+    color = 'primary',
+    dataTestId,
+    ...restProps
+}) => (
+    <Typography.Title
+        tag='h4'
+        view='small'
+        dataTestId={getDataTestId(dataTestId, 'amount-title')}
+        className={styles.component}
+        color={color}
+    >
+        <CoreAmount
+            minority={minority || minorUnits}
+            className={cn(styles.weight, className)}
+            dataTestId={getDataTestId(dataTestId, 'core-amount-title')}
+            {...restProps}
+            bold='none'
+        />
+    </Typography.Title>
+);

package/src/components/amount-title/index.module.css

@@ -0,0 +1,9 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+}
+
+.weight {
+    font-weight: inherit;
+}

package/src/components/amount-title/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/category/component.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Typography } from '@alfalab/core-components-typography';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Наименование категории
+     */
+    categoryName: string;
+
+    /**
+     * Процент категории
+     */
+    categoryPercent?: number;
+
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+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'
+            color='secondary'
+            dataTestId={getDataTestId(dataTestId, 'category-name')}
+            className={styles.categoryName}
+        >
+            {categoryName}
+        </Typography.Text>
+        {categoryPercent !== undefined && (
+            <Typography.Text
+                tag='div'
+                view='primary-small'
+                color='secondary'
+                className={styles.categoryPercent}
+                dataTestId={getDataTestId(dataTestId, 'category-percent')}
+            >
+                {categoryPercent}%
+            </Typography.Text>
+        )}
+        {rightAddons !== undefined && (
+            <div
+                className={styles.rightAddon}
+                data-test-id={getDataTestId(dataTestId, 'category-right-addon')}
+            >
+                {rightAddons}
+            </div>
+        )}
+    </div>
+);

package/src/components/category/index.module.css

@@ -0,0 +1,26 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    overflow: hidden;
+    padding: var(--gap-3xs) 0;
+}
+
+.categoryName {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.categoryPercent {
+    padding: 0 var(--gap-xs);
+    background-color: var(--color-light-bg-secondary);
+    border-radius: var(--border-radius-xl);
+    margin-left: var(--gap-2xs);
+}
+
+.rightAddon {
+    margin-left: var(--gap-2xs);
+}

package/src/components/category/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/content/component.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { PureCellContext } from '../../component';
+import { ContentElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Компоненты
+     */
+    children: ContentElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Content: React.FC<Props> = ({ children, dataTestId }) => {
+    const { direction } = useContext(PureCellContext);
+
+    return (
+        <section
+            className={cn(styles.component, { [styles.horizontal]: direction === 'horizontal' })}
+            data-test-id={getDataTestId(dataTestId, 'content')}
+        >
+            {children}
+        </section>
+    );
+};

package/src/components/content/index.module.css

@@ -0,0 +1,12 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    flex-basis: 100%;
+    display: grid;
+    grid-template-columns: 1fr auto;
+
+    &.horizontal {
+        /* for button */
+        align-self: stretch;
+    }
+}

package/src/components/content/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/footer/component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { FooterElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Компоненты
+     */
+    children: FooterElement;
+
+    /**
+     * Вертикальные отступы
+     */
+    footerPadding?: 'default' | 'none';
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Footer: React.FC<Props> = ({ children, footerPadding = 'default', dataTestId }) => (
+    <footer
+        className={cn(styles.component, styles[footerPadding])}
+        data-test-id={getDataTestId(dataTestId, 'footer')}
+    >
+        {children}
+    </footer>
+);

package/src/components/footer/index.module.css

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    grid-column: 1/3;
+    display: grid;
+    grid-row-gap: var(--gap-xs);
+
+    &.none {
+        margin-top: 0;
+    }
+
+    &.default {
+        margin-top: var(--gap-xs);
+    }
+}

package/src/components/footer/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/footer-button/component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Button, ButtonProps } from '@alfalab/core-components-button';
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import styles from './index.module.css';
+
+export const FooterButton: React.FC<ButtonProps> = ({ children, dataTestId, ...props }) => (
+    <Button
+        {...props}
+        size='xxs'
+        dataTestId={getDataTestId(dataTestId, 'button')}
+        className={styles.component}
+    >
+        {children}
+    </Button>
+);

package/src/components/footer-button/index.module.css

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    justify-self: start;
+}

package/src/components/footer-button/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/footer-text/component.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+export type Props = {
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+
+export const FooterText: React.FC<Props> = ({ children, color = 'secondary', dataTestId }) => (
+    <Typography.Text
+        view='primary-small'
+        color={color}
+        data-test-id={getDataTestId(dataTestId, 'footer-title')}
+    >
+        {children}
+    </Typography.Text>
+);

package/src/components/footer-text/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/graphics/component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { GraphicsElement } from '../types';
+
+import styles from './index.module.css';
+
+export type Props = {
+    /**
+     * Компоненты
+     */
+    children: GraphicsElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Вертикальное выравнивание
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
+};
+
+export const Graphics: React.FC<Props> = ({ children, dataTestId, verticalAlign = 'top' }) => (
+    <section
+        className={cn(styles.component, styles[verticalAlign])}
+        data-test-id={getDataTestId(dataTestId, 'graphics')}
+    >
+        {children}
+    </section>
+);

package/src/components/graphics/index.module.css

@@ -0,0 +1,18 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: inline-flex;
+    flex-basis: auto;
+}
+
+.top {
+    align-self: flex-start;
+}
+
+.center {
+    align-self: center;
+}
+
+.bottom {
+    align-self: flex-end;
+}

package/src/components/graphics/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/main/component.tsx

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { PureCellContext } from '../../component';
+import { MainElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Компоненты
+     */
+    children: MainElement;
+
+    /**
+     * Позволяет изменить расположение блоков внутри main
+     */
+    isReverse?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Main: React.FC<Props> = ({ children, isReverse, className, dataTestId }) => {
+    const { direction = 'horizontal' } = useContext(PureCellContext);
+
+    return (
+        <div
+            className={cn(
+                styles.component,
+                styles[direction],
+                {
+                    [styles.reverse]: isReverse,
+                },
+                className,
+            )}
+            data-test-id={getDataTestId(dataTestId, 'main')}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/main/index.module.css

@@ -0,0 +1,23 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+
+    /* can use /r/n */
+    white-space: pre-line;
+
+    &.vertical {
+        grid-row-gap: var(--gap-3xs);
+        justify-content: center;
+        align-items: center;
+
+        /* for button */
+        text-align: center;
+    }
+
+    &.reverse {
+        flex-direction: column-reverse;
+    }
+}

package/src/components/main/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/text/component.tsx

@@ -0,0 +1,100 @@
+import React, { ReactNode, useContext } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+import { PureCellContext } from '../../component';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+
+    /**
+     * Количество строк
+     */
+    rowLimit?: 1 | 2;
+
+    /**
+     * Размер текста
+     */
+    view: 'primary-large' | 'primary-medium' | 'primary-small' | 'component';
+
+    /**
+     * Толщина title
+     */
+    titleWeight?: 'regular' | 'bold';
+
+    /**
+     * Цвет title
+     */
+    titleColor: Color;
+
+    /**
+     * Value ячейки
+     */
+    value?: ReactNode;
+
+    /**
+     * Цвет value
+     */
+    valueColor?: Color;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Text: React.FC<Props> = ({
+    children,
+    value,
+    rowLimit,
+    view = 'component',
+    titleWeight,
+    titleColor,
+    valueColor,
+    dataTestId,
+}) => {
+    const { direction = 'horizontal' } = useContext(PureCellContext);
+    const className = rowLimit && styles[`rowLimit${rowLimit}`];
+
+    return (
+        <div
+            className={cn(styles.component, {
+                [styles.vertical]: direction !== 'horizontal',
+            })}
+        >
+            <div className={styles.title}>
+                <Typography.Text
+                    view={view}
+                    weight={titleWeight}
+                    tag='div'
+                    color={titleColor}
+                    className={className}
+                    data-test-id={getDataTestId(dataTestId, 'text_content')}
+                >
+                    {children}
+                </Typography.Text>
+            </div>
+
+            {value && (
+                <div className={styles.value}>
+                    <Typography.Text
+                        view={view}
+                        tag='div'
+                        color={valueColor}
+                        className={className}
+                        data-test-id={getDataTestId(dataTestId, 'text_value')}
+                    >
+                        {value}
+                    </Typography.Text>
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/text/index.module.css

@@ -0,0 +1,34 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.horizontal {
+    padding: var(--gap-3xs) 0;
+}
+
+.rowLimit1 {
+    @mixin row_limit 1;
+    word-break: break-all;
+}
+
+.rowLimit2 {
+    @mixin row_limit 2;
+}
+
+.component {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    margin: var(--gap-3xs) 0;
+    word-break: break-word;
+}
+
+.component {
+    & .vertical {
+        justify-content: center;
+    }
+}
+
+.title + .value {
+    margin-left: var(--gap-m);
+    flex-shrink: 0;
+}

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/types.ts

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { Comment } from '@alfalab/core-components-comment';
+
+import { Amount } from './amount';
+import { AmountTitle } from './amount-title';
+import { FooterButton } from './footer-button';
+import { FooterText } from './footer-text';
+import { Graphics } from './graphics';
+import { Text } from './text';
+
+type TextElement = ReactElement<typeof Text>;
+export type GraphicsElement = ReactElement<typeof Graphics>;
+type AmountElement = ReactElement<typeof Amount>;
+type AmountTitleElement = ReactElement<typeof AmountTitle>;
+export type CommentElement = ReactElement<typeof Comment>;
+type FooterButtonElement = ReactElement<typeof FooterButton>;
+type FooterTitleElement = ReactElement<typeof FooterText>;
+export type FooterElement =
+    | Array<ReactElement<FooterButtonElement> | FooterTitleElement>
+    | CommentElement;
+export type MainElement =
+    | Array<undefined | '' | TextElement | AmountElement | AmountTitleElement>
+    | (TextElement | AmountElement | AmountTitleElement);
+export type ContentElement = Array<MainElement | AddonElement | FooterElement> | MainElement;
+export type AddonElement = Array<TextElement | ReactNode> | TextElement | ReactNode;
+export type PureCellElement = Array<GraphicsElement | ContentElement> | ContentElement;

package/src/components/typesProps.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+
+import { CurrencyCodes } from '@alfalab/data';
+
+export type AmountProps = {
+    /**
+     * Денежное значение в минорных единицах
+     */
+    value: number;
+
+    /**
+     * Валюта
+     */
+    currency?: CurrencyCodes;
+
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+
+    /**
+     * Количество минорных единиц в валюте
+     */
+    minority?: number;
+
+    /**
+     * Делает минорную часть полупрозрачной
+     */
+    transparentMinor?: boolean;
+
+    /**
+     * Количество минорных единиц в валюте для Клика
+     */
+    minorUnits?: number;
+
+    /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     */
+    view?: 'default' | 'withZeroMinorPart';
+
+    /**
+     * Показывать значок + для положительных значений
+     */
+    showPlus?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};