@cloud-ru/uikit-product-site-cards 0.11.3 → 0.11.4

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.
 
+## 0.11.4 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.11.3 (2025-11-12)
 
 ### Only dependencies have been changed

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

@@ -0,0 +1,13 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { IconProps } from '../../helperComponents/Icon';
+export type CardBasicProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Слот под иконку/картинку/кастомную ноду */
+    icon?: IconProps['icon'] | null;
+    /** CSS-класс */
+    className?: string;
+}>>;
+export declare function CardBasic({ title, description, className, icon, layoutType, 'data-test-id': dataTestId, ...rest }: CardBasicProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardBasic/CardBasic.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBasic = CardBasic;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const typography_1 = require("@snack-uikit/typography");
+const Icon_1 = require("../../helperComponents/Icon");
+const utils_1 = require("../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+function CardBasic(_a) {
+    var { title, description, className, icon, layoutType, 'data-test-id': dataTestId = 'card-basic' } = _a, rest = __rest(_a, ["title", "description", "className", "icon", "layoutType", 'data-test-id']);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-test-id": dataTestId, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, size: (0, utils_2.getIconSize)(layoutType), "data-test-id": `${dataTestId}__icon` }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, {
+                    [styles_module_scss_1.default.isEmptyDescription]: !description,
+                }), "data-test-id": `${dataTestId}__content`, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: 'h3', family: 'sans', purpose: 'title', size: (0, utils_1.getTypographySize)(layoutType), "data-test-id": `${dataTestId}__title`, className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: 'div', family: 'sans', purpose: 'body', size: (0, utils_1.getTypographySize)(layoutType), "data-test-id": `${dataTestId}__description`, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { className: styles_module_scss_1.default.description, richText: description }) }))] })] })));
+}

package/dist/cjs/components/CardBasic/index.d.ts

@@ -0,0 +1 @@
+export * from './CardBasic';

package/dist/cjs/components/CardBasic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardBasic"), exports);

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

@@ -0,0 +1,33 @@
+.wrapper{
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-2m, 16px);
+  width:100%;
+}
+.wrapper .content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+.wrapper .content .title{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.wrapper .content .description{
+  color:var(--sys-neutral-text-support, #656774);
+}
+.wrapper .isEmptyDescription{
+  align-items:center;
+  justify-content:center;
+}
+.wrapper[data-layout-type=tablet], .wrapper[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+.wrapper[data-layout-type=tablet] .content, .wrapper[data-layout-type=mobile] .content{
+  gap:var(--dimension-050m, 4px);
+}
+.wrapper[data-layout-type=tablet] .isEmptyDescription, .wrapper[data-layout-type=mobile] .isEmptyDescription{
+  align-items:stretch;
+  justify-content:normal;
+}

package/dist/cjs/components/CardBasic/utils.d.ts

@@ -0,0 +1,2 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+export declare const getIconSize: (layoutType: LayoutType) => "l" | "m";

package/dist/cjs/components/CardBasic/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconSize = void 0;
+const getIconSize = (layoutType) => {
+    switch (layoutType) {
+        case 'tablet':
+        case 'mobile':
+            return 'm';
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return 'l';
+    }
+};
+exports.getIconSize = getIconSize;

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

@@ -0,0 +1,32 @@
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+import { TagSpecialProps } from '@sbercloud/uikit-product-site-tag';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type CardCaseProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Ссылка на логотип */
+    logo: {
+        src: string;
+        alt: string;
+    };
+    /** Тег */
+    tags?: Omit<TagSpecialProps, 'className'>[];
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+    /** Управление состоянием наличия обводки */
+    outline?: boolean;
+}>>;
+export declare function CardCase({ title, description, logo, href, target, onClick, tags, disabled, className, layoutType, outline, ...rest }: CardCaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardCase/CardCase.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardCase = CardCase;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_site_tag_1 = require("@sbercloud/uikit-product-site-tag");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const card_1 = require("@snack-uikit/card");
+const typography_1 = require("@snack-uikit/typography");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function CardCase(_a) {
+    var _b, _c;
+    var { title, description, logo, href, target = '_blank', onClick, tags, disabled = false, className, layoutType, outline } = _a, rest = __rest(_a, ["title", "description", "logo", "href", "target", "onClick", "tags", "disabled", "className", "layoutType", "outline"]);
+    const dataTestId = (_b = rest['data-test-id']) !== null && _b !== void 0 ? _b : 'card-case';
+    const { anchorRef, handleLinkClick, handleCardClick, handleCardKeyDown } = (0, hooks_1.useCardInteractions)({
+        href,
+        disabled,
+        onClick,
+    });
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { size: 'm', className: (0, classnames_1.default)(styles_module_scss_1.default.card, className), disabled: disabled, onClick: handleCardClick, onKeyDown: handleCardKeyDown, "data-test-id": dataTestId, outline: outline, children: (0, jsx_runtime_1.jsxs)("div", { "data-layout-type": layoutType, className: styles_module_scss_1.default.wrapper, children: [(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.title, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: 'h3', family: 'sans', purpose: 'title', size: (0, utils_1.getTypographySize)(layoutType), 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: title })) : (title) }), tags && tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, children: tags.map((tag, index) => ((0, react_1.createElement)(uikit_product_site_tag_1.TagSpecial, Object.assign({ "data-test-id": `${dataTestId}__tag` }, tag, { key: index })))) }))] }), (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.logo, alt: (_c = logo.alt) !== null && _c !== void 0 ? _c : title, src: logo.src, "data-test-id": `${dataTestId}__logo` })] }), description && ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { className: styles_module_scss_1.default.description, richText: description, "data-test-id": `${dataTestId}__description` }))] }) })));
+}

