@snack-uikit/info-block 0.3.6 → 0.4.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.4.0 (2024-06-06)
+
+
+### Features
+
+* **PDS-42:** add size context to InfoBlock.Footer ([39c681a](https://github.com/cloud-ru-tech/snack-uikit/commit/39c681a045594645fb6c87cade4acd4d81e65a23))
+
+
+
+
+
 ## 0.3.6 (2024-05-30)
 
 ### Only dependencies have been changed

package/dist/components/Footer/Footer.js

@@ -2,10 +2,12 @@ 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 { useInfoBlockContext } from '../../contexts';
 import { useButtonWithTooltip } from './hooks';
 import styles from './styles.module.css';
 export function Footer({ primaryButton, secondaryButton, className }) {
     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 }))] }));
+    const { size } = useInfoBlockContext();
+    return (_jsxs("div", { className: cn(styles.infoBlockFooter, className), children: [secondaryButton && (_jsx(SecondaryButton, Object.assign({}, secondaryButton, { size: size, "data-test-id": secondaryButton['data-test-id'] || TEST_IDS.secondaryButton }))), _jsx(PrimaryButton, Object.assign({}, primaryButton, { size: size, "data-test-id": primaryButton['data-test-id'] || TEST_IDS.primaryButton }))] }));
 }

package/dist/components/InfoBlock/InfoBlock.js

@@ -15,9 +15,10 @@ import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { ALIGN, SIZE, TEST_IDS } from '../../constants';
+import { InfoBlockContext } from '../../contexts';
 import styles from './styles.module.css';
 export function InfoBlock(_a) {
     var _b, _c;
     var { title, description, icon, size = SIZE.S, footer, align = ALIGN.Vertical, className } = _a, rest = __rest(_a, ["title", "description", "icon", "size", "footer", "align", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.infoBlock, className), "data-size": size, "data-align": align }, extractSupportProps(rest), { children: [icon && (_jsx(IconPredefined, { icon: icon.icon, appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'primary', decor: (_c = icon.decor) !== null && _c !== void 0 ? _c : true, size: size, "data-test-id": TEST_IDS.icon })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textWrap, children: [title && (_jsx(Typography, { family: 'sans', purpose: 'title', size: size, className: styles.title, "data-test-id": TEST_IDS.title, children: title })), description && (_jsx(Typography, { family: 'sans', purpose: 'body', size: size, className: styles.description, "data-test-id": TEST_IDS.description, children: description }))] }), footer && (_jsx("div", { className: styles.footer, "data-test-id": TEST_IDS.footer, children: footer }))] })] })));
+    return (_jsx(InfoBlockContext.Provider, { value: { size }, children: _jsxs("div", Object.assign({ className: cn(styles.infoBlock, className), "data-size": size, "data-align": align }, extractSupportProps(rest), { children: [icon && (_jsx(IconPredefined, { icon: icon.icon, appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'primary', decor: (_c = icon.decor) !== null && _c !== void 0 ? _c : true, size: size, "data-test-id": TEST_IDS.icon })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textWrap, children: [title && (_jsx(Typography, { family: 'sans', purpose: 'title', size: size, className: styles.title, "data-test-id": TEST_IDS.title, children: title })), description && (_jsx(Typography, { family: 'sans', purpose: 'body', size: size, className: styles.description, "data-test-id": TEST_IDS.description, children: description }))] }), footer && (_jsx("div", { className: styles.footer, "data-test-id": TEST_IDS.footer, children: footer }))] })] })) }));
 }

package/dist/contexts.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Size } from './types';
+type InfoBlockContextValue = {
+    size: Size;
+};
+export declare const InfoBlockContext: import("react").Context<InfoBlockContextValue>;
+export declare function useInfoBlockContext(): InfoBlockContextValue;
+export {};

package/dist/contexts.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import { SIZE } from './constants';
+export const InfoBlockContext = createContext({
+    size: SIZE.S,
+});
+export function useInfoBlockContext() {
+    return useContext(InfoBlockContext);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Info Block",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6a5d30f58b1ca79c29b9f4b3078edbd8c02e15a4"
+  "gitHead": "0fc5480c934d08f8578e1e7d862321bc89113ca5"
 }

package/src/components/Footer/Footer.tsx

