@sima-land/moleculas 16.0.0-alpha.38 → 16.0.0-alpha.39

package/common/components/modifier/default-border.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="32" height="32" rx="3.5" stroke="rgba(194, 194, 194, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5" stroke-dashoffset="3.8"/>
+</svg>

package/common/components/modifier/hover-border.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="32" height="32" rx="3.5" stroke="rgba(158, 158, 158, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5" stroke-dashoffset="3.8"/>
+</svg>

package/common/components/modifier/modifier.d.ts

@@ -4,7 +4,7 @@ import { ModifierProps, MoreButtonProps } from './types';
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId, ...props }: ModifierProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modifier({ size, active, crossedOut, disabled, nonExistent, content, count, className, markdown, 'data-testid': testId, ...props }: ModifierProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Кнопка "+N" для показа полного списка модификаторов.
  * @param props Свойства.

package/common/components/modifier/modifier.js

@@ -10,7 +10,6 @@ const react_1 = require("react");
 const hint_1 = require("@sima-land/ui-nucleons/hint");
 const hooks_1 = require("../../hooks");
 const ImageBroken_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Stroked/ImageBroken"));
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const modifier_m_scss_1 = __importDefault(require("./modifier.m.scss"));
 const cx = bind_1.default.bind(modifier_m_scss_1.default);
@@ -19,7 +18,7 @@ const cx = bind_1.default.bind(modifier_m_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function Modifier({ size = 'm', active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId = 'modifier', ...props }) {
+function Modifier({ size = 'm', active, crossedOut, disabled, nonExistent, content, count, className, markdown, 'data-testid': testId = 'modifier', ...props }) {
     // текст хинта
     const [hint, setHint] = (0, react_1.useState)('');
     // состояние хинта
@@ -41,9 +40,9 @@ function Modifier({ size = 'm', active, crossedOut, disabled, content, count, cl
         observer.observe(textElement);
         return () => observer.disconnect();
     }, [content.text]);
-    // ВАЖНО: по дизайн-гайдам disabled не может быть перечеркнут
-    const canStrike = !disabled;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", { ...props, className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId, children: [content.type === 'color' && ((0, jsx_runtime_1.jsx)("span", { className: cx('color'), role: 'banner', style: { background: content.color }, children: disabled && (0, jsx_runtime_1.jsx)(Cross_1.default, { className: cx('cross') }) })), content.type === 'image' && (0, jsx_runtime_1.jsx)(Image, { src: content.src }), content.type === 'text' && ((0, jsx_runtime_1.jsx)("span", { ref: refs.setReference, className: cx('text'), ...getReferenceProps(), children: content.text })), typeof count === 'number' && ((0, jsx_runtime_1.jsx)("span", { className: cx('counter'), children: count > 99 ? '99+' : count })), canStrike && crossedOut && ((0, jsx_runtime_1.jsx)("svg", { width: '100%', height: '100%', className: cx('diagonal'), children: (0, jsx_runtime_1.jsx)("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)', strokeWidth: 2 }) })), markdown && (0, jsx_runtime_1.jsx)("span", { className: modifier_m_scss_1.default.corner, children: "\u0423" })] }), hint && ((0, jsx_runtime_1.jsx)(hint_1.Hint, { open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow, ...getFloatingProps(), children: hint }))] }));
+    // ВАЖНО: по дизайн-гайдам disabled и nonExistent не может быть перечеркнут и не может иметь значок уценки.
+    const canStrikeOrMarkdown = !disabled && !nonExistent;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", { ...props, className: cx('root', `size-${size}`, { active, disabled }, nonExistent && 'non-existent', className), "data-testid": testId, children: [content.type === 'color' && ((0, jsx_runtime_1.jsx)("span", { className: cx('color'), role: 'banner', style: { background: content.color } })), content.type === 'image' && (0, jsx_runtime_1.jsx)(Image, { src: content.src }), content.type === 'text' && ((0, jsx_runtime_1.jsx)("span", { ref: refs.setReference, className: cx('text'), ...getReferenceProps(), children: content.text })), typeof count === 'number' && ((0, jsx_runtime_1.jsx)("span", { className: cx('counter'), children: count > 99 ? '99+' : count })), canStrikeOrMarkdown && crossedOut && ((0, jsx_runtime_1.jsx)("svg", { width: '100%', height: '100%', className: cx('diagonal'), children: (0, jsx_runtime_1.jsx)("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)', strokeWidth: 2 }) })), canStrikeOrMarkdown && markdown && (0, jsx_runtime_1.jsx)("span", { className: modifier_m_scss_1.default.corner, children: "\u0423" })] }), hint && ((0, jsx_runtime_1.jsx)(hint_1.Hint, { open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow, ...getFloatingProps(), children: hint }))] }));
 }
 /**
  * Картинка с заглушкой в случае ошибки загрузки.

package/common/components/modifier/modifier.js.map

@@ -1 +1 @@
-{"version":3,"file":"modifier.js","sourceRoot":"","sources":["../../../../src/common/components/modifier/modifier.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"modifier.js","sourceRoot":"","sources":["../../../../src/common/components/modifier/modifier.tsx"],"names":[],"mappings":"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"}

package/common/components/modifier/modifier.m.scss

@@ -16,6 +16,7 @@
   --modifier-border-color: #{colors.$basic-gray12};
   --modifier-corner-bg: #{colors.$basic-gray12};
   --modifier-corner-color: #{colors.$basic-gray87};
+  --content-offset: 3px;
   &.active {
     --modifier-border-color: #{colors.$basic-blue};
     --modifier-corner-color: #fff;
@@ -24,29 +25,49 @@
   &:hover:not(.disabled) {
     cursor: pointer;
   }
-  &:hover:not(.disabled):not(.active) {
-    --modifier-border-width: 2px;
+  &:hover:not(.disabled):not(.active):not(.non-existent) {
+    --modifier-border-width: 1px;
+    --modifier-border-color: #{colors.$basic-gray24};
+    --modifier-corner-bg: #{colors.$basic-gray24};
   }
   &.disabled {
     --modifier-media-opacity: 0.24;
     --modifier-overlay-color: rgba(0, 0, 0, 0.04);
-    --modifier-border-width: 0;
+    --modifier-border-width: 1px;
     --modifier-text-color: #{colors.$basic-gray38};
     --modifier-corner-bg: transparent;
     --modifier-corner-color: #{colors.$basic-gray38};
+    .text {
+      background-color: colors.$basic-gray8;
+    }
+  }
+  &.non-existent {
+    --border-image-source: url(./default-border.svg);
+    --border-image-slice: 6;
+    --border-image-width: 6;
+    &:hover {
+      // ВАЖНО! Невидимость, чтобы не мелькала сплошлая граница во время загрузки изображения.
+      --modifier-border-color: rgba(255, 255, 255, 0);
+      --border-image-source: url(./hover-border.svg);
+    }
+    &::before {
+      border-image-source: var(--border-image-source);
+      border-image-slice: var(--border-image-slice);
+      border-image-repeat: round;
+      border-image-width: var(--border-image-width);
+    }
   }
-  &::after {
+  &::before {
     content: '';
     display: block;
     pointer-events: none;
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: calc(100% - var(--modifier-border-width) * 2);
+    height: calc(100% - var(--modifier-border-width) * 2);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 var(--modifier-border-width) var(--modifier-border-color);
-    background: var(--modifier-overlay-color);
+    border: var(--modifier-border-width) solid var(--modifier-border-color);
   }
   &.more {
     width: var(--modifier-size);
@@ -60,14 +81,28 @@
   }
 }
 
+.size-xs {
+  --modifier-size: 32px;
+  --modifier-padding: 6px 8px;
+  --corner-size: 16px;
+  --corner-font-size: 8px;
+  --corner-line-height: 10px;
+}
+
 .size-s {
   --modifier-size: 40px;
   --modifier-padding: 10px;
+  --corner-size: 20px;
+  --corner-font-size: 11px;
+  --corner-line-height: 13px;
 }
 
 .size-m {
   --modifier-size: 48px;
-  --modifier-padding: 14px 15px;
+  --modifier-padding: 14px 16px;
+  --corner-size: 24px;
+  --corner-font-size: 12px;
+  --corner-line-height: 14px;
 }
 
 .diagonal {
@@ -81,6 +116,16 @@
 }
 
 .color,
+.image-wrapper {
+  border-radius: inherit;
+  display: block;
+  position: absolute;
+  top: var(--content-offset);
+  left: var(--content-offset);
+  width: calc(100% - var(--content-offset) * 2);
+  height: calc(100% - var(--content-offset) * 2);
+}
+
 .image {
   border-radius: inherit;
   display: block;
@@ -89,31 +134,22 @@
   left: 0;
   width: 100%;
   height: 100%;
-  opacity: var(--modifier-media-opacity);
-}
-
-.image {
   background-position: center;
   background-size: cover;
+  opacity: var(--modifier-media-opacity);
 }
 
 .image-wrapper {
-  border-radius: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: colors.$basic-gray4;
   &.fail {
     --modifier-media-opacity: 0;
+    background-color: colors.$basic-gray4;
   }
   > svg {
-    width: calc(48%);
-    height: calc(48%);
+    width: calc(50%);
+    height: calc(50%);
     fill: colors.$basic-gray24;
   }
 }
@@ -122,12 +158,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  .cross {
-    fill: colors.$basic-gray24;
-  }
 }
 
 .text {
+  border-radius: inherit;
   padding: var(--modifier-padding);
   display: block;
   max-width: 100%;
@@ -162,11 +196,11 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 24px;
-  height: 24px;
+  width: var(--corner-size);
+  height: var(--corner-size);
   border-bottom-right-radius: inherit;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--corner-font-size);
+  line-height: var(--corner-line-height);
   padding-right: 2px;
   display: flex;
   justify-content: flex-end;

package/common/components/modifier/types.d.ts

@@ -19,10 +19,12 @@ export interface ModifierProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEleme
     disabled?: boolean;
     /** Вывести зачеркнутым. */
     crossedOut?: boolean;
+    /** Вывести несуществующим. */
+    nonExistent?: boolean;
     /** Содержимое. */
     content: ModifierContent;
     /** Высота по дизайн-гайдам. */
-    size?: 's' | 'm';
+    size?: 'xs' | 's' | 'm';
     /** Кол-во. */
     count?: number;
     /** Выводить ли ярлык уценки. */

package/desktop/components/promotion-card/estimate.js

@@ -35,10 +35,10 @@ const Estimate = ({ dueDate }) => {
         const text = [date_fns_1.getDate, (d) => (0, date_fns_1.getMonth)(d) + 1, date_fns_1.getYear]
             .map(fn => toTimePart(fn(dueDate)))
             .join('.');
-        content = `До ${text}`;
+        content = `до ${text}`;
     }
     else {
-        content = `До ${(0, date_fns_1.getDate)(dueDate)} ${MONTH_SHORT_NAME[(0, date_fns_1.getMonth)(dueDate)]}`;
+        content = `до ${(0, date_fns_1.getDate)(dueDate)} ${MONTH_SHORT_NAME[(0, date_fns_1.getMonth)(dueDate)]}`;
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
 };

package/desktop/components/promotion-card/promotion-card.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { PromotionType } from './types';
 export interface PromotionCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Ссылка, переход по которой будет произведён при нажатии на карточку. */
     href?: string;
@@ -7,14 +6,14 @@ export interface PromotionCardProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
     /** Подзаголовок. */
     subtitle?: string;
-    /** Дополнительный текст, выводится в правом нижнем углу.  */
-    postfix?: string;
+    /** Название акции.  */
+    name?: string;
     /** Путь к изображению для баннера. */
     imageSrc: string;
     /** Дата окончания акции. */
     dueDate: Date;
     /** Тип акции. */
-    promotionType?: PromotionType;
+    type?: string;
     /** Скидка за объем, указывается при соответствующем типе акции. */
     volumeDiscount?: number;
     /** Идентификатор для систем автоматизированного тестирования. */
@@ -26,7 +25,7 @@ export interface PromotionCardProps extends HTMLAttributes<HTMLDivElement> {
  * @return Элемент.
  */
 export declare const PromotionCard: {
-    ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix, className, "data-testid": testId, ...restProps }: PromotionCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ type, href, imageSrc, title, subtitle, dueDate, volumeDiscount, name, className, "data-testid": testId, ...restProps }: PromotionCardProps): import("react/jsx-runtime").JSX.Element;
     /** @deprecated Лучше использовать прямой импорт PromotionCardPlaceholder. */
     Placeholder: (props: import("./placeholder").PromotionCardPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
 };

