@sima-land/moleculas 13.1.1 → 13.2.1

package/common/components/product-info/parts.js

@@ -104,13 +104,13 @@ const Prices = ({ price, oldPrice, currencyGrapheme, unavailableReason = 'Тов
  */
 const Title = ({ children, href, onClick }) => {
     const { restriction } = (0, react_1.useContext)(utils_1.ProductInfoContext);
-    return restriction === 'adult' ? (react_1.default.createElement("span", { className: cx('adult-info'), "data-testid": 'product-info:adult-warning' }, "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043E \u0432\u044B \u0441\u0442\u0430\u0440\u0448\u0435 18 \u043B\u0435\u0442, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C \u0442\u043E\u0432\u0430\u0440.")) : (react_1.default.createElement(link_1.Link, { onClick: onClick, className: cx('link', 'line-clamp'), href: href, color: 'gray87', "data-testid": 'product-info:name-link' }, children));
+    return restriction === 'adult' ? (react_1.default.createElement("span", { className: cx('adult-info'), "data-testid": 'product-info:adult-warning' }, "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043E \u0432\u044B \u0441\u0442\u0430\u0440\u0448\u0435 18 \u043B\u0435\u0442, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C \u0442\u043E\u0432\u0430\u0440.")) : (react_1.default.createElement(link_1.Link, { onClick: onClick, className: cx('link', 'line-clamp'), href: href, color: 'basic-gray87', "data-testid": 'product-info:name-link' }, children));
 };
 /** Слот для вывода ссылки торговой марки.
  * @param props Свойства.
  * @return Элемент.
  */
-const TrademarkLink = ({ href, children, onClick, }) => (react_1.default.createElement(link_1.Link, { className: cx('trademark-link'), href: href, children: children, onClick: onClick, color: 'brand-blue', "data-testid": 'product-info:trademark-link' }));
+const TrademarkLink = ({ href, children, onClick, }) => (react_1.default.createElement(link_1.Link, { className: cx('trademark-link'), href: href, children: children, onClick: onClick, color: 'basic-blue', "data-testid": 'product-info:trademark-link' }));
 /**
  * Слот - футер.
  * @param props Свойства.
@@ -133,7 +133,7 @@ const CartControl = ({ children, stepText, markupText, loading, }) => (react_1.d
  */
 const AdultConfirmButton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement(link_1.Link, Object.assign({}, props, { pseudo: true, color: 'brand-blue', className: cx('text-button', className), "data-testid": 'product-info:adult-confirm-button' }), "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C"));
+    return (react_1.default.createElement(link_1.Link, Object.assign({}, props, { pseudo: true, color: 'basic-blue', className: cx('text-button', className), "data-testid": 'product-info:adult-confirm-button' }), "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C"));
 };
 /**
  * Кнопка "В лист ожидания".
@@ -142,7 +142,7 @@ const AdultConfirmButton = (_a) => {
  */
 const WaitListAddButton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement(link_1.Link, Object.assign({}, props, { pseudo: true, color: 'brand-blue', className: cx('text-button', className), "data-testid": 'product-info:wait-list-add-button' }), "\u0412 \u043B\u0438\u0441\u0442 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F"));
