@alfalab/core-components-pure-cell 4.12.4 → 4.13.0

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

@@ -7,3 +7,58 @@
 .weight {
     font-weight: inherit;
 }
+
+.hidden {
+    background: var(--color-light-neutral-translucent-400);
+    border-radius: var(--border-radius-8);
+    display: inline-block;
+}
+
+.hidden-xsmall {
+    height: 16px;
+    width: 88px;
+}
+
+.hidden-small {
+    height: 18px;
+    width: 100px;
+}
+
+.hidden-medium {
+    height: 24px;
+    width: 120px;
+}
+
+.hidden-large {
+    height: 28px;
+    width: 136px;
+}
+
+.hidden-xlarge {
+    height: 32px;
+    width: 156px;
+}
+
+.hiddenWrapper {
+    display: flex;
+}
+
+.hiddenWrapper-xsmall {
+    padding: var(--gap-4) var(--gap-0);
+}
+
+.hiddenWrapper-small {
+    padding: var(--gap-8) var(--gap-0);
+}
+
+.hiddenWrapper-medium {
+    padding: var(--gap-8) var(--gap-0);
+}
+
+.hiddenWrapper-large {
+    padding: var(--gap-12) var(--gap-0);
+}
+
+.hiddenWrapper-xlarge {
+    padding: var(--gap-16) var(--gap-0);
+}

package/moderncssm/components/category/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import '@alfalab/core-components-shared/moderncssm';
 import '@alfalab/core-components-typography/moderncssm';
-export { C as Category } from '../../component-511ba1c0.js';
+export { C as Category } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/category/index.js

@@ -1 +1 @@
-export { C as Category } from '../../component-511ba1c0.js';
+export { C as Category } from '../../component-891b50dd.js';

package/moderncssm/components/content/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/moderncssm';
-export { c as Content } from '../../component-511ba1c0.js';
+export { c as Content } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/content/index.js

@@ -1 +1 @@
-export { c as Content } from '../../component-511ba1c0.js';
+export { c as Content } from '../../component-891b50dd.js';

package/moderncssm/components/footer/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/moderncssm';
-export { F as Footer } from '../../component-511ba1c0.js';
+export { F as Footer } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/footer/index.js

@@ -1 +1 @@
-export { F as Footer } from '../../component-511ba1c0.js';
+export { F as Footer } from '../../component-891b50dd.js';

package/moderncssm/components/footer-button/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import '@alfalab/core-components-button/moderncssm';
 import '@alfalab/core-components-shared/moderncssm';
-export { d as FooterButton } from '../../component-511ba1c0.js';
+export { d as FooterButton } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/footer-button/index.js

@@ -1 +1 @@
-export { d as FooterButton } from '../../component-511ba1c0.js';
+export { d as FooterButton } from '../../component-891b50dd.js';

package/moderncssm/components/footer-text/component.js

@@ -1,4 +1,4 @@
 import 'react';
 import '@alfalab/core-components-shared/moderncssm';
 import '@alfalab/core-components-typography/moderncssm';
-export { e as FooterText } from '../../component-511ba1c0.js';
+export { e as FooterText } from '../../component-891b50dd.js';

package/moderncssm/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/footer-text/index.js

@@ -1 +1 @@
-export { e as FooterText } from '../../component-511ba1c0.js';
+export { e as FooterText } from '../../component-891b50dd.js';

package/moderncssm/components/graphics/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/moderncssm';
-export { G as Graphics } from '../../component-511ba1c0.js';
+export { G as Graphics } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/graphics/index.js

@@ -1 +1 @@
-export { G as Graphics } from '../../component-511ba1c0.js';
+export { G as Graphics } from '../../component-891b50dd.js';

package/moderncssm/components/main/component.js

@@ -1,5 +1,5 @@
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/moderncssm';
-export { M as Main } from '../../component-511ba1c0.js';
+export { M as Main } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/main/index.js

@@ -1 +1 @@
-export { M as Main } from '../../component-511ba1c0.js';
+export { M as Main } from '../../component-891b50dd.js';

package/moderncssm/components/text/component.js

@@ -2,5 +2,5 @@ import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/moderncssm';
 import '@alfalab/core-components-typography/moderncssm';
-export { T as Text } from '../../component-511ba1c0.js';
+export { T as Text } from '../../component-891b50dd.js';
 import './index.module.css';

package/moderncssm/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-511ba1c0";
+export * from "../../component-891b50dd";

package/moderncssm/components/text/index.js

@@ -1 +1 @@
-export { T as Text } from '../../component-511ba1c0.js';
+export { T as Text } from '../../component-891b50dd.js';

package/moderncssm/index.js

