@snack-uikit/card 0.9.12-preview-993a9cfb.0 → 0.10.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.10.0 (2024-02-20)
+
+
+### Features
+
+* **FF-4295:** add href prop ([8874f1c](https://github.com/cloud-ru-tech/snack-uikit/commit/8874f1c5fef99ce1ef3033977de9fd538e829f42))
+
+
+
+
+
 ## 0.9.11 (2024-02-13)
 
 ### Only dependencies have been changed

package/README.md

@@ -32,7 +32,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
 | outline | `boolean` | - | Управление состоянием наличия обводки |
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
-| onClick | `() => void` | - | Колбек на клик по карточке |
+| onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
 | promoBadge | `string` | - | Текст для PromoBadge |
 | children | `ReactNode` | - | Вложенный контент |
@@ -41,6 +41,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | image | `ReactNode` | - | Вложенный Image |
 | functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
 | className | `string` | - | CSS-класс для элемента с контентом |
+| href | `string` | - | Ссылка карточки |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { MouseEvent, ReactElement, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size } from '../../types';
 import { HeaderProps } from '../Header';
@@ -12,7 +12,7 @@ export type CardProps = WithSupportProps<{
     /** Отображение галочки для режима массового выделения карточек */
     multipleSelection?: boolean;
     /** Колбек на клик по карточке */
-    onClick?(): void;
+    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
     /** Текст для PromoBadge */
@@ -29,5 +29,7 @@ export type CardProps = WithSupportProps<{
     functionBadge?: ReactNode;
     /** CSS-класс для элемента с контентом */
     className?: string;
+    /** Ссылка карточки */
+    href?: string;
 }>;
-export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, href, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js

@@ -14,22 +14,25 @@ import cn from 'classnames';
 import { useCallback, useRef } from 'react';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { SIZE } from '../../constants';
+import { SIZE, TEST_IDS } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
 import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
 export function Card(_a) {
-    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className"]);
-    const localRef = useRef(null);
+    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href"]);
+    const localDivRef = useRef(null);
+    const localAnchorRef = useRef(null);
     const onKeyDown = useCallback((e) => {
-        if (e.target === localRef.current) {
+        var _a, _b;
+        if (e.target === localDivRef.current) {
             if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
+                href ? (_a = localAnchorRef.current) === null || _a === void 0 ? void 0 : _a.click() : (_b = localDivRef.current) === null || _b === void 0 ? void 0 : _b.click();
             }
         }
-    }, [onClick]);
-    return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ ref: localRef, className: cn(styles.card, className) }, extractSupportProps(rest), { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, 
+    }, [href]);
+    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: [!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 })] }) })] }), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
+            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 })] }) })] }), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
 }

package/dist/components/Card/styles.module.css

@@ -1,5 +1,6 @@
 .functionBadgeWrapper{
   position:absolute;
+  z-index:1;
   top:0;
   right:0;
   display:none;
@@ -125,6 +126,16 @@
   cursor:not-allowed;
 }
 
+.anchor{
+  position:absolute;
+  z-index:1;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  border-radius:var(--radius-card-container, 20px);
+}
+
 .body{
   display:block;
   width:100%;

package/dist/components/Footer/components/CallToAction/styles.module.css

@@ -6,6 +6,10 @@
   box-sizing:border-box;
 }
 
