@sima-land/ui-nucleons 40.2.2 → 40.3.0

package/alert/index.d.ts

@@ -18,6 +18,8 @@ export interface AlertProps extends WithBodyScrollLock {
     withDivideNavBar?: boolean;
     /** Нужна ли шапка. */
     withNavBar?: boolean;
+    /** Будет вызвана при закрытии окна нажатием на затемнение. */
+    onClose?: () => void;
 }
 /**
  * Компонент модального диалога.

package/alert/index.js

@@ -62,11 +62,11 @@ exports.Alert = Alert;
  * @param props Свойства.
  * @return Элемент.
  */
-const AlertInner = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, }) => {
+const AlertInner = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const rootRef = (0, react_1.useRef)(null);
     const layer = (0, layer_1.useLayer)();
     (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, scrollDisableOptions);
-    return (react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer } },
+    return (react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
         react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
             withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
             react_1.default.createElement("div", { className: cx('main') }, children),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "40.2.2",
+  "version": "40.3.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "@testing-library/react": "^12.0.0",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.168",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
@@ -50,7 +50,7 @@
     "@typescript-eslint/parser": "^4.15.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-loader": "^8.0.5",
-    "babel-preset-jest": "^26.6.2",
+    "babel-preset-jest": "^27.2.0",
     "classnames": "^2.2.6",
     "copyfiles": "^2.4.1",
     "css-loader": "^5.0.1",
@@ -62,8 +62,8 @@
     "file-loader": "^6.2.0",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-css-modules-transform": "^4.2.0",
+    "jest": "^27.3.1",
+    "jest-css-modules-transform": "^4.3.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
@@ -74,7 +74,7 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.8.0",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^27.0.7",
     "typescript": "^4.4.3",
     "typescript-plugin-css-modules": "^3.2.0",
     "webpack": "^5.11.0"

package/unknown-content/index.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 export interface UnknownContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Строка с html-версткой. */
-    markup: string;
+    markup?: string;
+    /** Содержимое. */
+    children?: React.ReactNode;
 }
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const UnknownContent: ({ markup, className }: UnknownContentProps) => JSX.Element;
+export declare const UnknownContent: ({ markup, children, className }: UnknownContentProps) => JSX.Element;

package/unknown-content/index.js

@@ -1,16 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnknownContent = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const unknown_content_module_scss_1 = __importDefault(require("./unknown-content.module.scss"));
+const utils_1 = require("./utils");
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-const UnknownContent = ({ markup, className }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className), dangerouslySetInnerHTML: { __html: markup } }));
+const UnknownContent = ({ markup, children, className }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        ref.current && (0, utils_1.setTableRowLabels)(ref.current);
+    });
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className) }, (children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }))));
+};
 exports.UnknownContent = UnknownContent;

package/unknown-content/unknown-content.module.scss

@@ -1,4 +1,5 @@
 @use '../colors';
+@use '../breakpoints';
 
 .root {
   color: colors.$gray87;
@@ -12,149 +13,260 @@
     padding: 0;
   }
 