package/dist/cjs/components/CardCase/index.d.ts

@@ -0,0 +1 @@
+export * from './CardCase';

package/dist/cjs/components/CardCase/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardCase"), exports);

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

@@ -0,0 +1,66 @@
+.card{
+  position:relative;
+}
+
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+
+.header{
+  display:flex;
+  align-items:flex-start;
+  gap:16px;
+}
+[data-layout-type=mobile] .header{
+  flex-direction:column-reverse;
+  gap:12px;
+}
+
+.title{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:10px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.title a{
+  color:var(--sys-neutral-text-main, #41424e);
+  text-decoration:none;
+}
+.title a::before{
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+}
+
+.tagRow{
+  display:flex;
+  flex-wrap:wrap;
+  gap:4px;
+}
+
+.logo{
+  flex-shrink:0;
+  width:144px;
+  height:40px;
+  -o-object-fit:contain;
+     object-fit:contain;
+}
+[data-layout-type=mobile] .logo{
+  align-self:center;
+}
+
+.description{
+  font-family:var(--sans-body-m-font-family, SB Sans Text);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-support, #656774);
+}

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

@@ -0,0 +1,30 @@
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+import { TagSpecialProps } from '@sbercloud/uikit-product-site-tag';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { IconProps } from '../../helperComponents/Icon';
+export type CardInfoProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Слот под иконку/кастомную ноду */
+    icon?: IconProps['icon'];
+    /** Тег */
+    tag?: Pick<TagSpecialProps, 'text' | 'appearance'>;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** Наличие обводки */
+    outline?: boolean;
+    /** CSS-класс */
+    className?: string;
+}>>;
+export declare function CardInfo({ title, description, icon, href, target, onClick, tag, disabled, className, layoutType, outline, 'data-test-id': dataTestId, ...rest }: CardInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardInfo/CardInfo.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardInfo = CardInfo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_site_tag_1 = require("@sbercloud/uikit-product-site-tag");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const card_1 = require("@snack-uikit/card");
+const typography_1 = require("@snack-uikit/typography");
+const Icon_1 = require("../../helperComponents/Icon");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function CardInfo(_a) {
+    var { title, description, icon, href, target = '_blank', onClick, tag, disabled = false, className, layoutType, outline, 'data-test-id': dataTestId = 'card-info' } = _a, rest = __rest(_a, ["title", "description", "icon", "href", "target", "onClick", "tag", "disabled", "className", "layoutType", "outline", 'data-test-id']);
+    const { anchorRef, handleLinkClick, handleCardClick, handleCardKeyDown } = (0, hooks_1.useCardInteractions)({
+        href,
+        disabled,
+        onClick,
+    });
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { size: 'm', className: (0, classnames_1.default)(styles_module_scss_1.default.card, className), disabled: disabled, outline: outline, onClick: handleCardClick, onKeyDown: handleCardKeyDown, "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsxs)("div", { "data-layout-type": layoutType, className: styles_module_scss_1.default.wrapper, children: [tag && (0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, Object.assign({}, tag, { className: styles_module_scss_1.default.tag, "data-test-id": `${dataTestId}__tag` })), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'm', "data-test-id": `${dataTestId}__icon`, icon: icon }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: 'h3', family: 'sans', purpose: 'title', size: (0, utils_1.getTypographySize)(layoutType), 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)(uikit_product_site_rich_text_1.RichText, { richText: title }) })) : ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title })) }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { tag: 'div', family: 'sans', purpose: 'body', size: (0, utils_1.getTypographySize)(layoutType), "data-test-id": `${dataTestId}__description`, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { className: styles_module_scss_1.default.description, richText: description }) }))] })] }) })));
+}

package/dist/cjs/components/CardInfo/index.d.ts

@@ -0,0 +1 @@
+export * from './CardInfo';

package/dist/cjs/components/CardInfo/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardInfo"), exports);

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

@@ -0,0 +1,42 @@
+.card{
+  position:relative;
+  border-radius:0;
+}
+
+.wrapper{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-2m, 16px);
+}
+.wrapper .content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-050m, 4px);
+}
+.wrapper .content .title{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.wrapper .content .title a{
+  color:var(--sys-neutral-text-main, #41424e);
+  text-decoration:none;
+}
+.wrapper .content .title a::before{
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+}
+.wrapper .content .description{
+  color:var(--sys-neutral-text-support, #656774);
+}
+.wrapper .tag{
+  position:absolute;
+  right:var(--dimension-050m, 4px);
+  top:var(--dimension-050m, 4px);
+}
+.wrapper[data-layout-type=tablet], .wrapper[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:12px;
+}

package/dist/cjs/components/CardInfo/utilsTypes.d.ts

@@ -0,0 +1,3 @@
+export type BetterOmit<Type, Prop> = {
+    [Property in keyof Type as Exclude<Property, Prop>]: Type[Property];
+};

package/dist/cjs/components/CardInfo/utilsTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,27 @@
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+import { TagSpecialProps } from '@sbercloud/uikit-product-site-tag';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type CardListProps = WithSupportProps<WithLayoutType<{
+    /** Изображение */
+    img: string;
+    /** Теги */
+    tags: Omit<TagSpecialProps, 'size' | 'className'>[];
+    /** Ссылка */
+    href: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Дата */
+    labelDate?: string;
+}>>;
+export declare function CardList({ disabled, layoutType, img, title, className, labelDate, href, onClick, tags, target, 'data-test-id': dataTestId, ...rest }: CardListProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardList/CardList.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardList = CardList;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_tag_1 = require("@sbercloud/uikit-product-site-tag");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function CardList(_a) {
+    var { disabled, layoutType, img, title, className, labelDate, href, onClick, tags, target, 'data-test-id': dataTestId = 'card-list' } = _a, rest = __rest(_a, ["disabled", "layoutType", "img", "title", "className", "labelDate", "href", "onClick", "tags", "target", 'data-test-id']);
+    return ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { href: href, target: target, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : onClick, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imgWrapper, "data-test-id": `${dataTestId}-imgWrapper`, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.img, src: img, alt: 'card_img', "data-test-id": `${dataTestId}-img` }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, children: tags.map((tag, idx) => ((0, react_1.createElement)(uikit_product_site_tag_1.TagSpecial, Object.assign({}, tag, { key: idx })))) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ className: styles_module_scss_1.default.title, tag: 'h3', family: 'sans' }, (0, utils_1.getTitleTypographyProps)({ layoutType }), { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: (0, utils_1.getTitleTruncateMaxLines)({ layoutType }), "data-test-id": `${dataTestId}-title` }) })), labelDate && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.labelDate, "data-test-id": `${dataTestId}-time`, children: labelDate }))] })] })));
+}

