@cloud-ru/uikit-product-site-cards 1.3.4 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.4.0 (2026-07-23)
+
+
+### Features
+
+* **SITE-11518:** add isRead&readLabel props for card media ([9879c86](https://github.com/cloud-ru-tech/uikit-product/commit/9879c86c2af6d9cbb850dddcb3ab0fa37c3adc64))
+
+
+
+
+
 ## 1.3.4 (2026-07-21)
 
 ### Only dependencies have been changed

package/dist/cjs/components/CardMedia/CardMedia.d.ts

@@ -30,5 +30,9 @@ export type CardMediaProps = WithSupportProps<WithLayoutType<{
      * @default false
      */
     disabled?: boolean;
+    /** Карточка прочитана — затемняет картинку и показывает лейбл */
+    isRead?: boolean;
+    /** Текст лейбла при isRead @default 'Прочитано' */
+    readLabel?: string;
 }>>;
-export declare function CardMedia({ title, titleTag, size, img, imgAlt, tag, time, href, disabled, date, target, onClick, 'data-test-id': dataTestId, layoutType, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardMedia({ title, titleTag, size, img, imgAlt, tag, time, href, disabled, date, target, onClick, 'data-test-id': dataTestId, layoutType, isRead, readLabel, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardMedia/CardMedia.js

@@ -25,7 +25,7 @@ const hooks_1 = require("../../hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function CardMedia(_a) {
-    var { title, titleTag = 'h2', size = 's', img, imgAlt, tag, time, href, disabled, date, target = '_self', onClick, 'data-test-id': dataTestId = 'card-media', layoutType } = _a, rest = __rest(_a, ["title", "titleTag", "size", "img", "imgAlt", "tag", "time", "href", "disabled", "date", "target", "onClick", 'data-test-id', "layoutType"]);
+    var { title, titleTag = 'h2', size = 's', img, imgAlt, tag, time, href, disabled, date, target = '_self', onClick, 'data-test-id': dataTestId = 'card-media', layoutType, isRead = false, readLabel = 'Прочитано' } = _a, rest = __rest(_a, ["title", "titleTag", "size", "img", "imgAlt", "tag", "time", "href", "disabled", "date", "target", "onClick", 'data-test-id', "layoutType", "isRead", "readLabel"]);
     const { anchorRef, handleLinkClick, handleCardKeyDown } = (0, hooks_1.useCardInteractions)({
         href,
         disabled,
@@ -35,5 +35,5 @@ function CardMedia(_a) {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { onKeyDown: handleCardKeyDown, "data-test-id": dataTestId, "data-size": size, className: styles_module_scss_1.default.root, "data-disabled": disabled || undefined, "data-layout-type": layoutType, 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imgWrapper, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.img, src: img, alt: imgAlt !== null && imgAlt !== void 0 ? imgAlt : 'card-media-img' }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ size: 'xs' }, tag)), time && ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.time, children: [(0, jsx_runtime_1.jsx)(uikit_product_icons_1.WatchSVG, { className: styles_module_scss_1.default.icon, size: 16 }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.minutes, children: `${time} мин` })] }))] }), size !== 's' && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.date, children: date })] }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: titleTag, family: 'sans', purpose: 'title', size: (0, utils_1.getTypographySize)(layoutType, size), className: styles_module_scss_1.default.title, "data-test-id": `${dataTestId}__title`, children: href ? ((0, jsx_runtime_1.jsx)("a", { tabIndex: -1, ref: anchorRef, href: href, target: target, onClick: handleLinkClick, "data-test-id": `${dataTestId}__title-link`, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: 4 }) })) : (title) })] })));
+        tabIndex: 0, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.imgWrapper, children: [(0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.img, src: img, alt: imgAlt !== null && imgAlt !== void 0 ? imgAlt : 'card-media-img' }), isRead && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.blackout }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { size: 'xs', label: readLabel, className: styles_module_scss_1.default.tagRead })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ size: 'xs' }, tag)), time && ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.time, children: [(0, jsx_runtime_1.jsx)(uikit_product_icons_1.WatchSVG, { className: styles_module_scss_1.default.icon, size: 16 }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.minutes, children: `${time} мин` })] }))] }), size !== 's' && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.date, children: date })] }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: titleTag, family: 'sans', purpose: 'title', size: (0, utils_1.getTypographySize)(layoutType, size), className: styles_module_scss_1.default.title, "data-test-id": `${dataTestId}__title`, children: href ? ((0, jsx_runtime_1.jsx)("a", { tabIndex: -1, ref: anchorRef, href: href, target: target, onClick: handleLinkClick, "data-test-id": `${dataTestId}__title-link`, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: 4 }) })) : (title) })] })));
 }