@@ -4,6 +4,7 @@ import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '
 import { TooltipProps } from '@snack-uikit/tooltip';
 
 import { TEST_IDS } from '../../constants';
+import { useInfoBlockContext } from '../../contexts';
 import { useButtonWithTooltip } from './hooks';
 import styles from './styles.module.scss';
 
@@ -18,20 +19,21 @@ export type FooterProps = {
 export function Footer({ primaryButton, secondaryButton, className }: FooterProps) {
   const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
   const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton?.tooltip });
+  const { size } = useInfoBlockContext();
 
   return (
     <div className={cn(styles.infoBlockFooter, className)}>
       {secondaryButton && (
         <SecondaryButton
           {...secondaryButton}
-          size='m'
+          size={size}
           data-test-id={secondaryButton['data-test-id'] || TEST_IDS.secondaryButton}
         />
       )}
 
       <PrimaryButton
         {...primaryButton}
-        size='m'
+        size={size}
         data-test-id={primaryButton['data-test-id'] || TEST_IDS.primaryButton}
       />
     </div>

package/src/components/InfoBlock/InfoBlock.tsx

@@ -6,6 +6,7 @@ import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { ALIGN, SIZE, TEST_IDS } from '../../constants';
+import { InfoBlockContext } from '../../contexts';
 import { Align, Size } from '../../types';
 import { Footer, FooterProps } from '../Footer';
 import styles from './styles.module.scss';
@@ -37,50 +38,57 @@ export function InfoBlock({
   ...rest
 }: InfoBlockProps) {
   return (
-    <div className={cn(styles.infoBlock, className)} data-size={size} data-align={align} {...extractSupportProps(rest)}>
-      {icon && (
-        <IconPredefined
-          icon={icon.icon}
-          appearance={icon.appearance ?? 'primary'}
-          decor={icon.decor ?? true}
-          size={size}
-          data-test-id={TEST_IDS.icon}
-        />
-      )}
+    <InfoBlockContext.Provider value={{ size }}>
+      <div
+        className={cn(styles.infoBlock, className)}
+        data-size={size}
+        data-align={align}
+        {...extractSupportProps(rest)}
+      >
+        {icon && (
+          <IconPredefined
+            icon={icon.icon}
+            appearance={icon.appearance ?? 'primary'}
+            decor={icon.decor ?? true}
+            size={size}
+            data-test-id={TEST_IDS.icon}
+          />
+        )}
 
-      <div className={styles.contentLayout}>
-        <div className={styles.textWrap}>
-          {title && (
-            <Typography
-              family='sans'
-              purpose='title'
-              size={size}
-              className={styles.title}
-              data-test-id={TEST_IDS.title}
-            >
-              {title}
-            </Typography>
-          )}
+        <div className={styles.contentLayout}>
+          <div className={styles.textWrap}>
+            {title && (
+              <Typography
+                family='sans'
+                purpose='title'
+                size={size}
+                className={styles.title}
+                data-test-id={TEST_IDS.title}
+              >
+                {title}
+              </Typography>
+            )}
+
+            {description && (
+              <Typography
+                family='sans'
+                purpose='body'
+                size={size}
+                className={styles.description}
+                data-test-id={TEST_IDS.description}
+              >
+                {description}
+              </Typography>
+            )}
+          </div>
 
-          {description && (
-            <Typography
-              family='sans'
-              purpose='body'
-              size={size}
-              className={styles.description}
-              data-test-id={TEST_IDS.description}
-            >
-              {description}
-            </Typography>
+          {footer && (
+            <div className={styles.footer} data-test-id={TEST_IDS.footer}>
+              {footer}
+            </div>
           )}
         </div>
-
-        {footer && (
-          <div className={styles.footer} data-test-id={TEST_IDS.footer}>
-            {footer}
-          </div>
-        )}
       </div>
-    </div>
+    </InfoBlockContext.Provider>
   );
 }

package/src/contexts.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+import { SIZE } from './constants';
+import { Size } from './types';
+
+type InfoBlockContextValue = {
+  size: Size;
+};
+
+export const InfoBlockContext = createContext<InfoBlockContextValue>({
+  size: SIZE.S,
+});
+
+export function useInfoBlockContext() {
+  return useContext(InfoBlockContext);
+}