package/dist/cjs/components/CardList/index.d.ts

@@ -0,0 +1 @@
+export * from './CardList';

package/dist/cjs/components/CardList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardList"), exports);

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

@@ -0,0 +1,76 @@
+.title{
+  flex:1 0 auto;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.img,
+.title{
+  transition:all 0.3s;
+}
+
+.imgWrapper{
+  aspect-ratio:1.6;
+  height:176px;
+  overflow:hidden;
+}
+.imgWrapper .img{
+  height:100%;
+  width:100%;
+}
+
+.wrapper{
+  display:grid;
+  grid-template-columns:auto 1fr;
+  gap:var(--dimension-2m, 16px);
+  text-decoration:none;
+}
+.wrapper[data-layout-type=tablet] .imgWrapper{
+  height:160px;
+}
+.wrapper[data-layout-type=mobile]{
+  grid-template-columns:1fr;
+}
+.wrapper[data-layout-type=mobile] .imgWrapper{
+  aspect-ratio:unset;
+  width:100%;
+  height:auto;
+}
+.wrapper[aria-disabled]{
+  pointer-events:none;
+  cursor:not-allowed;
+}
+.wrapper[aria-disabled] .title{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.wrapper[aria-disabled] .imgWrapper{
+  opacity:0.5;
+}
+.wrapper:not([aria-disabled]):hover .title{
+  color:var(--sys-primary-accent-hovered, #12bf6a);
+}
+.wrapper:not([aria-disabled]):focus-visible{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  outline-color:var(--sys-primary-decor-activated, #8ee7bb);
+}
+.wrapper:not([aria-disabled]):hover .img, .wrapper:not([aria-disabled]):focus-visible .img{
+  scale:1.05;
+}
+
+.tagRow{
+  display:flex;
+  justify-content:flex-start;
+  gap:var(--dimension-1m, 8px);
+  flex-wrap:wrap;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.labelDate{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

package/dist/cjs/components/CardList/utils.d.ts

@@ -0,0 +1,6 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+type Props = WithLayoutType<unknown>;
+export declare const getTitleTypographyProps: ({ layoutType }: Props) => Pick<TypographyProps, "size" | "purpose">;
+export declare const getTitleTruncateMaxLines: ({ layoutType }: Props) => number;
+export {};