@megafon/ui-shared 6.9.1 → 6.11.0

package/CHANGELOG.md

@@ -3,24 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.9.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.9.0...@megafon/ui-shared@6.9.1) (2024-11-01)
+# [6.11.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.10.0...@megafon/ui-shared@6.11.0) (2024-11-15)
 
-**Note:** Version bump only for package @megafon/ui-shared
 
+### Features
+
+* **buttonsbox:** create component ButtonsBox ([e5bc9dc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e5bc9dc1b54e0756291e4b597be74dd75d88b91f))
+* **container:** add default margin for k36 (buttons-box) ([7a2a0e9](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/7a2a0e9b242a07c57565d6e4e76d8592fe6d8005))
+* **container:** add margins for PromoCards ([8c1cf07](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/8c1cf07d043bcbdf4c1f9ea0720aa0601c37def5))
+* **infocards:** add onClick and download props ([1fbbe80](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/1fbbe803a53b1105268f5eee065f38f732a98c08))
+* **promocards:** add new component PromoCards ([9e45fbc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/9e45fbcf88720d4eaa28eadb8a80ea3a3fa6e73c))
 
 
 
 
-# [6.9.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.8.0...@megafon/ui-shared@6.9.0) (2024-10-29)
 
+# [6.10.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.9.1...@megafon/ui-shared@6.10.0) (2024-11-06)
 
 ### Features
 
-* **buttonlinkbox:** add new prop and values ([09a7f47](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/09a7f4791b27972c048838efc5e862fd47c1d1cf))
+-   **container:** add optional prop preventMarginTopCollapse ([2b5633b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2b5633bb5c63e6fbc7e828253c083d2e6474a6ac))
 
+## [6.9.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.9.0...@megafon/ui-shared@6.9.1) (2024-11-01)
 
+**Note:** Version bump only for package @megafon/ui-shared
 
+# [6.9.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.8.0...@megafon/ui-shared@6.9.0) (2024-10-29)
+
+### Features
 
+-   **buttonlinkbox:** add new prop and values ([09a7f47](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/09a7f4791b27972c048838efc5e862fd47c1d1cf))
 
 # [6.8.0](/compare/@megafon/ui-shared@6.7.0...@megafon/ui-shared@6.8.0) (2024-10-21)
 

package/dist/es/components/ButtonsBox/ButtonsBox.css

@@ -0,0 +1,34 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-v6-buttons-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-v6-buttons-box__buttons_equal-width {
+  display: grid;
+  gap: 20px;
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+@media screen and (max-width: 767px) {
+  .mfui-v6-buttons-box__buttons_equal-width {
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-v6-buttons-box__buttons_equal-width {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.mfui-v6-buttons-box_h-align_center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}

package/dist/es/components/ButtonsBox/ButtonsBox.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import './ButtonsBox.less';
+export declare type ButtonType = {
+    /** Тип */
+    type?: 'primary' | 'outline';
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Название */
+    title?: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Задает атрибут download для тега <a> */
+    download?: boolean;
+    /** Показать стелку */
+    showArrow?: boolean;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IButtonsBox {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Кнопка */
+    button: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Горизонтальное выравнивание */
+    align?: 'center' | 'left';
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const ButtonsBox: React.FC<IButtonsBox>;
+export default ButtonsBox;

package/dist/es/components/ButtonsBox/ButtonsBox.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import { setRelAttribute } from "../../helpers/setRelAttribute";
+import "./ButtonsBox.css";
+var cn = cnCreate('mfui-v6-buttons-box');
+
+var ButtonsBox = function ButtonsBox(_ref) {
+  var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      button = _ref.button,
+      extraButton = _ref.extraButton,
+      align = _ref.align,
+      rootRef = _ref.rootRef;
+  var showTwoButtons = !!button && !!extraButton;
+
+  var renderButton = function renderButton(btnProps, btnClassName, dataAttr) {
+    return /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttr
+      },
+      className: btnClassName,
+      fullWidth: showTwoButtons,
+      type: btnProps.type,
+      theme: "green",
+      icon: btnProps.icon,
+      href: btnProps.href,
+      target: btnProps.target,
+      download: btnProps.download,
+      showArrow: btnProps.showArrow,
+      rel: setRelAttribute(btnProps.rel, btnProps.target),
+      onClick: btnProps.onClick
+    }, btnProps.title);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'h-align': align
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons', {
+      'equal-width': showTwoButtons
+    })
+  }, !!button && renderButton(button, classes.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), !!extraButton && renderButton(extraButton, classes.extraButton, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton)));
+};
+
+ButtonsBox.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  align: PropTypes.oneOf(['center', 'left']),
+  button: PropTypes.shape({
+    type: PropTypes.oneOf(['primary', 'outline']),
+    icon: PropTypes.element,
+    title: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string,
+    download: PropTypes.bool,
+    onClick: PropTypes.func
+  }).isRequired,
+  extraButton: PropTypes.shape({
+    type: PropTypes.oneOf(['primary', 'outline']),
+    icon: PropTypes.element,
+    title: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string,
+    download: PropTypes.bool,
+    onClick: PropTypes.func
+  })
+};
+export default ButtonsBox;