package/desktop/components/promotion-card/promotion-card.js

@@ -8,22 +8,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const banner_title_1 = require("./banner-title");
 const estimate_1 = require("./estimate");
-const Watch_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Watch"));
 const classnames_1 = __importDefault(require("classnames"));
 const promotion_card_m_scss_1 = __importDefault(require("./promotion-card.m.scss"));
 const placeholder_1 = require("./placeholder");
-const PromotionName = {
+const KNOWN_NAME = {
     gift: 'Подарок',
     special: 'Спецпредложение',
     '3-by-2': '3 по цене 2',
     'volume-discount': 'Скидка за объём',
 };
+/**
+ * Проверяет тип акции.
+ * @param type Тип.
+ * @return Признак.
+ */
+const isKnownType = (type) => Boolean(type && Object.keys(KNOWN_NAME).includes(type));
 /**
  * Карточка акции.
  * @param props Свойства.
  * @return Элемент.
  */
-const PromotionCard = ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix = promotionType ? PromotionName[promotionType] : undefined, 
+const PromotionCard = ({ type, href, imageSrc, title, subtitle, dueDate, volumeDiscount, name = isKnownType(type) ? KNOWN_NAME[type] : undefined, 
 // div props
 className, 'data-testid': testId = 'promotion-card', ...restProps }) => {
     // время нужно выводить только на клиенте - вводим состояние
@@ -31,7 +36,7 @@ className, 'data-testid': testId = 'promotion-card', ...restProps }) => {
     (0, react_1.useEffect)(() => {
         setMounted(true);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, promotion_card_m_scss_1.default.root), ...restProps, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)("a", { href: href, className: promotion_card_m_scss_1.default.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.banner, children: [(0, jsx_runtime_1.jsx)("img", { src: imageSrc, alt: title, className: promotion_card_m_scss_1.default.image }), promotionType && (mounted || promotionType !== 'special') && ((0, jsx_runtime_1.jsx)("div", { className: promotion_card_m_scss_1.default['banner-content'], children: (0, jsx_runtime_1.jsx)(banner_title_1.BannerTitle, { promotionType: promotionType, volumeDiscount: volumeDiscount, dueDate: dueDate }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.info, children: [(0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("h4", { className: promotion_card_m_scss_1.default.title, children: title }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: promotion_card_m_scss_1.default.subtitle, children: subtitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.footer, children: [mounted && ((0, jsx_runtime_1.jsxs)("time", { className: promotion_card_m_scss_1.default.timer, "data-testid": 'promotion-card:due-date', children: [(0, jsx_runtime_1.jsx)(Watch_1.default, { className: promotion_card_m_scss_1.default['timer-svg'] }), (0, jsx_runtime_1.jsx)(estimate_1.Estimate, { dueDate: dueDate })] })), postfix && ((0, jsx_runtime_1.jsx)("div", { "data-testid": 'promotion-card:postfix', className: promotion_card_m_scss_1.default.postfix, children: postfix }))] })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, promotion_card_m_scss_1.default.root), ...restProps, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)("a", { href: href, className: promotion_card_m_scss_1.default.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.banner, children: [(0, jsx_runtime_1.jsx)("img", { src: imageSrc, alt: title, className: promotion_card_m_scss_1.default.image }), isKnownType(type) && type !== 'gift' && (mounted || type !== 'special') && ((0, jsx_runtime_1.jsx)("div", { className: promotion_card_m_scss_1.default['banner-content'], children: (0, jsx_runtime_1.jsx)(banner_title_1.BannerTitle, { promotionType: type, volumeDiscount: volumeDiscount, dueDate: dueDate }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.info, children: [(0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("h4", { className: promotion_card_m_scss_1.default.title, children: title }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: promotion_card_m_scss_1.default.subtitle, children: subtitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: promotion_card_m_scss_1.default.footer, children: [name && ((0, jsx_runtime_1.jsx)("div", { "data-testid": 'promotion-card:name', className: promotion_card_m_scss_1.default.name, children: name })), mounted && ((0, jsx_runtime_1.jsx)("time", { "data-testid": 'promotion-card:due-date', children: (0, jsx_runtime_1.jsx)(estimate_1.Estimate, { dueDate: dueDate }) }))] })] })] }) }));
 };
 exports.PromotionCard = PromotionCard;
 /** @deprecated Лучше использовать прямой импорт PromotionCardPlaceholder. */

package/desktop/components/promotion-card/promotion-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"promotion-card.js","sourceRoot":"","sources":["../../../../src/desktop/components/promotion-card/promotion-card.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA4D;AAE5D,iDAA6C;AAC7C,yCAAsC;AACtC,2FAAsE;AACtE,4DAAoC;AACpC,oFAA6C;AAC7C,+CAAyD;AA+BzD,MAAM,aAAa,GAAkC;IACnD,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,iBAAiB;IAC1B,QAAQ,EAAE,aAAa;IACvB,iBAAiB,EAAE,iBAAiB;CAC5B,CAAC;AAEX;;;;GAIG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,cAAc,EACd,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;AAElE,YAAY;AACZ,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,gBAAgB,EACxC,GAAG,SAAS,EACO,EAAE,EAAE;IACvB,4DAA4D;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,+BAAM,CAAC,IAAI,CAAC,KAAM,SAAS,iBAAe,MAAM,YACpF,+BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,+BAAM,CAAC,IAAI,aACnC,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC3B,gCAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,+BAAM,CAAC,KAAK,GAAI,EAE1D,aAAa,IAAI,CAAC,OAAO,IAAI,aAAa,KAAK,SAAS,CAAC,IAAI,CAC5D,gCAAK,SAAS,EAAE,+BAAM,CAAC,gBAAgB,CAAC,YACtC,uBAAC,0BAAW,IACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,GAChB,GACE,CACP,IACG,EAEN,iCAAK,SAAS,EAAE,+BAAM,CAAC,IAAI,aACzB,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC3B,+BAAI,SAAS,EAAE,+BAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EAExC,QAAQ,IAAI,8BAAG,SAAS,EAAE,+BAAM,CAAC,QAAQ,YAAG,QAAQ,GAAK,IACtD,EAEN,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC1B,OAAO,IAAI,CACV,kCAAM,SAAS,EAAE,+BAAM,CAAC,KAAK,iBAAc,yBAAyB,aAClE,uBAAC,eAAQ,IAAC,SAAS,EAAE,+BAAM,CAAC,WAAW,CAAC,GAAI,EAC5C,uBAAC,mBAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,IACzB,CACR,EAEA,OAAO,IAAI,CACV,+CAAiB,wBAAwB,EAAC,SAAS,EAAE,+BAAM,CAAC,OAAO,YAChE,OAAO,GACJ,CACP,IACG,IACF,IACJ,GACA,CACP,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,aAAa,iBAgExB;AAEF,6EAA6E;AAC7E,qBAAa,CAAC,WAAW,GAAG,sCAAwB,CAAC"}
+{"version":3,"file":"promotion-card.js","sourceRoot":"","sources":["../../../../src/desktop/components/promotion-card/promotion-card.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA4D;AAE5D,iDAA6C;AAC7C,yCAAsC;AACtC,4DAAoC;AACpC,oFAA6C;AAC7C,+CAAyD;AA+BzD,MAAM,UAAU,GAA4C;IAC1D,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,iBAAiB;IAC1B,QAAQ,EAAE,aAAa;IACvB,iBAAiB,EAAE,iBAAiB;CACrC,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,IAAa,EAAyB,EAAE,CAC3D,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AAE1D;;;;GAIG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,cAAc,EACd,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;AAEvD,YAAY;AACZ,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,gBAAgB,EACxC,GAAG,SAAS,EACO,EAAE,EAAE;IACvB,4DAA4D;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,+BAAM,CAAC,IAAI,CAAC,KAAM,SAAS,iBAAe,MAAM,YACpF,+BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,+BAAM,CAAC,IAAI,aACnC,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC3B,gCAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,+BAAM,CAAC,KAAK,GAAI,EAE1D,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,OAAO,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,CAC1E,gCAAK,SAAS,EAAE,+BAAM,CAAC,gBAAgB,CAAC,YACtC,uBAAC,0BAAW,IAAC,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,GAAI,GAClF,CACP,IACG,EAEN,iCAAK,SAAS,EAAE,+BAAM,CAAC,IAAI,aACzB,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC3B,+BAAI,SAAS,EAAE,+BAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EAExC,QAAQ,IAAI,8BAAG,SAAS,EAAE,+BAAM,CAAC,QAAQ,YAAG,QAAQ,GAAK,IACtD,EAEN,iCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,aAC1B,IAAI,IAAI,CACP,+CAAiB,qBAAqB,EAAC,SAAS,EAAE,+BAAM,CAAC,IAAI,YAC1D,IAAI,GACD,CACP,EAEA,OAAO,IAAI,CACV,gDAAkB,yBAAyB,YACzC,uBAAC,mBAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,GACzB,CACR,IACG,IACF,IACJ,GACA,CACP,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,aAAa,iBA2DxB;AAEF,6EAA6E;AAC7E,qBAAa,CAAC,WAAW,GAAG,sCAAwB,CAAC"}

package/desktop/components/promotion-card/promotion-card.m.scss

@@ -1,5 +1,4 @@
 @use 'pkg:@sima-land/ui-nucleons/colors.scss';
-@use 'pkg:@sima-land/ui-nucleons/breakpoints.scss';
 @use 'pkg:@sima-land/ui-nucleons/shadows.scss';
 @use './_variables';
 
@@ -20,7 +19,9 @@
 }
 
 .link {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   text-decoration: none;
 }
 
@@ -55,19 +56,19 @@
   font-size: 48px;
   line-height: 60px;
   color: colors.$basic-gray76;
-  padding: 24px;
-  @include breakpoints.down('xs') {
-    padding: 16px;
-  }
+  padding: 8px 16px;
 }
 
 .info {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   padding: 16px;
   color: colors.$basic-gray87;
 }
 
 .header {
-  height: 92px;
+  flex-grow: 1;
 }
 
 .title {
@@ -85,7 +86,7 @@
   font-size: 14px;
   line-height: 20px;
   color: colors.$basic-gray38;
-  margin-top: 4px;
+  margin: 4px 0 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -94,28 +95,16 @@
 
 .footer {
   display: flex;
-  flex-wrap: nowrap;
+  white-space: nowrap;
   margin-top: 16px;
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
 }
 
-.timer {
-  display: flex;
-  line-height: 20px;
-  align-items: center;
-}
-
-.timer-svg {
-  fill: currentColor;
-  margin-right: 8px;
-  @include breakpoints.down('xs') {
-    display: none;
-  }
-}
-
-.postfix {
-  margin-left: auto;
-  padding-left: 16px;
+.name {
+  margin-right: auto;
+  padding-right: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/moleculas",
   "type": "commonjs",
-  "version": "16.0.0-alpha.38",
+  "version": "16.0.0-alpha.39",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",