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

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

@@ -0,0 +1,39 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    & > * {
+        justify-content: flex-end;
+    }
+
+    &.none {
+        padding-left: 0;
+    }
+
+    &.default {
+        padding-left: var(--gap-m);
+    }
+
+    &.addonPadding {
+        padding-left: var(--gap-m);
+    }
+
+    &.auto {
+        align-self: auto;
+    }
+
+    &.top {
+        align-self: flex-start;
+    }
+
+    &.center {
+        align-self: center;
+    }
+
+    &.bottom {
+        align-self: flex-end;
+    }
+}

package/src/components/addon/index.ts

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

package/src/components/amount/component.tsx

@@ -0,0 +1,56 @@
+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 = {
+    /**
+     * Начертание шрифта денежного значения
+     */
+    weight?: 'bold' | 'normal';
+
+    /**
+     * Размер денежного значения
+     */
+    textView?: 'component' | 'primary-small';
+
+    /**
+     * Цвет денежного значения
+     */
+    color?: Color;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AmountType;
+
+export const Amount: React.FC<Props> = ({
+    weight = 'normal',
+    textView = 'component',
+    color = 'primary',
+    minority,
+    minorUnits = 100,
+    dataTestId,
+    ...restProps
+}) => (
+    <Typography.Text
+        view={textView}
+        dataTestId={getDataTestId(dataTestId, 'amount-text')}
+        className={cn(styles.component)}
+        color={color}
+    >
+        <CoreAmount
+            minority={minority || minorUnits}
+            bold={weight === 'bold' ? 'full' : 'none'}
+            dataTestId={getDataTestId(dataTestId, 'amount')}
+            {...restProps}
+        />
+    </Typography.Text>
+);

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

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    padding: var(--gap-3xs) 0;
+    display: flex;
+}

package/src/components/amount/index.ts

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

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>
+    );
+};