package/dist/cjs/components/CardMedia/styles.module.css

@@ -29,11 +29,26 @@
 }
 
 .imgWrapper{
+  position:relative;
   overflow:hidden;
   height:auto;
   border-radius:4px;
 }
 
+.blackout{
+  position:absolute;
+  inset:0;
+  display:block;
+  background:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
+  pointer-events:none;
+}
+
+.tagRead{
+  position:absolute;
+  top:2px;
+  right:2px;
+}
+
 .header{
   display:flex;
   justify-content:space-between;

package/dist/esm/components/CardMedia/CardMedia.d.ts

@@ -30,5 +30,9 @@ export type CardMediaProps = WithSupportProps<WithLayoutType<{
      * @default false
      */
     disabled?: boolean;
+    /** Карточка прочитана — затемняет картинку и показывает лейбл */
+    isRead?: boolean;
+    /** Текст лейбла при isRead @default 'Прочитано' */
+    readLabel?: string;
 }>>;
-export declare function CardMedia({ title, titleTag, size, img, imgAlt, tag, time, href, disabled, date, target, onClick, 'data-test-id': dataTestId, layoutType, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardMedia({ title, titleTag, size, img, imgAlt, tag, time, href, disabled, date, target, onClick, 'data-test-id': dataTestId, layoutType, isRead, readLabel, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardMedia/CardMedia.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { WatchSVG } from '@cloud-ru/uikit-product-icons';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { Tag } from '@snack-uikit/tag';
@@ -19,7 +19,7 @@ import { useCardInteractions } from '../../hooks';
 import styles from './styles.module.css';
 import { getTypographySize } from './utils';
 export function CardMedia(_a) {
-    var { title, titleTag = 'h2', size = 's', img, imgAlt, tag, time, href, disabled, date, target = '_self', onClick, 'data-test-id': dataTestId = 'card-media', layoutType } = _a, rest = __rest(_a, ["title", "titleTag", "size", "img", "imgAlt", "tag", "time", "href", "disabled", "date", "target", "onClick", 'data-test-id', "layoutType"]);
+    var { title, titleTag = 'h2', size = 's', img, imgAlt, tag, time, href, disabled, date, target = '_self', onClick, 'data-test-id': dataTestId = 'card-media', layoutType, isRead = false, readLabel = 'Прочитано' } = _a, rest = __rest(_a, ["title", "titleTag", "size", "img", "imgAlt", "tag", "time", "href", "disabled", "date", "target", "onClick", 'data-test-id', "layoutType", "isRead", "readLabel"]);
     const { anchorRef, handleLinkClick, handleCardKeyDown } = useCardInteractions({
         href,
         disabled,
@@ -29,5 +29,5 @@ export function CardMedia(_a) {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsxs("div", Object.assign({}, extractSupportProps(rest), { onKeyDown: handleCardKeyDown, "data-test-id": dataTestId, "data-size": size, className: styles.root, "data-disabled": disabled || undefined, "data-layout-type": layoutType, 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex: 0, children: [_jsx("div", { className: styles.imgWrapper, children: _jsx("img", { className: styles.img, src: img, alt: imgAlt !== null && imgAlt !== void 0 ? imgAlt : 'card-media-img' }) }), _jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.left, children: [_jsx(Tag, Object.assign({ size: 'xs' }, tag)), time && (_jsxs("span", { className: styles.time, children: [_jsx(WatchSVG, { className: styles.icon, size: 16 }), _jsx(Typography.SansBodyM, { className: styles.minutes, children: `${time} мин` })] }))] }), size !== 's' && _jsx(Typography.SansBodyM, { className: styles.date, children: date })] }), _jsx(Typography, { tag: titleTag, family: 'sans', purpose: 'title', size: getTypographySize(layoutType, size), className: styles.title, "data-test-id": `${dataTestId}__title`, children: href ? (_jsx("a", { tabIndex: -1, ref: anchorRef, href: href, target: target, onClick: handleLinkClick, "data-test-id": `${dataTestId}__title-link`, children: _jsx(TruncateString, { text: title, maxLines: 4 }) })) : (title) })] })));
+        tabIndex: 0, children: [_jsxs("div", { className: styles.imgWrapper, children: [_jsx("img", { className: styles.img, src: img, alt: imgAlt !== null && imgAlt !== void 0 ? imgAlt : 'card-media-img' }), isRead && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.blackout }), _jsx(Tag, { size: 'xs', label: readLabel, className: styles.tagRead })] }))] }), _jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.left, children: [_jsx(Tag, Object.assign({ size: 'xs' }, tag)), time && (_jsxs("span", { className: styles.time, children: [_jsx(WatchSVG, { className: styles.icon, size: 16 }), _jsx(Typography.SansBodyM, { className: styles.minutes, children: `${time} мин` })] }))] }), size !== 's' && _jsx(Typography.SansBodyM, { className: styles.date, children: date })] }), _jsx(Typography, { tag: titleTag, family: 'sans', purpose: 'title', size: getTypographySize(layoutType, size), className: styles.title, "data-test-id": `${dataTestId}__title`, children: href ? (_jsx("a", { tabIndex: -1, ref: anchorRef, href: href, target: target, onClick: handleLinkClick, "data-test-id": `${dataTestId}__title-link`, children: _jsx(TruncateString, { text: title, maxLines: 4 }) })) : (title) })] })));
 }

