@cloud-ru/uikit-product-card-predefined 0.8.12

package/dist/cjs/components/CardSuggest/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("./CardSuggest"), exports);

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

@@ -0,0 +1,4 @@
+export * from './CardBanner';
+export * from './CardSuggest';
+export * from './CardService';
+export * from './CardServiceSmall';

package/dist/cjs/components/index.js

@@ -0,0 +1,20 @@
+"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("./CardBanner"), exports);
+__exportStar(require("./CardSuggest"), exports);
+__exportStar(require("./CardService"), exports);
+__exportStar(require("./CardServiceSmall"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/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("./components"), exports);

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

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+import { CardProps } from '@snack-uikit/card';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CardBannerProps = WithSupportProps<Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'href'> & {
+    title: string;
+    description: string;
+    actionLabel: string;
+    image: {
+        src: string;
+        alt: string;
+    };
+    onClose?: MouseEventHandler<HTMLElement>;
+}>;
+export declare function CardBanner({ href, title, description, onClick, actionLabel, image, className, onClose, disabled, ...rest }: CardBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardBanner/CardBanner.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightSVG, CrossSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Card } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export function CardBanner(_a) {
+    var { href, title, description, onClick, actionLabel, image, className, onClose, disabled } = _a, rest = __rest(_a, ["href", "title", "description", "onClick", "actionLabel", "image", "className", "onClose", "disabled"]);
+    return (_jsx(Card
+    // TODO: typescript error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , Object.assign({}, extractSupportProps(rest), { href: href, className: className, onClick: onClick, disabled: disabled, functionBadge: onClose ? (_jsx("div", { className: styles.cardFunctionBadgeWrapper, children: _jsx(ButtonTonal, { icon: _jsx(CrossSVG, {}), appearance: 'neutral', onClick: e => {
+                    e.stopPropagation();
+                    onClose(e);
+                }, size: 'xs' }) })) : undefined, children: _jsxs("div", { className: styles.cardBannerContent, children: [_jsxs("div", { className: styles.cardBannerLeft, children: [_jsx(Card.Header, { title: title, truncate: { title: 2 } }), _jsx(Typography.SansBodyM, { children: _jsx(TruncateString, { "data-test-id": 'card-banner__description', maxLines: 2, text: description, className: styles.cardBannerDescription }) }), _jsx(Card.Footer.CallToAction, { label: actionLabel, icon: _jsx(ArrowRightSVG, {}) })] }), _jsx("img", { src: image.src, alt: image.alt, className: styles.cardBannerImage, "data-test-id": 'card-banner__image' })] }) })));
+}

package/dist/esm/components/CardBanner/index.d.ts

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

package/dist/esm/components/CardBanner/index.js

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

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

