@cloud-ru/uikit-product-site-case-card 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.4 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.4.3 (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.4.2 (2025-11-12)
 
 ### Only dependencies have been changed

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

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type CaseCardProps = WithLayoutType<{
+    /** Ссылка на img логотип */
+    img: string;
+    /** Ссылка переход по нажатию на карточку */
+    href?: string;
+    /** Список категорий */
+    categories?: Array<string>;
+    /** Флаг показа или скрытия списка категорий */
+    visibleCategories?: boolean;
+    /** Описание, где выделенные слова помечаются тегом <mark></mark> */
+    description: string;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Событие клика на карточку */
+    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+}>;
+export declare function CaseCard({ layoutType, img, description, categories, href, visibleCategories, onClick, loading, }: CaseCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CaseCard/CaseCard.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaseCard = CaseCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const card_1 = require("@snack-uikit/card");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const typography_1 = require("@snack-uikit/typography");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const SIZE_CARD_LAYOUT_TYPE = {
+    mobile: 'm',
+    tablet: 'm',
+    desktop: 'l',
+    desktopSmall: 'l',
+};
+function CaseCard({ layoutType, img, description, categories, href, visibleCategories = true, onClick, loading, }) {
+    const categoryTextSize = layoutType === 'desktop' || layoutType === 'desktopSmall' ? 'm' : 's';
+    const descriptionTextSize = layoutType === 'mobile' ? 's' : 'm';
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { href: href, onClick: onClick, size: SIZE_CARD_LAYOUT_TYPE[layoutType], children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: loading, className: styles_module_scss_1.default.skeletonIcon, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { src: img, className: styles_module_scss_1.default.image, alt: 'img', "data-layout-type": layoutType }) }) }), loading ? ((0, jsx_runtime_1.jsx)(helperComponents_1.SkeletonTextContainer, {})) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContainer, children: [visibleCategories && categories && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.categoryGroup, children: categories.map(item => ((0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: categoryTextSize, className: styles_module_scss_1.default.category, children: item }, item))) })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'title', size: descriptionTextSize, className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: description }, "data-layout-type": layoutType }) })] }))] }) }));
+}

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

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

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

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

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+.container{
+  box-sizing:border-box;
+  width:100%;
+  height:216px;
+  background:var(--sys-neutral-background2-level, #ffffff);
+  display:flex;
+  justify-content:space-between;
+  flex-direction:column;
+}
+.container[data-layout-type=tablet]{
+  height:232px;
+}
+.container[data-layout-type=mobile]{
+  height:192px;
+}
+
+.image{
+  height:46px;
+}
+.image[data-layout-type=mobile]{
+  height:42px;
+}
+
+.categoryGroup{
+  display:flex;
+  flex-direction:row;
+  gap:4px;
+  align-items:center;
+  flex-wrap:wrap;
+}
+
+.category{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.category:not(:last-child)::after{
+  content:"·";
+  margin-left:4px;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.textContainer{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+}
+
+.description{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.description mark{
+  color:var(--sys-primary-text-light, #6aaf90);
+  background-color:unset;
+}
+.description span{
+  display:-webkit-box;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
+}
+.description span[data-layout-type=mobile]{
+  -webkit-line-clamp:5;
+}
+
+.skeletonIcon{
+  width:120px;
+  height:40px;
+}

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

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

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

package/dist/cjs/helperComponents/SkeletonTextContainer.d.ts

@@ -0,0 +1 @@
+export declare function SkeletonTextContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/SkeletonTextContainer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonTextContainer = SkeletonTextContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SkeletonTextContainer() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, width: 124, className: styles_module_scss_1.default.skeletonItems }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, className: styles_module_scss_1.default.skeletonTitle }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, width: 200, className: styles_module_scss_1.default.skeletonText })] }));
+}

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

@@ -0,0 +1 @@
+export { SkeletonTextContainer } from './SkeletonTextContainer';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonTextContainer = void 0;
+var SkeletonTextContainer_1 = require("./SkeletonTextContainer");
+Object.defineProperty(exports, "SkeletonTextContainer", { enumerable: true, get: function () { return SkeletonTextContainer_1.SkeletonTextContainer; } });

package/dist/cjs/helperComponents/styles.module.css

