@snack-uikit/info-block 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.2.0 (2024-02-22)
+
+
+### Features
+
+* **FF-4325:** add tooltip for footer buttons ([5e88828](https://github.com/cloud-ru-tech/snack-uikit/commit/5e88828bdd4b9b655b7759c9b1045630362e82f5))
+
+
+
+
+
 ## 0.1.3 (2024-02-20)
 
 ### Only dependencies have been changed

package/dist/components/Footer/Footer.d.ts

@@ -1,9 +1,14 @@
 import { ButtonFilledProps, ButtonTonalProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
 export type FooterProps = {
     /** Основная кнопка */
-    primaryButton: Omit<ButtonFilledProps, 'size'>;
+    primaryButton: Omit<ButtonFilledProps, 'size'> & {
+        tooltip?: TooltipProps;
+    };
     /** Дополнительная кнопка */
-    secondaryButton?: Omit<ButtonTonalProps, 'size'>;
+    secondaryButton?: Omit<ButtonTonalProps, 'size'> & {
+        tooltip?: TooltipProps;
+    };
     className?: string;
 };
 export declare function Footer({ primaryButton, secondaryButton, className }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/Footer.js

@@ -2,7 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { ButtonFilled, ButtonTonal } from '@snack-uikit/button';
 import { TEST_IDS } from '../../constants';
+import { useButtonWithTooltip } from './hooks';
 import styles from './styles.module.css';
 export function Footer({ primaryButton, secondaryButton, className }) {
-    return (_jsxs("div", { className: cn(styles.infoBlockFooter, className), children: [secondaryButton && (_jsx(ButtonTonal, Object.assign({}, secondaryButton, { size: 'm', "data-test-id": secondaryButton['data-test-id'] || TEST_IDS.secondaryButton }))), _jsx(ButtonFilled, Object.assign({}, primaryButton, { size: 'm', "data-test-id": primaryButton['data-test-id'] || TEST_IDS.primaryButton }))] }));
+    const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
+    const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.tooltip });
+    return (_jsxs("div", { className: cn(styles.infoBlockFooter, className), children: [secondaryButton && (_jsx(SecondaryButton, Object.assign({}, secondaryButton, { size: 'm', "data-test-id": secondaryButton['data-test-id'] || TEST_IDS.secondaryButton }))), _jsx(PrimaryButton, Object.assign({}, primaryButton, { size: 'm', "data-test-id": primaryButton['data-test-id'] || TEST_IDS.primaryButton }))] }));
 }

package/dist/components/Footer/hooks.d.ts

@@ -0,0 +1,6 @@
+import { JSXElementConstructor } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+export declare function useButtonWithTooltip<T>({ Button, tooltip, }: {
+    tooltip?: TooltipProps;
+    Button: JSXElementConstructor<T>;
+}): JSXElementConstructor<T> | ((props: T) => import("react/jsx-runtime").JSX.Element);

package/dist/components/Footer/hooks.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@snack-uikit/tooltip';
+export function useButtonWithTooltip({ Button, tooltip, }) {
+    if (tooltip) {
+        return function ButtonWithTooltip(props) {
+            return (_jsx(Tooltip, Object.assign({}, tooltip, { children: _jsx(Button, Object.assign({}, props)) })));
+        };
+    }
+    return Button;
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Info Block",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,9 +34,10 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/icon-predefined": "0.4.2",
+    "@snack-uikit/tooltip": "0.12.0",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
+  "gitHead": "6aa9d988eebb76712315def67343b8b2e4cd268c"
 }

package/src/components/Footer/Footer.tsx

@@ -1,30 +1,35 @@
 import cn from 'classnames';
 
 import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
 
 import { TEST_IDS } from '../../constants';
+import { useButtonWithTooltip } from './hooks';
 import styles from './styles.module.scss';
 
 export type FooterProps = {
   /** Основная кнопка */
-  primaryButton: Omit<ButtonFilledProps, 'size'>;
+  primaryButton: Omit<ButtonFilledProps, 'size'> & { tooltip?: TooltipProps };
   /** Дополнительная кнопка */
-  secondaryButton?: Omit<ButtonTonalProps, 'size'>;
+  secondaryButton?: Omit<ButtonTonalProps, 'size'> & { tooltip?: TooltipProps };
   className?: string;
 };
 
 export function Footer({ primaryButton, secondaryButton, className }: FooterProps) {
+  const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
+  const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton?.tooltip });
+
   return (
     <div className={cn(styles.infoBlockFooter, className)}>
       {secondaryButton && (
-        <ButtonTonal
+        <SecondaryButton
           {...secondaryButton}
           size='m'
           data-test-id={secondaryButton['data-test-id'] || TEST_IDS.secondaryButton}
         />
       )}
 
-      <ButtonFilled
+      <PrimaryButton
         {...primaryButton}
         size='m'
         data-test-id={primaryButton['data-test-id'] || TEST_IDS.primaryButton}

package/src/components/Footer/hooks.tsx

@@ -0,0 +1,25 @@
+import { JSXElementConstructor } from 'react';
+
+import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
+
+export function useButtonWithTooltip<T>({
+  Button,
+  tooltip,
+}: {
+  tooltip?: TooltipProps;
+  Button: JSXElementConstructor<T>;
+}) {
+  if (tooltip) {
+    return function ButtonWithTooltip(props: T) {
+      return (
+        <Tooltip {...tooltip}>
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore */}
+          <Button {...props} />
+        </Tooltip>
+      );
+    };
+  }
+
+  return Button;
+}