@@ -1 +1 @@
-export { P as PureCell } from './component-511ba1c0.js';
+export { P as PureCell } from './component-891b50dd.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.12.4",
+    "version": "4.13.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -17,8 +17,8 @@
     "dependencies": {
         "@alfalab/core-components-amount": "^3.8.0",
         "@alfalab/core-components-button": "^11.9.0",
-        "@alfalab/core-components-typography": "^4.10.1",
-        "@alfalab/core-components-comment": "^2.4.1",
+        "@alfalab/core-components-typography": "^4.10.2",
+        "@alfalab/core-components-comment": "^2.4.2",
         "@alfalab/core-components-shared": "^0.13.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/data": "^1.8.0",

package/src/components/amount/component.tsx

@@ -26,6 +26,11 @@ type Props = {
      */
     color?: Color;
 
+    /**
+     * Скрыть денежное значение
+     */
+    hidden?: boolean;
+
     /**
      * Идентификатор для систем автоматизированного тестирования.
      * Для typography используется модификатор -amount-text, для компонента Amount -amount
@@ -39,11 +44,20 @@ export const Amount: React.FC<Props> = ({
     color = 'primary',
     minority,
     minorUnits = 100,
+    hidden,
     dataTestId,
     ...restProps
 }) => {
     const pureCellContext = useContext(PureCellContext);
 
+    if (hidden) {
+        return (
+            <div className={styles.hiddenWrapper}>
+                <div className={styles.hidden} />
+            </div>
+        );
+    }
+
     return (
         <Typography.Text
             view={textView}

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

@@ -4,3 +4,16 @@
     padding: var(--gap-2) var(--gap-0);
     display: flex;
 }
+
+.hidden {
+    background: var(--color-light-neutral-translucent-400);
+    border-radius: var(--border-radius-8);
+    display: inline-block;
+    height: 24px;
+    width: 120px;
+}
+
+.hiddenWrapper {
+    display: flex;
+    padding: var(--gap-8) var(--gap-0);
+}

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

@@ -22,6 +22,11 @@ type Props = {
      */
     titleProps?: TitleProps;
 
+    /**
+     * Скрыть денежное значение
+     */
+    hidden?: boolean;
+
     /**
      * Идентификатор для систем автоматизированного тестирования.
      * Для typography используется модификатор -amount-title, для компонента Amount -core-amount-title
@@ -32,26 +37,35 @@ type Props = {
 export const AmountTitle: React.FC<Props> = ({
     minority,
     minorUnits = 100,
+    hidden,
     className,
     color = 'primary',
     dataTestId,
-    titleProps = {},
+    titleProps: titlePropsFromProps = {},
     ...restProps
 }) => {
     const pureCellContext = useContext(PureCellContext);
 
-    const titleDefaultProps = {
+    const titleProps = {
         tag: 'h4',
         view: 'small',
         color,
-        ...titleProps,
+        ...titlePropsFromProps,
     } as Omit<TitleProps, 'className' | 'dataTestId'>;
 
+    if (hidden) {
+        return (
+            <div className={cn(styles.hiddenWrapper, styles[`hiddenWrapper-${titleProps.view}`])}>
+                <div className={cn(styles.hidden, styles[`hidden-${titleProps.view}`])} />
+            </div>
+        );
+    }
+
     return (
         <Typography.TitleResponsive
-            {...titleDefaultProps}
+            {...titleProps}
             dataTestId={getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount-title')}
-            className={cn(styles.component, titleProps.className)}
+            className={cn(styles.component, titlePropsFromProps?.className)}
         >
             <CoreAmount
                 minority={minority || minorUnits}

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

@@ -7,3 +7,48 @@
 .weight {
     font-weight: inherit;
 }
+
+.hidden {
+    background: var(--color-light-neutral-translucent-400);
+    border-radius: var(--border-radius-8);
+    display: inline-block;
+}
+
+.hidden-xsmall {
+    height: 16px;
+    width: 88px;
+}
+.hidden-small {
+    height: 18px;
+    width: 100px;
+}
+.hidden-medium {
+    height: 24px;
+    width: 120px;
+}
+.hidden-large {
+    height: 28px;
+    width: 136px;
+}
+.hidden-xlarge {
+    height: 32px;
+    width: 156px;
+}
+.hiddenWrapper {
+    display: flex;
+}
+.hiddenWrapper-xsmall {
+    padding: var(--gap-4) var(--gap-0);
+}
+.hiddenWrapper-small {
+    padding: var(--gap-8) var(--gap-0);
+}
+.hiddenWrapper-medium {
+    padding: var(--gap-8) var(--gap-0);
+}
+.hiddenWrapper-large {
+    padding: var(--gap-12) var(--gap-0);
+}
+.hiddenWrapper-xlarge {
+    padding: var(--gap-16) var(--gap-0);
+}

package/moderncssm/component-511ba1c0.d.ts

@@ -1,227 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
-import { MainElement, GraphicsElement, FooterElement, ContentElement, AddonElement } from "./components/types";
-import { Color, TitleProps } from "@alfalab/core-components-typography";
-import { ButtonProps } from "@alfalab/core-components-button";
-import { AmountProps as AmountType } from "./components/typesProps";
-type Props = {
-    /**
-     * Компоненты
-     */
-    children: MainElement;
-    /**
-     * Позволяет изменить расположение блоков внутри main
-     */
-    isReverse?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -main
-     */
-    dataTestId?: string;
-    /**
-     * Клик по контенту.
-     */
-    onClick?: () => void;
-};
-declare const Main: React.FC<Props>;
-type Props$0 = {
-    /**
-     * Компоненты
-     */
-    children: GraphicsElement;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -graphics
-     */
-    dataTestId?: string;
-    /**
-     * Вертикальное выравнивание
-     */
-    verticalAlign?: "top" | "center" | "bottom";
-    /**
-     * Отступ от графики
-     */
-    graphicPadding?: "airy" | "default" | "compact" | "tiny" | "none";
-    /**
-     * Клик по контенту графики.
-     */
-    onClick?: () => void;
-};
-declare const Graphics: React.FC<Props$0>;
-type FooterTextProps = {
-    /**
-     * Цвет текста
-     */
-    color?: Color;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -footer-title
-     */
-    dataTestId?: string;
-    /**
-     * Дочерние элементы.
-     */
-    children?: ReactNode;
-};
-declare const FooterText: React.FC<FooterTextProps>;
-type ComponentProps = Omit<ButtonProps, "dataTestId"> & {
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -button
-     */
-    dataTestId?: string;
-};
-type FooterButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
-declare const FooterButton: React.ForwardRefExoticComponent<FooterButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-type Props$1 = {
-    /**
-     * Компоненты
-     */
-    children: FooterElement;
-    /**
-     * Вертикальные отступы
-     */
-    footerPadding?: "default" | "none";
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -footer
-     */
-    dataTestId?: string;
-};
-declare const Footer: React.FC<Props$1>;
-type Props$2 = {
-    /**
-     * Компоненты
-     */
-    children: ContentElement;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -content
-     */
-    dataTestId?: string;
-};
-declare const Content: React.FC<Props$2>;
-type Props$3 = {
-    /**
-     * Наименование категории
-     */
-    categoryName: string;
-    /**
-     * Процент категории
-     */
-    categoryPercent?: number;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для наименования категории используется модификатор -category-name,
-     * процент категории -category-percent, слота справа -category-right-addon
-     */
-    dataTestId?: string;
-};
-declare const Category: React.FC<Props$3>;
-type Props$4 = {
-    /**
-     * Цвет денежного значения
-     * @deprecated Используйте titleProps.color
-     */
-    color?: Color;
-    /**
-     * Пропсы, которые будут прокинуты в компонент типографики
-     */
-    titleProps?: TitleProps;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для typography используется модификатор -amount-title, для компонента Amount -core-amount-title
-     */
-    dataTestId?: string;
-} & Omit<AmountType, "dataTestId">;
-declare const AmountTitle: React.FC<Props$4>;
-type Props$5 = {
-    /**
-     * Начертание шрифта денежного значения
-     */
-    weight?: "bold" | "normal";
-    /**
-     * Размер денежного значения
-     */
-    textView?: "component" | "primary-small";
-    /**
-     * Цвет денежного значения
-     */
-    color?: Color;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для typography используется модификатор -amount-text, для компонента Amount -amount
-     */
-    dataTestId?: string;
-} & Omit<AmountType, "dataTestId">;
-declare const Amount: React.FC<Props$5>;
-type Props$6 = {
-    /**
-     * Вертикальное выравнивание
-     */
-    verticalAlign?: "auto" | "top" | "center" | "bottom";
-    /**
-     * Горизонтальные отступы
-     */
-    addonPadding?: "default" | "none";
-    /**
-     * Компоненты
-     */
-    children: AddonElement;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Используется модификатор -addon
-     */
-    dataTestId?: string;
-    /**
-     * Клик по контенту аддона.
-     */
-    onClick?: () => void;
-};
-declare const Addon: React.FC<Props$6>;
-type Props$7 = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Количество строк
-     */
-    rowLimit?: 1 | 2;
-    /**
-     * Размер текста
-     */
-    view?: 'primary-large' | 'primary-medium' | 'primary-small' | 'component' | 'component-primary' | 'secondary-large';
-    /**
-     * Толщина title
-     */
-    titleWeight?: 'regular' | 'bold';
-    /**
-     * Цвет title
-     */
-    titleColor: Color;
-    /**
-     * Value ячейки
-     */
-    value?: ReactNode;
-    /**
-     * Цвет value
-     */
-    valueColor?: Color;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для контента используется модификатор -text_content, для value ячейки -text_value
-     */
-    dataTestId?: string;
-};
-declare const Text: React.FC<Props$7>;
-export { Main, Props$0 as Props, Graphics, FooterTextProps, FooterText, FooterButton, Footer, Content, Category, AmountTitle, Amount, Addon, Text };