@che-ins-ui/contacts - npm Package Compare versions

Comparing version 3.2.39 to 3.2.40

dist/contacts.cjs.development.js

@@ -10,4 +10,5 @@ 'use strict';
 var classnames = _interopDefault(require('classnames'));
-var CallIcon = require('@che-ins-ui/icons/CallIcon');
+var PhoneCallIcon = require('@che-ins-ui/icons/PhoneCallIcon');
 var theme = require('@che-ins-ui/theme');
+var utils = require('@che-ins-ui/utils');
 var reactJss = require('react-jss');
@@ -18,81 +19,221 @@ var TelegramIcon = require('@che-ins-ui/icons/TelegramIcon');
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 var CONTACTS_COMPONENT_NAMESPACE = "@che/contacts";
 var CONTACTS_COMPONENTS_NAMES = {
   /**
-   * Ul дропдауна контактов
+   * Кнопка позвонить
    */
-  contactsList: "contactsList",
+  callUsButton: "callUsButton",
 
   /**
-   * Li дропдауна контактов
+   * Обертка
    */
-  contactsListItem: "contactsListItem",
+  contactsWrapper: "contactsWrapper",
 
   /**
-   * Ссылка в Item контакта (телефон, email)
+   * Блок (контакты/время работы)
    */
-  contactsListItemLink: "contactsListItemLink",
+  contactsBlock: "contactsBlock",
 
   /**
-   * Item ссылок на соц сети
+   * Обертка над "позвонить" и социальными сетями
    */
-  contactsListItemSocialNetworks: "contactsListItemSocialNetworks",
+  contactsInTouch: "contactsInTouch",
 
   /**
-   * Item ссылок на соц сети
+   * Разделитель
    */
-  contactsSocialNetworkLink: "contactsSocialNetworkLink",
+  contactsSeparator: "contactsSeparator",
 
   /**
-   * Кнопка позвонить
+   * Тайтл
    */
-  callUsButton: "callUsButton"
+  contactsTitleWrapper: "contactsTitleWrapper",
+
+  /**
+   * Айтем
+   */
+  contactsItem: "contactsItem",
+
+  /**
+   * Ссылка
+   */
+  contactsLink: "contactsLink",
+
+  /**
+   * Обертка над социальными сетями
+   */
+  contactsSocialWrapper: "contactsSocialWrapper",
+
+  /**
+   * Обертка над социальными сетями
+   */
+  contactsSocialItem: "contactsSocialItem"
 };
 
