@snack-uikit/card 0.4.9-preview-85c5f47b.0

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,17 @@
+import { Mode } from './constants';
+export type ImageProps = {
+    /** Путь до картинки */
+    src: string;
+    /** Описание картинки */
+    alt: string;
+} /**  Image mode */ & ({
+    mode?: Mode.Little | Mode.Middle;
+    hideFading?: never;
+} | {
+    mode: Mode.Background;
+    hideFading?: boolean;
+});
+export declare function Image({ src, alt, mode, hideFading }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Image {
+    var modes: typeof Mode;
+}

package/dist/components/Image/Image.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mode } from './constants';
+import styles from './styles.module.css';
+export function Image({ src, alt, mode = Mode.Little, hideFading }) {
+    return _jsx("img", { src: src, alt: alt, "data-mode": mode, className: styles.image, "data-fading": !hideFading || undefined });
+}
+Image.modes = Mode;

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

@@ -0,0 +1,5 @@
+export declare enum Mode {
+    Little = "little",
+    Middle = "middle",
+    Background = "background"
+}

package/dist/components/Image/constants.js

@@ -0,0 +1,6 @@
+export var Mode;
+(function (Mode) {
+    Mode["Little"] = "little";
+    Mode["Middle"] = "middle";
+    Mode["Background"] = "background";
+})(Mode || (Mode = {}));

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

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

package/dist/components/Image/index.js

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

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