@@ -0,0 +1,18 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+}
+
+.skeletonItems{
+  height:12px;
+}
+
+.skeletonText{
+  height:14px;
+}
+
+.skeletonTitle{
+  width:100%;
+  height:14px;
+}

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/CaseCard/CaseCard.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type CaseCardProps = WithLayoutType<{
+    /** Ссылка на img логотип */
+    img: string;
+    /** Ссылка переход по нажатию на карточку */
+    href?: string;
+    /** Список категорий */
+    categories?: Array<string>;
+    /** Флаг показа или скрытия списка категорий */
+    visibleCategories?: boolean;
+    /** Описание, где выделенные слова помечаются тегом <mark></mark> */
+    description: string;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Событие клика на карточку */
+    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+}>;
+export declare function CaseCard({ layoutType, img, description, categories, href, visibleCategories, onClick, loading, }: CaseCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CaseCard/CaseCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@snack-uikit/card';
+import { Skeleton } from '@snack-uikit/skeleton';
+import { Typography } from '@snack-uikit/typography';
+import { SkeletonTextContainer } from '../../helperComponents';
+import styles from './styles.module.css';
+const SIZE_CARD_LAYOUT_TYPE = {
+    mobile: 'm',
+    tablet: 'm',
+    desktop: 'l',
+    desktopSmall: 'l',
+};
+export function CaseCard({ layoutType, img, description, categories, href, visibleCategories = true, onClick, loading, }) {
+    const categoryTextSize = layoutType === 'desktop' || layoutType === 'desktopSmall' ? 'm' : 's';
+    const descriptionTextSize = layoutType === 'mobile' ? 's' : 'm';
+    return (_jsx(Card, { href: href, onClick: onClick, size: SIZE_CARD_LAYOUT_TYPE[layoutType], children: _jsxs("div", { className: styles.container, "data-layout-type": layoutType, children: [_jsx(Skeleton, { loading: loading, className: styles.skeletonIcon, children: _jsx("div", { children: _jsx("img", { src: img, className: styles.image, alt: 'img', "data-layout-type": layoutType }) }) }), loading ? (_jsx(SkeletonTextContainer, {})) : (_jsxs("div", { className: styles.textContainer, children: [visibleCategories && categories && (_jsx("div", { className: styles.categoryGroup, children: categories.map(item => (_jsx(Typography, { family: 'sans', purpose: 'body', size: categoryTextSize, className: styles.category, children: item }, item))) })), _jsx(Typography, { family: 'sans', purpose: 'title', size: descriptionTextSize, className: styles.description, children: _jsx("span", { dangerouslySetInnerHTML: { __html: description }, "data-layout-type": layoutType }) })] }))] }) }));
+}

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

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

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

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

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

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+.container{
+  box-sizing:border-box;
+  width:100%;
+  height:216px;
+  background:var(--sys-neutral-background2-level, #ffffff);
+  display:flex;
+  justify-content:space-between;
+  flex-direction:column;
+}
+.container[data-layout-type=tablet]{
+  height:232px;
+}
+.container[data-layout-type=mobile]{
+  height:192px;
+}
+
+.image{
+  height:46px;
+}
+.image[data-layout-type=mobile]{
+  height:42px;
+}
+
+.categoryGroup{
+  display:flex;
+  flex-direction:row;
+  gap:4px;
+  align-items:center;
+  flex-wrap:wrap;
+}
+
+.category{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.category:not(:last-child)::after{
+  content:"·";
+  margin-left:4px;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.textContainer{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+}
+
+.description{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.description mark{
+  color:var(--sys-primary-text-light, #6aaf90);
+  background-color:unset;
+}
+.description span{
+  display:-webkit-box;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
+}
+.description span[data-layout-type=mobile]{
+  -webkit-line-clamp:5;
+}
+
+.skeletonIcon{
+  width:120px;
+  height:40px;
+}

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

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

package/dist/esm/components/index.js

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

package/dist/esm/helperComponents/SkeletonTextContainer.d.ts

@@ -0,0 +1 @@
+export declare function SkeletonTextContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/SkeletonTextContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@snack-uikit/skeleton';
+import styles from './styles.module.css';
+export function SkeletonTextContainer() {
+    return (_jsxs("div", { className: styles.root, children: [_jsx(Skeleton, { loading: true, width: 124, className: styles.skeletonItems }), _jsx(Skeleton, { loading: true, className: styles.skeletonTitle }), _jsx(Skeleton, { loading: true, width: 200, className: styles.skeletonText })] }));
+}

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

@@ -0,0 +1 @@
+export { SkeletonTextContainer } from './SkeletonTextContainer';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1 @@
+export { SkeletonTextContainer } from './SkeletonTextContainer';

package/dist/esm/helperComponents/styles.module.css

@@ -0,0 +1,18 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+}
+
+.skeletonItems{
+  height:12px;
+}
+
+.skeletonText{
+  height:14px;
+}
+
+.skeletonTitle{
+  width:100%;
+  height:14px;
+}

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

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-case-card",
   "title": "Site-case-card",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,13 +30,14 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/card": "0.20.4",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/typography": "0.8.10"
@@ -44,5 +45,5 @@
   "devDependencies": {
     "@sbercloud/figma-tokens-cloud-platform": "17.7.6"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }