@alfalab/core-components-pure-cell 4.7.0 → 4.8.0

package/modern/components/text/index.css

@@ -1,4 +1,4 @@
-/* hash: 17iz1 */
+/* hash: kpt6l */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,29 +16,29 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pure-cell__horizontal_sun3b {
+} .pure-cell__horizontal_16dfl {
     padding: var(--gap-3xs) 0;
-} .pure-cell__rowLimit1_sun3b {
+} .pure-cell__rowLimit1_16dfl {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
-} .pure-cell__rowLimit2_sun3b {
+} .pure-cell__rowLimit2_16dfl {
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .pure-cell__component_sun3b {
+} .pure-cell__component_16dfl {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     margin: var(--gap-3xs) 0;
     word-break: break-word;
-} .pure-cell__component_sun3b .pure-cell__vertical_sun3b {
+} .pure-cell__component_16dfl .pure-cell__vertical_16dfl {
         justify-content: center;
-    } .pure-cell__title_sun3b + .pure-cell__value_sun3b {
+    } .pure-cell__title_16dfl + .pure-cell__value_16dfl {
     margin-left: var(--gap-m);
     flex-shrink: 0;
 }

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

@@ -1 +1 @@
-export * from "../../component-1458a9e3";
+export * from "../../component-4f06f921";

package/modern/components/text/index.js

@@ -1 +1 @@
-export { T as Text } from '../../component-1458a9e3.js';
+export { T as Text } from '../../component-4f06f921.js';

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1xwj4 */
+/* hash: jedhi */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,21 +20,17 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .pure-cell__component_l7kda {
+} .pure-cell__component_yqcv9 {
     text-align: unset;
     box-sizing: border-box;
-} .pure-cell__horizontal_l7kda {
+} .pure-cell__horizontal_yqcv9 {
     display: flex;
-    width: 100%
-} .pure-cell__horizontal_l7kda > section:not(:last-child) {
-        margin-right: var(--gap-m);
-    } .pure-cell__vertical_l7kda {
+    width: 100%;
+} .pure-cell__vertical_yqcv9 {
     display: flex;
     align-items: center;
-    flex-direction: column
-} .pure-cell__vertical_l7kda > section:not(:last-child) {
-        margin-bottom: var(--gap-s);
-    } .pure-cell__button_l7kda {
+    flex-direction: column;
+} .pure-cell__button_yqcv9 {
     font-family: inherit;
     background: none;
     border: 0;
@@ -42,37 +38,57 @@
     cursor: pointer;
     transition: opacity 0.15s ease-in-out;
     padding: 0
-} .pure-cell__button_l7kda:hover {
+} .pure-cell__button_yqcv9:hover {
         opacity: 0.8;
-    } .pure-cell__button_l7kda:active {
+    } .pure-cell__button_yqcv9:active {
         opacity: 0.6;
-    } .pure-cell__link_l7kda {
+    } .pure-cell__link_yqcv9 {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
     transition: opacity 0.15s ease-in-out
-} .pure-cell__link_l7kda:hover {
+} .pure-cell__link_yqcv9:hover {
         opacity: 0.8;
-    } .pure-cell__link_l7kda:active {
+    } .pure-cell__link_yqcv9:active {
         opacity: 0.6;
-    } .pure-cell__none_l7kda {
+    } .pure-cell__none_yqcv9 {
     padding: 0;
-} .pure-cell__airy_l7kda {
+} .pure-cell__airy_yqcv9 {
     padding: var(--gap-m) 0;
-} .pure-cell__defaultPadding_l7kda {
+} .pure-cell__default_yqcv9 {
     padding: var(--gap-s) 0;
-} .pure-cell__compact_l7kda {
+} .pure-cell__compact_yqcv9 {
     padding: var(--gap-xs) 0;
-} .pure-cell__tiny_l7kda {
+} .pure-cell__tiny_yqcv9 {
     padding: var(--gap-2xs) 0;
-} .pure-cell__left_l7kda {
+} .pure-cell__noneTop_yqcv9 {
+    padding-top: 0;
+} .pure-cell__airyTop_yqcv9 {
+    padding-top: var(--gap-m);
+} .pure-cell__defaultTop_yqcv9 {
+    padding-top: var(--gap-s);
+} .pure-cell__compactTop_yqcv9 {
+    padding-top: var(--gap-xs);
+} .pure-cell__tinyTop_yqcv9 {
+    padding-top: var(--gap-2xs);
+} .pure-cell__noneBottom_yqcv9 {
+    padding-bottom: 0;
+} .pure-cell__airyBottom_yqcv9 {
+    padding-bottom: var(--gap-m);
+} .pure-cell__defaultBottom_yqcv9 {
+    padding-bottom: var(--gap-s);
+} .pure-cell__compactBottom_yqcv9 {
+    padding-bottom: var(--gap-xs);
+} .pure-cell__tinyBottom_yqcv9 {
+    padding-bottom: var(--gap-2xs);
+} .pure-cell__left_yqcv9 {
     padding-left: var(--gap-m);
-} .pure-cell__right_l7kda {
+} .pure-cell__right_yqcv9 {
     padding-right: var(--gap-m);
-} .pure-cell__both_l7kda {
+} .pure-cell__both_yqcv9 {
     padding-right: var(--gap-m);
     padding-left: var(--gap-m);
-} .pure-cell__focused_l7kda {
+} .pure-cell__focused_yqcv9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.d.ts

@@ -1 +1,2 @@
-export { PureCell } from "./component-fd7196d2";
+export { PureCell } from "./component-21d7b687";
+export type { PureCellProps } from "./component-21d7b687";

package/modern/index.js

@@ -1 +1 @@
-export { P as PureCell } from './component-1458a9e3.js';
+export { P as PureCell } from './component-4f06f921.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.7.0",
+    "version": "4.8.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,13 +15,13 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-amount": "^3.4.0",
-        "@alfalab/core-components-button": "^11.3.0",
+        "@alfalab/core-components-amount": "^3.5.0",
+        "@alfalab/core-components-button": "^11.4.0",
         "@alfalab/core-components-typography": "^4.5.0",
         "@alfalab/core-components-comment": "^2.3.3",
         "@alfalab/core-components-shared": "^0.9.1",
         "@alfalab/hooks": "^1.13.0",
-        "@alfalab/data": "^1.7.0",
+        "@alfalab/data": "^1.8.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "1.1.0",
         "tslib": "^2.4.0"

package/src/component.tsx

@@ -39,7 +39,7 @@ export type PureCellContext = {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const PureCellContext = React.createContext<PureCellContext>({});
 
-export type PureCellProps = {
+type BasePureCellProps = {
     /**
      * Направление
      */
@@ -58,7 +58,22 @@ export type PureCellProps = {
     /**
      * Вертикальные отступы
      */
-    verticalPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+    verticalPadding?:
+        | 'airy'
+        | 'default'
+        | 'compact'
+        | 'tiny'
+        | 'none'
+        | {
+              /**
+               * Вертикальный отступ сверху
+               */
+              top?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+              /**
+               * Вертикальный отступ снизу
+               */
+              bottom?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+          };
 
     /**
      * Горизонтальные отступы
@@ -69,6 +84,7 @@ export type PureCellProps = {
      * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
      */
     tag?: ElementType;
+
     /**
      * Компоненты
      */
@@ -79,12 +95,14 @@ export type PureCellProps = {
      */
     dataTestId?: string;
 };
-type AnchorPureCellProps = PureCellProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type ButtonPureCellProps = PureCellProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type ElementPureCellProps = PureCellProps & HTMLAttributes<HTMLElement>;
-type PureProps = Partial<AnchorPureCellProps | ButtonPureCellProps | ElementPureCellProps>;
-
-const PureCellComponent = forwardRef<HTMLElement, PureProps>(
+type AnchorPureCellProps = BasePureCellProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonPureCellProps = BasePureCellProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ElementPureCellProps = BasePureCellProps & HTMLAttributes<HTMLElement>;
+export type PureCellProps = Partial<
+    AnchorPureCellProps | ButtonPureCellProps | ElementPureCellProps
+>;
+
+const PureCellComponent = forwardRef<HTMLElement, PureCellProps>(
     (
         {
             className,
@@ -106,11 +124,18 @@ const PureCellComponent = forwardRef<HTMLElement, PureProps>(
             [styles.component]: true,
             [styles.focused]: focused,
             [styles[direction]]: true,
-            [styles.defaultPadding]: verticalPadding === 'default',
-            [styles[verticalPadding]]: verticalPadding !== 'default',
             [styles[horizontalPadding]]: true,
         };
 
+        if (typeof verticalPadding === 'string') {
+            addClasses[styles[verticalPadding as string]] = typeof verticalPadding === 'string';
+        }
+
+        if (typeof verticalPadding === 'object') {
+            addClasses[styles[`${verticalPadding.top}Top`]] = !!verticalPadding.top;
+            addClasses[styles[`${verticalPadding.bottom}Bottom`]] = !!verticalPadding.bottom;
+        }
+
         if (href) {
             const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
 

package/src/components/graphics/component.tsx

@@ -24,14 +24,31 @@ export type Props = {
      * Вертикальное выравнивание
      */
     verticalAlign?: 'top' | 'center' | 'bottom';
+
+    /**
+     * Отступ от графики
+     */
+    graphicPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
 };
 
-export const Graphics: React.FC<Props> = ({ children, dataTestId, verticalAlign = 'top' }) => {
+export const Graphics: React.FC<Props> = ({
+    children,
+    dataTestId,
+    verticalAlign = 'top',
+    graphicPadding,
+}) => {
     const pureCellContext = useContext(PureCellContext);
 
+    const defaultGraphicPadding = pureCellContext.direction === 'horizontal' ? 'airy' : 'default';
+
     return (
         <section
-            className={cn(styles.component, styles[verticalAlign])}
+            className={cn(
+                styles.component,
+                styles[verticalAlign],
+                styles[pureCellContext.direction || 'horizontal'],
+                styles[graphicPadding || defaultGraphicPadding],
+            )}
             data-test-id={getDataTestId(dataTestId || pureCellContext.dataTestId, 'graphics')}
         >
             {children}

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

@@ -16,3 +16,46 @@
 .bottom {
     align-self: flex-end;
 }
+
+.horizontal:not(:last-child) {
+    &.none {
+        margin-right: 0;
+    }
+
+    &.airy {
+        margin-right: var(--gap-m);
+    }
+
+    &.default {
+        margin-right: var(--gap-s);
+    }
+
+    &.compact {
+        margin-right: var(--gap-xs);
+    }
+
+    &.tiny {
+        margin-right: var(--gap-2xs);
+    }
+}
+
+.vertical:not(:last-child) {
+    &.none {
+        margin-bottom: 0;
+    }
+    &.airy {
+        margin-bottom: var(--gap-m);
+    }
+
+    &.default {
+        margin-bottom: var(--gap-s);
+    }
+
+    &.compact {
+        margin-bottom: var(--gap-xs);
+    }
+
+    &.tiny {
+        margin-bottom: var(--gap-2xs);
+    }
+}

package/src/components/text/component.tsx

@@ -22,7 +22,13 @@ type Props = {
     /**
      * Размер текста
      */
-    view?: 'primary-large' | 'primary-medium' | 'primary-small' | 'component' | 'component-primary';
+    view?:
+        | 'primary-large'
+        | 'primary-medium'
+        | 'primary-small'
+        | 'component'
+        | 'component-primary'
+        | 'secondary-large';
 
     /**
      * Толщина title

package/src/index.module.css

@@ -8,20 +8,12 @@
 .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 {
@@ -64,7 +56,7 @@
     padding: var(--gap-m) 0;
 }
 
-.defaultPadding {
+.default {
     padding: var(--gap-s) 0;
 }
 
@@ -76,6 +68,46 @@
     padding: var(--gap-2xs) 0;
 }
 
+.noneTop {
+    padding-top: 0;
+}
+
+.airyTop {
+    padding-top: var(--gap-m);
+}
+
+.defaultTop {
+    padding-top: var(--gap-s);
+}
+
+.compactTop {
+    padding-top: var(--gap-xs);
+}
+
+.tinyTop {
+    padding-top: var(--gap-2xs);
+}
+
+.noneBottom {
+    padding-bottom: 0;
+}
+
+.airyBottom {
+    padding-bottom: var(--gap-m);
+}
+
+.defaultBottom {
+    padding-bottom: var(--gap-s);
+}
+
+.compactBottom {
+    padding-bottom: var(--gap-xs);
+}
+
+.tinyBottom {
+    padding-bottom: var(--gap-2xs);
+}
+
 .left {
     padding-left: var(--gap-m);
 }

package/src/index.ts

@@ -1 +1,2 @@
 export { PureCell } from './component';
+export type { PureCellProps } from './component';