@snack-uikit/info-block 0.4.9 → 0.4.10-preview-d96c83e8.0

package/dist/cjs/components/Footer/Footer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Footer = Footer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const button_1 = require("@snack-uikit/button");
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault({});
+function Footer(_ref) {
+  let {
+    primaryButton,
+    secondaryButton,
+    className
+  } = _ref;
+  const PrimaryButton = (0, hooks_1.useButtonWithTooltip)({
+    Button: button_1.ButtonFilled,
+    tooltip: primaryButton.tooltip
+  });
+  const SecondaryButton = (0, hooks_1.useButtonWithTooltip)({
+    Button: button_1.ButtonTonal,
+    tooltip: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.tooltip
+  });
+  const {
+    size
+  } = (0, contexts_1.useInfoBlockContext)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.infoBlockFooter, className),
+    children: [secondaryButton && (0, jsx_runtime_1.jsx)(SecondaryButton, Object.assign({}, secondaryButton, {
+      size: size,
+      "data-test-id": secondaryButton['data-test-id'] || constants_1.TEST_IDS.secondaryButton
+    })), (0, jsx_runtime_1.jsx)(PrimaryButton, Object.assign({}, primaryButton, {
+      size: size,
+      "data-test-id": primaryButton['data-test-id'] || constants_1.TEST_IDS.primaryButton
+    }))]
+  });
+}

package/dist/cjs/components/Footer/hooks.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonWithTooltip = useButtonWithTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@snack-uikit/tooltip");
+function useButtonWithTooltip(_ref) {
+  let {
+    Button,
+    tooltip
+  } = _ref;
+  if (tooltip) {
+    return function ButtonWithTooltip(props) {
+      return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, tooltip, {
+        children: (0, jsx_runtime_1.jsx)(Button, Object.assign({}, props))
+      }));
+    };
+  }
+  return Button;
+}

package/dist/cjs/components/Footer/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Footer"), exports);

package/dist/cjs/components/InfoBlock/InfoBlock.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoBlock = InfoBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icon_predefined_1 = require("@snack-uikit/icon-predefined");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const styles_module_scss_1 = __importDefault({});
+function InfoBlock(_a) {
+  var _b, _c;
+  var {
+      title,
+      description,
+      icon,
+      size = constants_1.SIZE.S,
+      footer,
+      align = constants_1.ALIGN.Vertical,
+      className
+    } = _a,
+    rest = __rest(_a, ["title", "description", "icon", "size", "footer", "align", "className"]);
+  return (0, jsx_runtime_1.jsx)(contexts_1.InfoBlockContext.Provider, {
+    value: {
+      size
+    },
+    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
+      className: (0, classnames_1.default)(styles_module_scss_1.default.infoBlock, className),
+      "data-size": size,
+      "data-align": align
+    }, (0, utils_1.extractSupportProps)(rest), {
+      children: [icon && (0, jsx_runtime_1.jsx)(icon_predefined_1.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": constants_1.TEST_IDS.icon
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.contentLayout,
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.textWrap,
+          children: [title && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
+            family: 'sans',
+            purpose: 'title',
+            size: size,
+            className: styles_module_scss_1.default.title,
+            "data-test-id": constants_1.TEST_IDS.title,
+            children: title
+          }), description && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
+            family: 'sans',
+            purpose: 'body',
+            size: size,
+            className: styles_module_scss_1.default.description,
+            "data-test-id": constants_1.TEST_IDS.description,
+            children: description
+          })]
+        }), footer && (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.footer,
+          "data-test-id": constants_1.TEST_IDS.footer,
+          children: footer
+        })]
+      })]
+    }))
+  });
+}

package/dist/cjs/components/InfoBlock/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./InfoBlock"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoBlock = void 0;
+const Footer_1 = require("./Footer");
+const InfoBlock_1 = require("./InfoBlock");
+exports.InfoBlock = InfoBlock_1.InfoBlock;
+exports.InfoBlock.Footer = Footer_1.Footer;

package/dist/cjs/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = exports.ALIGN = exports.SIZE = void 0;
+exports.SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l'
+};
+exports.ALIGN = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal'
+};
+exports.TEST_IDS = {
+  icon: 'info-block__icon',
+  title: 'info-block__title',
+  description: 'info-block__description',
+  footer: 'info-block__footer',
+  primaryButton: 'info-block__primary-button',
+  secondaryButton: 'info-block__secondary-button'
+};

package/dist/cjs/contexts.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoBlockContext = void 0;
+exports.useInfoBlockContext = useInfoBlockContext;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+exports.InfoBlockContext = (0, react_1.createContext)({
+  size: constants_1.SIZE.S
+});
+function useInfoBlockContext() {
+  return (0, react_1.useContext)(exports.InfoBlockContext);
+}

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

package/dist/esm/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/esm/components/Footer/index.js

@@ -0,0 +1 @@
+export * from './Footer';