+    return (react_1.default.createElement(link_1.Link, Object.assign({}, props, { pseudo: true, color: 'basic-blue', className: cx('text-button', className), "data-testid": 'product-info:wait-list-add-button' }), "\u0412 \u043B\u0438\u0441\u0442 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F"));
 };
 /**
  * Текст со ссылкой "Товар добавлен в лист ожидания".
@@ -154,7 +154,7 @@ const WaitListAddedLink = (_a) => {
     return (react_1.default.createElement("span", { className: cx('wait-list-added-text') },
         "\u0422\u043E\u0432\u0430\u0440 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D \u0432",
         ' ',
-        react_1.default.createElement(link_1.Link, Object.assign({}, props, { color: 'brand-blue', className: cx('text-button', className), "data-testid": 'product-info:wait-list-added-link' }),
+        react_1.default.createElement(link_1.Link, Object.assign({}, props, { color: 'basic-blue', className: cx('text-button', className), "data-testid": 'product-info:wait-list-added-link' }),
             "\u043B\u0438\u0441\u0442",
             '\u00A0',
             "\u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F")));

package/common/components/product-info/product-info.module.scss

@@ -6,10 +6,20 @@
   max-width: 100%;
   margin-bottom: 8px;
   overflow: hidden;
-  aspect-ratio: 1 / 1;
+
+  // формируем соотношение сторон 1 / 1
+  &::before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+    pointer-events: none;
+  }
 }
 
 .image-link {
+  position: absolute;
+  top: 0;
+  left: 0;
   display: block;
   height: 100%;
 }
@@ -19,12 +29,10 @@
   object-fit: contain;
   width: 100%;
   height: 100%;
-  &:not(.adult) {
+  &.adult {
     position: absolute;
     top: 0;
     left: 0;
-  }
-  &.adult {
     opacity: 0.2;
     filter: blur(24px);
     pointer-events: none;
@@ -38,7 +46,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  fill: colors.$gray38;
+  fill: colors.$basic-gray38;
 }
 
 .image-buttons {
@@ -72,7 +80,7 @@
     display: none;
   }
   &:hover {
-    fill: colors.$gray54;
+    fill: colors.$basic-gray54;
   }
   @include breakpoints.down('ml') {
     --gutter: 4px;
@@ -131,7 +139,7 @@
   max-width: 100%;
   font-size: 14px;
   line-height: 20px;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
 }
 
 .trademark-link {
@@ -167,7 +175,7 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
   @include breakpoints.down('ml') {
     font-size: 14px;
     line-height: 20px;
@@ -181,13 +189,13 @@
   margin-top: 16px;
   &.loading {
     .control {
-      background: colors.$gray4;
+      background: colors.$basic-gray4;
       border-radius: 4px;
     }
     .unit-text::before {
       content: '';
       display: block;
-      background: colors.$gray4;
+      background: colors.$basic-gray4;
       border-radius: 4px;
       width: 48px;
       height: 16px;
@@ -205,12 +213,12 @@
   padding-top: 12px; // чтобы при переносе на следующую строку правильно отступил от кнопки
   font-size: 12px;
   line-height: 16px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
 }
 
 .bottom-text {
   margin-top: 12px;
   font-size: 12px;
   line-height: 16px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
 }

package/common/components/quick-view-button/quick-view-button.module.scss

@@ -4,9 +4,9 @@
   display: block;
   overflow: visible;
   stroke-width: 1;
-  stroke: colors.$gray4;
-  fill: colors.$gray87;
+  stroke: colors.$basic-gray4;
+  fill: colors.$basic-gray87;
   &:hover {
-    fill: colors.$gray54;
+    fill: colors.$basic-gray54;
   }
 }

package/common/components/wish-button/wish-button.module.scss

@@ -4,9 +4,9 @@
   overflow: visible;
   stroke-width: 1;
   stroke: #f5f5f5;
-  fill: colors.$gray87;
+  fill: colors.$basic-gray87;
   &:hover {
-    fill: colors.$gray54;
+    fill: colors.$basic-gray54;
   }
   &.checked {
     fill: colors.$additional-red;

package/desktop/components/breadcrumbs/breadcrumbs.module.scss

@@ -63,12 +63,12 @@ $line-gutter: 12px;
     margin-top: 8px;
   }
   .active {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
 }
 
 .sibling-placeholder {
-  background: colors.$gray4;
+  background: colors.$basic-gray4;
   border-radius: 4px;
   height: 12px;
   & + & {

package/desktop/components/breadcrumbs/index.js

@@ -55,7 +55,7 @@ const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
             return (0, on_1.default)(window, 'mousedown', togglePopup.bind(null, false));
         }
     }, [withPopup]);
-    const selfName = (react_1.default.createElement(link_1.Link, { color: 'gray87', href: data.url }, data.name));
+    const selfName = (react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: data.url }, data.name));
     return (react_1.default.createElement("div", { "data-testid": 'breadcrumb', className: cx('breadcrumb') },
         selfName,
         data.siblings && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -75,5 +75,5 @@ const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
                         react_1.default.createElement(square_arrow_down_svg_1.default, { "data-testid": 'breadcrumb:siblings-closer', className: cx('toggle-icon', 'close'), onClick: () => togglePopup(false) })),
                     react_1.default.createElement("ul", { className: cx('siblings') },
                         data.siblings.state === 'fetching' && (react_1.default.createElement(react_1.default.Fragment, null, (0, lodash_1.times)(8).map(index => (react_1.default.createElement("div", { key: index, className: cx('sibling-placeholder') }))))),
-                        data.siblings.state === 'ready' && (react_1.default.createElement(react_1.default.Fragment, null, (_a = data.siblings.data) === null || _a === void 0 ? void 0 : _a.map((sibling, index) => (react_1.default.createElement("li", { key: index, className: cx('sibling'), "data-testid": 'breadcrumb-sibling' }, isSiblingActive(sibling) ? (react_1.default.createElement("span", { className: cx('active') }, sibling.name)) : (react_1.default.createElement(link_1.Link, { color: 'gray87', className: cx('link'), href: sibling.url, children: sibling.name }))))))))))))));
+                        data.siblings.state === 'ready' && (react_1.default.createElement(react_1.default.Fragment, null, (_a = data.siblings.data) === null || _a === void 0 ? void 0 : _a.map((sibling, index) => (react_1.default.createElement("li", { key: index, className: cx('sibling'), "data-testid": 'breadcrumb-sibling' }, isSiblingActive(sibling) ? (react_1.default.createElement("span", { className: cx('active') }, sibling.name)) : (react_1.default.createElement(link_1.Link, { color: 'basic-gray87', className: cx('link'), href: sibling.url, children: sibling.name }))))))))))))));
 };

package/desktop/components/gallery-modal/components/all-round-view.module.scss

@@ -37,16 +37,16 @@
     border: 0;
     padding: 0;
     color: #fff;
-    background: colors.$brand-blue;
+    background: colors.$basic-blue;
   }
   .pause:not(:hover) {
-    background: rgba(colors.$brand-blue, 0.4);
+    background: rgba(colors.$basic-blue, 0.4);
   }
   .turn {
     width: 32px;
     height: 32px;
-    border: 2px solid colors.$gray24;
-    color: colors.$gray24;
+    border: 2px solid colors.$basic-gray24;
+    color: colors.$basic-gray24;
     background: transparent;
     &:disabled {
       opacity: 0;

package/desktop/components/gallery-modal/components/review-info.module.scss

@@ -13,7 +13,7 @@
   margin-left: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
 }
 
 .link {

package/desktop/components/gallery-modal/components/thumbnail.module.scss

@@ -1,7 +1,7 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  --thumbnail-color: #{colors.$gray12};
+  --thumbnail-color: #{colors.$basic-gray12};
   background: transparent;
   border-radius: 4px;
   border: 0;
@@ -27,10 +27,10 @@
     width: 100%;
   }
   &.iconic:not(.checked):hover {
-    --thumbnail-color: #{colors.$gray54};
+    --thumbnail-color: #{colors.$basic-gray54};
   }
   &.checked {
-    --thumbnail-color: #{colors.$brand-blue};
+    --thumbnail-color: #{colors.$basic-blue};
   }
   .image-overlay {
     height: 100%;

package/desktop/components/modifiers/button/modifier-button.module.scss

@@ -21,13 +21,13 @@
     width: 100%;
     height: 100%;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px colors.$gray12;
+    box-shadow: inset 0 0 0 1px colors.$basic-gray12;
   }
   &:hover::before {
-    box-shadow: inset 0 0 0 2px colors.$gray12;
+    box-shadow: inset 0 0 0 2px colors.$basic-gray12;
   }
   &.selected::before {
-    box-shadow: inset 0 0 0 2px colors.$brand-blue;
+    box-shadow: inset 0 0 0 2px colors.$basic-blue;
   }
 }
 
@@ -67,12 +67,12 @@
   line-height: 16px;
   border-radius: 32px;
   background-color: #fff;
-  color: colors.$gray54;
+  color: colors.$basic-gray54;
   font-size: 12px;
   font-weight: 500;
   box-sizing: border-box;
   &.with-count {
-    background-color: colors.$brand-blue;
+    background-color: colors.$basic-blue;
     color: #fff;
   }
   &:not(.with-count) {

package/desktop/components/modifiers/group/index.d.ts

@@ -2,22 +2,35 @@
 import React, { Component } from 'react';
 import { ModifierButtonProps, Modifier } from '../button';
 declare type ModifierPredicate<T> = (item: Modifier) => T;
-interface State {
+interface ModifiersGroupState {
     needShowAll: boolean;
     hasHiddenNodes: boolean;
     lastVisibleChildIndex: number | null;
 }
 export interface ModifiersGroupProps {
+    /** Список модификаторов. */
     items?: Modifier[];