+.label{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+
 .icon{
   display:flex;
   align-items:center;
@@ -15,8 +19,4 @@
 .icon svg{
   width:var(--size-icon-container-s, 24px) !important;
   height:var(--size-icon-container-s, 24px) !important;
-}
-
-.label{
-  color:var(--sys-primary-accent-default, #794ed3);
 }

package/dist/constants.d.ts

@@ -14,4 +14,5 @@ export declare const TEST_IDS: {
     title: string;
     description: string;
     metadata: string;
+    anchor: string;
 };

package/dist/constants.js

@@ -14,4 +14,5 @@ export const TEST_IDS = {
     title: 'card__header__title',
     description: 'card__header__description',
     metadata: 'card__header__metadata',
+    anchor: 'card__anchor',
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.9.12-preview-993a9cfb.0",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,16 +32,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.16.1-preview-993a9cfb.0",
-    "@snack-uikit/icon-predefined": "0.4.2-preview-993a9cfb.0",
+    "@snack-uikit/button": "0.16.0",
+    "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/list": "0.3.4-preview-993a9cfb.0",
+    "@snack-uikit/list": "0.3.3",
     "@snack-uikit/promo-tag": "0.4.1",
-    "@snack-uikit/tag": "0.7.4-preview-993a9cfb.0",
-    "@snack-uikit/truncate-string": "0.4.8-preview-993a9cfb.0",
+    "@snack-uikit/tag": "0.7.3",
+    "@snack-uikit/truncate-string": "0.4.7",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
+  "gitHead": "c812034af313f7a0f6247e848e83e783e181032c"
 }

package/src/components/Card/Card.tsx

@@ -1,10 +1,10 @@
 import cn from 'classnames';
-import { KeyboardEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
 
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { SIZE } from '../../constants';
+import { SIZE, TEST_IDS } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
 import { Size } from '../../types';
@@ -22,7 +22,7 @@ export type CardProps = WithSupportProps<{
   /** Отображение галочки для режима массового выделения карточек */
   multipleSelection?: boolean;
   /** Колбек на клик по карточке */
-  onClick?(): void;
+  onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
   /** Размер */
   size?: Size;
   /** Текст для PromoBadge */
@@ -39,6 +39,8 @@ export type CardProps = WithSupportProps<{
   functionBadge?: ReactNode;
   /** CSS-класс для элемента с контентом */
   className?: string;
+  /** Ссылка карточки */
+  href?: string;
 }>;
 
 export function Card({
@@ -55,28 +57,32 @@ export function Card({
   promoBadge,
   image,
   className,
+  href,
   ...rest
 }: CardProps) {
-  const localRef = useRef<HTMLDivElement>(null);
+  const localDivRef = useRef<HTMLDivElement>(null);
+  const localAnchorRef = useRef<HTMLAnchorElement>(null);
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
-      if (e.target === localRef.current) {
+      if (e.target === localDivRef.current) {
         if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
-          onClick?.();
+          href ? localAnchorRef.current?.click() : localDivRef.current?.click();
         }
       }
     },
-    [onClick],
+    [href],
   );
 
+  const supportProps = extractSupportProps(rest);
+
   return (
     <CardContext.Provider value={{ size, disabled }}>
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
-        ref={localRef}
+        ref={localDivRef}
         className={cn(styles.card, className)}
-        {...extractSupportProps(rest)}
+        {...supportProps}
         onClick={onClick}
         data-disabled={disabled || undefined}
         data-checked={checked || undefined}
@@ -91,6 +97,17 @@ export function Card({
         {promoBadge && <PromoBadge text={promoBadge} />}
 
         <div className={styles.composition} tabIndex={-1}>
+          {href && (
+            <a
+              ref={localAnchorRef}
+              data-test-id={TEST_IDS.anchor}
+              tabIndex={-1}
+              href={href}
+              className={styles.anchor}
+              aria-label={supportProps['aria-label'] as string}
+            />
+          )}
+
           {!disabled && functionBadge && (
             <FunctionBadgeWrapper className={styles.functionBadgeWrapper}>{functionBadge}</FunctionBadgeWrapper>
           )}

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

@@ -5,8 +5,10 @@ $sizes: 's', 'm', 'l';
 
 .functionBadgeWrapper {
   position: absolute;
+  z-index: 1;
   top: 0;
   right: 0;
+
   display: none;
 
   &[data-visible] {
@@ -160,6 +162,17 @@ $sizes: 's', 'm', 'l';
   }
 }
 
+.anchor {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  border-radius: $radius-card-container;
+}
+
 .body {
   display: block;
   width: 100%;

package/src/components/Footer/components/CallToAction/styles.module.scss

@@ -10,6 +10,10 @@
   box-sizing: border-box;
 }
 
+.label {
+  color: $sys-primary-accent-default;
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -20,8 +24,4 @@
     width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
     height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
   }
-}
-
-.label {
-  color: $sys-primary-accent-default;
 }

package/src/constants.ts

@@ -15,4 +15,5 @@ export const TEST_IDS = {
   title: 'card__header__title',
   description: 'card__header__description',
   metadata: 'card__header__metadata',
+  anchor: 'card__anchor',
 };