@snack-uikit/card 0.10.7 → 0.11.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.11.1 (2024-02-28)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.17.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/icon-predefined@0.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icon-predefined/CHANGELOG.md)
+* [@snack-uikit/list@0.6.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
+# 0.11.0 (2024-02-28)
+
+
+### Bug Fixes
+
+* **FF-0000:** fix badge overlaps title ([b0594c2](https://github.com/cloud-ru-tech/snack-uikit/commit/b0594c26f49cb741ec95b0e018c82214aa4aff51))
+
+
+### Features
+
+* **FF-011:** add into prop type promoBadge {text,appearance?} ([dcb3b7b](https://github.com/cloud-ru-tech/snack-uikit/commit/dcb3b7b31d7c3904f3401094b63838c08308506f))
+
+
+
+
+
 ## 0.10.7 (2024-02-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -34,7 +34,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
 | onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| promoBadge | `string` | - | Текст для PromoBadge |
+| promoBadge | `string \| Pick<PromoTagProps, "text" \| "appearance">` | - | PromoBadge |
 | children | `ReactNode` | - | Вложенный контент |
 | header | `ReactElement<HeaderProps, string \| JSXElementConstructor<any>>` | - | Вложенный Header |
 | footer | `ReactNode` | - | Вложенный Footer |

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactElement, ReactNode } from 'react';
+import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size } from '../../types';
 import { HeaderProps } from '../Header';
@@ -15,8 +16,8 @@ export type CardProps = WithSupportProps<{
     onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
-    /** Текст для PromoBadge */
-    promoBadge?: string;
+    /** PromoBadge */
+    promoBadge?: Pick<PromoTagProps, 'text' | 'appearance'> | string;
     /** Вложенный контент  */
     children?: ReactNode;
     /** Вложенный Header */

package/dist/components/Card/Card.js

@@ -34,5 +34,5 @@ export function Card(_a) {
     const supportProps = extractSupportProps(rest);
     return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ ref: localDivRef, className: cn(styles.card, className) }, supportProps, { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, onKeyDown: onKeyDown, children: [image, promoBadge && _jsx(PromoBadge, { text: promoBadge }), _jsxs("div", { className: styles.composition, tabIndex: -1, children: [href && (_jsx("a", { ref: localAnchorRef, "data-test-id": TEST_IDS.anchor, tabIndex: -1, href: href, className: styles.anchor, "aria-label": supportProps['aria-label'] })), !disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsx("div", { className: styles.contentWrapper, children: _jsxs("div", { className: styles.content, "data-size": size, children: [header || null, children && (_jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, tag: 'div', children: children })), footer && _jsx("div", { className: styles.footer, children: footer })] }) })] }), checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
+            tabIndex: 0, onKeyDown: onKeyDown, children: [image, _jsxs("div", { className: styles.composition, tabIndex: -1, children: [href && (_jsx("a", { ref: localAnchorRef, "data-test-id": TEST_IDS.anchor, tabIndex: -1, href: href, className: styles.anchor, "aria-label": supportProps['aria-label'] })), !disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsx("div", { className: styles.contentWrapper, children: _jsxs("div", { className: styles.content, "data-size": size, children: [header || null, children && (_jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, tag: 'div', children: children })), footer && _jsx("div", { className: styles.footer, children: footer })] }) }), promoBadge && _jsx(PromoBadge, Object.assign({}, (typeof promoBadge === 'string' ? { text: promoBadge } : promoBadge)))] }), checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
 }

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

@@ -1,6 +1,6 @@
 .functionBadge{
-  padding-top:var(--space-card-gap-m, 8px);
-  padding-right:var(--space-card-gap-m, 8px);
+  padding-top:var(--space-card-padding-function-badge, 8px);
+  padding-right:var(--space-card-padding-function-badge, 8px);
   position:absolute;
   z-index:1;
   top:0;

package/dist/helperComponents/PromoBadge/PromoBadge.d.ts

@@ -1,4 +1,3 @@
-export type PromoBadgeProps = {
-    text: string;
-};
-export declare function PromoBadge({ text }: PromoBadgeProps): import("react/jsx-runtime").JSX.Element;
+import { PromoTagProps } from '@snack-uikit/promo-tag';
+export type PromoBadgeProps = Pick<PromoTagProps, 'text' | 'appearance'>;
+export declare function PromoBadge({ text, appearance }: PromoBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/PromoBadge/PromoBadge.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PromoTag } from '@snack-uikit/promo-tag';
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
-export function PromoBadge({ text }) {
-    return (_jsx("div", { className: styles.promoBadge, children: _jsx(PromoTag, { appearance: 'primary', text: text, "data-test-id": TEST_IDS.promoBadge }) }));
+export function PromoBadge({ text, appearance = 'primary' }) {
+    return (_jsx("div", { className: styles.promoBadge, children: _jsx(PromoTag, { appearance: appearance, text: text, "data-test-id": TEST_IDS.promoBadge }) }));
 }

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

@@ -1,6 +1,6 @@
 .promoBadge{
-  padding-top:var(--space-card-gap-m, 8px);
-  padding-right:var(--space-card-gap-m, 8px);
+  padding-top:var(--space-card-padding-promo-badge, 8px);
+  padding-right:var(--space-card-padding-promo-badge, 8px);
   position:absolute;
   top:0;
   right:0;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.10.7",
+  "version": "0.11.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,10 +32,10 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.16.1",
-    "@snack-uikit/icon-predefined": "0.4.2",
+    "@snack-uikit/button": "0.17.0",
+    "@snack-uikit/icon-predefined": "0.5.0",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/list": "0.6.0",
+    "@snack-uikit/list": "0.6.1",
     "@snack-uikit/promo-tag": "0.4.1",
     "@snack-uikit/tag": "0.8.1",
     "@snack-uikit/truncate-string": "0.4.9",
@@ -43,5 +43,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "559f1542bf57e8a3be174390e4bd1f2b8f799946"
+  "gitHead": "0054db0a5550fb69d388335d844017bca31fffe7"
 }

package/src/components/Card/Card.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
 
+import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
@@ -25,8 +26,8 @@ export type CardProps = WithSupportProps<{
   onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
   /** Размер */
   size?: Size;
-  /** Текст для PromoBadge */
-  promoBadge?: string;
+  /** PromoBadge */
+  promoBadge?: Pick<PromoTagProps, 'text' | 'appearance'> | string;
   /** Вложенный контент  */
   children?: ReactNode;
   /** Вложенный Header */
@@ -94,8 +95,6 @@ export function Card({
       >
         {image}
 
-        {promoBadge && <PromoBadge text={promoBadge} />}
-
         <div className={styles.composition} tabIndex={-1}>
           {href && (
             <a
@@ -125,6 +124,8 @@ export function Card({
               {footer && <div className={styles.footer}>{footer}</div>}
             </div>
           </div>
+
+          {promoBadge && <PromoBadge {...(typeof promoBadge === 'string' ? { text: promoBadge } : promoBadge)} />}
         </div>
 
         {checked && multipleSelection && <Check className={styles.check} />}

package/src/helperComponents/PromoBadge/PromoBadge.tsx

@@ -1,16 +1,14 @@
-import { PromoTag } from '@snack-uikit/promo-tag';
+import { PromoTag, PromoTagProps } from '@snack-uikit/promo-tag';
 
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
-export type PromoBadgeProps = {
-  text: string;
-};
+export type PromoBadgeProps = Pick<PromoTagProps, 'text' | 'appearance'>;
 
-export function PromoBadge({ text }: PromoBadgeProps) {
+export function PromoBadge({ text, appearance = 'primary' }: PromoBadgeProps) {
   return (
     <div className={styles.promoBadge}>
-      <PromoTag appearance='primary' text={text} data-test-id={TEST_IDS.promoBadge} />
+      <PromoTag appearance={appearance} text={text} data-test-id={TEST_IDS.promoBadge} />
     </div>
   );
 }