+    /** Флаг необходимости отображения всех модификаторов. */
+    needShowAll?: boolean;
+    /** Будет вызвана при выборе модификатора, получит сам модификатор. */
     onSelectItem?: (item: Modifier, selected: boolean) => void;
+    /** Возвращает тип модификатора ("text" или "image", по умолчанию "text"). */
     getItemType?: ModifierPredicate<ModifierButtonProps['type']>;
+    /** Возвращает число с количеством модификатора (по умолчанию свойство "count"). */
     getItemCount?: ModifierPredicate<number>;
+    /** Возвращает цвет модификатора (по умолчанию свойство "color"). */
     getItemColor?: ModifierPredicate<string>;
+    /** Возвращает содержимое модификатора (по умолчанию свойство "content"). */
     getItemContent?: ModifierPredicate<string>;
+    /** Показывает, выбран ли модификатор (по умолчанию свойство "selected"). */
     isSelectedItem?: ModifierPredicate<boolean>;
+    /** Возвращает URL изображения модификатора (по умолчанию свойство "image"). */
     getItemImage?: ModifierPredicate<string>;
+    /** Имеет ли товар уценку. */
     isMarkdown?: ModifierPredicate<boolean>;
+    /** Сработает при нажатии на кнопку отображения всех модификаторов. */
     onClickShowAll?: () => void;
+    /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
 /**
@@ -27,24 +40,12 @@ export interface ModifiersGroupProps {
  */
 export declare const createHiddenNodeIndexFinder: (container: HTMLElement) => (childNode: HTMLElement) => boolean;
 /**
- * Возвращает компонент списка модификаторов.
- * @param {Object} props Свойства компонента.
- * @param {Array} props.items Список модификаторов.
- * @param {Function} [props.getItemType] Возвращает тип модификатора ("text" или "image", по умолчанию "text").
- * @param {Function} [props.getItemCount] Возвращает число с количеством модификатора (по умолчанию свойство "count").
- * @param {Function} [props.getItemColor] Возвращает цвет модификатора (по умолчанию свойство "color").
- * @param {Function} [props.getItemContent] Возвращает содержимое модификатора (по умолчанию свойство "content").
- * @param {Function} [props.isSelectedItem] Показывает, выбран ли модификатор (по умолчанию свойство "selected").
- * @param {Function} [props.onSelectItem] Будет вызвана при выборе модификатора, получит сам модификатор.
- * @param {Function} [props.getItemImage] Возвращает URL изображения модификатора (по умолчанию свойство "image").
- * @param {boolean} [props.needShowAll] Флаг необходимости отображения всех модификаторов.
- * @param {Function} [props.onClickShowAll] Сработает при нажатии на кнопку отображения всех модификаторов.
- * @param {Function} [props.isMarkdown] Имеет ли товар уценку.
+ * Компонент списка модификаторов.
  */