package/dist/esm/components/CardMedia/styles.module.css

@@ -29,11 +29,26 @@
 }
 
 .imgWrapper{
+  position:relative;
   overflow:hidden;
   height:auto;
   border-radius:4px;
 }
 
+.blackout{
+  position:absolute;
+  inset:0;
+  display:block;
+  background:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
+  pointer-events:none;
+}
+
+.tagRead{
+  position:absolute;
+  top:2px;
+  right:2px;
+}
+
 .header{
   display:flex;
   justify-content:space-between;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-cards",
   "title": "Site Cards",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,5 +47,5 @@
     "@snack-uikit/typography": "0.8.4",
     "classnames": "2.5.1"
   },
-  "gitHead": "0ba8fab8e570a50b497bfcf5dfc83ddf9eef91ac"
+  "gitHead": "5fede50f59b2dd7183e9c63dfe5397caf73ab805"
 }

package/src/components/CardMedia/CardMedia.tsx

@@ -40,6 +40,10 @@ export type CardMediaProps = WithSupportProps<
      * @default false
      */
     disabled?: boolean;
+    /** Карточка прочитана — затемняет картинку и показывает лейбл */
+    isRead?: boolean;
+    /** Текст лейбла при isRead @default 'Прочитано' */
+    readLabel?: string;
   }>
 >;
 
@@ -58,6 +62,8 @@ export function CardMedia({
   onClick,
   'data-test-id': dataTestId = 'card-media',
   layoutType,
+  isRead = false,
+  readLabel = 'Прочитано',
   ...rest
 }: CardMediaProps) {
   const { anchorRef, handleLinkClick, handleCardKeyDown } = useCardInteractions({
@@ -81,6 +87,13 @@ export function CardMedia({
     >
       <div className={styles.imgWrapper}>
         <img className={styles.img} src={img} alt={imgAlt ?? 'card-media-img'} />
+
+        {isRead && (
+          <>
+            <div className={styles.blackout} />
+            <Tag size='xs' label={readLabel} className={styles.tagRead} />
+          </>
+        )}
       </div>
 
       <div className={styles.header}>

package/src/components/CardMedia/styles.module.scss

@@ -37,11 +37,26 @@ $scale: 1.05;
 }
 
 .imgWrapper {
+  position: relative;
   overflow: hidden;
   height: auto;
   border-radius: 4px;
 }
 
+.blackout {
+  position: absolute;
+  inset: 0;
+  display: block;
+  background: ste.$sys-blackout;
+  pointer-events: none;
+}
+
+.tagRead {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+
 .header {
   display: flex;
   justify-content: space-between;