-  // оформление заголовков
-  h1 {
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 40px;
+  // ссылки
+  a {
+    color: colors.$brand-blue;
+    text-decoration: none;
+    &:hover {
+      color: colors.$brand-deep-blue;
+    }
   }
-  h2 {
+
+  // параграф
+  p {
+    margin-bottom: 24px;
+  }
+
+  // курсив
+  i,
+  em {
+    font-style: normal; // да, вот так по гайдам
+  }
+
+  // заголовки
+  h1 {
     font-weight: 600;
     font-size: 24px;
     line-height: 32px;
+    margin-bottom: 32px;
   }
-  h3 {
+  h2 {
     font-weight: 600;
     font-size: 20px;
     line-height: 28px;
+    margin-bottom: 24px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 24px;
   }
   h4 {
-    font-weight: 700;
+    font-weight: 600;
     font-size: 16px;
     line-height: 24px;
+    color: colors.$gray38;
+    margin-bottom: 16px;
   }
   h5 {
     font-weight: normal;
     font-size: 14px;
     line-height: 20px;
+    color: colors.$gray38;
+    margin-bottom: 24px;
   }
-
-  // отступы от заголовков
-  * + h2 {
-    margin-top: 80px;
-  }
-  * + h3 {
-    margin-top: 64px;
-  }
-  * + h4 {
-    margin-top: 24px;
-  }
-  h1 + * {
-    margin-top: 80px;
-  }
-  h2 + * {
-    margin-top: 32px;
-  }
-  h3 + * {
-    margin-top: 24px;
-  }
-  h4 + * {
-    margin-top: 16px;
+  h6 {
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 24px;
   }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    + img,
-    + video {
-      margin-top: 48px;
+
+  @include breakpoints.up('xs') {
+    h1 {
+      font-weight: bold;
+      font-size: 32px;
+      line-height: 40px;
+      margin-bottom: 32px;
+    }
+    h2 {
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 32px;
+      margin-bottom: 24px;
+    }
+    h3 {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 24px;
+    }
+    h4 {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+      color: colors.$gray38;
+      margin-bottom: 16px;
+    }
+    h5 {
+      font-size: 14px;
+      line-height: 20px;
+      color: colors.$gray38;
+      margin-bottom: 24px;
+    }
+    h6 {
+      font-size: 12px;
+      line-height: 16px;
     }
-  }
-  h1 + h2 {
-    margin-top: 80px;
-  }
-  h2 + h3 {
-    margin-top: 24px;
-  }
-  h3 + h4 {
-    margin-top: 24px;
   }
 
-  // абзацы
-  p + p {
-    margin-top: 16px;
+  // списки
+  ol,
+  ul {
+    margin-bottom: 24px;
+    li + li {
+      margin-top: 16px;
+    }
   }
-
-  // ссылки
-  a {
-    color: colors.$brand-blue;
-    text-decoration: none;
-    &:hover {
-      color: colors.$brand-deep-blue;
+  ol {
+    display: block;
+    counter-reset: ordered-list;
+    list-style: none;
+    li {
+      display: flex;
+      flex-direction: row;
+      list-style-position: inside;
+      counter-increment: ordered-list;
+    }
+    li::before {
+      content: counter(ordered-list) '.';
+      display: block;
+      flex-grow: 0;
+      margin-right: 12px;
     }
   }
-
-  // курсив
-  i,
-  em {
-    font-style: normal; // да, вот так по гайдам
-    color: colors.$gray38;
+  ul {
+    list-style: none;
+    li {
+      display: flex;
+      flex-direction: row;
+      list-style-position: inside;
+      counter-increment: ordered-list;
+    }
+    li::before {
+      display: block;
+      content: '—';
+      margin-right: 12px;
+    }
   }
 
   // таблицы
   table {
-    border-collapse: collapse;
     width: 100%;
-    margin: 32px 0;
-    thead {
-      color: colors.$gray38;
+    margin-bottom: 40px;
+    border-collapse: collapse;
+  }
+  @include breakpoints.up('xs') {
+    table {
+      thead {
+        color: colors.$gray38;
+        font-size: 14px;
+        line-height: 20px;
+        td,
+        th {
+          padding-top: 0;
+        }
+      }
       td {
-        padding-top: 0;
+        border: 0;
+        padding: 24px 0;
+
+        // накидываем именно сюда чтобы работало в Safari
+        box-shadow: inset 0 -1px 0 colors.$gray12;
+        &:not(:last-child) {
+          padding-right: 32px;
+        }
       }
     }
-    td {
-      border: 0;
-      padding: 24px 0;
-
-      // накидываем именно сюда чтобы работало в Safari
+  }
+  @include breakpoints.down('xs') {
+    table,
+    tr,
+    th,
+    td,
+    thead,
+    tbody {
+      display: block;
+    }
+    table {
+      box-shadow: inset 0 1px 0 colors.$gray12;
+    }
+    thead {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+    tr {
+      padding: 32px 0;
       box-shadow: inset 0 -1px 0 colors.$gray12;
-      &:not(:last-child) {
-        padding-right: 48px;
-      }
     }
-    tbody td:nth-child(2) {
-      font-weight: 600; // @todo это видимо для какой-то конкретной таблицы было сделано, надо бы убрать
+    td + td {
+      margin-top: 24px;
+    }
+    td::before {
+      content: attr(data-table-column-title);
+      display: block;
+      font-size: 14px;
+      line-height: 20px;
+      color: colors.$gray38;
+      margin-bottom: 8px;
     }
   }
 
-  // списки
-  ul {
-    list-style: none;
-    li + li {
-      margin-top: 16px;
-    }
-    li::before {
-      display: inline-block;
-      content: '—';
-      margin-right: 10px;
-    }
+  // медиа
+  img,
+  video {
+    display: block;
+    max-width: 100%;
+    margin-bottom: 32px;
   }
-  ol {
-    list-style-position: inside;
-    li::before {
+  @include breakpoints.up('xs') {
+    margin-bottom: 40px;
+  }
+
+  // цитата
+  blockquote {
+    position: relative;
+    display: block;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    padding-left: 40px;
+    &::before {
       content: '';
-      width: 8px;
-      display: inline-block;
+      position: absolute;
+      left: 0;
+
+      /* stylelint-disable-next-line function-url-quotes */
+      background-image: url('data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="32" height="32"/%3E%3Cpath d="M15.1665 5.33301H8.36963L2.6665 26.0361H12.1196L15.1665 5.33301ZM28.9165 5.33301H22.1196L16.4165 26.0361H25.8696L28.9165 5.33301Z" fill="%23E0E0E0"/%3E%3C/svg%3E%0A');
+      width: 32px;
+      height: 32px;
     }
-    li + li {
+    @include breakpoints.up('xs') {
+      font-size: 20px;
+      line-height: 28px;
+      padding-left: 72px;
+      &::before {
+        /* stylelint-disable-next-line function-url-quotes */
+        background-image: url('data:image/svg+xml,%3Csvg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="48" height="48"/%3E%3Cpath d="M22.75 8H12.5547L4 39.0547H18.1797L22.75 8ZM43.375 8H33.1797L24.625 39.0547H38.8047L43.375 8Z" fill="%23E0E0E0"/%3E%3C/svg%3E%0A');
+        width: 48px;
+        height: 48px;
+      }
+    }
+    * {
+      margin: 0;
+    }
+    cite {
+      display: block;
       margin-top: 16px;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: colors.$gray38;
     }
   }
-  ul,
-  ol {
-    margin: 16px 0;
-  }
 
   // горизонтальная черта
   hr {
@@ -162,27 +274,9 @@
     width: 100%;
     height: 1px;
     background: colors.$gray12;
-  }
-  * + hr {
-    margin-top: 48px;
-  }
-
-  // цитата
-  blockquote {
-    display: block;
-    padding-left: 32px;
-    border-left: 4px solid colors.$brand-blue;
-    margin: 40px 0;
-  }
-
-  // @todo неопознанные стили оставшиеся при переносе из карточки товара, выяснить что это и зачем нужно
-  div {
-    font-weight: 600;
-    + p {
-      margin-top: 8px;
+    margin-bottom: 32px;
+    @include breakpoints.up('xs') {
+      margin-bottom: 40px;
     }
   }
-  p + div {
-    margin-top: 16px;
-  }
 }

package/unknown-content/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ищет в заданном элементе все ячейки таблиц и задает им атрибут "data-table-column-title".
+ * Необходимо для стилизации адаптивных таблиц по гайдам.
+ * @param element Элемент.
+ */
+export declare const setTableRowLabels: (element: Element) => void;

package/unknown-content/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setTableRowLabels = void 0;
+/**
+ * Ищет в заданном элементе все ячейки таблиц и задает им атрибут "data-table-column-title".
+ * Необходимо для стилизации адаптивных таблиц по гайдам.
+ * @param element Элемент.
+ */
+const setTableRowLabels = (element) => {
+    element.querySelectorAll('tbody td').forEach(td => {
+        var _a;
+        // считаем, что parentNode есть всегда т.к. селектор это подразумевает
+        const index = [...td.parentNode.children].indexOf(td);
+        // считаем, что index не может быть равен -1 т.к. поиск внутри родительского элемента
+        td.setAttribute('data-table-column-title', ((_a = td.closest('table').querySelector(`thead td:nth-child(${index + 1})`)) === null || _a === void 0 ? void 0 : _a.textContent) || '');
+    });
+};
+exports.setTableRowLabels = setTableRowLabels;