-export declare class ModifiersGroup extends Component<ModifiersGroupProps, State> {
+export declare class ModifiersGroup extends Component<ModifiersGroupProps, ModifiersGroupState> {
     removeGlobalListener: any;
     state: {
-        needShowAll: any;
+        needShowAll: boolean;
         hasHiddenNodes: boolean;
         lastVisibleChildIndex: null;
     };

package/desktop/components/modifiers/group/index.js

@@ -56,19 +56,7 @@ const defaultIsSelectedItem = (0, prop_1.default)('selected');
 const defaultGetItemImage = (0, prop_1.default)('image');
 const defaultGetIsMarkdown = (0, prop_1.default)('isMarkdown');
 /**
- * Возвращает компонент списка модификаторов.
- * @param {Object} props Свойства компонента.
- * @param {Array} props.items Список модификаторов.
- * @param {Function} [props.getItemType] Возвращает тип модификатора ("text" или "image", по умолчанию "text").
- * @param {Function} [props.getItemCount] Возвращает число с количеством модификатора (по умолчанию свойство "count").
- * @param {Function} [props.getItemColor] Возвращает цвет модификатора (по умолчанию свойство "color").
- * @param {Function} [props.getItemContent] Возвращает содержимое модификатора (по умолчанию свойство "content").
- * @param {Function} [props.isSelectedItem] Показывает, выбран ли модификатор (по умолчанию свойство "selected").
- * @param {Function} [props.onSelectItem] Будет вызвана при выборе модификатора, получит сам модификатор.
- * @param {Function} [props.getItemImage] Возвращает URL изображения модификатора (по умолчанию свойство "image").
- * @param {boolean} [props.needShowAll] Флаг необходимости отображения всех модификаторов.
- * @param {Function} [props.onClickShowAll] Сработает при нажатии на кнопку отображения всех модификаторов.
- * @param {Function} [props.isMarkdown] Имеет ли товар уценку.
+ * Компонент списка модификаторов.
  */
 class ModifiersGroup extends react_1.Component {
     constructor() {

package/desktop/components/modifiers/group/modifiers-group.module.scss

@@ -28,7 +28,7 @@
 
 .show-all-button {
   width: $minSize;
-  color: colors.$brand-blue;
+  color: colors.$basic-blue;
 }
 
 .not-display {

package/desktop/components/person-modal/index.js

@@ -28,7 +28,7 @@ const PersonModal = ({ name, appointment, photoUrl, email, skype, social, phoneH
                 react_1.default.createElement(box_1.Box, { marginBottom: 6 },
                     react_1.default.createElement(user_1.UserAvatar, { title: name, imageUrl: photoUrl, size: 104 })),
                 react_1.default.createElement(box_1.Box, { marginBottom: 1 },
-                    react_1.default.createElement(text_1.Text, { color: 'gray38', size: 14, weight: 400 }, appointment)),
+                    react_1.default.createElement(text_1.Text, { color: 'basic-gray38', size: 14, weight: 400 }, appointment)),
                 react_1.default.createElement("div", { className: cx('name') }, name),
                 arbitraryLinkProps && (react_1.default.createElement(box_1.Box, { marginTop: 2 },
                     react_1.default.createElement(text_1.Text, { size: 12, weight: 600 },
@@ -36,18 +36,18 @@ const PersonModal = ({ name, appointment, photoUrl, email, skype, social, phoneH
                 react_1.default.createElement("div", { className: cx('contacts') },
                     email && (react_1.default.createElement("span", { className: cx('contacts-item') },
                         'Email: ',
-                        react_1.default.createElement(link_1.Link, { color: 'gray87', href: `mailto:${email}`, children: email }))),
+                        react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: `mailto:${email}`, children: email }))),
                     Array.isArray(social) && social.length > 0 && (react_1.default.createElement("span", { className: cx('contacts-item') },
                         "\u0421\u043E\u0446. \u0441\u0435\u0442\u0438:",
                         ' ',
-                        social.map((props, key) => (react_1.default.createElement(link_1.Link, Object.assign({ className: cx('inline'), key: key, color: 'gray87', target: '_blank', rel: 'nofollow' }, props)))))),
+                        social.map((props, key) => (react_1.default.createElement(link_1.Link, Object.assign({ className: cx('inline'), key: key, color: 'basic-gray87', target: '_blank', rel: 'nofollow' }, props)))))),
                     skype && (react_1.default.createElement("span", { className: cx('contacts-item') },
                         'Skype: ',
-                        react_1.default.createElement(link_1.Link, { color: 'gray87', href: `skype:${skype}`, children: skype }))),
+                        react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: `skype:${skype}`, children: skype }))),
                     phoneText && (react_1.default.createElement("span", { className: cx('contacts-item') },
-                        react_1.default.createElement(link_1.Link, { color: 'gray87', href: phoneHref, children: phoneText }))),
+                        react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: phoneHref, children: phoneText }))),
                     secondPhoneText && (react_1.default.createElement("span", { className: cx('contacts-item') },
-                        react_1.default.createElement(link_1.Link, { color: 'gray87', href: secondPhoneHref, children: secondPhoneText })))))),
+                        react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: secondPhoneHref, children: secondPhoneText })))))),
         react_1.default.createElement(modal_1.Modal.Footer, { divided: true },
             react_1.default.createElement(clean_buttons_1.Clean.Group, null,
                 react_1.default.createElement(clean_buttons_1.Clean.Button, { onClick: onClose }, "\u0417\u0430\u043A\u0440\u044B\u0442\u044C")))));

