@snack-uikit/card 0.19.16 → 0.20.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.20.0 (2025-07-18)
+
+
+### Features
+
+* **VMWDEV-2607:** add prop for always show badge ([4076c9b](https://github.com/cloud-ru-tech/snack-uikit/commit/4076c9bb0c5f7c376cb138fee236751c58a02e6a))
+
+
+
+
+
 ## 0.19.16 (2025-07-17)
 
 ### Only dependencies have been changed

package/README.md

@@ -43,6 +43,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
 | className | `string` | - | CSS-класс для элемента с контентом |
 | href | `string` | - | Ссылка карточки |
+| badgeAlwaysVisible | `boolean` | - | Всегда показывать FunctionBadge |
 | onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
 | ref | `LegacyRef<HTMLDivElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |

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

@@ -34,6 +34,8 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Всегда показывать FunctionBadge */
+    badgeAlwaysVisible?: boolean;
     /** Колбек нажатия клавиши клавиатуры */
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -70,6 +72,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Всегда показывать FunctionBadge */
+    badgeAlwaysVisible?: boolean;
     /** Колбек нажатия клавиши клавиатуры */
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Card/Card.js

@@ -45,9 +45,10 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       className,
       href,
       onKeyDown: onKeyDownProp,
-      name
+      name,
+      badgeAlwaysVisible
     } = _a,
-    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name"]);
+    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name", "badgeAlwaysVisible"]);
   const localDivRef = (0, react_1.useRef)(null);
   const localAnchorRef = (0, react_1.useRef)(null);
   const onKeyDown = (0, react_1.useCallback)(e => {
@@ -88,6 +89,7 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
           className: styles_module_scss_1.default.anchor,
           "aria-label": supportProps['aria-label']
         }), !disabled && functionBadge && (0, jsx_runtime_1.jsx)(helperComponents_1.FunctionBadgeWrapper, {
+          alwaysVisible: badgeAlwaysVisible,
           className: styles_module_scss_1.default.functionBadgeWrapper,
           children: functionBadge
         }), (0, jsx_runtime_1.jsx)("div", {

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

@@ -2,5 +2,6 @@ import { ReactNode } from 'react';
 export type FunctionBadgeWrapperProps = {
     children: ReactNode;
     className?: string;
+    alwaysVisible?: boolean;
 };
-export declare function FunctionBadgeWrapper({ children, className }: FunctionBadgeWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function FunctionBadgeWrapper({ children, className, alwaysVisible }: FunctionBadgeWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/FunctionBadgeWrapper/FunctionBadgeWrapper.js

@@ -16,17 +16,19 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function FunctionBadgeWrapper(_ref) {
   let {
     children,
-    className
+    className,
+    alwaysVisible
   } = _ref;
   const [visible, setVisible] = (0, react_1.useState)(false);
+  const show = alwaysVisible ? true : visible;
   return (0, jsx_runtime_1.jsx)(context_1.FunctionBadgeContext.Provider, {
     value: {
-      visible,
+      visible: show,
       setVisible
     },
     children: (0, jsx_runtime_1.jsx)("div", {
       className: className,
-      "data-visible": visible || undefined,
+      "data-visible": show || undefined,
       tabIndex: -1,
       children: (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.functionBadge,

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

@@ -34,6 +34,8 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Всегда показывать FunctionBadge */
+    badgeAlwaysVisible?: boolean;
     /** Колбек нажатия клавиши клавиатуры */
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -70,6 +72,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Всегда показывать FunctionBadge */
+    badgeAlwaysVisible?: boolean;
     /** Колбек нажатия клавиши клавиатуры */
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Card/Card.js

@@ -21,7 +21,7 @@ import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents'
 import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
 export const Card = forwardRef((_a, ref) => {
-    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp, name } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name"]);
+    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp, name, badgeAlwaysVisible } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name", "badgeAlwaysVisible"]);
     const localDivRef = useRef(null);
     const localAnchorRef = useRef(null);
     const onKeyDown = useCallback((e) => {
@@ -36,5 +36,5 @@ export const Card = forwardRef((_a, ref) => {
     const supportProps = extractSupportProps(rest);
     return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ ref: mergeRefs(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, _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 }), name && _jsx("input", { name: name, type: 'checkbox', checked: checked, style: { display: 'none' } })] })) }));
+            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, { alwaysVisible: badgeAlwaysVisible, 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 }), name && _jsx("input", { name: name, type: 'checkbox', checked: checked, style: { display: 'none' } })] })) }));
 });

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

@@ -2,5 +2,6 @@ import { ReactNode } from 'react';
 export type FunctionBadgeWrapperProps = {
     children: ReactNode;
     className?: string;
+    alwaysVisible?: boolean;
 };
-export declare function FunctionBadgeWrapper({ children, className }: FunctionBadgeWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function FunctionBadgeWrapper({ children, className, alwaysVisible }: FunctionBadgeWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/FunctionBadgeWrapper/FunctionBadgeWrapper.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { FunctionBadgeContext } from '../../context';
 import styles from './styles.module.css';
-export function FunctionBadgeWrapper({ children, className }) {
+export function FunctionBadgeWrapper({ children, className, alwaysVisible }) {
     const [visible, setVisible] = useState(false);
-    return (_jsx(FunctionBadgeContext.Provider, { value: { visible, setVisible }, children: _jsx("div", { className: className, "data-visible": visible || undefined, tabIndex: -1, children: _jsx("div", { className: styles.functionBadge, children: _jsx("div", { className: styles.functionRow, children: children }) }) }) }));
+    const show = alwaysVisible ? true : visible;
+    return (_jsx(FunctionBadgeContext.Provider, { value: { visible: show, setVisible }, children: _jsx("div", { className: className, "data-visible": show || undefined, tabIndex: -1, children: _jsx("div", { className: styles.functionBadge, children: _jsx("div", { className: styles.functionRow, children: children }) }) }) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.19.16",
+  "version": "0.20.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -48,5 +48,5 @@
     "classnames": "2.5.1",
     "merge-refs": "1.3.0"
   },
-  "gitHead": "e7ac532c06c5fd70f67b385ea7128d3c2960a0f6"
+  "gitHead": "93f66a95830871b0c0c29d43d6d9c28488a4c10a"
 }

package/src/components/Card/Card.tsx

@@ -54,6 +54,8 @@ export type CardProps = WithSupportProps<{
   className?: string;
   /** Ссылка карточки */
   href?: string;
+  /** Всегда показывать FunctionBadge */
+  badgeAlwaysVisible?: boolean;
   /** Колбек нажатия клавиши клавиатуры */
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -77,6 +79,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       href,
       onKeyDown: onKeyDownProp,
       name,
+      badgeAlwaysVisible,
       ...rest
     },
     ref,
@@ -130,7 +133,9 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             )}
 
             {!disabled && functionBadge && (
-              <FunctionBadgeWrapper className={styles.functionBadgeWrapper}>{functionBadge}</FunctionBadgeWrapper>
+              <FunctionBadgeWrapper alwaysVisible={badgeAlwaysVisible} className={styles.functionBadgeWrapper}>
+                {functionBadge}
+              </FunctionBadgeWrapper>
             )}
 
             <div className={styles.contentWrapper}>

package/src/helperComponents/FunctionBadgeWrapper/FunctionBadgeWrapper.tsx

@@ -6,14 +6,17 @@ import styles from './styles.module.scss';
 export type FunctionBadgeWrapperProps = {
   children: ReactNode;
   className?: string;
+  alwaysVisible?: boolean;
 };
 
-export function FunctionBadgeWrapper({ children, className }: FunctionBadgeWrapperProps) {
+export function FunctionBadgeWrapper({ children, className, alwaysVisible }: FunctionBadgeWrapperProps) {
   const [visible, setVisible] = useState<boolean>(false);
 
+  const show = alwaysVisible ? true : visible;
+
   return (
-    <FunctionBadgeContext.Provider value={{ visible, setVisible }}>
-      <div className={className} data-visible={visible || undefined} tabIndex={-1}>
+    <FunctionBadgeContext.Provider value={{ visible: show, setVisible }}>
+      <div className={className} data-visible={show || undefined} tabIndex={-1}>
         <div className={styles.functionBadge}>
           <div className={styles.functionRow}>{children}</div>
         </div>