package/dist/esm/components/InfoBlock/InfoBlock.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Align, Size } from '../../types';
+import { Footer, FooterProps } from '../Footer';
+export type InfoBlockProps = WithSupportProps<{
+    /** Заголовок */
+    title?: string;
+    /** Подзаголовок */
+    description?: ReactNode;
+    /** Иконка */
+    icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+    /** Размер */
+    size?: Size;
+    /** Расположение элементов */
+    align?: Align;
+    /** Вложенный Footer */
+    footer?: ReactElement<FooterProps, typeof Footer> | ReactNode;
+    className?: string;
+}>;
+export declare function InfoBlock({ title, description, icon, size, footer, align, className, ...rest }: InfoBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/InfoBlock/index.js

@@ -0,0 +1 @@
+export * from './InfoBlock';

package/dist/esm/components/index.d.ts

@@ -0,0 +1,9 @@
+import { Footer, FooterProps as FooterComponentProps } from './Footer';
+import { InfoBlock as InfoBlockComponent, InfoBlockProps } from './InfoBlock';
+export declare const InfoBlock: typeof InfoBlockComponent & {
+    Footer: typeof Footer;
+};
+export { type InfoBlockProps };
+export declare namespace InfoBlock {
+    type FooterProps = FooterComponentProps;
+}

package/dist/esm/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const ALIGN: {
+    readonly Vertical: "vertical";
+    readonly Horizontal: "horizontal";
+};
+export declare const TEST_IDS: {
+    icon: string;
+    title: string;
+    description: string;
+    footer: string;
+    primaryButton: string;
+    secondaryButton: string;
+};

package/dist/esm/contexts.d.ts

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

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ALIGN, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Align = ValueOf<typeof ALIGN>;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Info Block",
-  "version": "0.4.9",
+  "version": "0.4.10-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://cloud-ru-tech.github.io/snack-uikit/packages/info-block",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Белов Алексей <anbelov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.5",
-    "@snack-uikit/icon-predefined": "0.5.2",
-    "@snack-uikit/tooltip": "0.13.10",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/button": "0.17.6-preview-d96c83e8.0",
+    "@snack-uikit/icon-predefined": "0.5.3-preview-d96c83e8.0",
+    "@snack-uikit/tooltip": "0.13.11-preview-d96c83e8.0",
+    "@snack-uikit/typography": "0.6.4-preview-d96c83e8.0",
+    "@snack-uikit/utils": "3.4.1-preview-d96c83e8.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "fc6a22e54444112c7ded3349a79da17bb777fd0e"
+  "gitHead": "7ad2685e79ccef7528ade40fe4e2a5d4e609a22f"
 }

package/dist/components/Footer/styles.module.css

@@ -1,5 +0,0 @@
-.infoBlockFooter{
-  gap:var(--space-info-block-footer-gap, 8px);
-  display:flex;
-  align-items:center;
-}

package/dist/components/InfoBlock/styles.module.css

@@ -1,77 +0,0 @@
-.contentLayout{
-  display:flex;
-  flex-direction:column;
-}
-
-.textWrap{
-  display:flex;
-  flex-direction:column;
-}
-
-.footer{
-  position:relative;
-  box-sizing:border-box;
-  width:100%;
-}
-
-.title{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-
-.infoBlock{
-  display:flex;
-  box-sizing:border-box;
-}
-.infoBlock[data-align=vertical]{
-  flex-direction:column;
-  align-items:center;
-}
-.infoBlock[data-align=vertical] .contentLayout{
-  align-items:center;
-}
-.infoBlock[data-align=vertical] .textWrap{
-  align-items:center;
-}
-.infoBlock[data-align=vertical] .footer{
-  width:auto;
-  text-align:center;
-}
-.infoBlock[data-align=vertical] .description,
-.infoBlock[data-align=vertical] .title{
-  text-align:center;
-}
-.infoBlock[data-align=horizontal]{
-  flex-direction:row;
-  align-items:flex-start;
-}
-.infoBlock[data-size=s]{
-  gap:var(--space-info-block-s-container-gap, 12px);
-}
-.infoBlock[data-size=s] .contentLayout{
-  gap:var(--space-info-block-s-container-content-layout-gap, 16px);
-}
-.infoBlock[data-size=s] .textWrap{
-  gap:var(--space-info-block-s-container-content-layout-text-wrap-gap, 4px);
-}
-.infoBlock[data-size=m]{
-  gap:var(--space-info-block-m-container-gap, 16px);
-}
-.infoBlock[data-size=m] .contentLayout{
-  gap:var(--space-info-block-m-container-content-layout-gap, 24px);
-}
-.infoBlock[data-size=m] .textWrap{
-  gap:var(--space-info-block-m-container-content-layout-text-wrap-gap, 8px);
-}
-.infoBlock[data-size=l]{
-  gap:var(--space-info-block-l-container-gap, 24px);
-}
-.infoBlock[data-size=l] .contentLayout{
-  gap:var(--space-info-block-l-container-content-layout-gap, 24px);
-}
-.infoBlock[data-size=l] .textWrap{
-  gap:var(--space-info-block-l-container-content-layout-text-wrap-gap, 8px);
-}