package/desktop/components/person-modal/person-modal.module.scss

@@ -29,7 +29,7 @@
   font-weight: normal;
   font-size: 14px;
   line-height: 20px;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   & + & {
     margin-top: 8px;
   }

package/desktop/components/promotion-card/index.module.scss

@@ -26,7 +26,7 @@
   position: relative;
   width: 100%;
   padding-top: variables.$banner-height;
-  background: colors.$gray8;
+  background: colors.$basic-gray8;
   border-radius: 8px 8px 0 0;
   overflow: hidden;
 
@@ -52,7 +52,7 @@
   font-weight: bold;
   font-size: 48px;
   line-height: 60px;
-  color: colors.$gray76;
+  color: colors.$basic-gray76;
   padding: 24px;
   @include breakpoints.down('xs') {
     padding: 16px;
@@ -61,7 +61,7 @@
 
 .info {
   padding: 16px;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
 }
 
 .header {
@@ -82,7 +82,7 @@
 .subtitle {
   font-size: 14px;
   line-height: 20px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   margin-top: 4px;
   display: -webkit-box;
   -webkit-line-clamp: 2;

package/desktop/components/promotion-card/placeholder.module.scss

@@ -2,7 +2,7 @@
 @use './variables';
 
 .part {
-  background: colors.$gray4;
+  background: colors.$basic-gray4;
   border-radius: 4px;
   & + & {
     margin-top: 12px;

package/mobile/components/breadcrumbs/breadcrumbs.module.scss

@@ -17,6 +17,6 @@
   &:not(:last-child)::after {
     content: '/';
     margin-left: 4px;
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
   }
 }

package/mobile/components/breadcrumbs/index.js

@@ -7,5 +7,5 @@ exports.Breadcrumbs = void 0;
 const link_1 = require("@sima-land/ui-nucleons/link");
 const react_1 = __importDefault(require("react"));
 const breadcrumbs_module_scss_1 = __importDefault(require("./breadcrumbs.module.scss"));
-const Breadcrumbs = ({ items }) => (react_1.default.createElement("nav", { className: breadcrumbs_module_scss_1.default.root }, items.map((item, index) => (react_1.default.createElement(link_1.Link, { key: index, href: item.url, color: 'gray87', className: breadcrumbs_module_scss_1.default.item }, item.name)))));
+const Breadcrumbs = ({ items }) => (react_1.default.createElement("nav", { className: breadcrumbs_module_scss_1.default.root }, items.map((item, index) => (react_1.default.createElement(link_1.Link, { key: index, href: item.url, color: 'basic-gray87', className: breadcrumbs_module_scss_1.default.item }, item.name)))));
 exports.Breadcrumbs = Breadcrumbs;

package/mobile/components/modifiers-list/modifier-item/index.js

@@ -32,7 +32,7 @@ const ModifierItem = ({ name, selected, type = 'text', color, image, price, curr
     react_1.default.createElement("div", { className: (0, exports.cx)('info') },
         react_1.default.createElement("span", { className: (0, exports.cx)('name') }, name),
         Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: (0, exports.cx)('price', additionalText && 'additional') })),
-        Boolean(additionalText) && (react_1.default.createElement(text_1.Text, { color: 'gray38', children: additionalText, size: 12, lineHeight: 16 }))),
+        Boolean(additionalText) && (react_1.default.createElement(text_1.Text, { color: 'basic-gray38', children: additionalText, size: 12, lineHeight: 16 }))),
     react_1.default.createElement("div", { className: (0, exports.cx)('icon-wrapper') }, selected && (react_1.default.createElement("div", { className: (0, exports.cx)('icon') },
         react_1.default.createElement(check_1.default, { fill: '#fff', role: 'presentation' }))))));
 exports.ModifierItem = ModifierItem;

package/mobile/components/modifiers-list/modifier-item/modifier-item.module.scss

@@ -7,10 +7,10 @@
   padding: 16px;
   width: 100%;
   &:not(:last-child) {
-    box-shadow: inset 0 -1px 0 colors.$gray12;
+    box-shadow: inset 0 -1px 0 colors.$basic-gray12;
   }
   &.selected {
-    background: colors.$gray4;
+    background: colors.$basic-gray4;
     cursor: auto;
     pointer-events: none;
   }

