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

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

package/src/index.module.css

@@ -0,0 +1,94 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    text-align: unset;
+    box-sizing: border-box;
+}
+
+.horizontal {
+    display: flex;
+    width: 100%;
+
+    & > section:not(:last-child) {
+        margin-right: var(--gap-m);
+    }
+}
+
+.vertical {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    & > section:not(:last-child) {
+        margin-bottom: var(--gap-s);
+    }
+}
+
+.button {
+    font-family: inherit;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out;
+    padding: 0;
+
+    &:hover {
+        opacity: 0.8;
+    }
+
+    &:active {
+        opacity: 0.6;
+    }
+}
+
+.link {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out;
+
+    &:hover {
+        opacity: 0.8;
+    }
+
+    &:active {
+        opacity: 0.6;
+    }
+}
+.none {
+    padding: 0;
+}
+
+.airy {
+    padding: var(--gap-m) 0;
+}
+
+.defaultPadding {
+    padding: var(--gap-s) 0;
+}
+
+.compact {
+    padding: var(--gap-xs) 0;
+}
+
+.tiny {
+    padding: var(--gap-2xs) 0;
+}
+
+.left {
+    padding-left: var(--gap-m);
+}
+
+.right {
+    padding-right: var(--gap-m);
+}
+
+.both {
+    padding-right: var(--gap-m);
+    padding-left: var(--gap-m);
+}
+
+.focused {
+    @mixin focus-outline;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { PureCell } from './component';

package/cssm/getDataTestId-5c876d98.d.ts

@@ -1,2 +0,0 @@
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { getDataTestId };

package/cssm/getDataTestId-5c876d98.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-exports.getDataTestId = getDataTestId;

package/esm/getDataTestId-da5e186a.d.ts

@@ -1,2 +0,0 @@
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { getDataTestId };

package/esm/getDataTestId-da5e186a.js

@@ -1,6 +0,0 @@
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-export { getDataTestId as g };

package/getDataTestId-ded5c63d.d.ts

@@ -1,2 +0,0 @@
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { getDataTestId };

package/getDataTestId-ded5c63d.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-exports.getDataTestId = getDataTestId;

package/modern/getDataTestId-ac4d85c3.d.ts

@@ -1,2 +0,0 @@
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { getDataTestId };

package/modern/getDataTestId-ac4d85c3.js

@@ -1,6 +0,0 @@
-const getDataTestId = (dataTestId, element) => {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-};
-
-export { getDataTestId as g };