@alfalab/core-components-pure-cell 4.11.6 → 4.12.1

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

@@ -0,0 +1,38 @@
+/* */
+
+.horizontal {
+    padding: var(--gap-2) var(--gap-0);
+}
+
+.rowLimit1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.rowLimit2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.component {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    margin: var(--gap-2) var(--gap-0);
+    word-break: break-word;
+}
+
+.component .vertical {
+        justify-content: center;
+    }
+
+.title + .value {
+    margin-left: var(--gap-16);
+    flex-shrink: 0;
+}

package/moderncssm/components/types.d.ts

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

package/moderncssm/components/types.js

@@ -0,0 +1 @@
+

package/moderncssm/components/typesProps.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { CurrencyCodes } from '@alfalab/data';
+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;
+};
+export { AmountProps };

package/moderncssm/components/typesProps.js

@@ -0,0 +1 @@
+

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { PureCell } from "./component-8c83a9ca";
+export type { PureCellProps } from "./component-8c83a9ca";

package/moderncssm/index.js

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

package/moderncssm/index.module.css

@@ -0,0 +1,128 @@
+/* */
+
+.component {
+    text-align: unset;
+    box-sizing: border-box;
+}
+
+.horizontal {
+    display: flex;
+    width: 100%;
+}
+
+.vertical {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.button {
+    font-family: inherit;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out;
+    padding: var(--gap-0)
+}
+
+.button.hover {
+        opacity: 0.8;
+    }
+
+.button.active {
+        opacity: 0.6;
+    }
+
+.link {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out
+}
+
+.link.hover {
+        opacity: 0.8;
+    }
+
+.link.active {
+        opacity: 0.6;
+    }
+
+.none {
+    padding: var(--gap-0);
+}
+
+.airy {
+    padding: var(--gap-16) var(--gap-0);
+}
+
+.default {
+    padding: var(--gap-12) var(--gap-0);
+}
+
+.compact {
+    padding: var(--gap-8) var(--gap-0);
+}
+
+.tiny {
+    padding: var(--gap-4) var(--gap-0);
+}
+
+.noneTop {
+    padding-top: var(--gap-0);
+}
+
+.airyTop {
+    padding-top: var(--gap-16);
+}
+
+.defaultTop {
+    padding-top: var(--gap-12);
+}
+
+.compactTop {
+    padding-top: var(--gap-8);
+}
+
+.tinyTop {
+    padding-top: var(--gap-4);
+}
+
+.noneBottom {
+    padding-bottom: var(--gap-0);
+}
+
+.airyBottom {
+    padding-bottom: var(--gap-16);
+}
+
+.defaultBottom {
+    padding-bottom: var(--gap-12);
+}
+
+.compactBottom {
+    padding-bottom: var(--gap-8);
+}
+
+.tinyBottom {
+    padding-bottom: var(--gap-4);
+}
+
+.left {
+    padding-left: var(--gap-16);
+}
+
+.right {
+    padding-right: var(--gap-16);
+}
+
+.both {
+    padding-right: var(--gap-16);
+    padding-left: var(--gap-16);
+}
+
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPureCellTestIds } from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { getPureCellTestIds } from '../utils.js';

package/moderncssm/utils.d.ts

@@ -0,0 +1,20 @@
+declare function getPureCellTestIds(dataTestId: string): {
+    pureCell: string;
+    addon: string;
+    amount: string;
+    amountText: string;
+    amountTitle: string;
+    coreAmountTitle: string;
+    categoryName: string;
+    categoryPercent: string;
+    categoryRightAddon: string;
+    content: string;
+    footer: string;
+    footerButton: string;
+    extraSubtitle: string;
+    graphics: string;
+    main: string;
+    textContent: string;
+    textValue: string;
+};
+export { getPureCellTestIds };

package/moderncssm/utils.js

@@ -0,0 +1,25 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+
+function getPureCellTestIds(dataTestId) {
+    return {
+        pureCell: dataTestId,
+        addon: getDataTestId(dataTestId, 'addon'),
+        amount: getDataTestId(dataTestId, 'amount'),
+        amountText: getDataTestId(dataTestId, 'amount-text'),
+        amountTitle: getDataTestId(dataTestId, 'amount-title'),
+        coreAmountTitle: getDataTestId(dataTestId, 'core-amount-title'),
+        categoryName: getDataTestId(dataTestId, 'category-name'),
+        categoryPercent: getDataTestId(dataTestId, 'category-percent'),
+        categoryRightAddon: getDataTestId(dataTestId, 'category-right-addon'),
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+        footerButton: getDataTestId(dataTestId, 'button'),
+        extraSubtitle: getDataTestId(dataTestId, 'footer-title'),
+        graphics: getDataTestId(dataTestId, 'graphics'),
+        main: getDataTestId(dataTestId, 'main'),
+        textContent: getDataTestId(dataTestId, 'text_content'),
+        textValue: getDataTestId(dataTestId, 'text_value'),
+    };
+}
+
+export { getPureCellTestIds };