package/mobile/components/modifiers-list/modifiers-list.module.scss

@@ -1,7 +1,7 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .sizes-table-wrapper {
-  box-shadow: inset 0 -1px 0 colors.$gray12;
+  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
   padding: 16px;
   font-size: 16px;
   font-weight: 500;

package/mobile/components/person-screen/index.js

@@ -73,8 +73,8 @@ exports.PersonScreen = PersonScreen;
  */
 const CommunicateLink = ({ href, primaryText, secondaryText, icon, }) => (react_1.default.createElement("a", { href: href, className: cx('item', borders_1.InnerBorder.top) },
     react_1.default.createElement(box_1.Box, { flex: 'grow' },
-        react_1.default.createElement(text_1.Text, { size: 16, lineHeight: 24, color: 'gray87', weight: 600 }, primaryText),
+        react_1.default.createElement(text_1.Text, { size: 16, lineHeight: 24, color: 'basic-gray87', weight: 600 }, primaryText),
         react_1.default.createElement(box_1.Box, { marginTop: 1 },
-            react_1.default.createElement(text_1.Text, { size: 14, lineHeight: 20, color: 'gray38' }, secondaryText))),
+            react_1.default.createElement(text_1.Text, { size: 14, lineHeight: 20, color: 'basic-gray38' }, secondaryText))),
     react_1.default.createElement("div", { className: cx('icon-circle') }, icon)));
 exports.CommunicateLink = CommunicateLink;

package/mobile/components/person-screen/person-screen.module.scss

@@ -25,7 +25,7 @@
   font-size: 20px;
   line-height: 28px;
   font-weight: 500;
-  color: $gray87;
+  color: $basic-gray87;
   word-wrap: break-word;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -44,7 +44,7 @@
   text-align: center;
   font-size: 14px;
   line-height: 20px;
-  color: $gray38;
+  color: $basic-gray38;
   @media (min-width: 601px) {
     max-width: none;
     margin: 8px auto 0;
@@ -65,7 +65,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 20px;
-    color: $brand-blue;
+    color: $basic-blue;
   }
 }
 
@@ -96,7 +96,7 @@
 }
 
 .icon-circle {
-  background: $gray4;
+  background: $basic-gray4;
   border-radius: 50%;
   width: 48px;
   height: 48px;

package/mobile/components/product-actions-alert/index.js

@@ -19,7 +19,7 @@ const cx = bind_1.default.bind(product_actions_alert_module_scss_1.default);
 const ProductActionsAlert = ({ buttons, alertProps, onClose }) => (react_1.default.createElement(alert_1.Alert, Object.assign({}, alertProps, { footer: react_1.default.createElement(clean_buttons_1.Clean.Group, null,
         react_1.default.createElement(clean_buttons_1.Clean.Button, { onClick: onClose }, "\u0417\u0430\u043A\u0440\u044B\u0442\u044C")) }),
     react_1.default.createElement("div", { className: cx('buttons') }, buttons &&
-        buttons.map(({ text, icon, onClick, href }, key) => (react_1.default.createElement(link_1.Link, { href: href, className: cx('button'), key: key, color: 'gray87', onClick: onClick },
+        buttons.map(({ text, icon, onClick, href }, key) => (react_1.default.createElement(link_1.Link, { href: href, className: cx('button'), key: key, color: 'basic-gray87', onClick: onClick },
             react_1.default.createElement("div", { className: cx('icon-wrapper') }, icon),
             text))))));
 exports.ProductActionsAlert = ProductActionsAlert;

package/mobile/components/product-actions-alert/product-actions-alert.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: $white;
+  background-color: #fff;
   border-radius: 8px;
 }
 
@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $gray4;
+    background: $basic-gray4;
     width: 56px;
     height: 56px;
     border-radius: 50%;

package/mobile/components/product-row/index.js

@@ -41,10 +41,10 @@ const ProductRow = ({ itemUrl, imageUrl, name, sid, isWished, count, unit, initi
             react_1.default.createElement("img", { src: imageUrl, className: cx('image') })),
         onWishButtonClick && (react_1.default.createElement(wish_button_1.WishButton, { onClick: onWishButtonClick, className: cx('wish-button', { 'is-wished': isWished }), width: 20, height: 20, checked: isWished, disabled: isFetchingWishItems }))),
     react_1.default.createElement("div", { className: cx('info-column') },
-        react_1.default.createElement(link_1.Link, { href: itemUrl, className: cx('link'), color: 'gray87' },
+        react_1.default.createElement(link_1.Link, { href: itemUrl, className: cx('link'), color: 'basic-gray87' },
             react_1.default.createElement(text_1.Text, { weight: 600 }, name)),
         react_1.default.createElement(box_1.Box, { marginTop: 2 },
-            react_1.default.createElement(text_1.Text, { color: 'gray38' },
+            react_1.default.createElement(text_1.Text, { color: 'basic-gray38' },
                 "\u0410\u0440\u0442.: ",
                 sid)),
         Boolean(initialCount) && (react_1.default.createElement(box_1.Box, { marginTop: 2 },
@@ -59,12 +59,12 @@ const ProductRow = ({ itemUrl, imageUrl, name, sid, isWished, count, unit, initi
             react_1.default.createElement(text_1.Text, { element: 'div', weight: 600 },
                 react_1.default.createElement(price_1.Price, { value: commonPrice, currencyGrapheme: currencyGrapheme })))),
         Boolean(movedOrderId) && (react_1.default.createElement(box_1.Box, { marginTop: 2 },
-            react_1.default.createElement(text_1.Text, { element: 'div', color: 'gray38' }, "\u041F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D \u0432 \u0437\u0430\u043A\u0430\u0437"),
+            react_1.default.createElement(text_1.Text, { element: 'div', color: 'basic-gray38' }, "\u041F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D \u0432 \u0437\u0430\u043A\u0430\u0437"),
             react_1.default.createElement(link_1.Link, null,
                 "\u2116",
                 movedOrderId))),
         notInStock && (react_1.default.createElement(box_1.Box, { marginTop: 2 },
-            react_1.default.createElement(text_1.Text, { element: 'div', color: 'gray38' }, "\u041D\u0435\u0442 \u043D\u0430 \u0441\u043A\u043B\u0430\u0434\u0435")))),
+            react_1.default.createElement(text_1.Text, { element: 'div', color: 'basic-gray38' }, "\u041D\u0435\u0442 \u043D\u0430 \u0441\u043A\u043B\u0430\u0434\u0435")))),
     react_1.default.createElement("div", { className: cx('action-button') },
         react_1.default.createElement(more_1.default, { onClick: onActionsClick }))));
 exports.ProductRow = ProductRow;

package/mobile/components/product-row/product-row.module.scss

@@ -5,7 +5,7 @@
   padding: 16px 0;
   font-size: 14px;
   &:not(:last-of-type) {
-    border-bottom: 1px solid colors.$gray12;
+    border-bottom: 1px solid colors.$basic-gray12;
   }
 }
 

package/mobile/components/pseudo-input/pseudo-input.module.scss

@@ -6,13 +6,13 @@
   height: 40px;
   padding: 0 16px 0 12px;
   border-radius: 8px;
-  background-color: colors.$gray4;
+  background-color: colors.$basic-gray4;
 }
 
 .icon {
   display: block;
   flex-shrink: 0;
-  fill: colors.$gray38;
+  fill: colors.$basic-gray38;
 }
 
 .text {
@@ -20,5 +20,5 @@
   margin-left: 12px;
   font-size: 16px;
   line-height: 24px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
 }