-var _defaultTheme;
-var defaultTheme = (_defaultTheme = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsList] = {
+var _svg, _isFooter, _isFooter2, _isFooter3, _defaultTheme;
+var defaultTheme = (_defaultTheme = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.callUsButton] = {
+  display: "flex",
+  padding: "8px 0px",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: 8,
+  height: "35px",
+  borderRadius: "99px",
+  background: "#EDF4FE",
+  border: "none",
+  color: "#636AFF",
+  cursor: "pointer",
+  transition: "0.2s",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
+  fontSize: "15px",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "19px",
+  letterSpacing: "-.3px",
+  "&:hover": {
+    background: "#DFE9F7"
+  },
+  "&:active": {
+    transform: "scale(0.95)"
+  },
+  "& > svg": {
+    width: "15px",
+    height: "14px"
+  },
+  "&.isFooter": (_isFooter = {
+    fontSize: "15px",
+    lineHeight: "21px",
+    fontWeight: 400,
+    "& > svg": (_svg = {}, _svg[/*#__PURE__*/theme.BREAKPOINTS.up("md")] = {
+      width: "13px",
+      height: "12px"
+    }, _svg)
+  }, _isFooter[/*#__PURE__*/theme.BREAKPOINTS.up("md")] = {
+    fontSize: "13px",
+    lineHeight: "18px",
+    fontWeight: 500
+  }, _isFooter)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsWrapper] = {
   padding: "0px",
-  listStyle: "none",
   margin: "0px",
   display: "flex",
   flexDirection: "column",
-  gap: "9px",
-  width: "max-content",
-  flexShrink: 0
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItem] = {
-  color: "#808FA4",
-  fontSize: "13px",
-  fontWeight: 400,
-  letterSpacing: "-.45px"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItemSocialNetworks] = {
-  marginTop: "19px",
+  gap: "16px",
+  alignItems: "flex-start",
+  flexShrink: 0,
+  "&.isFooter": {
+    gap: "10px",
+    minWidth: "173px"
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsBlock] = {
   display: "flex",
-  gap: "20px"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialNetworkLink] = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItemLink] = {
-  textDecoration: "none",
-  marginRight: "3px",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "10px",
+  alignSelf: "stretch",
+  "&.order-1": {
+    order: 1
+  },
+  "&.order-2": {
+    order: 2
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsInTouch] = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "14px",
+  width: "100%",
+  "&.order-3": {
+    order: 3
+  },
+  "&.isFooter": (_isFooter2 = {
+    marginTop: "10px",
+    width: "100%",
+    maxWidth: "201px"
+  }, _isFooter2[/*#__PURE__*/theme.BREAKPOINTS.up("md")] = {
+    maxWidth: "160px",
+    gap: "8px"
+  }, _isFooter2)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSeparator] = {
+  width: "100%",
+  height: "1px",
+  background: "#F4F5F7"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsTitleWrapper] = {
+  color: "#101820",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
   fontSize: "13px",
-  fontWeight: 400,
-  letterSpacing: "-.45px",
-  color: "#636AFF"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.callUsButton] = {
+  fontStyle: "normal",
+  fontWeight: "700",
+  lineHeight: "normal",
+  letterSpacing: "-.3px",
   display: "flex",
-  justifyContent: "space-between",
+  gap: "8px",
+  alignSelf: "stretch",
   alignItems: "center",
-  minHeight: "25px",
-  background: "white",
-  border: "1px solid currentColor",
-  borderRadius: "8px",
-  padding: "0 6px",
+  justifyContent: "flex-start",
+  textTransform: "uppercase"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsItem] = {
+  alignSelf: "stretch",
+  color: "#718299",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
+  fontSize: "15px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "19px",
+  letterSpacing: "-.3px",
+  "& > .lightGrey": {
+    color: "#B9C1CC"
+  },
+  "&.isFooter": (_isFooter3 = {
+    fontSize: "15px",
+    lineHeight: "19px"
+  }, _isFooter3[/*#__PURE__*/theme.BREAKPOINTS.up("md")] = {
+    fontSize: "13px",
+    lineHeight: "18px"
+  }, _isFooter3)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsLink] = {
   color: "#636AFF",
   cursor: "pointer",
+  textDecoration: "none"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialWrapper] = {
+  color: "#B9C1CC",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 16,
+  "& > a:nth-child(1) > svg": {
+    marginRight: "3px"
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialItem] = {
+  width: "34px",
+  height: "34px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  border: "none",
+  background: "#EDF4FE",
   transition: "0.2s",
-  "& svg": {
-    marginRight: "5px"
+  cursor: "pointer",
+  "&:active": {
+    transform: "scale(0.95)"
   },
   "&:hover": {
-    background: "#EDF4FE"
-  },
-  "&:active": {
-    transform: "scale(0.95)"
+    background: "#DFE9F7"
   }
@@ -107,9 +248,2 @@ }, _defaultTheme);
 var socialNetworks = [{
-  icon: /*#__PURE__*/jsxRuntime.jsx(VKIcon.VKIcon, {}),
-  link: "https://vk.com/cherehapa"
-}, // {
-//   icon: <TwitterIcon />,
-//   link: "https://twitter.com/cherehapa",
-// },
-{
   icon: /*#__PURE__*/jsxRuntime.jsx(TelegramIcon.TelegramIcon, {}),
@@ -120,26 +254,27 @@ link: "https://t.me/Cherehapa_support_bot"
   link: "https://api.whatsapp.com/send?phone=79250012551"
+}, {
+  icon: /*#__PURE__*/jsxRuntime.jsx(VKIcon.VKIcon, {}),
+  link: "https://vk.com/cherehapa"
 }];
 
-var AvailableTime = function AvailableTime() {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("span", {
-      children: "Mon-Fr: 08:00-00:00 (GMT+3)"
-    }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", {
-      children: "Sut-Sun: 09:00-21:00 (GMT+3)"
-    })]
-  });
-};
-
 var phonesRU = [{
   phone: "84952151198",
   title: "8 [phone]",
-  label: "Moscow"
+  label: "Moscow",
+  compactLabel: ""
 }, {
   phone: "88005552198",
   title: "8 [phone]",
-  label: "Russia (free)"
+  label: "Russia (free)",
+  compactLabel: "Free"
 }];
 var callUsButton = "Call";
 var contactsConfigEN = {
-  availableTime: /*#__PURE__*/jsxRuntime.jsx(AvailableTime, {}),
+  availableTime: [{
+    time: "08:00 - 00:00 (GMT+3)",
+    days: "MON-FR"
+  }, {
+    time: "09:00 - 21:00 (GMT+3)",
+    days: "SUT-SUN"
+  }],
   phones: phonesRU,
@@ -151,24 +286,22 @@ email: email,
 
-var AvailableTime$1 = function AvailableTime() {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("span", {
-      children: "\u041F\u043D-\u041F\u0442: 08:00-00:00 (\u043F\u043E \u041C\u043E\u0441\u043A\u0432\u0435)"
-    }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", {
-      children: "\u0421\u0431-\u0412\u0441: 09:00-21:00 (\u043F\u043E \u041C\u043E\u0441\u043A\u0432\u0435)"
-    })]
-  });
-};
-
 var phonesRU$1 = [{
   phone: "84952151198",
   title: "8 [phone]",
-  label: "Москва"
+  label: "Москва",
+  compactLabel: ""
 }, {
   phone: "88005552198",
   title: "8 [phone]",
-  label: "Россия (бесплатно)"
+  label: "Россия (бесплатно)",
+  compactLabel: "Бесплатно"
 }];
 var callUsButton$1 = "Позвонить онлайн";
 var contactsConfigRU = {
-  availableTime: /*#__PURE__*/jsxRuntime.jsx(AvailableTime$1, {}),
+  availableTime: [{
+    time: "08:00 - 00:00",
+    days: "ПН-ПТ"
+  }, {
+    time: "09:00 - 21:00",
+    days: "СБ-ВС"
+  }],
   phones: phonesRU$1,
@@ -191,19 +324,13 @@ email: email,
       _ref$language = _ref.language,
-      language = _ref$language === void 0 ? "ru" : _ref$language;
+      language = _ref$language === void 0 ? "ru" : _ref$language,
+      _ref$isHeader = _ref.isHeader,
+      isHeader = _ref$isHeader === void 0 ? false : _ref$isHeader;
   var classes = useStyles();
+  var isFooter = !isHeader;
   var classNames = react.useMemo(function () {
-    var contactsListClassName = theme.getClassName(classes, baseAppearance, appearance, "contactsList");
-    var contactsListItemClassName = theme.getClassName(classes, baseAppearance, appearance, "contactsListItem");
-    var contactsListItemLinkClassName = theme.getClassName(classes, baseAppearance, appearance, "contactsListItemLink");
-    var contactsCallUsButtonClassName = theme.getClassName(classes, baseAppearance, appearance, "callUsButton");
-    var contactsListItemSocialNetworksClassName = theme.getClassName(classes, baseAppearance, appearance, "contactsListItemSocialNetworks");
-    var contactsSocialNetworkLinkClassName = theme.getClassName(classes, baseAppearance, appearance, "contactsSocialNetworkLink");
-    return {
-      contactsListClassName: contactsListClassName,
-      contactsListItemClassName: contactsListItemClassName,
-      contactsListItemLinkClassName: contactsListItemLinkClassName,
-      contactsCallUsButtonClassName: contactsCallUsButtonClassName,
-      contactsListItemSocialNetworksClassName: contactsListItemSocialNetworksClassName,
-      contactsSocialNetworkLinkClassName: contactsSocialNetworkLinkClassName
-    };
+    return ["callUsButton", "contactsWrapper", "contactsBlock", "contactsInTouch", "contactsSeparator", "contactsTitleWrapper", "contactsItem", "contactsLink", "contactsSocialWrapper", "contactsSocialItem"].reduce(function (acc, name) {
+      var _extends2;
+
+      return _extends({}, acc, (_extends2 = {}, _extends2[name] = theme.getClassName(classes, baseAppearance, appearance, name), _extends2));
+    }, {});
   }, [classes, baseAppearance, appearance]);
@@ -218,53 +345,102 @@ var mangoDataOptions = JSON.stringify({
   }, [language]);
-  return jsxRuntime.jsxs("ul", {
-    className: classNames.contactsListClassName,
-    children: [jsxRuntime.jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: config.availableTime
-    }), config.phones.map(function (_ref2) {
+  var contactPhones = react.useMemo(function () {
+    return config.phones.map(function (_ref2) {
       var phone = _ref2.phone,
           title = _ref2.title,
-          label = _ref2.label;
-      return jsxRuntime.jsxs("li", {
-        className: classNames.contactsListItemClassName,
+          label = _ref2.label,
+          compactLabel = _ref2.compactLabel;
+      return jsxRuntime.jsxs("div", {
+        className: classnames(classNames.contactsItem, {
+          isFooter: isFooter
+        }),
         children: [jsxRuntime.jsx("a", {
           href: "tel:" + phone,
-          className: classNames.contactsListItemLinkClassName,
+          className: classNames.contactsLink,
           children: title
-        }), " ", jsxRuntime.jsx("span", {
-          children: label
+        }), "\xA0\xA0", jsxRuntime.jsx("span", {
+          className: classnames({
+            lightGrey: isFooter
+          }),
+          children: isHeader ? label : compactLabel
         })]
       }, phone);
-    }), jsxRuntime.jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: jsxRuntime.jsx("a", {
-        href: "mailto:" + config.email,
-        className: classNames.contactsListItemLinkClassName,
-        rel: "noopener noreferrer",
-        target: "_blank",
-        children: config.email
-      })
-    }), jsxRuntime.jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: jsxRuntime.jsx("div", {
-        "data-options": mangoDataOptions,
-        className: "mango-call-site",
-        children: jsxRuntime.jsxs("button", {
-          className: classnames(classNames.contactsCallUsButtonClassName, "support-call-button"),
-          children: [jsxRuntime.jsx(CallIcon.CallIcon, {}), config.callUsButton]
+    });
+  }, [config, isHeader, isFooter]);
+  return jsxRuntime.jsxs("div", {
+    className: classnames(classNames.contactsWrapper, {
+      isFooter: isFooter
+    }),
+    children: [jsxRuntime.jsxs("div", {
+      className: classnames(classNames.contactsBlock, {
+        "order-2": isFooter
+      }),
+      children: [isHeader && jsxRuntime.jsxs("div", {
+        className: classNames.contactsTitleWrapper,
+        children: [jsxRuntime.jsx("img", _extends({}, utils.getStaticImageProps({
+          name: "phone"
+        }))), " ", "Контакты"]
+      }), contactPhones, jsxRuntime.jsx("div", {
+        className: classnames(classNames.contactsItem, {
+          isFooter: isFooter
+        }),
+        children: jsxRuntime.jsx("a", {
+          href: "mailto:" + config.email,
+          className: classNames.contactsLink,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: config.email
         })
-      })
-    }), jsxRuntime.jsx("li", {
-      className: classNames.contactsListItemSocialNetworksClassName,
-      children: config.socialNetworks.map(function (_ref3, i) {
-        var icon = _ref3.icon,
-            link = _ref3.link;
-        return jsxRuntime.jsx("a", {
-          href: link,
-          target: "_blank",
-          referrerPolicy: "no-referrer",
-          className: classNames.contactsSocialNetworkLinkClassName,
-          children: icon
-        }, i);
-      })
+      })]
+    }), isHeader && jsxRuntime.jsx("div", {
+      className: classNames.contactsSeparator
+    }), jsxRuntime.jsxs("div", {
+      className: classnames(classNames.contactsBlock, {
+        "order-1": isFooter
+      }),
+      children: [isHeader && jsxRuntime.jsxs("div", {
+        className: classNames.contactsTitleWrapper,
+        children: [jsxRuntime.jsx("img", _extends({}, utils.getStaticImageProps({
+          name: "clock"
+        }))), " ", "Время работы"]
+      }), config.availableTime.map(function (_ref3) {
+        var time = _ref3.time,
+            days = _ref3.days;
+        return jsxRuntime.jsxs("div", {
+          className: classnames(classNames.contactsItem, {
+            isFooter: isFooter
+          }),
+          children: [jsxRuntime.jsx("span", {
+            children: time
+          }), "\xA0\xA0", jsxRuntime.jsx("span", {
+            className: "lightGrey",
+            children: days
+          })]
+        }, days);
+      })]
+    }), isHeader && jsxRuntime.jsx("div", {
+      className: classNames.contactsSeparator
+    }), jsxRuntime.jsxs("div", {
+      className: classnames(classNames.contactsInTouch, {
+        isFooter: isFooter
+      }, "order-3"),
+      "data-options": mangoDataOptions,
+      children: [jsxRuntime.jsxs("button", {
+        className: classnames(classNames.callUsButton, "support-call-button", {
+          isFooter: isFooter
+        }),
+        children: [jsxRuntime.jsx(PhoneCallIcon.PhoneCallIcon, {}), config.callUsButton]
+      }), jsxRuntime.jsx("div", {
+        className: classNames.contactsSocialWrapper,
+        children: config.socialNetworks.map(function (_ref4, i) {
+          var icon = _ref4.icon,
+              link = _ref4.link;
+          return jsxRuntime.jsx("a", {
+            href: link,
+            target: "_blank",
+            referrerPolicy: "no-referrer",
+            className: classNames.contactsSocialItem,
+            children: icon
+          }, i);
+        })
+      })]
     })]
@@ -271,0 +447,0 @@ });

dist/contacts.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,s=require("react/jsx-runtime"),a=require("react"),n=(t=require("classnames"))&&"object"==typeof t&&"default"in t?t.default:t,c=require("@che-ins-ui/icons/CallIcon"),i=require("@che-ins-ui/theme"),o=require("react-jss"),l=require("@che-ins-ui/icons/TelegramIcon"),r=require("@che-ins-ui/icons/VKIcon"),m=require("@che-ins-ui/icons/WhatsupIcon"),p={contactsList:"contactsList",contactsListItem:"contactsListItem",contactsListItemLink:"contactsListItemLink",contactsListItemSocialNetworks:"contactsListItemSocialNetworks",contactsSocialNetworkLink:"contactsSocialNetworkLink",callUsButton:"callUsButton"},u=((e={})[p.contactsList]={padding:"0px",listStyle:"none",margin:"0px",display:"flex",flexDirection:"column",gap:"9px",width:"max-content",flexShrink:0},e[p.contactsListItem]={color:"#808FA4",fontSize:"13px",fontWeight:400,letterSpacing:"-.45px"},e[p.contactsListItemSocialNetworks]={marginTop:"19px",display:"flex",gap:"20px"},e[p.contactsSocialNetworkLink]={},e[p.contactsListItemLink]={textDecoration:"none",marginRight:"3px",fontSize:"13px",fontWeight:400,letterSpacing:"-.45px",color:"#636AFF"},e[p.callUsButton]={display:"flex",justifyContent:"space-between",alignItems:"center",minHeight:"25px",background:"white",border:"1px solid currentColor",borderRadius:"8px",padding:"0 6px",color:"#636AFF",cursor:"pointer",transition:"0.2s","& svg":{marginRight:"5px"},"&:hover":{background:"#EDF4FE"},"&:active":{transform:"scale(0.95)"}},e),h=o.createUseStyles(i.createClasses(u,"@che/contacts"),{name:"contacts"}),N="[e-mail]",x=[{icon:s.jsx(r.VKIcon,{}),link:"https://vk.com/cherehapa"},{icon:s.jsx(l.TelegramIcon,{}),link:"https://t.me/Cherehapa_support_bot"},{icon:s.jsx(m.WhatsupIcon,{}),link:"https://api.whatsapp.com/send?phone=79250012551"}],d=function(){return s.jsxs(s.Fragment,{children:[s.jsx("span",{children:"Mon-Fr: 08:00-00:00 (GMT+3)"}),s.jsx("br",{}),s.jsx("span",{children:"Sut-Sun: 09:00-21:00 (GMT+3)"})]})},L={availableTime:s.jsx(d,{}),phones:[{phone:"84952151198",title:"8 [phone]",label:"Moscow"},{phone:"88005552198",title:"8 [phone]",label:"Russia (free)"}],email:N,callUsButton:"Call",socialNetworks:x},C=function(){return s.jsxs(s.Fragment,{children:[s.jsx("span",{children:"Пн-Пт: 08:00-00:00 (по Москве)"}),s.jsx("br",{}),s.jsx("span",{children:"Сб-Вс: 09:00-21:00 (по Москве)"})]})},g={ru:{availableTime:s.jsx(C,{}),phones:[{phone:"84952151198",title:"8 [phone]",label:"Москва"},{phone:"88005552198",title:"8 [phone]",label:"Россия (бесплатно)"}],email:N,callUsButton:"Позвонить онлайн",socialNetworks:x},en:L},k=a.memo((function(t){var e=t.baseAppearance,o=void 0===e?"base":e,l=t.appearance,r=void 0===l?"base":l,m=t.language,p=void 0===m?"ru":m,u=h(),N=a.useMemo((function(){return{contactsListClassName:i.getClassName(u,o,r,"contactsList"),contactsListItemClassName:i.getClassName(u,o,r,"contactsListItem"),contactsListItemLinkClassName:i.getClassName(u,o,r,"contactsListItemLink"),contactsCallUsButtonClassName:i.getClassName(u,o,r,"callUsButton"),contactsListItemSocialNetworksClassName:i.getClassName(u,o,r,"contactsListItemSocialNetworks"),contactsSocialNetworkLinkClassName:i.getClassName(u,o,r,"contactsSocialNetworkLink")}}),[u,o,r]),x=JSON.stringify({host:"widgets.mango-office.ru/",id:"MTAwMTc3NjI=",errorMessage:"В данный момент наблюдаются технические проблемы и совершение звонка невозможно"}),d=a.useMemo((function(){return g[p]}),[p]);return s.jsxs("ul",{className:N.contactsListClassName,children:[s.jsx("li",{className:N.contactsListItemClassName,children:d.availableTime}),d.phones.map((function(t){var e=t.phone,a=t.label;return s.jsxs("li",{className:N.contactsListItemClassName,children:[s.jsx("a",{href:"tel:"+e,className:N.contactsListItemLinkClassName,children:t.title})," ",s.jsx("span",{children:a})]},e)})),s.jsx("li",{className:N.contactsListItemClassName,children:s.jsx("a",{href:"mailto:"+d.email,className:N.contactsListItemLinkClassName,rel:"noopener noreferrer",target:"_blank",children:d.email})}),s.jsx("li",{className:N.contactsListItemClassName,children:s.jsx("div",{"data-options":x,className:"mango-call-site",children:s.jsxs("button",{className:n(N.contactsCallUsButtonClassName,"support-call-button"),children:[s.jsx(c.CallIcon,{}),d.callUsButton]})})}),s.jsx("li",{className:N.contactsListItemSocialNetworksClassName,children:d.socialNetworks.map((function(t,e){return s.jsx("a",{href:t.link,target:"_blank",referrerPolicy:"no-referrer",className:N.contactsSocialNetworkLinkClassName,children:t.icon},e)}))})]})}));exports.CONTACTS_COMPONENTS_NAMES=p,exports.CONTACTS_COMPONENT_NAMESPACE="@che/contacts",exports.Contacts=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),a=require("react"),o=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,c=require("@che-ins-ui/icons/PhoneCallIcon"),n=require("@che-ins-ui/theme"),r=require("@che-ins-ui/utils"),s=require("react-jss"),i=require("@che-ins-ui/icons/TelegramIcon"),l=require("@che-ins-ui/icons/VKIcon"),p=require("@che-ins-ui/icons/WhatsupIcon");function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)Object.prototype.hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e}).apply(this,arguments)}var m,u,d,x,g,f={callUsButton:"callUsButton",contactsWrapper:"contactsWrapper",contactsBlock:"contactsBlock",contactsInTouch:"contactsInTouch",contactsSeparator:"contactsSeparator",contactsTitleWrapper:"contactsTitleWrapper",contactsItem:"contactsItem",contactsLink:"contactsLink",contactsSocialWrapper:"contactsSocialWrapper",contactsSocialItem:"contactsSocialItem"},S=((g={})[f.callUsButton]={display:"flex",padding:"8px 0px",justifyContent:"center",alignItems:"center",gap:8,height:"35px",borderRadius:"99px",background:"#EDF4FE",border:"none",color:"#636AFF",cursor:"pointer",transition:"0.2s",fontFamily:"Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",fontSize:"15px",fontStyle:"normal",fontWeight:400,lineHeight:"19px",letterSpacing:"-.3px","&:hover":{background:"#DFE9F7"},"&:active":{transform:"scale(0.95)"},"& > svg":{width:"15px",height:"14px"},"&.isFooter":(u={fontSize:"15px",lineHeight:"21px",fontWeight:400,"& > svg":(m={},m[n.BREAKPOINTS.up("md")]={width:"13px",height:"12px"},m)},u[n.BREAKPOINTS.up("md")]={fontSize:"13px",lineHeight:"18px",fontWeight:500},u)},g[f.contactsWrapper]={padding:"0px",margin:"0px",display:"flex",flexDirection:"column",gap:"16px",alignItems:"flex-start",flexShrink:0,"&.isFooter":{gap:"10px",minWidth:"173px"}},g[f.contactsBlock]={display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"10px",alignSelf:"stretch","&.order-1":{order:1},"&.order-2":{order:2}},g[f.contactsInTouch]={display:"flex",flexDirection:"column",gap:"14px",width:"100%","&.order-3":{order:3},"&.isFooter":(d={marginTop:"10px",width:"100%",maxWidth:"201px"},d[n.BREAKPOINTS.up("md")]={maxWidth:"160px",gap:"8px"},d)},g[f.contactsSeparator]={width:"100%",height:"1px",background:"#F4F5F7"},g[f.contactsTitleWrapper]={color:"#101820",fontFamily:"Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",fontSize:"13px",fontStyle:"normal",fontWeight:"700",lineHeight:"normal",letterSpacing:"-.3px",display:"flex",gap:"8px",alignSelf:"stretch",alignItems:"center",justifyContent:"flex-start",textTransform:"uppercase"},g[f.contactsItem]={alignSelf:"stretch",color:"#718299",fontFamily:"Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",fontSize:"15px",fontStyle:"normal",fontWeight:"400",lineHeight:"19px",letterSpacing:"-.3px","& > .lightGrey":{color:"#B9C1CC"},"&.isFooter":(x={fontSize:"15px",lineHeight:"19px"},x[n.BREAKPOINTS.up("md")]={fontSize:"13px",lineHeight:"18px"},x)},g[f.contactsLink]={color:"#636AFF",cursor:"pointer",textDecoration:"none"},g[f.contactsSocialWrapper]={color:"#B9C1CC",display:"flex",alignItems:"center",justifyContent:"center",gap:16,"& > a:nth-child(1) > svg":{marginRight:"3px"}},g[f.contactsSocialItem]={width:"34px",height:"34px",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",border:"none",background:"#EDF4FE",transition:"0.2s",cursor:"pointer","&:active":{transform:"scale(0.95)"},"&:hover":{background:"#DFE9F7"}},g),b=s.createUseStyles(n.createClasses(S,"@che/contacts"),{name:"contacts"}),I="[e-mail]",N=[{icon:t.jsx(i.TelegramIcon,{}),link:"https://t.me/Cherehapa_support_bot"},{icon:t.jsx(p.WhatsupIcon,{}),link:"https://api.whatsapp.com/send?phone=79250012551"},{icon:t.jsx(l.VKIcon,{}),link:"https://vk.com/cherehapa"}],j={ru:{availableTime:[{time:"08:00 - 00:00",days:"ПН-ПТ"},{time:"09:00 - 21:00",days:"СБ-ВС"}],phones:[{phone:"84952151198",title:"8 [phone]",label:"Москва",compactLabel:""},{phone:"88005552198",title:"8 [phone]",label:"Россия (бесплатно)",compactLabel:"Бесплатно"}],email:I,callUsButton:"Позвонить онлайн",socialNetworks:N},en:{availableTime:[{time:"08:00 - 00:00 (GMT+3)",days:"MON-FR"},{time:"09:00 - 21:00 (GMT+3)",days:"SUT-SUN"}],phones:[{phone:"84952151198",title:"8 [phone]",label:"Moscow",compactLabel:""},{phone:"88005552198",title:"8 [phone]",label:"Russia (free)",compactLabel:"Free"}],email:I,callUsButton:"Call",socialNetworks:N}},v=a.memo((function(e){var s=e.baseAppearance,i=void 0===s?"base":s,l=e.appearance,p=void 0===l?"base":l,m=e.language,u=void 0===m?"ru":m,d=e.isHeader,x=void 0!==d&&d,g=b(),f=!x,S=a.useMemo((function(){return["callUsButton","contactsWrapper","contactsBlock","contactsInTouch","contactsSeparator","contactsTitleWrapper","contactsItem","contactsLink","contactsSocialWrapper","contactsSocialItem"].reduce((function(e,t){var a;return h({},e,((a={})[t]=n.getClassName(g,i,p,t),a))}),{})}),[g,i,p]),I=JSON.stringify({host:"widgets.mango-office.ru/",id:"MTAwMTc3NjI=",errorMessage:"В данный момент наблюдаются технические проблемы и совершение звонка невозможно"}),N=a.useMemo((function(){return j[u]}),[u]),v=a.useMemo((function(){return N.phones.map((function(e){var a=e.phone,c=e.title,n=e.label,r=e.compactLabel;return t.jsxs("div",{className:o(S.contactsItem,{isFooter:f}),children:[t.jsx("a",{href:"tel:"+a,className:S.contactsLink,children:c}),"  ",t.jsx("span",{className:o({lightGrey:f}),children:x?n:r})]},a)}))}),[N,x,f]);return t.jsxs("div",{className:o(S.contactsWrapper,{isFooter:f}),children:[t.jsxs("div",{className:o(S.contactsBlock,{"order-2":f}),children:[x&&t.jsxs("div",{className:S.contactsTitleWrapper,children:[t.jsx("img",h({},r.getStaticImageProps({name:"phone"})))," ","Контакты"]}),v,t.jsx("div",{className:o(S.contactsItem,{isFooter:f}),children:t.jsx("a",{href:"mailto:"+N.email,className:S.contactsLink,rel:"noopener noreferrer",target:"_blank",children:N.email})})]}),x&&t.jsx("div",{className:S.contactsSeparator}),t.jsxs("div",{className:o(S.contactsBlock,{"order-1":f}),children:[x&&t.jsxs("div",{className:S.contactsTitleWrapper,children:[t.jsx("img",h({},r.getStaticImageProps({name:"clock"})))," ","Время работы"]}),N.availableTime.map((function(e){var a=e.time,c=e.days;return t.jsxs("div",{className:o(S.contactsItem,{isFooter:f}),children:[t.jsx("span",{children:a}),"  ",t.jsx("span",{className:"lightGrey",children:c})]},c)}))]}),x&&t.jsx("div",{className:S.contactsSeparator}),t.jsxs("div",{className:o(S.contactsInTouch,{isFooter:f},"order-3"),"data-options":I,children:[t.jsxs("button",{className:o(S.callUsButton,"support-call-button",{isFooter:f}),children:[t.jsx(c.PhoneCallIcon,{}),N.callUsButton]}),t.jsx("div",{className:S.contactsSocialWrapper,children:N.socialNetworks.map((function(e,a){return t.jsx("a",{href:e.link,target:"_blank",referrerPolicy:"no-referrer",className:S.contactsSocialItem,children:e.icon},a)}))})]})]})}));exports.CONTACTS_COMPONENTS_NAMES=f,exports.CONTACTS_COMPONENT_NAMESPACE="@che/contacts",exports.Contacts=v;
 //# sourceMappingURL=contacts.cjs.production.min.js.map

dist/Contacts.d.ts

@@ -5,3 +5,4 @@ /// <reference types="react" />
     language?: "ru" | "en";
+    isHeader?: boolean;
 }
-export declare const Contacts: import("react").MemoExoticComponent<({ baseAppearance, appearance, language, }: IContactsProps) => JSX.Element>;
+export declare const Contacts: import("react").MemoExoticComponent<({ baseAppearance, appearance, language, isHeader, }: IContactsProps) => JSX.Element>;

dist/contacts.esm.js

@@ -1,6 +0,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import classnames from 'classnames';
-import { CallIcon } from '@che-ins-ui/icons/CallIcon';
-import { createClasses, getClassName } from '@che-ins-ui/theme';
+import { PhoneCallIcon } from '@che-ins-ui/icons/PhoneCallIcon';
+import { BREAKPOINTS, createClasses, getClassName } from '@che-ins-ui/theme';
+import { getStaticImageProps } from '@che-ins-ui/utils';
 import { createUseStyles } from 'react-jss';
@@ -11,81 +12,221 @@ import { TelegramIcon } from '@che-ins-ui/icons/TelegramIcon';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 var CONTACTS_COMPONENT_NAMESPACE = "@che/contacts";
 var CONTACTS_COMPONENTS_NAMES = {
   /**
-   * Ul дропдауна контактов
+   * Кнопка позвонить
    */
-  contactsList: "contactsList",
+  callUsButton: "callUsButton",
 
   /**
-   * Li дропдауна контактов
+   * Обертка
    */
-  contactsListItem: "contactsListItem",
+  contactsWrapper: "contactsWrapper",
 
   /**
-   * Ссылка в Item контакта (телефон, email)
+   * Блок (контакты/время работы)
    */
-  contactsListItemLink: "contactsListItemLink",
+  contactsBlock: "contactsBlock",
 
   /**
-   * Item ссылок на соц сети
+   * Обертка над "позвонить" и социальными сетями
    */
-  contactsListItemSocialNetworks: "contactsListItemSocialNetworks",
+  contactsInTouch: "contactsInTouch",
 
   /**
-   * Item ссылок на соц сети
+   * Разделитель
    */
-  contactsSocialNetworkLink: "contactsSocialNetworkLink",
+  contactsSeparator: "contactsSeparator",
 
   /**
-   * Кнопка позвонить
+   * Тайтл
    */
-  callUsButton: "callUsButton"
+  contactsTitleWrapper: "contactsTitleWrapper",
+
+  /**
+   * Айтем
+   */
+  contactsItem: "contactsItem",
+
+  /**
+   * Ссылка
+   */
+  contactsLink: "contactsLink",
+
+  /**
+   * Обертка над социальными сетями
+   */
+  contactsSocialWrapper: "contactsSocialWrapper",
+
+  /**
+   * Обертка над социальными сетями
+   */
+  contactsSocialItem: "contactsSocialItem"
 };
 
-var _defaultTheme;
-var defaultTheme = (_defaultTheme = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsList] = {
+var _svg, _isFooter, _isFooter2, _isFooter3, _defaultTheme;
+var defaultTheme = (_defaultTheme = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.callUsButton] = {
+  display: "flex",
+  padding: "8px 0px",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: 8,
+  height: "35px",
+  borderRadius: "99px",
+  background: "#EDF4FE",
+  border: "none",
+  color: "#636AFF",
+  cursor: "pointer",
+  transition: "0.2s",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
+  fontSize: "15px",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "19px",
+  letterSpacing: "-.3px",
+  "&:hover": {
+    background: "#DFE9F7"
+  },
+  "&:active": {
+    transform: "scale(0.95)"
+  },
+  "& > svg": {
+    width: "15px",
+    height: "14px"
+  },
+  "&.isFooter": (_isFooter = {
+    fontSize: "15px",
+    lineHeight: "21px",
+    fontWeight: 400,
+    "& > svg": (_svg = {}, _svg[/*#__PURE__*/BREAKPOINTS.up("md")] = {
+      width: "13px",
+      height: "12px"
+    }, _svg)
+  }, _isFooter[/*#__PURE__*/BREAKPOINTS.up("md")] = {
+    fontSize: "13px",
+    lineHeight: "18px",
+    fontWeight: 500
+  }, _isFooter)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsWrapper] = {
   padding: "0px",
-  listStyle: "none",
   margin: "0px",
   display: "flex",
   flexDirection: "column",
-  gap: "9px",
-  width: "max-content",
-  flexShrink: 0
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItem] = {
-  color: "#808FA4",
-  fontSize: "13px",
-  fontWeight: 400,
-  letterSpacing: "-.45px"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItemSocialNetworks] = {
-  marginTop: "19px",
+  gap: "16px",
+  alignItems: "flex-start",
+  flexShrink: 0,
+  "&.isFooter": {
+    gap: "10px",
+    minWidth: "173px"
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsBlock] = {
   display: "flex",
-  gap: "20px"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialNetworkLink] = {}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsListItemLink] = {
-  textDecoration: "none",
-  marginRight: "3px",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "10px",
+  alignSelf: "stretch",
+  "&.order-1": {
+    order: 1
+  },
+  "&.order-2": {
+    order: 2
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsInTouch] = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "14px",
+  width: "100%",
+  "&.order-3": {
+    order: 3
+  },
+  "&.isFooter": (_isFooter2 = {
+    marginTop: "10px",
+    width: "100%",
+    maxWidth: "201px"
+  }, _isFooter2[/*#__PURE__*/BREAKPOINTS.up("md")] = {
+    maxWidth: "160px",
+    gap: "8px"
+  }, _isFooter2)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSeparator] = {
+  width: "100%",
+  height: "1px",
+  background: "#F4F5F7"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsTitleWrapper] = {
+  color: "#101820",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
   fontSize: "13px",
-  fontWeight: 400,
-  letterSpacing: "-.45px",
-  color: "#636AFF"
-}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.callUsButton] = {
+  fontStyle: "normal",
+  fontWeight: "700",
+  lineHeight: "normal",
+  letterSpacing: "-.3px",
   display: "flex",
-  justifyContent: "space-between",
+  gap: "8px",
+  alignSelf: "stretch",
   alignItems: "center",
-  minHeight: "25px",
-  background: "white",
-  border: "1px solid currentColor",
-  borderRadius: "8px",
-  padding: "0 6px",
+  justifyContent: "flex-start",
+  textTransform: "uppercase"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsItem] = {
+  alignSelf: "stretch",
+  color: "#718299",
+  fontFamily: "Aeroport, BlinkMacSystemFont, Roboto, Arial, sans-serif",
+  fontSize: "15px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "19px",
+  letterSpacing: "-.3px",
+  "& > .lightGrey": {
+    color: "#B9C1CC"
+  },
+  "&.isFooter": (_isFooter3 = {
+    fontSize: "15px",
+    lineHeight: "19px"
+  }, _isFooter3[/*#__PURE__*/BREAKPOINTS.up("md")] = {
+    fontSize: "13px",
+    lineHeight: "18px"
+  }, _isFooter3)
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsLink] = {
   color: "#636AFF",
   cursor: "pointer",
+  textDecoration: "none"
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialWrapper] = {
+  color: "#B9C1CC",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 16,
+  "& > a:nth-child(1) > svg": {
+    marginRight: "3px"
+  }
+}, _defaultTheme[CONTACTS_COMPONENTS_NAMES.contactsSocialItem] = {
+  width: "34px",
+  height: "34px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  border: "none",
+  background: "#EDF4FE",
   transition: "0.2s",
-  "& svg": {
-    marginRight: "5px"
+  cursor: "pointer",
+  "&:active": {
+    transform: "scale(0.95)"
   },
   "&:hover": {
-    background: "#EDF4FE"
-  },
-  "&:active": {
-    transform: "scale(0.95)"
+    background: "#DFE9F7"
   }
@@ -100,9 +241,2 @@ }, _defaultTheme);
 var socialNetworks = [{
-  icon: /*#__PURE__*/jsx(VKIcon, {}),
-  link: "https://vk.com/cherehapa"
-}, // {
-//   icon: <TwitterIcon />,
-//   link: "https://twitter.com/cherehapa",
-// },
-{
   icon: /*#__PURE__*/jsx(TelegramIcon, {}),
@@ -113,26 +247,27 @@ link: "https://t.me/Cherehapa_support_bot"
   link: "https://api.whatsapp.com/send?phone=79250012551"
+}, {
+  icon: /*#__PURE__*/jsx(VKIcon, {}),
+  link: "https://vk.com/cherehapa"
 }];
 
-var AvailableTime = function AvailableTime() {
-  return jsxs(Fragment, {
-    children: [jsx("span", {
-      children: "Mon-Fr: 08:00-00:00 (GMT+3)"
-    }), jsx("br", {}), jsx("span", {
-      children: "Sut-Sun: 09:00-21:00 (GMT+3)"
-    })]
-  });
-};
-
 var phonesRU = [{
   phone: "84952151198",
   title: "8 [phone]",
-  label: "Moscow"
+  label: "Moscow",
+  compactLabel: ""
 }, {
   phone: "88005552198",
   title: "8 [phone]",
-  label: "Russia (free)"
+  label: "Russia (free)",
+  compactLabel: "Free"
 }];
 var callUsButton = "Call";
 var contactsConfigEN = {
-  availableTime: /*#__PURE__*/jsx(AvailableTime, {}),
+  availableTime: [{
+    time: "08:00 - 00:00 (GMT+3)",
+    days: "MON-FR"
+  }, {
+    time: "09:00 - 21:00 (GMT+3)",
+    days: "SUT-SUN"
+  }],
   phones: phonesRU,
@@ -144,24 +279,22 @@ email: email,
 
-var AvailableTime$1 = function AvailableTime() {
-  return jsxs(Fragment, {
-    children: [jsx("span", {
-      children: "\u041F\u043D-\u041F\u0442: 08:00-00:00 (\u043F\u043E \u041C\u043E\u0441\u043A\u0432\u0435)"
-    }), jsx("br", {}), jsx("span", {
-      children: "\u0421\u0431-\u0412\u0441: 09:00-21:00 (\u043F\u043E \u041C\u043E\u0441\u043A\u0432\u0435)"
-    })]
-  });
-};
-
 var phonesRU$1 = [{
   phone: "84952151198",
   title: "8 [phone]",
-  label: "Москва"
+  label: "Москва",
+  compactLabel: ""
 }, {
   phone: "88005552198",
   title: "8 [phone]",
-  label: "Россия (бесплатно)"
+  label: "Россия (бесплатно)",
+  compactLabel: "Бесплатно"
 }];
 var callUsButton$1 = "Позвонить онлайн";
 var contactsConfigRU = {
-  availableTime: /*#__PURE__*/jsx(AvailableTime$1, {}),
+  availableTime: [{
+    time: "08:00 - 00:00",
+    days: "ПН-ПТ"
+  }, {
+    time: "09:00 - 21:00",
+    days: "СБ-ВС"
+  }],
   phones: phonesRU$1,
@@ -184,19 +317,13 @@ email: email,
       _ref$language = _ref.language,
-      language = _ref$language === void 0 ? "ru" : _ref$language;
+      language = _ref$language === void 0 ? "ru" : _ref$language,
+      _ref$isHeader = _ref.isHeader,
+      isHeader = _ref$isHeader === void 0 ? false : _ref$isHeader;
   var classes = useStyles();
+  var isFooter = !isHeader;
   var classNames = useMemo(function () {
-    var contactsListClassName = getClassName(classes, baseAppearance, appearance, "contactsList");
-    var contactsListItemClassName = getClassName(classes, baseAppearance, appearance, "contactsListItem");
-    var contactsListItemLinkClassName = getClassName(classes, baseAppearance, appearance, "contactsListItemLink");
-    var contactsCallUsButtonClassName = getClassName(classes, baseAppearance, appearance, "callUsButton");
-    var contactsListItemSocialNetworksClassName = getClassName(classes, baseAppearance, appearance, "contactsListItemSocialNetworks");
-    var contactsSocialNetworkLinkClassName = getClassName(classes, baseAppearance, appearance, "contactsSocialNetworkLink");
-    return {
-      contactsListClassName: contactsListClassName,
-      contactsListItemClassName: contactsListItemClassName,
-      contactsListItemLinkClassName: contactsListItemLinkClassName,
-      contactsCallUsButtonClassName: contactsCallUsButtonClassName,
-      contactsListItemSocialNetworksClassName: contactsListItemSocialNetworksClassName,
-      contactsSocialNetworkLinkClassName: contactsSocialNetworkLinkClassName
-    };
+    return ["callUsButton", "contactsWrapper", "contactsBlock", "contactsInTouch", "contactsSeparator", "contactsTitleWrapper", "contactsItem", "contactsLink", "contactsSocialWrapper", "contactsSocialItem"].reduce(function (acc, name) {
+      var _extends2;
+
+      return _extends({}, acc, (_extends2 = {}, _extends2[name] = getClassName(classes, baseAppearance, appearance, name), _extends2));
+    }, {});
   }, [classes, baseAppearance, appearance]);
@@ -211,53 +338,102 @@ var mangoDataOptions = JSON.stringify({
   }, [language]);
-  return jsxs("ul", {
-    className: classNames.contactsListClassName,
-    children: [jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: config.availableTime
-    }), config.phones.map(function (_ref2) {
+  var contactPhones = useMemo(function () {
+    return config.phones.map(function (_ref2) {
       var phone = _ref2.phone,
           title = _ref2.title,
-          label = _ref2.label;
-      return jsxs("li", {
-        className: classNames.contactsListItemClassName,
+          label = _ref2.label,
+          compactLabel = _ref2.compactLabel;
+      return jsxs("div", {
+        className: classnames(classNames.contactsItem, {
+          isFooter: isFooter
+        }),
         children: [jsx("a", {
           href: "tel:" + phone,
-          className: classNames.contactsListItemLinkClassName,
+          className: classNames.contactsLink,
           children: title
-        }), " ", jsx("span", {
-          children: label
+        }), "\xA0\xA0", jsx("span", {
+          className: classnames({
+            lightGrey: isFooter
+          }),
+          children: isHeader ? label : compactLabel
         })]
       }, phone);
-    }), jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: jsx("a", {
-        href: "mailto:" + config.email,
-        className: classNames.contactsListItemLinkClassName,
-        rel: "noopener noreferrer",
-        target: "_blank",
-        children: config.email
-      })
-    }), jsx("li", {
-      className: classNames.contactsListItemClassName,
-      children: jsx("div", {
-        "data-options": mangoDataOptions,
-        className: "mango-call-site",
-        children: jsxs("button", {
-          className: classnames(classNames.contactsCallUsButtonClassName, "support-call-button"),
-          children: [jsx(CallIcon, {}), config.callUsButton]
+    });
+  }, [config, isHeader, isFooter]);
+  return jsxs("div", {
+    className: classnames(classNames.contactsWrapper, {
+      isFooter: isFooter
+    }),
+    children: [jsxs("div", {
+      className: classnames(classNames.contactsBlock, {
+        "order-2": isFooter
+      }),
+      children: [isHeader && jsxs("div", {
+        className: classNames.contactsTitleWrapper,
+        children: [jsx("img", _extends({}, getStaticImageProps({
+          name: "phone"
+        }))), " ", "Контакты"]
+      }), contactPhones, jsx("div", {
+        className: classnames(classNames.contactsItem, {
+          isFooter: isFooter
+        }),
+        children: jsx("a", {
+          href: "mailto:" + config.email,
+          className: classNames.contactsLink,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: config.email
         })
-      })
-    }), jsx("li", {
-      className: classNames.contactsListItemSocialNetworksClassName,
-      children: config.socialNetworks.map(function (_ref3, i) {
-        var icon = _ref3.icon,
-            link = _ref3.link;
-        return jsx("a", {
-          href: link,
-          target: "_blank",
-          referrerPolicy: "no-referrer",
-          className: classNames.contactsSocialNetworkLinkClassName,
-          children: icon
-        }, i);
-      })
+      })]
+    }), isHeader && jsx("div", {
+      className: classNames.contactsSeparator
+    }), jsxs("div", {
+      className: classnames(classNames.contactsBlock, {
+        "order-1": isFooter
+      }),
+      children: [isHeader && jsxs("div", {
+        className: classNames.contactsTitleWrapper,
+        children: [jsx("img", _extends({}, getStaticImageProps({
+          name: "clock"
+        }))), " ", "Время работы"]
+      }), config.availableTime.map(function (_ref3) {
+        var time = _ref3.time,
+            days = _ref3.days;
+        return jsxs("div", {
+          className: classnames(classNames.contactsItem, {
+            isFooter: isFooter
+          }),
+          children: [jsx("span", {
+            children: time
+          }), "\xA0\xA0", jsx("span", {
+            className: "lightGrey",
+            children: days
+          })]
+        }, days);
+      })]
+    }), isHeader && jsx("div", {
+      className: classNames.contactsSeparator
+    }), jsxs("div", {
+      className: classnames(classNames.contactsInTouch, {
+        isFooter: isFooter
+      }, "order-3"),
+      "data-options": mangoDataOptions,
+      children: [jsxs("button", {
+        className: classnames(classNames.callUsButton, "support-call-button", {
+          isFooter: isFooter
+        }),
+        children: [jsx(PhoneCallIcon, {}), config.callUsButton]
+      }), jsx("div", {
+        className: classNames.contactsSocialWrapper,
+        children: config.socialNetworks.map(function (_ref4, i) {
+          var icon = _ref4.icon,
+              link = _ref4.link;
+          return jsx("a", {
+            href: link,
+            target: "_blank",
+            referrerPolicy: "no-referrer",
+            className: classNames.contactsSocialItem,
+            children: icon
+          }, i);
+        })
+      })]
     })]
@@ -264,0 +440,0 @@ });

dist/styles/consts.d.ts

 export declare const CONTACTS_COMPONENT_NAMESPACE = "@che/contacts";
 export declare const CONTACTS_COMPONENTS_NAMES: {
     /**
-     * Ul дропдауна контактов
+     * Кнопка позвонить
      */
-    readonly contactsList: "contactsList";
+    readonly callUsButton: "callUsButton";
     /**
-     * Li дропдауна контактов
+     * Обертка
      */
-    readonly contactsListItem: "contactsListItem";
+    readonly contactsWrapper: "contactsWrapper";
     /**
-     * Ссылка в Item контакта (телефон, email)
+     * Блок (контакты/время работы)
      */
-    readonly contactsListItemLink: "contactsListItemLink";
+    readonly contactsBlock: "contactsBlock";
     /**
-     * Item ссылок на соц сети
+     * Обертка над "позвонить" и социальными сетями
      */
-    readonly contactsListItemSocialNetworks: "contactsListItemSocialNetworks";
+    readonly contactsInTouch: "contactsInTouch";
     /**
-     * Item ссылок на соц сети
+     * Разделитель
      */
-    readonly contactsSocialNetworkLink: "contactsSocialNetworkLink";
+    readonly contactsSeparator: "contactsSeparator";
     /**
-     * Кнопка позвонить
+     * Тайтл
      */
-    readonly callUsButton: "callUsButton";
+    readonly contactsTitleWrapper: "contactsTitleWrapper";
+    /**
+     * Айтем
+     */
+    readonly contactsItem: "contactsItem";
+    /**
+     * Ссылка
+     */
+    readonly contactsLink: "contactsLink";
+    /**
+     * Обертка над социальными сетями
+     */
+    readonly contactsSocialWrapper: "contactsSocialWrapper";
+    /**
+     * Обертка над социальными сетями
+     */
+    readonly contactsSocialItem: "contactsSocialItem";
 };

dist/types.d.ts

@@ -15,2 +15,6 @@ import { ReactNode } from "react";
     label: string | number;
+    /**
+     * Сокращенный лейбл, для футера
+     */
+    compactLabel: string;
 };
@@ -21,4 +25,8 @@ declare type SocialNetwork = {
 };
+declare type AvailableTime = {
+    time: string;
+    days: string;
+};
 export interface IContacts {
-    availableTime: ReactNode;
+    availableTime: AvailableTime[];
     phones: Phone[];
@@ -25,0 +33,0 @@ email: string;

package.json

 {
 	"name": "@che-ins-ui/contacts",
-	"version": "3.2.39",
+	"version": "3.2.40",
 	"description": "<>",
@@ -26,4 +26,5 @@ "build:storybook": "src/index.ts",
 	"dependencies": {
-		"@che-ins-ui/icons": "^3.4.1",
-		"@che-ins-ui/theme": "^3.1.45",
+		"@che-ins-ui/icons": "^3.4.2",
+		"@che-ins-ui/theme": "^3.1.46",
+		"@che-ins-ui/utils": "^3.0.70",
 		"classnames": "^2.3.1"
@@ -37,3 +38,3 @@ },
 	},
-	"gitHead": "f036046b05da4f201dcf03da9522c839267ff3cc"
+	"gitHead": "90ad62deea20715e7acd6426e82e5a6dd77f512e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104324

increased by41.7%

Lines of code

993

increased by60.68%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@che-ins-ui/utils@^3.0.70

• Updated@che-ins-ui/icons@^3.4.2

• Updated@che-ins-ui/theme@^3.1.46