@snack-uikit/card 0.7.0 → 0.8.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.
 
+# 0.8.0 (2024-01-22)
+
+
+### Features
+
+* **FF-4133:** add truncate props to Card.Header ([e2f86c1](https://github.com/cloud-ru-tech/snack-uikit/commit/e2f86c170d1e419edc0bc88fc1776616d08b366d))
+
+
+
+
+
 # 0.7.0 (2023-12-28)
 
 

package/dist/components/Header/Header.d.ts

@@ -8,6 +8,18 @@ export type HeaderProps = WithSupportProps<{
     description?: string;
     /** Метаинформация */
     metadata?: string;
+    /**
+     *  Максимальное кол-во строк
+     * <br> - `title` - в заголовке
+     * <br> - `description` - в описании
+     * <br> - `metadata` - в подзаголовке
+     * @default '{ <br>title: 1; <br>description: 2; <br>metadata: 1; }'
+     */
+    truncate?: {
+        title?: number;
+        description?: number;
+        metadata?: number;
+    };
     /** Эмблема иконка/картинка */
     emblem?: EmblemProps;
     /** CSS-класс для элемента с контентом */
@@ -15,4 +27,4 @@ export type HeaderProps = WithSupportProps<{
     /** Размер */
     size?: Size;
 }>;
-export declare function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, description, metadata, truncate, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/Header.js

@@ -17,11 +17,12 @@ import { excludeSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../constants';
 import { useCardContext } from '../../context';
 import { Emblem } from '../../helperComponents';
-import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
+import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP, TRUNCATE_DEFAULTS } from './constants';
 import styles from './styles.module.css';
 export function Header(_a) {
-    var { title, description, metadata, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "description", "metadata", "emblem", "className", "size"]);
+    var { title, description, metadata, truncate, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "description", "metadata", "truncate", "emblem", "className", "size"]);
     const { size: sizeContext } = useCardContext();
     const size = sizeProp || sizeContext;
-    return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size, children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", { className: styles.contentLayout, children: [_jsx(Typography, { family: 'sans', size: TITLE_SIZE_MAP[size], purpose: 'title', className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { variant: 'end', maxLines: 1, text: title }) }), metadata && (_jsx(Typography.SansBodyS, { className: styles.metadata, children: _jsx(TruncateString, { variant: 'end', maxLines: 1, text: metadata, "data-test-id": TEST_IDS.metadata }) })), description && (_jsx(Typography, { family: 'sans', size: DESCRIPTION_SIZE_MAP[size], purpose: 'body', className: styles.description, children: _jsx(TruncateString, { variant: 'end', maxLines: 2, text: description, "data-test-id": TEST_IDS.description }) }))] })] })));
+    const truncateStrings = Object.assign(Object.assign({}, TRUNCATE_DEFAULTS), truncate);
+    return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size, children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", { className: styles.contentLayout, children: [_jsx(Typography, { family: 'sans', size: TITLE_SIZE_MAP[size], purpose: 'title', className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { variant: 'end', maxLines: truncateStrings.title, text: title }) }), metadata && (_jsx(Typography.SansBodyS, { className: styles.metadata, children: _jsx(TruncateString, { variant: 'end', maxLines: truncateStrings.metadata, text: metadata, "data-test-id": TEST_IDS.metadata }) })), description && (_jsx(Typography, { family: 'sans', size: DESCRIPTION_SIZE_MAP[size], purpose: 'body', className: styles.description, children: _jsx(TruncateString, { variant: 'end', maxLines: truncateStrings.description, text: description, "data-test-id": TEST_IDS.description }) }))] })] })));
 }

package/dist/components/Header/constants.d.ts

@@ -2,3 +2,8 @@ import { TypographyProps } from '@snack-uikit/typography';
 import { Size } from '../../types';
 export declare const TITLE_SIZE_MAP: Record<Size, TypographyProps['size']>;
 export declare const DESCRIPTION_SIZE_MAP: Record<Size, TypographyProps['size']>;
+export declare const TRUNCATE_DEFAULTS: {
+    title: number;
+    description: number;
+    metadata: number;
+};

package/dist/components/Header/constants.js

@@ -9,3 +9,8 @@ export const DESCRIPTION_SIZE_MAP = {
     [SIZE.M]: 'm',
     [SIZE.L]: 'l',
 };
+export const TRUNCATE_DEFAULTS = {
+    title: 1,
+    description: 2,
+    metadata: 1,
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
+  "gitHead": "2d8416044420dd6c97436f74077e94dcae00cad7"
 }

package/src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ import { TEST_IDS } from '../../constants';
 import { useCardContext } from '../../context';
 import { Emblem, EmblemProps } from '../../helperComponents';
 import { Size } from '../../types';
-import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
+import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP, TRUNCATE_DEFAULTS } from './constants';
 import styles from './styles.module.scss';
 
 export type HeaderProps = WithSupportProps<{
@@ -18,6 +18,18 @@ export type HeaderProps = WithSupportProps<{
   description?: string;
   /** Метаинформация */
   metadata?: string;
+  /**
+   *  Максимальное кол-во строк
+   * <br> - `title` - в заголовке
+   * <br> - `description` - в описании
+   * <br> - `metadata` - в подзаголовке
+   * @default '{ <br>title: 1; <br>description: 2; <br>metadata: 1; }'
+   */
+  truncate?: {
+    title?: number;
+    description?: number;
+    metadata?: number;
+  };
   /** Эмблема иконка/картинка */
   emblem?: EmblemProps;
   /** CSS-класс для элемента с контентом */
@@ -26,11 +38,22 @@ export type HeaderProps = WithSupportProps<{
   size?: Size;
 }>;
 
-export function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps) {
+export function Header({
+  title,
+  description,
+  metadata,
+  truncate,
+  emblem,
+  className,
+  size: sizeProp,
+  ...rest
+}: HeaderProps) {
   const { size: sizeContext } = useCardContext();
 
   const size = sizeProp || sizeContext;
 
+  const truncateStrings = { ...TRUNCATE_DEFAULTS, ...truncate };
+
   return (
     <div className={cn(styles.titleLayout, className)} {...excludeSupportProps(rest)} data-size={size}>
       {emblem && <Emblem {...emblem} />}
@@ -43,18 +66,28 @@ export function Header({ title, description, metadata, emblem, className, size:
           className={styles.title}
           data-test-id={TEST_IDS.title}
         >
-          <TruncateString variant='end' maxLines={1} text={title} />
+          <TruncateString variant='end' maxLines={truncateStrings.title} text={title} />
         </Typography>
 
         {metadata && (
           <Typography.SansBodyS className={styles.metadata}>
-            <TruncateString variant='end' maxLines={1} text={metadata} data-test-id={TEST_IDS.metadata} />
+            <TruncateString
+              variant='end'
+              maxLines={truncateStrings.metadata}
+              text={metadata}
+              data-test-id={TEST_IDS.metadata}
+            />
           </Typography.SansBodyS>
         )}
 
         {description && (
           <Typography family='sans' size={DESCRIPTION_SIZE_MAP[size]} purpose='body' className={styles.description}>
-            <TruncateString variant='end' maxLines={2} text={description} data-test-id={TEST_IDS.description} />
+            <TruncateString
+              variant='end'
+              maxLines={truncateStrings.description}
+              text={description}
+              data-test-id={TEST_IDS.description}
+            />
           </Typography>
         )}
       </div>

package/src/components/Header/constants.ts

@@ -14,3 +14,9 @@ export const DESCRIPTION_SIZE_MAP: Record<Size, TypographyProps['size']> = {
   [SIZE.M]: 'm',
   [SIZE.L]: 'l',
 };
+
+export const TRUNCATE_DEFAULTS = {
+  title: 1,
+  description: 2,
+  metadata: 1,
+};