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

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-642eb788.d.ts

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

package/esm/getDataTestId-642eb788.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-916a6a71.d.ts

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

package/getDataTestId-916a6a71.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-d1e65cf0.d.ts

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

package/modern/getDataTestId-d1e65cf0.js

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