package/moderncssm/vars.css

@@ -0,0 +1,2 @@
+/* */
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.11.6",
+    "version": "4.12.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,17 +15,17 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-amount": "^3.5.2",
-        "@alfalab/core-components-button": "^11.5.5",
-        "@alfalab/core-components-typography": "^4.9.0",
-        "@alfalab/core-components-comment": "^2.3.8",
-        "@alfalab/core-components-shared": "^0.12.0",
+        "@alfalab/core-components-amount": "^3.7.0",
+        "@alfalab/core-components-button": "^11.7.0",
+        "@alfalab/core-components-typography": "^4.10.1",
+        "@alfalab/core-components-comment": "^2.4.1",
+        "@alfalab/core-components-shared": "^0.12.1",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/data": "^1.8.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

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

@@ -10,7 +10,7 @@
     }
 
     &.none {
-        padding-left: 0;
+        padding-left: var(--gap-0);
     }
 
     &.default {
@@ -40,7 +40,7 @@
 
 .button {
     @mixin button-reset;
-    padding: 0;
+    padding: var(--gap-0);
     transition: opacity 0.15s ease-in-out;
 
     &:hover {

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

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

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;

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

@@ -1,9 +1,9 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;
     overflow: hidden;
-    padding: var(--gap-2) 0;
+    padding: var(--gap-2) var(--gap-0);
 }
 
 .categoryName {
@@ -15,9 +15,9 @@
 }
 
 .categoryPercent {
-    padding: 0 var(--gap-8);
+    padding: var(--gap-0) var(--gap-8);
     background-color: var(--color-light-base-bg-secondary);
-    border-radius: var(--border-radius-xl);
+    border-radius: var(--border-radius-16);
     margin-left: var(--gap-4);
 }
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     flex-basis: 100%;

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     grid-column: 1/3;
@@ -6,7 +6,7 @@
     grid-row-gap: var(--gap-8);
 
     &.none {
-        margin-top: 0;
+        margin-top: var(--gap-0);
     }
 
     &.default {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     justify-self: start;

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

@@ -19,7 +19,7 @@
 
 .horizontal:not(:last-child) {
     &.none {
-        margin-right: 0;
+        margin-right: var(--gap-0);
     }
 
     &.airy {
@@ -41,7 +41,7 @@
 
 .vertical:not(:last-child) {
     &.none {
-        margin-bottom: 0;
+        margin-bottom: var(--gap-0);
     }
     &.airy {
         margin-bottom: var(--gap-16);
@@ -62,7 +62,7 @@
 
 .button {
     @mixin button-reset;
-    padding: 0;
+    padding: var(--gap-0);
     transition: opacity 0.15s ease-in-out;
     min-width: auto;
 

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

@@ -23,7 +23,7 @@
 
     &.button {
         @mixin button-reset;
-        padding: 0;
+        padding: var(--gap-0);
         transition: opacity 0.15s ease-in-out;
         min-width: auto;
 

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

@@ -1,7 +1,7 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .horizontal {
-    padding: var(--gap-2) 0;
+    padding: var(--gap-2) var(--gap-0);
 }
 
 .rowLimit1 {
@@ -18,7 +18,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
-    margin: var(--gap-2) 0;
+    margin: var(--gap-2) var(--gap-0);
     word-break: break-word;
 }
 

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     text-align: unset;
@@ -23,7 +23,7 @@
     border-radius: 0;
     cursor: pointer;
     transition: opacity 0.15s ease-in-out;
-    padding: 0;
+    padding: var(--gap-0);
 
     &.hover {
         opacity: 0.8;
@@ -49,27 +49,27 @@
     }
 }
 .none {
-    padding: 0;
+    padding: var(--gap-0);
 }
 
 .airy {
-    padding: var(--gap-16) 0;
+    padding: var(--gap-16) var(--gap-0);
 }
 
 .default {
-    padding: var(--gap-12) 0;
+    padding: var(--gap-12) var(--gap-0);
 }
 
 .compact {
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
 }
 
 .tiny {
-    padding: var(--gap-4) 0;
+    padding: var(--gap-4) var(--gap-0);
 }
 
 .noneTop {
-    padding-top: 0;
+    padding-top: var(--gap-0);
 }
 
 .airyTop {
@@ -89,7 +89,7 @@
 }
 
 .noneBottom {
-    padding-bottom: 0;
+    padding-bottom: var(--gap-0);
 }
 
 .airyBottom {

package/src/vars.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     --pure-cell-clickable-area-hover-opacity: 1;