@sima-land/ui-nucleons 40.2.1 → 41.1.0

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;
+    @include breakpoints.up('xs') {
+      margin-bottom: 40px;
     }
   }
-  ol {
-    list-style-position: inside;
-    li::before {
+
+  // цитата
+  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;

package/upload/area.js

@@ -33,7 +33,9 @@ const cx = bind_1.default.bind(area_module_scss_1.default);
 const UploadArea = (_a) => {
     var { onSelect, className, fileRole = 'файл', formats, sizeLimit = '2 Mb', multiple, countLimit = multiple ? undefined : 1, failed, 'data-testid': testId = 'upload-area' } = _a, restProps = __rest(_a, ["onSelect", "className", "fileRole", "formats", "sizeLimit", "multiple", "countLimit", "failed", 'data-testid']);
     const secondaryInfo = (0, lodash_1.upperFirst)([
-        countLimit && countLimit > 0 && `${countLimit} ${(0, get_declination_1.default)(countLimit, ['файл', 'файла', 'файлов'])}`,
+        countLimit &&
+            countLimit > 0 &&
+            `${countLimit} ${(0, get_declination_1.default)(countLimit, ['файл', 'файла', 'файлов'])}`,
         formats && `формат ${formats}`,
         `до ${sizeLimit}`,
     ]

package/upload/utils.d.ts

@@ -16,13 +16,13 @@ declare type DnDResult<T> = {
  * @param options Опции.
  * @return Данные.
  */
-export declare const useDragAndDrop: <T extends HTMLElement = HTMLElement>({ onDrop }: DnDProps<T>) => DnDResult<T>;
+export declare const useDragAndDrop: <T extends HTMLElement = HTMLElement>({ onDrop, }: DnDProps<T>) => DnDResult<T>;
 /**
  * Возвращает функцию обработки FileList по заданным ограничениям.
  * @param props Свойства.
  * @return Функция.
  */
-export declare const getFilesPreparer: ({ multiple, countLimit, }: {
+export declare const getFilesPreparer: ({ multiple, countLimit }: {
     multiple?: boolean | undefined;
     countLimit?: number | undefined;
 }) => (list: File[] | FileList) => File[];

package/upload/utils.js

@@ -11,7 +11,7 @@ const with_prevent_1 = __importDefault(require("../helpers/with-prevent"));
  * @param options Опции.
  * @return Данные.
  */
-const useDragAndDrop = ({ onDrop }) => {
+const useDragAndDrop = ({ onDrop, }) => {
     const [active, setActive] = (0, react_1.useState)(false);
     return {
         active,
@@ -35,7 +35,7 @@ exports.useDragAndDrop = useDragAndDrop;
  * @param props Свойства.
  * @return Функция.
  */
-const getFilesPreparer = ({ multiple, countLimit, }) => (list) => {
+const getFilesPreparer = ({ multiple, countLimit }) => (list) => {
     const files = [...list];
     multiple
         ? countLimit && Number.isFinite(countLimit) && files.splice(countLimit)

package/with-hint/positioning-hint.d.ts

@@ -8,5 +8,5 @@ interface Props extends HintProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const PositioningHint: ({ children, direction, openerRef, }: Props) => JSX.Element;
+export declare const PositioningHint: ({ children, direction, openerRef }: Props) => JSX.Element;
 export {};

package/with-hint/positioning-hint.js

@@ -35,7 +35,7 @@ const cx = bind_1.default.bind(positioning_hint_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const PositioningHint = ({ children, direction, openerRef, }) => {
+const PositioningHint = ({ children, direction, openerRef }) => {
     const layer = (0, layer_1.useLayer)();
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {

package/with-hint/utils.js

@@ -16,23 +16,23 @@ exports.PlaceAt = {
     ],
     top: (hint, opener) => {
         const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x + openerRect.left + (openerRect.width / 2) - (hintRect.width / 2)}px`;
+        hint.style.left = `${correct.x + openerRect.left + openerRect.width / 2 - hintRect.width / 2}px`;
         hint.style.top = `${correct.y - SPACE + openerRect.top - hintRect.height}px`;
     },
     right: (hint, opener) => {
         const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
         hint.style.left = `${correct.x + SPACE + openerRect.right}px`;
-        hint.style.top = `${correct.y + openerRect.top + (openerRect.height / 2) - (hintRect.height / 2)}px`;
+        hint.style.top = `${correct.y + openerRect.top + openerRect.height / 2 - hintRect.height / 2}px`;
     },
     bottom: (hint, opener) => {
         const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x + openerRect.left + (openerRect.width / 2) - (hintRect.width / 2)}px`;
+        hint.style.left = `${correct.x + openerRect.left + openerRect.width / 2 - hintRect.width / 2}px`;
         hint.style.top = `${correct.y + SPACE + openerRect.bottom}px`;
     },
     left: (hint, opener) => {
         const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
         hint.style.left = `${correct.x - SPACE + openerRect.left - hintRect.width}px`;
-        hint.style.top = `${correct.y + openerRect.top + (openerRect.height / 2) - (hintRect.height / 2)}px`;
+        hint.style.top = `${correct.y + openerRect.top + openerRect.height / 2 - hintRect.height / 2}px`;
     },
 };
 /**
@@ -44,9 +44,7 @@ exports.PlaceAt = {
 const onParentScroll = (element, callback) => {
     let scrollParent = (0, get_scroll_parent_1.getScrollParent)(element);
     // прокрутка на body не работает с addEventListener, https://stackoverflow.com/a/43632204/13166471
-    scrollParent = scrollParent === document.body
-        ? document
-        : scrollParent;
+    scrollParent = scrollParent === document.body ? document : scrollParent;
     return (0, on_1.default)(scrollParent, 'scroll', callback);
 };
 exports.onParentScroll = onParentScroll;

package/with-in-viewport-observer/index.js

@@ -32,7 +32,7 @@ function makeInViewportObserverHOC(observersDataList) {
          * @param props Свойства для оборачиваемого компонента.
          * @return Компонент высшего порядка.
          */
-        const Wrapper = (props) => react_1.default.createElement(Component, Object.assign({}, { [propName]: addObserve }, props));
+        const Wrapper = (props) => (react_1.default.createElement(Component, Object.assign({}, { [propName]: addObserve }, props)));
         Wrapper.displayName = `withInViewportObserver(${Component.displayName || Component.name})`;
         return Wrapper;
     };

package/screen/screen-layout.d.ts

@@ -1,57 +0,0 @@
-import React from 'react';
-import { NavBarProps } from '../nav-bar';
-import { OrNil } from './utils';
-export interface CallbackData {
-    contentElement: OrNil<HTMLDivElement>;
-}
-export interface ScreenLayoutProps {
-    childrenRef?: React.MutableRefObject<OrNil<HTMLDivElement>> | React.RefCallback<OrNil<HTMLDivElement>>;
-    footer?: React.ReactNode;
-    fullScrollThreshold?: number;
-    navBarProps?: NavBarProps;
-    onBack?: (data: CallbackData) => void;
-    onClose?: (data: CallbackData) => void;
-    onFullScroll?: (data: CallbackData) => void;
-    subtitle?: string;
-    title?: string;
-    withBackButton?: boolean;
-    withCloseButton?: boolean;
-    withDivideHeader?: boolean;
-    withHeader?: boolean;
-}
-/**
- * Разметка содержимого компонента Screen.
- * @param props Свойства.
- * @param props.children Содержимое.
- * @param props.childrenRef Ref для элемента содержимого.
- * @param props.footer Содержимое подвала.
- * @param props.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @param props.navBarProps Свойства компонента NavBar.
- * @param props.onBack Сработает при клике на кнопку "назад".
- * @param props.onClose Сработает при клике на крест.
- * @param props.onFullScroll Сработает при полной прокрутке контента.
- * @param props.subtitle Подзаголовок.
- * @param props.title Заголовок.
- * @param props.withBackButton Нужно ли выводить кнопку "назад".
- * @param props.withCloseButton Нужно ли выводить закрывающий крест.
- * @param props.withDivideHeader Нужно ли рисовать черту между шапкой и основным содержимым.
- * @param props.withHeader Нужно ли выводить шапку с заголовком и кнопками.
- * @return Элемент.
- */
-export declare const ScreenLayout: React.FC<ScreenLayoutProps>;
-/**
- * Возвращает функцию сохранения аргумента в ref-контейнер.
- * Возвращаемая функция выполняет подписку на "scroll" и вызывает callback в момент полной прокрутки.
- * @param options Опции.
- * @param options.elementRef Ref-контейнер для элемента.
- * @param options.unsubscribeRef Ref-контейнер для функции отписки от "scroll".
- * @param options.onFullScroll Сработает при полной прокрутке.
- * @param options.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @return Функция сохранения аргумента в ref-контейнер.
- */
-export declare const createTakeContentRef: ({ elementRef, unsubscribeRef, onFullScroll, fullScrollThreshold: threshold, }: {
-    elementRef: React.MutableRefObject<OrNil<HTMLDivElement>>;
-    unsubscribeRef: React.MutableRefObject<undefined | (() => void)>;
-    onFullScroll?: ((data: CallbackData) => void) | undefined;
-    fullScrollThreshold?: number | undefined;
-}) => (element?: HTMLDivElement | undefined) => void;