@megafon/ui-core 5.14.1 → 5.15.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.15.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.14.1...@megafon/ui-core@5.15.0) (2024-06-17)
+
+
+### Features
+
+* **avatar:** create component Avatar ([d36574f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d36574f889a9eceb3a71b790670c2809a9c538aa))
+* **colors:** add gradient Scrim ([ee4f5c6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ee4f5c6ddeea024573f5064308b3d8d30d31d575))
+
+
+
+
+
 ## [5.14.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.14.0...@megafon/ui-core@5.14.1) (2024-06-10)
 
 

package/dist/es/components/Avatar/Avatar.css

@@ -0,0 +1,52 @@
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './Avatar.less';
+export interface IAvatarProps {
+    /** Ссылка на изображение. Имеет приоритет над текстом */
+    src?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Текстовое отображение */
+    letters?: string;
+    /** Цвет заливки */
+    color?: 'green' | 'gray';
+    /** Размер (по умолчанию 40х40 пикселей). */
+    size?: 'default' | 'auto';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Avatar: React.FC<IAvatarProps>;
+export default Avatar;

package/dist/es/components/Avatar/Avatar.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Avatar.css";
+
+var PlaceholderIcon = function PlaceholderIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
+  }));
+};
+
+var cn = cnCreate('mfui-avatar');
+
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+      letters = _ref.letters,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+
+  var renderContent = function renderContent() {
+    if (src) {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: src,
+        alt: alt
+      });
+    }
+
+    if (letters) {
+      var text = letters.slice(0, 2).toUpperCase();
+      return /*#__PURE__*/React.createElement("span", {
+        className: cn('text')
+      }, text);
+    }
+
+    return /*#__PURE__*/React.createElement(PlaceholderIcon, {
+      className: cn('placeholder')
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      color: color,
+      size: size
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  letters: PropTypes.string,
+  color: PropTypes.oneOf(['green', 'gray']),
+  size: PropTypes.oneOf(['default', 'auto']),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default Avatar;

package/dist/es/components/Avatar/i/placeholder.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"/></svg>

package/dist/es/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion/Accordion';
+export { default as Avatar } from './components/Avatar/Avatar';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
 export { default as Button } from './components/Button/Button';

package/dist/es/index.js

@@ -1,4 +1,5 @@
 export { default as Accordion } from "./components/Accordion/Accordion";
+export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Banner } from "./components/Banner/Banner";
 export { default as BannerDot } from "./components/Banner/BannerDot";
 export { default as Button } from "./components/Button/Button";

package/dist/lib/components/Avatar/Avatar.css

@@ -0,0 +1,52 @@
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

package/dist/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './Avatar.less';
+export interface IAvatarProps {
+    /** Ссылка на изображение. Имеет приоритет над текстом */
+    src?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Текстовое отображение */
+    letters?: string;
+    /** Цвет заливки */
+    color?: 'green' | 'gray';
+    /** Размер (по умолчанию 40х40 пикселей). */
+    size?: 'default' | 'auto';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Avatar: React.FC<IAvatarProps>;
+export default Avatar;

package/dist/lib/components/Avatar/Avatar.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.array.slice.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var PlaceholderIcon = function PlaceholderIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
+  }));
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-avatar');
+
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+      letters = _ref.letters,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+
+  var renderContent = function renderContent() {
+    if (src) {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: src,
+        alt: alt
+      });
+    }
+
+    if (letters) {
+      var text = letters.slice(0, 2).toUpperCase();
+      return /*#__PURE__*/React.createElement("span", {
+        className: cn('text')
+      }, text);
+    }
+
+    return /*#__PURE__*/React.createElement(PlaceholderIcon, {
+      className: cn('placeholder')
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      color: color,
+      size: size
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  letters: PropTypes.string,
+  color: PropTypes.oneOf(['green', 'gray']),
+  size: PropTypes.oneOf(['default', 'auto']),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+var _default = Avatar;
+exports["default"] = _default;

package/dist/lib/components/Avatar/i/placeholder.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"/></svg>

package/dist/lib/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion/Accordion';
+export { default as Avatar } from './components/Avatar/Avatar';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
 export { default as Button } from './components/Button/Button';

package/dist/lib/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Accordion", {
     return _Accordion["default"];
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar["default"];
+  }
+});
 Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
@@ -378,6 +384,8 @@ Object.defineProperty(exports, "usePagination", {
 
 var _Accordion = _interopRequireDefault(require("./components/Accordion/Accordion"));
 
+var _Avatar = _interopRequireDefault(require("./components/Avatar/Avatar"));
+
 var _Banner = _interopRequireDefault(require("./components/Banner/Banner"));
 
 var _BannerDot = _interopRequireDefault(require("./components/Banner/BannerDot"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.14.1",
+  "version": "5.15.0",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.24.0",
+    "@megafon/ui-icons": "^2.25.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.5.5",
+    "@megafon/ui-helpers": "^2.6.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "13dc2b2721607f600ddb332e78fc49b0698c9fe2"
+  "gitHead": "250432bf38272f12927489decad080faf0a9dfb7"
 }