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

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
 
 .component {
     display: flex;
@@ -37,3 +37,17 @@
         align-self: flex-end;
     }
 }
+
+.button {
+    @mixin button-reset;
+    padding: 0;
+    transition: opacity 0.15s ease-in-out;
+
+    &:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    }
+
+    &:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
+    }
+}

package/src/components/footer-button/component.tsx

@@ -18,10 +18,37 @@ type ComponentProps = Omit<ButtonProps, 'dataTestId'> & {
 type FooterButtonProps = ComponentProps &
     Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
 
+type FooterButtonMouseEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent> &
+    React.MouseEvent<HTMLButtonElement, MouseEvent>;
+
+type FooterButtonMouseEventHandler =
+    | React.MouseEventHandler<HTMLAnchorElement>
+    | React.MouseEventHandler<HTMLButtonElement>;
+
 export const FooterButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, FooterButtonProps>(
-    ({ children, dataTestId, ...props }, ref) => {
+    ({ children, dataTestId, onClick, onMouseDown, onMouseEnter, onMouseLeave, ...props }, ref) => {
         const pureCellContext = useContext(PureCellContext);
 
+        const handleClick = (e: FooterButtonMouseEvent) => {
+            e.stopPropagation();
+            (onClick as FooterButtonMouseEventHandler)?.(e);
+        };
+
+        const handleMouseEnter = (e: FooterButtonMouseEvent) => {
+            (onMouseEnter as FooterButtonMouseEventHandler)?.(e);
+            pureCellContext.unsetMainHover?.();
+        };
+
+        const handleMouseLeave = (e: FooterButtonMouseEvent) => {
+            (onMouseLeave as FooterButtonMouseEventHandler)?.(e);
+            pureCellContext.setMainHover?.();
+        };
+
+        const handleMouseDown = (e: FooterButtonMouseEvent) => {
+            (onMouseDown as FooterButtonMouseEventHandler)?.(e);
+            e.stopPropagation();
+        };
+
         return (
             <Button
                 {...props}
@@ -29,6 +56,10 @@ export const FooterButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, Fo
                 dataTestId={getDataTestId(dataTestId || pureCellContext.dataTestId, 'button')}
                 className={styles.component}
                 ref={ref}
+                onClick={handleClick}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                onMouseDown={handleMouseDown}
             >
                 {children}
             </Button>

package/src/components/graphics/component.tsx

@@ -29,6 +29,16 @@ export type Props = {
      * Отступ от графики
      */
     graphicPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+
+    /**
+     * Клик по контенту графики.
+     */
+    onClick?: () => void;
+};
+
+const GRAPHICS_COMPONENT: Record<string, keyof Pick<React.ReactHTML, 'button' | 'section'>> = {
+    button: 'button',
+    section: 'section',
 };
 
 export const Graphics: React.FC<Props> = ({
@@ -36,22 +46,43 @@ export const Graphics: React.FC<Props> = ({
     dataTestId,
     verticalAlign = 'top',
     graphicPadding,
+    onClick,
 }) => {
     const pureCellContext = useContext(PureCellContext);
 
+    const Component = onClick ? GRAPHICS_COMPONENT.button : GRAPHICS_COMPONENT.section;
+
     const defaultGraphicPadding = pureCellContext.direction === 'horizontal' ? 'airy' : 'default';
 
+    const onMouseEvents = {
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            onClick?.();
+        },
+        onMouseEnter: () => {
+            pureCellContext.unsetMainHover?.();
+        },
+        onMouseLeave: () => {
+            pureCellContext.setMainHover?.();
+        },
+        onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+        },
+    };
+
     return (
-        <section
+        <Component
             className={cn(
                 styles.component,
                 styles[verticalAlign],
                 styles[pureCellContext.direction || 'horizontal'],
                 styles[graphicPadding || defaultGraphicPadding],
+                { [styles.button]: onClick },
             )}
             data-test-id={getDataTestId(dataTestId || pureCellContext.dataTestId, 'graphics')}
+            {...(onClick && onMouseEvents)}
         >
             {children}
-        </section>
+        </Component>
     );
 };

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
 
 .component {
     display: inline-flex;
@@ -59,3 +59,18 @@
         margin-bottom: var(--gap-2xs);
     }
 }
+
+.button {
+    @mixin button-reset;
+    padding: 0;
+    transition: opacity 0.15s ease-in-out;
+    min-width: auto;
+
+    &:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    }
+
+    &:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
+    }
+}

package/src/components/main/component.tsx

@@ -29,24 +29,59 @@ type Props = {
      * Используется модификатор -main
      */
     dataTestId?: string;
+
+    /**
+     * Клик по контенту.
+     */
+    onClick?: () => void;
 };
 
-export const Main: React.FC<Props> = ({ children, isReverse, className, dataTestId }) => {
-    const { direction = 'horizontal', dataTestId: contextDataTestId } = useContext(PureCellContext);
+const MAIN_COMPONENT: Record<string, keyof Pick<React.ReactHTML, 'button' | 'section'>> = {
+    button: 'button',
+    section: 'section',
+};
+
+export const Main: React.FC<Props> = ({ children, isReverse, className, dataTestId, onClick }) => {
+    const {
+        direction = 'horizontal',
+        dataTestId: contextDataTestId,
+        setMainHover,
+        unsetMainHover,
+    } = useContext(PureCellContext);
+
+    const Component = onClick ? MAIN_COMPONENT.button : MAIN_COMPONENT.section;
+
+    const onMouseEvents = {
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            onClick?.();
+        },
+        onMouseEnter: () => {
+            unsetMainHover?.();
+        },
+        onMouseLeave: () => {
+            setMainHover?.();
+        },
+        onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+        },
+    };
 
     return (
-        <div
+        <Component
             className={cn(
                 styles.component,
                 styles[direction],
                 {
                     [styles.reverse]: isReverse,
                 },
+                { [styles.button]: onClick },
                 className,
             )}
             data-test-id={getDataTestId(dataTestId || contextDataTestId, 'main')}
+            {...(onClick && onMouseEvents)}
         >
             {children}
-        </div>
+        </Component>
     );
 };

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
 
 .component {
     display: flex;
@@ -20,4 +20,19 @@
     &.reverse {
         flex-direction: column-reverse;
     }
+
+    &.button {
+        @mixin button-reset;
+        padding: 0;
+        transition: opacity 0.15s ease-in-out;
+        min-width: auto;
+
+        &:hover {
+            opacity: var(--pure-cell-clickable-area-hover-opacity);
+        }
+
+        &:active {
+            opacity: var(--pure-cell-clickable-area-active-opacity);
+        }
+    }
 }

package/src/index.module.css

@@ -25,11 +25,11 @@
     transition: opacity 0.15s ease-in-out;
     padding: 0;
 
-    &:hover {
+    &.hover {
         opacity: 0.8;
     }
 
-    &:active {
+    &.active {
         opacity: 0.6;
     }
 }
@@ -40,11 +40,11 @@
     cursor: pointer;
     transition: opacity 0.15s ease-in-out;
 
-    &:hover {
+    &.hover {
         opacity: 0.8;
     }
 
-    &:active {
+    &.active {
         opacity: 0.6;
     }
 }

package/src/vars.css

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
+}