package/mobile/components/search-bar/index.js

@@ -72,7 +72,7 @@ const SearchBar = ({ inputMode, value, onChange, placeholder = 'Поиск', onC
             react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, startButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index }))))))),
         react_1.default.createElement("label", { className: (0, exports.cx)('input-wrapper') },
             withSearchIcon && (react_1.default.createElement("span", { className: (0, exports.cx)('search-icon') },
-                react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": true }))),
+                react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }))),
             react_1.default.createElement("div", { className: (0, exports.cx)('input-container') },
                 react_1.default.createElement("input", { ref: inputRef, value: value, onChange: onChange, className: (0, exports.cx)('search-field'), placeholder: placeholder, autoFocus: autoFocus, "data-testid": 'search-bar-input', type: 'text', inputMode: inputMode, tabIndex: 0 }),
                 description && (react_1.default.createElement("div", { className: (0, exports.cx)('description-container') },
@@ -80,7 +80,7 @@ const SearchBar = ({ inputMode, value, onChange, placeholder = 'Поиск', onC
             (0, lodash_1.isFunction)(onClear) && value && (react_1.default.createElement(link_1.Link, { onClick: event => {
                     onClear(event);
                     inputRef.current && inputRef.current.focus();
-                }, pseudo: true, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: (0, exports.cx)('clear-icon'), children: react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": true }) }))),
+                }, pseudo: true, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: (0, exports.cx)('clear-icon'), children: react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }) }))),
         Boolean(endButtons.length) && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, exports.cx)('after-field', needHideEndButtons && 'wide-screen') },
                 react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, endButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index })))))),
@@ -103,6 +103,6 @@ exports.SearchBar = SearchBar;
  * @param props.iconColor Цвет иконки.
  * @return Элемент.
  */