@@ -0,0 +1,33 @@
+.cardBannerContent{
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  gap:var(--dimension-2m, 16px);
+  width:100%;
+}
+
+.cardBannerLeft{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:calc(var(--dimension-050m, 4px) + var(--dimension-1m, 8px));
+}
+
+.cardBannerDescription{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.cardBannerImage{
+  width:calc(var(--dimension-5m, 40px) + var(--dimension-7m, 56px));
+  flex-shrink:0;
+  -o-object-position:center;
+     object-position:center;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.cardFunctionBadgeWrapper{
+  display:flex;
+  align-items:flex-end;
+  justify-content:flex-start;
+}

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

@@ -0,0 +1,7 @@
+import { Card, CardProps } from '@snack-uikit/card';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CardServiceProps = WithSupportProps<Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'href'> & Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
+    description: string;
+    actionLabel: string;
+}>;
+export declare function CardService({ href, title, description, actionLabel, emblem, onClick, className, disabled, ...rest }: CardServiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardService/CardService.js

@@ -0,0 +1,24 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowRightSVG } from '@sbercloud/uikit-product-icons';
+import { Card } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+export function CardService(_a) {
+    var { href, title, description, actionLabel, emblem, onClick, className, disabled } = _a, rest = __rest(_a, ["href", "title", "description", "actionLabel", "emblem", "onClick", "className", "disabled"]);
+    return (_jsx(Card
+    // TODO: typescript error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , Object.assign({}, extractSupportProps(rest), { href: href, disabled: disabled, className: className, header: _jsx(Card.Header, { title: title, emblem: emblem, truncate: { title: 2 } }), onClick: onClick, footer: _jsx(Card.Footer.CallToAction, { label: actionLabel, icon: _jsx(ArrowRightSVG, {}) }), children: _jsx(TruncateString, { text: description, maxLines: 3, "data-test-id": 'card-service__description' }) })));
+}

package/dist/esm/components/CardService/index.d.ts

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

package/dist/esm/components/CardService/index.js

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

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

@@ -0,0 +1,14 @@
+import { PromoTagPredefinedProps } from '@sbercloud/uikit-product-promo-tag-predefined';
+import { Card, CardProps } from '@snack-uikit/card';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CardServiceSmallProps = WithSupportProps<Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'outline' | 'href' | 'checked'> & Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
+    truncate?: Pick<NonNullable<Card.HeaderProps['truncate']>, 'title'>;
+    favorite?: {
+        enabled: boolean;
+        visibilityStrategy: 'always' | 'hover';
+        checked?: boolean;
+        onChange?(value: boolean): void;
+    };
+    promoBadge?: PromoTagPredefinedProps | CardProps['promoBadge'];
+}>;
+export declare function CardServiceSmall({ href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite, ...rest }: CardServiceSmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardServiceSmall/CardServiceSmall.js

@@ -0,0 +1,55 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { PromoTagPredefined } from '@sbercloud/uikit-product-promo-tag-predefined';
+import { Card } from '@snack-uikit/card';
+import { PromoTag } from '@snack-uikit/promo-tag';
+import { Favorite } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+function isIconProps(props) {
+    return Boolean(props && 'icon' in props);
+}
+export function CardServiceSmall(_a) {
+    var { href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite } = _a, rest = __rest(_a, ["href", "promoBadge", "title", "emblem", "onClick", "className", "disabled", "truncate", "outline", "checked", "favorite"]);
+    const [isFavourite, setIsFavorite] = useUncontrolledProp(favorite === null || favorite === void 0 ? void 0 : favorite.checked, false, favorite === null || favorite === void 0 ? void 0 : favorite.onChange);
+    const favoriteRef = useRef(null);
+    const cardRef = useRef(null);
+    const Icon = isIconProps(emblem) ? emblem.icon : undefined;
+    const onCardKeyDown = event => {
+        var _a;
+        if (event.code === 'ArrowRight') {
+            (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const onFavoriteKeyUp = event => {
+        var _a;
+        event.preventDefault();
+        if (event.code === 'ArrowLeft') {
+            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (event.code === 'Space' || event.code === 'Enter') {
+            setIsFavorite(!isFavourite);
+        }
+    };
+    const onFavoriteClick = event => {
+        var _a;
+        event.stopPropagation();
+        (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    return (_jsxs("div", { className: cn(styles.wrapper, className), children: [_jsx(Card, Object.assign({}, extractSupportProps(rest), { href: href, ref: cardRef, onKeyDown: onCardKeyDown, header: _jsxs("div", { className: styles.contentWrapper, children: [Icon && _jsx(Icon, { className: styles.icon }), _jsx("div", { className: styles.contentLayout, children: _jsx(Typography, { family: 'sans', size: 's', purpose: 'title', className: styles.title, "data-test-id": 'card-service-small__title', children: _jsx(TruncateString, { text: title, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.title, variant: 'end' }) }) }), favorite && favorite.enabled && (_jsx("div", { className: styles.favoriteWrapper, "data-visibility-strategy": favorite.visibilityStrategy, children: _jsx(Favorite, { size: 'm', checked: isFavourite, inputRef: favoriteRef, onChange: setIsFavorite, tabIndex: -1, onKeyUp: onFavoriteKeyUp, onClick: onFavoriteClick, "data-test-id": 'card-service-small__favorite', icon: 'star' }) }))] }), onClick: onClick, disabled: disabled, outline: outline, checked: checked, size: 's' })), promoBadge && (_jsx("div", { className: styles.promoTagWrapper, children: typeof promoBadge === 'object' && 'variant' in promoBadge ? (_jsx(PromoTagPredefined, Object.assign({ "data-test-id": 'card-service-small__promo-badge' }, promoBadge))) : (_jsx(PromoTag, Object.assign({ color: 'decor' }, (typeof promoBadge === 'string' ? { text: promoBadge, appearance: 'primary' } : promoBadge), { "data-test-id": 'card-service-small__promo-badge' }))) }))] }));
+}

package/dist/esm/components/CardServiceSmall/index.d.ts

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

package/dist/esm/components/CardServiceSmall/index.js

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

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

@@ -0,0 +1,52 @@
+.favoriteWrapper{
+  flex-shrink:0;
+  z-index:1;
+}
+.favoriteWrapper[data-visibility-strategy=hover]{
+  display:none;
+}
+.favoriteWrapper[data-visibility-strategy=always]{
+  display:flex;
+}
+
+.wrapper{
+  position:relative;
+}
+.wrapper:hover .favoriteWrapper, .wrapper:focus-within .favoriteWrapper{
+  display:flex;
+}
+
+.contentWrapper{
+  box-sizing:border-box;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  height:var(--dimension-4m, 32px);
+  gap:var(--dimension-1m, 8px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.contentLayout{
+  overflow:hidden;
+  display:block;
+  max-width:100%;
+  min-width:0;
+  flex-grow:1;
+}
+
+.icon{
+  flex-shrink:0;
+}
+
+.title{
+  display:block;
+  max-width:100%;
+}
+
+.promoTagWrapper{
+  position:absolute;
+  top:-4px;
+  right:-4px;
+  display:flex;
+}

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

@@ -0,0 +1,12 @@
+import { CardProps } from '@snack-uikit/card';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CardSuggestProps = WithSupportProps<Pick<CardProps, 'promoBadge' | 'onClick' | 'className' | 'disabled' | 'href'> & {
+    size?: 's' | 'm';
+    title: string;
+    description: string;
+    truncate?: {
+        title?: number;
+        description?: number;
+    };
+}>;
+export declare function CardSuggest({ title, description, truncate, onClick, className, disabled, href, promoBadge, size, ...rest }: CardSuggestProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardSuggest/CardSuggest.js

@@ -0,0 +1,25 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TRUNCATE_DEFAULTS } from './constants';
+export function CardSuggest(_a) {
+    var { title, description, truncate, onClick, className, disabled, href, promoBadge, size } = _a, rest = __rest(_a, ["title", "description", "truncate", "onClick", "className", "disabled", "href", "promoBadge", "size"]);
+    const truncateLines = Object.assign(Object.assign({}, TRUNCATE_DEFAULTS), truncate);
+    return (_jsx(Card
+    // TODO: typescript error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , Object.assign({}, extractSupportProps(rest), { size: size, promoBadge: promoBadge, href: href, disabled: disabled, header: _jsx(Card.Header, { title: title, truncate: { title: truncateLines.title } }), onClick: onClick, className: className, children: _jsx(TruncateString, { text: description, maxLines: truncateLines.description, "data-test-id": 'card-suggest__description' }) })));
+}

package/dist/esm/components/CardSuggest/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TRUNCATE_DEFAULTS: {
+    title: number;
+    description: number;
+};

package/dist/esm/components/CardSuggest/constants.js

@@ -0,0 +1,4 @@
+export const TRUNCATE_DEFAULTS = {
+    title: 2,
+    description: 3,
+};

package/dist/esm/components/CardSuggest/index.d.ts

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

package/dist/esm/components/CardSuggest/index.js

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

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

@@ -0,0 +1,4 @@
+export * from './CardBanner';
+export * from './CardSuggest';
+export * from './CardService';
+export * from './CardServiceSmall';

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './CardBanner';
+export * from './CardSuggest';
+export * from './CardService';
+export * from './CardServiceSmall';

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@cloud-ru/uikit-product-card-predefined",
+  "title": "Card Predefined",
+  "version": "0.8.12",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "homepage": "https://gitverse.ru/cloud-ru-tech/uikit-product/-/tree/master/packages/card-predefined",
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/cloud-ru-tech/uikit-product.git",
+    "directory": "packages/card-predefined"
+  },
+  "author": {
+    "name": "Akhremenko Grigorii",
+    "url": "https://github.com/AGrigorii"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@cloud-ru/uikit-product-icons": "15.1.1",
+    "@cloud-ru/uikit-product-promo-tag-predefined": "0.2.4",
+    "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/card": "0.16.19",
+    "@snack-uikit/promo-tag": "0.7.1",
+    "@snack-uikit/toggles": "0.13.5",
+    "@snack-uikit/truncate-string": "0.6.9",
+    "@snack-uikit/typography": "0.8.4",
+    "@snack-uikit/utils": "3.7.0",
+    "classnames": "2.5.1",
+    "uncontrollable": "8.0.4"
+  },
+  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+}

package/src/components/CardBanner/CardBanner.tsx

@@ -0,0 +1,83 @@
+import { MouseEventHandler } from 'react';
+
+import { ArrowRightSVG, CrossSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Card, CardProps } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type CardBannerProps = WithSupportProps<
+  Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'href'> & {
+    title: string;
+    description: string;
+    actionLabel: string;
+    image: {
+      src: string;
+      alt: string;
+    };
+    onClose?: MouseEventHandler<HTMLElement>;
+  }
+>;
+
+export function CardBanner({
+  href,
+  title,
+  description,
+  onClick,
+  actionLabel,
+  image,
+  className,
+  onClose,
+  disabled,
+  ...rest
+}: CardBannerProps) {
+  return (
+    <Card
+      // TODO: typescript error
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      {...extractSupportProps(rest)}
+      href={href}
+      className={className}
+      onClick={onClick}
+      disabled={disabled}
+      functionBadge={
+        onClose ? (
+          <div className={styles.cardFunctionBadgeWrapper}>
+            <ButtonTonal
+              icon={<CrossSVG />}
+              appearance='neutral'
+              onClick={e => {
+                e.stopPropagation();
+                onClose(e);
+              }}
+              size='xs'
+            />
+          </div>
+        ) : undefined
+      }
+    >
+      <div className={styles.cardBannerContent}>
+        <div className={styles.cardBannerLeft}>
+          <Card.Header title={title} truncate={{ title: 2 }} />
+
+          <Typography.SansBodyM>
+            <TruncateString
+              data-test-id='card-banner__description'
+              maxLines={2}
+              text={description}
+              className={styles.cardBannerDescription}
+            />
+          </Typography.SansBodyM>
+
+          <Card.Footer.CallToAction label={actionLabel} icon={<ArrowRightSVG />} />
+        </div>
+
+        <img src={image.src} alt={image.alt} className={styles.cardBannerImage} data-test-id='card-banner__image' />
+      </div>
+    </Card>
+  );
+}

package/src/components/CardBanner/index.ts

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

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

@@ -0,0 +1,33 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+.cardBannerContent {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: styles-theme-variables.$dimension-2m;
+  width: 100%;
+}
+
+.cardBannerLeft {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: calc(styles-theme-variables.$dimension-050m + styles-theme-variables.$dimension-1m);
+}
+
+.cardBannerDescription {
+  color: styles-theme-variables.$sys-neutral-text-support;
+}
+
+.cardBannerImage {
+  width: calc(styles-theme-variables.$dimension-5m + styles-theme-variables.$dimension-7m);
+  flex-shrink: 0;
+  object-position: center;
+  object-fit: cover;
+}
+
+.cardFunctionBadgeWrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+}

package/src/components/CardService/CardService.tsx

@@ -0,0 +1,41 @@
+import { ArrowRightSVG } from '@cloud-ru/uikit-product-icons';
+import { Card, CardProps } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+export type CardServiceProps = WithSupportProps<
+  Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'href'> &
+    Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
+      description: string;
+      actionLabel: string;
+    }
+>;
+
+export function CardService({
+  href,
+  title,
+  description,
+  actionLabel,
+  emblem,
+  onClick,
+  className,
+  disabled,
+  ...rest
+}: CardServiceProps) {
+  return (
+    <Card
+      // TODO: typescript error
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      {...extractSupportProps(rest)}
+      href={href}
+      disabled={disabled}
+      className={className}
+      header={<Card.Header title={title} emblem={emblem} truncate={{ title: 2 }} />}
+      onClick={onClick}
+      footer={<Card.Footer.CallToAction label={actionLabel} icon={<ArrowRightSVG />} />}
+    >
+      <TruncateString text={description} maxLines={3} data-test-id='card-service__description' />
+    </Card>
+  );
+}

package/src/components/CardService/index.ts

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