@snack-uikit/info-block 0.1.3 → 0.1.4-preview-5e88828b.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,14 @@
1
1
  import { ButtonFilledProps, ButtonTonalProps } from '@snack-uikit/button';
2
+ import { TooltipProps } from '@snack-uikit/tooltip';
2
3
  export type FooterProps = {
3
4
  /** Основная кнопка */
4
- primaryButton: Omit<ButtonFilledProps, 'size'>;
5
+ primaryButton: Omit<ButtonFilledProps, 'size'> & {
6
+ tooltip?: TooltipProps;
7
+ };
5
8
  /** Дополнительная кнопка */
6
- secondaryButton?: Omit<ButtonTonalProps, 'size'>;
9
+ secondaryButton?: Omit<ButtonTonalProps, 'size'> & {
10
+ tooltip?: TooltipProps;
11
+ };
7
12
  className?: string;
8
13
  };
9
14
  export declare function Footer({ primaryButton, secondaryButton, className }: FooterProps): import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import cn from 'classnames';
3
3
  import { ButtonFilled, ButtonTonal } from '@snack-uikit/button';
4
4
  import { TEST_IDS } from '../../constants';
5
+ import { useButtonWithTooltip } from './hooks';
5
6
  import styles from './styles.module.css';
6
7
  export function Footer({ primaryButton, secondaryButton, className }) {
7
- 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 }))] }));
8
+ const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
9
+ const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.tooltip });
10
+ 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 }))] }));
8
11
  }
@@ -0,0 +1,6 @@
1
+ import { JSXElementConstructor } from 'react';
2
+ import { TooltipProps } from '@snack-uikit/tooltip';
3
+ export declare function useButtonWithTooltip<T>({ Button, tooltip, }: {
4
+ tooltip?: TooltipProps;
5
+ Button: JSXElementConstructor<T>;
6
+ }): JSXElementConstructor<T> | ((props: T) => import("react/jsx-runtime").JSX.Element);
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Tooltip } from '@snack-uikit/tooltip';
3
+ export function useButtonWithTooltip({ Button, tooltip, }) {
4
+ if (tooltip) {
5
+ return function ButtonWithTooltip(props) {
6
+ return (_jsx(Tooltip, Object.assign({}, tooltip, { children: _jsx(Button, Object.assign({}, props)) })));
7
+ };
8
+ }
9
+ return Button;
10
+ }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Info Block",
7
- "version": "0.1.3",
7
+ "version": "0.1.4-preview-5e88828b.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -34,9 +34,10 @@
34
34
  "dependencies": {
35
35
  "@snack-uikit/button": "0.16.1",
36
36
  "@snack-uikit/icon-predefined": "0.4.2",
37
+ "@snack-uikit/tooltip": "0.12.0",
37
38
  "@snack-uikit/typography": "0.6.1",
38
39
  "@snack-uikit/utils": "3.2.0",
39
40
  "classnames": "2.3.2"
40
41
  },
41
- "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
42
+ "gitHead": "7ea7f023f5199f007554115e23b77faf4b2e57ae"
42
43
  }
@@ -1,30 +1,35 @@
1
1
  import cn from 'classnames';
2
2
 
3
3
  import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
4
+ import { TooltipProps } from '@snack-uikit/tooltip';
4
5
 
5
6
  import { TEST_IDS } from '../../constants';
7
+ import { useButtonWithTooltip } from './hooks';
6
8
  import styles from './styles.module.scss';
7
9
 
8
10
  export type FooterProps = {
9
11
  /** Основная кнопка */
10
- primaryButton: Omit<ButtonFilledProps, 'size'>;
12
+ primaryButton: Omit<ButtonFilledProps, 'size'> & { tooltip?: TooltipProps };
11
13
  /** Дополнительная кнопка */
12
- secondaryButton?: Omit<ButtonTonalProps, 'size'>;
14
+ secondaryButton?: Omit<ButtonTonalProps, 'size'> & { tooltip?: TooltipProps };
13
15
  className?: string;
14
16
  };
15
17
 
16
18
  export function Footer({ primaryButton, secondaryButton, className }: FooterProps) {
19
+ const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
20
+ const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton?.tooltip });
21
+
17
22
  return (
18
23
  <div className={cn(styles.infoBlockFooter, className)}>
19
24
  {secondaryButton && (
20
- <ButtonTonal
25
+ <SecondaryButton
21
26
  {...secondaryButton}
22
27
  size='m'
23
28
  data-test-id={secondaryButton['data-test-id'] || TEST_IDS.secondaryButton}
24
29
  />
25
30
  )}
26
31
 
27
- <ButtonFilled
32
+ <PrimaryButton
28
33
  {...primaryButton}
29
34
  size='m'
30
35
  data-test-id={primaryButton['data-test-id'] || TEST_IDS.primaryButton}
@@ -0,0 +1,25 @@
1
+ import { JSXElementConstructor } from 'react';
2
+
3
+ import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
4
+
5
+ export function useButtonWithTooltip<T>({
6
+ Button,
7
+ tooltip,
8
+ }: {
9
+ tooltip?: TooltipProps;
10
+ Button: JSXElementConstructor<T>;
11
+ }) {
12
+ if (tooltip) {
13
+ return function ButtonWithTooltip(props: T) {
14
+ return (
15
+ <Tooltip {...tooltip}>
16
+ {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
17
+ {/* @ts-ignore */}
18
+ <Button {...props} />
19
+ </Tooltip>
20
+ );
21
+ };
22
+ }
23
+
24
+ return Button;
25
+ }