-const Button = (0, react_1.forwardRef)(function Button({ text, icon: Icon, iconColor = 'gray87', onClick }, ref) {
+const Button = (0, react_1.forwardRef)(function Button({ text, icon: Icon, iconColor = 'basic-gray87', onClick }, ref) {
     return (react_1.default.createElement("div", { ref: ref, onClick: onClick, className: (0, exports.cx)('button'), role: 'button', "data-testid": 'search-bar-button', tabIndex: 0, "aria-label": Icon && text }, Icon ? react_1.default.createElement(Icon, { fill: colors_1.COLORS.get(iconColor), "aria-hidden": 'true' }) : text));
 });

package/mobile/components/search-bar/search-bar.module.scss

@@ -14,7 +14,7 @@
   flex-grow: 1;
   margin: 8px 0;
   width: 100%;
-  background-color: $gray4;
+  background-color: $basic-gray4;
   border-radius: 8px;
   padding: 0 0 0 12px;
   &:focus-within {
@@ -55,7 +55,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 40px;
-  color: $black;
+  color: #000;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -64,14 +64,14 @@
     display: none;
   }
   &::placeholder {
-    color: $gray38;
+    color: $basic-gray38;
   }
 }
 
 .description-container {
   line-height: 24px;
   font-size: 16px;
-  color: $gray38;
+  color: $basic-gray38;
   width: 100%;
   max-width: 50%;
   display: flex;
@@ -125,7 +125,7 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
-  color: $brand-blue;
+  color: $basic-blue;
   cursor: pointer;
   display: flex;
   align-items: center;

package/mobile/components/select-screen/index.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import { LayoutProps } from '@sima-land/ui-nucleons/layout';
+export declare type OptionSize = 's' | 'm' | 'l' | 'xl';
+export interface SelectScreenOptionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: OptionSize;
+    selected?: boolean;
+    withSelectedIcon?: boolean;
+}
 export interface SelectScreenProps {
     items?: any[];
     getItemName?: (item: any) => string;
@@ -27,6 +33,4 @@ export interface SelectScreenProps {
  */
 export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, title, subtitle, onBack, onClose, }: SelectScreenProps) => JSX.Element;
 export declare const SelectScreenLayout: ({ children, ...props }: LayoutProps) => JSX.Element;
-export declare const SelectScreenOption: ({ children, className, selected, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    selected?: boolean | undefined;
-}) => JSX.Element;
+export declare const SelectScreenOption: ({ children, className, selected, withSelectedIcon, size, ...props }: SelectScreenOptionProps) => JSX.Element;

package/mobile/components/select-screen/index.js

@@ -62,7 +62,7 @@ const SelectScreen = ({ items, getItemName = (0, prop_1.default)('name'), displa
             const isSelected = Boolean(isItemSelected(item));
             return (react_1.default.createElement(exports.SelectScreenOption, { key: index, onClick: () => onItemClick && onItemClick(item) },
                 displayItem(item, { getItemName, isSelected }),
-                isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+                isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('basic-gray87') })));
         })))));
 exports.SelectScreen = SelectScreen;
 const SelectScreenLayout = (_a) => {
@@ -72,10 +72,10 @@ const SelectScreenLayout = (_a) => {
 };
 exports.SelectScreenLayout = SelectScreenLayout;
 const SelectScreenOption = (_a) => {
-    var { children, className, selected } = _a, props = __rest(_a, ["children", "className", "selected"]);
-    return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className), "data-testid": 'select-screen:option' }),
+    var { children, className, selected, withSelectedIcon = selected, size = 'm' } = _a, props = __rest(_a, ["children", "className", "selected", "withSelectedIcon", "size"]);
+    return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className, select_screen_module_scss_1.default[`size-${size}`]), "data-testid": 'select-screen:option' }),
         children,
-        selected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+        selected && withSelectedIcon && react_1.default.createElement(check_1.default, { role: 'presentation', className: select_screen_module_scss_1.default.icon })));
 };
 exports.SelectScreenOption = SelectScreenOption;
 /**
@@ -86,4 +86,4 @@ exports.SelectScreenOption = SelectScreenOption;
  * @param options.getItemName Вернет имя опции.
  * @return Опция в текстовом виде.
  */
-const displayOption = (item, { getItemName }) => (react_1.default.createElement(text_1.Text, { size: 16, lineHeight: 24, color: 'gray87', children: getItemName(item) }));
+const displayOption = (item, { getItemName }) => (react_1.default.createElement(text_1.Text, { size: 16, lineHeight: 24, color: 'basic-gray87', children: getItemName(item) }));

package/mobile/components/select-screen/select-screen.module.scss

@@ -1,5 +1,5 @@
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
-@import 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .container {
   --gutter: 24px;
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 16px;
+  padding: 8px 16px;
   font-size: 16px;
   line-height: 24px;
   height: 48px;
@@ -29,7 +29,36 @@
   outline: 0;
   font: inherit;
   background-color: transparent;
+  text-align: left;
   &:active {
-    background-color: $gray4;
+    background-color: colors.$basic-gray4;
   }
+  &:disabled {
+    color: colors.$basic-gray24;
+    .icon {
+      fill: colors.$basic-gray24;
+    }
+  }
+}
+
+.size-s {
+  height: 40px;
+}
+
+.size-m {
+  height: 48px;
+}
+
+.size-l {
+  height: 56px;
+}
+
+.size-xl {
+  height: 72px;
+}
+
+.icon {
+  display: block;
+  margin-left: 8px;
+  fill: colors.$basic-gray87;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "13.1.1",
+  "version": "13.2.1",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   },
   "dependencies": {
-    "@sima-land/ui-nucleons": "^41.2.0",
+    "@sima-land/ui-nucleons": "^43.0.1",
     "@sima-land/ui-quarks": "^2.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.26.0",