@alfalab/core-components-pure-cell 4.7.1 → 4.8.1

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1pnw5 */
+/* hash: 1qt6n */
 :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_a0jto {
+} .pure-cell__component_1vn59 {
     text-align: unset;
     box-sizing: border-box;
-} .pure-cell__horizontal_a0jto {
+} .pure-cell__horizontal_1vn59 {
     display: flex;
-    width: 100%
-} .pure-cell__horizontal_a0jto > section:not(:last-child) {
-        margin-right: var(--gap-m);
-    } .pure-cell__vertical_a0jto {
+    width: 100%;
+} .pure-cell__vertical_1vn59 {
     display: flex;
     align-items: center;
-    flex-direction: column
-} .pure-cell__vertical_a0jto > section:not(:last-child) {
-        margin-bottom: var(--gap-s);
-    } .pure-cell__button_a0jto {
+    flex-direction: column;
+} .pure-cell__button_1vn59 {
     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_a0jto:hover {
+} .pure-cell__button_1vn59:hover {
         opacity: 0.8;
-    } .pure-cell__button_a0jto:active {
+    } .pure-cell__button_1vn59:active {
         opacity: 0.6;
-    } .pure-cell__link_a0jto {
+    } .pure-cell__link_1vn59 {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
     transition: opacity 0.15s ease-in-out
-} .pure-cell__link_a0jto:hover {
+} .pure-cell__link_1vn59:hover {
         opacity: 0.8;
-    } .pure-cell__link_a0jto:active {
+    } .pure-cell__link_1vn59:active {
         opacity: 0.6;
-    } .pure-cell__none_a0jto {
+    } .pure-cell__none_1vn59 {
     padding: 0;
-} .pure-cell__airy_a0jto {
+} .pure-cell__airy_1vn59 {
     padding: var(--gap-m) 0;
-} .pure-cell__defaultPadding_a0jto {
+} .pure-cell__default_1vn59 {
     padding: var(--gap-s) 0;
-} .pure-cell__compact_a0jto {
+} .pure-cell__compact_1vn59 {
     padding: var(--gap-xs) 0;
-} .pure-cell__tiny_a0jto {
+} .pure-cell__tiny_1vn59 {
     padding: var(--gap-2xs) 0;
-} .pure-cell__left_a0jto {
+} .pure-cell__noneTop_1vn59 {
+    padding-top: 0;
+} .pure-cell__airyTop_1vn59 {
+    padding-top: var(--gap-m);
+} .pure-cell__defaultTop_1vn59 {
+    padding-top: var(--gap-s);
+} .pure-cell__compactTop_1vn59 {
+    padding-top: var(--gap-xs);
+} .pure-cell__tinyTop_1vn59 {
+    padding-top: var(--gap-2xs);
+} .pure-cell__noneBottom_1vn59 {
+    padding-bottom: 0;
+} .pure-cell__airyBottom_1vn59 {
+    padding-bottom: var(--gap-m);
+} .pure-cell__defaultBottom_1vn59 {
+    padding-bottom: var(--gap-s);
+} .pure-cell__compactBottom_1vn59 {
+    padding-bottom: var(--gap-xs);
+} .pure-cell__tinyBottom_1vn59 {
+    padding-bottom: var(--gap-2xs);
+} .pure-cell__left_1vn59 {
     padding-left: var(--gap-m);
-} .pure-cell__right_a0jto {
+} .pure-cell__right_1vn59 {
     padding-right: var(--gap-m);
-} .pure-cell__both_a0jto {
+} .pure-cell__both_1vn59 {
     padding-right: var(--gap-m);
     padding-left: var(--gap-m);
-} .pure-cell__focused_a0jto {
+} .pure-cell__focused_1vn59 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.d.ts

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

package/modern/index.js

@@ -1 +1 @@
-export { P as PureCell } from './component-d1c071aa.js';
+export { P as PureCell } from './component-ef65ce67.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.7.1",
+    "version": "4.8.1",
     "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.4.0",
+        "@alfalab/core-components-amount": "^3.5.0",
+        "@alfalab/core-components-button": "^11.4.1",
         "@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

@@ -58,7 +58,22 @@ type BasePureCellProps = {
     /**
      * Вертикальные отступы
      */
-    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 @@ type BasePureCellProps = {
      * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
      */
     tag?: ElementType;
+
     /**
      * Компоненты
      */
@@ -108,11 +124,18 @@ const PureCellComponent = forwardRef<HTMLElement, PureCellProps>(
             [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);
 }