@@ -0,0 +1,27 @@
+.image{
+  display:block;
+  box-sizing:border-box;
+  width:100%;
+  height:auto;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+.image[data-mode=little]{
+  height:var(--size-card-image-litte, 144px);
+}
+.image[data-mode=middle]{
+  height:var(--size-card-image-middle, 240px);
+}
+.image[data-mode=background]{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+.image[data-mode=background][data-fading]{
+  -webkit-mask-image:var(--gradient-linear-mask-90deg, linear-gradient(90deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0.0784313725) 33%, #fdfdfd 100%));
+  mask-image:var(--gradient-linear-mask-90deg, linear-gradient(90deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0.0784313725) 33%, #fdfdfd 100%));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,20 @@
+import { Card as CardComponent, CardProps } from './Card';
+import { Footer } from './Footer';
+import { FunctionBadge, FunctionBadgeProps as FunctionBadgeComponentProps } from './FunctionBadge';
+import { Header, HeaderProps as HeaderComponentProps } from './Header';
+import { Image, ImageProps as ImageComponentProps } from './Image';
+export declare const Card: typeof CardComponent & {
+    Header: typeof Header;
+    Image: typeof Image;
+    Footer: typeof Footer;
+    FunctionBadge: typeof FunctionBadge;
+};
+export { type CardProps };
+export declare namespace Card {
+    type HeaderProps = HeaderComponentProps;
+    type ImageProps = ImageComponentProps;
+    type FooterActionProps = Footer.ActionProps;
+    type FooterPromoProps = Footer.PromoProps;
+    type FooterCallToActionProps = Footer.CallToActionProps;
+    type FunctionBadgeProps = FunctionBadgeComponentProps;
+}

package/dist/components/index.js

@@ -0,0 +1,10 @@
+import { Card as CardComponent } from './Card';
+import { Footer } from './Footer';
+import { FunctionBadge } from './FunctionBadge';
+import { Header } from './Header';
+import { Image } from './Image';
+export const Card = CardComponent;
+Card.Header = Header;
+Card.Footer = Footer;
+Card.Image = Image;
+Card.FunctionBadge = FunctionBadge;

package/dist/constants.d.ts

@@ -0,0 +1,16 @@
+export declare enum Size {
+    M = "m",
+    L = "l"
+}
+export declare const TEST_IDS: {
+    promoBadge: string;
+    functionBadge: string;
+    droplist: string;
+    option: string;
+    check: string;
+    emblemPicture: string;
+    emblemIcon: string;
+    title: string;
+    description: string;
+    metadata: string;
+};

package/dist/constants.js

@@ -0,0 +1,17 @@
+export var Size;
+(function (Size) {
+    Size["M"] = "m";
+    Size["L"] = "l";
+})(Size || (Size = {}));
+export const TEST_IDS = {
+    promoBadge: 'card__promo-badge',
+    functionBadge: 'card__function-badge',
+    droplist: 'card__function-badge__droplist',
+    option: 'card__function-badge__option',
+    check: 'card__check',
+    emblemPicture: 'card__header__emblem-picture',
+    emblemIcon: 'card__header__emblem-icon',
+    title: 'card__header__title',
+    description: 'card__header__description',
+    metadata: 'card__header__metadata',
+};

package/dist/context.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Size } from './constants';
+type CardContextValue = {
+    size: Size;
+    disabled: boolean;
+};
+export declare const CardContext: import("react").Context<CardContextValue>;
+export declare function useCardContext(): CardContextValue;
+type FunctionBadgeContextValue = {
+    visible?: boolean;
+    setVisible?(v: boolean): void;
+};
+export declare const FunctionBadgeContext: import("react").Context<FunctionBadgeContextValue>;
+export {};

package/dist/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { Size } from './constants';
+export const CardContext = createContext({
+    size: Size.M,
+    disabled: false,
+});
+export function useCardContext() {
+    return useContext(CardContext);
+}
+export const FunctionBadgeContext = createContext({
+    visible: false,
+    setVisible: () => { },
+});

package/dist/helperComponents/Check/Check.d.ts

@@ -0,0 +1,5 @@
+type CheckProps = {
+    className?: string;
+};
+export declare function Check({ className }: CheckProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/Check/Check.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { CheckSVG } from '@snack-uikit/icons';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function Check({ className }) {
+    return (_jsx("div", Object.assign({ className: styles.checkWrapper }, { children: _jsx("div", Object.assign({ className: cn(styles.checkContainer, className), "data-test-id": TEST_IDS.check }, { children: _jsx(CheckSVG, { size: 16 }) })) })));
+}

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

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

package/dist/helperComponents/Check/index.js

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

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

@@ -0,0 +1,16 @@
+.checkWrapper{
+  padding-top:var(--space-card-padding-check-badge, 6px);
+  padding-left:var(--space-card-padding-check-badge, 6px);
+  position:absolute;
+  top:0;
+  left:0;
+}
+
+.checkContainer{
+  width:var(--size-card-check, 16px);
+  height:var(--size-card-check, 16px);
+  border-radius:var(--radius-card-check, 12px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/helperComponents/Emblem/Emblem.d.ts

@@ -0,0 +1,11 @@
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+type PictureProps = {
+    src: string;
+    alt: string;
+};
+export type EmblemProps = PictureProps | Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+export declare function Emblem(props: EmblemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Emblem {
+    var appearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
+}
+export {};

package/dist/helperComponents/Emblem/Emblem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { TEST_IDS } from '../../constants';
+import { useCardContext } from '../../context';
+import styles from './styled.module.css';
+function isPictureProps(props) {
+    return 'src' in props && 'alt' in props;
+}
+export function Emblem(props) {
+    var _a, _b;
+    const { size } = useCardContext();
+    if (isPictureProps(props)) {
+        return (_jsx("img", { src: props.src, alt: props.alt, "data-size": size || undefined, className: styles.img, "data-test-id": TEST_IDS.emblemPicture }));
+    }
+    return (_jsx(IconPredefined, { icon: props.icon, appearance: (_a = props.appearance) !== null && _a !== void 0 ? _a : IconPredefined.appearances.Primary, decor: (_b = props.decor) !== null && _b !== void 0 ? _b : true, size: size, "data-test-id": TEST_IDS.emblemIcon }));
+}
+Emblem.appearances = IconPredefined.appearances;

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

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

package/dist/helperComponents/Emblem/index.js

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

package/dist/helperComponents/Emblem/styled.module.css

@@ -0,0 +1,21 @@
+.img{
+  overflow:hidden;
+  flex-shrink:0;
+  box-sizing:border-box;
+  -o-object-fit:cover;
+     object-fit:cover;
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+  border-style:solid;
+}
+.img[data-size=m]{
+  width:var(--size-card-picture-m, 40px);
+  height:var(--size-card-picture-m, 40px);
+  border-width:var(--border-width-card-picture, 1px);
+  border-radius:var(--radius-card-picture, 8px);
+}
+.img[data-size=l]{
+  width:var(--size-card-picture-l, 80px);
+  height:var(--size-card-picture-l, 80px);
+  border-width:var(--border-width-card-picture, 1px);
+  border-radius:var(--radius-card-picture, 8px);
+}

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

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

package/dist/helperComponents/FunctionBadgeWrapper/FunctionBadgeWrapper.js

@@ -0,0 +1,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 }) {
+    const [visible, setVisible] = useState(false);
+    return (_jsx(FunctionBadgeContext.Provider, Object.assign({ value: { visible, setVisible } }, { children: _jsx("div", Object.assign({ className: className, "data-visible": visible || undefined, tabIndex: -1 }, { children: _jsx("div", Object.assign({ className: styles.functionBadge }, { children: _jsx("div", Object.assign({ className: styles.functionRow }, { children: children })) })) })) })));
+}

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

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

package/dist/helperComponents/FunctionBadgeWrapper/index.js

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

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

@@ -0,0 +1,26 @@
+.functionBadge{
+  padding-top:var(--space-card-gap-m, 8px);
+  padding-right:var(--space-card-gap-m, 8px);
+  position:absolute;
+  top:0;
+  right:0;
+  box-sizing:border-box;
+}
+
+.functionRow{
+  position:relative;
+}
+.functionRow::before{
+  width:var(--size-card-function-badge-function-row, 32px);
+  height:var(--size-card-function-badge-function-row, 32px);
+  border-radius:var(--radius-card-button, 12px);
+  opacity:var(--opacity-card-transparent-background, 0.8);
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
+}

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

@@ -0,0 +1,4 @@
+export type PromoBadgeProps = {
+    text: string;
+};
+export declare function PromoBadge({ text }: PromoBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/PromoBadge/PromoBadge.js

@@ -0,0 +1,7 @@
+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", Object.assign({ className: styles.promoBadge }, { children: _jsx(PromoTag, { appearance: PromoTag.appearances.Primary, text: text, "data-test-id": TEST_IDS.promoBadge }) })));
+}

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

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

package/dist/helperComponents/PromoBadge/index.js

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

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

@@ -0,0 +1,8 @@
+.promoBadge{
+  padding-top:var(--space-card-gap-m, 8px);
+  padding-right:var(--space-card-gap-m, 8px);
+  position:absolute;
+  top:0;
+  right:0;
+  box-sizing:border-box;
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Emblem';
+export * from './PromoBadge';
+export * from './Check';
+export * from './FunctionBadgeWrapper';

package/dist/helperComponents/index.js

@@ -0,0 +1,4 @@
+export * from './Emblem';
+export * from './PromoBadge';
+export * from './Check';
+export * from './FunctionBadgeWrapper';

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@snack-uikit/card",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Card",
+  "version": "0.4.9-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Card",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/card",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/card"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
+    "@snack-uikit/droplist": "0.10.13-preview-85c5f47b.0",
+    "@snack-uikit/icon-predefined": "0.2.6-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/promo-tag": "0.2.6-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,121 @@
+import cn from 'classnames';
+import { KeyboardEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
+
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../constants';
+import { CardContext } from '../../context';
+import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
+import { HeaderProps } from '../Header';
+import { BODY_TEXT_SIZE_MAP, TRIGGER_CLICK_KEY_CODES } from './constants';
+import styles from './styles.module.scss';
+
+export type CardProps = WithSupportProps<{
+  /** Управление состоянием интерактивности */
+  disabled?: boolean;
+  /** Управление состоянием выбран/не выбран */
+  checked?: boolean;
+  /** Управление состоянием наличия обводки */
+  outline?: boolean;
+  /** Отображение галочки для режима массового выделения карточек */
+  multipleSelection?: boolean;
+  /** Колбек на клик по карточке */
+  onClick?(): void;
+  /** Размер */
+  size?: Size;
+  /** Текст для PromoBadge */
+  promoBadge?: string;
+  /** Вложенный контент  */
+  children?: ReactNode;
+  /** Вложенный Header */
+  header?: ReactElement<HeaderProps>;
+  /** Вложенный Footer */
+  footer?: ReactNode;
+  /** Вложенный Image */
+  image?: ReactNode;
+  /** Вложенный FunctionBadge */
+  functionBadge?: ReactNode;
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+}>;
+
+export function Card({
+  onClick,
+  disabled = false,
+  checked,
+  outline,
+  multipleSelection = false,
+  size = Size.M,
+  children,
+  header,
+  footer,
+  functionBadge,
+  promoBadge,
+  image,
+  className,
+  ...rest
+}: CardProps) {
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.target === localRef.current) {
+        if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+          onClick?.();
+        }
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <CardContext.Provider value={{ size, disabled }}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        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}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+      >
+        {image}
+
+        {promoBadge && <PromoBadge text={promoBadge} />}
+
+        <div className={styles.composition} tabIndex={-1}>
+          {!disabled && functionBadge && (
+            <FunctionBadgeWrapper className={styles.functionBadgeWrapper}>{functionBadge}</FunctionBadgeWrapper>
+          )}
+
+          <div className={styles.contentWrapper}>
+            <div className={styles.content} data-size={size}>
+              {header || null}
+
+              <Typography
+                family={Typography.families.Sans}
+                size={BODY_TEXT_SIZE_MAP[size]}
+                role={Typography.roles.Body}
+                className={styles.body}
+              >
+                {children}
+              </Typography>
+            </div>
+
+            {footer && <div className={styles.footer}>{footer}</div>}
+          </div>
+        </div>
+
+        {!disabled && checked && multipleSelection && <Check className={styles.check} />}
+      </div>
+    </CardContext.Provider>
+  );
+}
+
+Card.sizes = Size;

package/src/components/Card/constants.ts

@@ -0,0 +1,10 @@
+import { Typography } from '@snack-uikit/typography';
+
+import { Size } from '../../constants';
+
+export const BODY_TEXT_SIZE_MAP = {
+  [Size.M]: Typography.sizes.M,
+  [Size.L]: Typography.sizes.L,
+};
+
+export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];

package/src/components/Card/index.ts

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