@cloud-ru/uikit-product-site-cards 0.11.3

package/src/components/CardMedia/CardMedia.tsx

@@ -0,0 +1,123 @@
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { WatchSVG } from '@cloud-ru/uikit-product-icons';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Tag, TagProps } from '@snack-uikit/tag';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { useCardInteractions } from '../../hooks';
+import styles from './styles.module.scss';
+import { TitleTag } from './types';
+import { getTypographySize } from './utils';
+
+export type CardMediaProps = WithSupportProps<
+  WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Тег заголовка */
+    titleTag: TitleTag;
+    /** Размер карточки */
+    size: 's' | 'm' | 'l';
+    /** Ссылка на картинку */
+    img: string;
+    /** Тег */
+    tag: Pick<TagProps, 'label' | 'appearance'>;
+    /** Время чтения */
+    time?: string;
+    /** Дата публикации */
+    date: string;
+    /** Ссылка */
+    href: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+  }>
+>;
+
+export function CardMedia({
+  title,
+  titleTag = 'h2',
+  size = 's',
+  img,
+  tag,
+  time,
+  href,
+  disabled,
+  date,
+  target = '_self',
+  onClick,
+  'data-test-id': dataTestId = 'card-media',
+  layoutType,
+  ...rest
+}: CardMediaProps) {
+  const { anchorRef, handleLinkClick, handleCardKeyDown } = useCardInteractions({
+    href,
+    disabled,
+    onClick,
+  });
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      {...extractSupportProps(rest)}
+      onKeyDown={handleCardKeyDown}
+      data-test-id={dataTestId}
+      data-size={size}
+      className={styles.root}
+      data-disabled={disabled || undefined}
+      data-layout-type={layoutType}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+    >
+      <div className={styles.imgWrapper}>
+        <img className={styles.img} src={img} alt='card-media-img' />
+      </div>
+
+      <div className={styles.header}>
+        <div className={styles.left}>
+          <Tag size='xs' {...tag} />
+
+          {time && (
+            <span className={styles.time}>
+              <WatchSVG className={styles.icon} size={16} />
+              <Typography.SansBodyM className={styles.minutes}>{`${time} мин`}</Typography.SansBodyM>
+            </span>
+          )}
+        </div>
+
+        {size !== 's' && <Typography.SansBodyM className={styles.date}>{date}</Typography.SansBodyM>}
+      </div>
+
+      <Typography
+        tag={titleTag}
+        family='sans'
+        purpose='title'
+        size={getTypographySize(layoutType, size)}
+        className={styles.title}
+        data-test-id={`${dataTestId}__title`}
+      >
+        {href ? (
+          <a
+            tabIndex={-1}
+            ref={anchorRef}
+            href={href}
+            target={target}
+            onClick={handleLinkClick}
+            data-test-id={`${dataTestId}__title-link`}
+          >
+            <TruncateString text={title} maxLines={4} />
+          </a>
+        ) : (
+          title
+        )}
+      </Typography>
+    </div>
+  );
+}

package/src/components/CardMedia/index.ts

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

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

@@ -0,0 +1,157 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+$transition: 0.3s;
+$scale: 1.05;
+
+.title {
+  color: ste.$sys-neutral-text-main;
+
+  a {
+    color: ste.$sys-neutral-text-main;
+    text-decoration: none;
+
+    transition: color $transition ease-in-out;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &:hover {
+      color: ste.$sys-primary-accent-hovered;
+    }
+  }
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+
+  transition: all $transition;
+}
+
+.imgWrapper {
+  overflow: hidden;
+  height: auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+
+  color: ste.$sys-neutral-text-light;
+
+  .left {
+    display: flex;
+    gap: 12px;
+  }
+
+  .icon {
+    color: ste.$sys-neutral-accent-default;
+  }
+
+  .time,
+  .date {
+    display: inline-flex;
+    align-items: center;
+
+    gap: 4px;
+  }
+}
+
+.root {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  gap: 16px;
+
+  &:focus-visible {
+    @include ste.outline-var(ste.$container-focused-m);
+    outline-color: ste.$sys-primary-decor-activated;
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &:focus-visible {
+    .img {
+      scale: $scale;
+    }
+  }
+
+  &[data-disabled='true'] {
+    pointer-events: none;
+
+    a {
+      color: ste.$sys-neutral-text-disabled;
+    }
+
+    .img {
+      opacity: 0.5;
+    }
+
+    .title {
+      color: ste.$sys-neutral-text-disabled;
+    }
+  }
+
+  &[data-size='s'] {
+    gap: 8px;
+
+    .imgWrapper {
+      height: 138px;
+    }
+
+    .left {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &[data-size='m'] {
+    .imgWrapper {
+      aspect-ratio: 16 / 11;
+      max-height: 264px;
+    }
+  }
+
+  &[data-size='l'] {
+    .imgWrapper {
+      max-height: 350px;
+      aspect-ratio: 16 / 7;
+    }
+  }
+
+  &[data-size='m'][data-layout-type='tablet'] {
+    .imgWrapper {
+      aspect-ratio: 164 / 113;
+      max-height: 226px;
+    }
+  }
+
+  &[data-size='m'][data-layout-type='mobile'] {
+    .imgWrapper {
+      height: 226px;
+    }
+  }
+
+  &[data-size='l'][data-layout-type='tablet'] {
+    .imgWrapper {
+      aspect-ratio: 16 / 7;
+      max-height: 308px;
+    }
+  }
+
+  &[data-size='l'][data-layout-type='mobile'] {
+    .imgWrapper {
+      height: 226px;
+    }
+  }
+}

package/src/components/CardMedia/types.ts

@@ -0,0 +1,3 @@
+import { Tag } from '@snack-uikit/typography';
+
+export type TitleTag = Extract<Tag, 'h2' | 'span'>;

package/src/components/CardMedia/utils.ts

@@ -0,0 +1,23 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getTypographySize = (layoutType: LayoutType, size?: 's' | 'm' | 'l'): TypographyProps['size'] => {
+  if (size === 's') {
+    switch (layoutType) {
+      case 'tablet':
+      case 'mobile':
+        return 's';
+
+      default:
+        return 'm';
+    }
+  }
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return 'm';
+
+    default:
+      return 'l';
+  }
+};

package/src/components/CardPartner/CardPartner.tsx

@@ -0,0 +1,90 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Card } from '@snack-uikit/card';
+
+import { useCardInteractions } from '../../hooks';
+import styles from './styles.module.scss';
+
+export type CardPartnerProps = WithSupportProps<
+  WithLayoutType<{
+    /** Описание карточки */
+    description: string;
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Ссылка на логотип */
+    logo: {
+      src: string;
+      alt: string;
+    };
+    /* Включение обводки */
+    outline?: boolean;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+  }>
+>;
+
+export function CardPartner({
+  description,
+  logo,
+  href,
+  target = '_blank',
+  onClick,
+  disabled = false,
+  className,
+  layoutType,
+  outline,
+  'data-test-id': dataTestId = 'card-partner',
+  ...rest
+}: CardPartnerProps) {
+  const { anchorRef, handleCardKeyDown, handleCardClick, handleLinkClick } = useCardInteractions({
+    href,
+    onClick,
+    disabled,
+  });
+
+  return (
+    <Card
+      {...extractSupportProps(rest)}
+      size='m'
+      className={cn(styles.card, className)}
+      disabled={disabled}
+      onClick={handleCardClick}
+      onKeyDown={handleCardKeyDown}
+      outline={outline}
+      data-test-id={dataTestId}
+    >
+      <div className={styles.wrapper} data-layout-type={layoutType}>
+        <div className={styles.logo}>
+          {href ? (
+            <a
+              tabIndex={-1}
+              ref={anchorRef}
+              href={href}
+              target={target}
+              onClick={handleLinkClick}
+              data-test-id={`${dataTestId}__link`}
+            >
+              <img src={logo.src} alt={logo.alt} data-test-id={`${dataTestId}__logo`} />
+            </a>
+          ) : (
+            <img src={logo.src} alt={logo.alt} data-test-id={`${dataTestId}__logo`} />
+          )}
+        </div>
+
+        <RichText richText={description} className={styles.description} data-test-id={`${dataTestId}__description`} />
+      </div>
+    </Card>
+  );
+}

package/src/components/CardPartner/index.ts

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

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

@@ -0,0 +1,60 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.card {
+  position: relative;
+}
+
+.description {
+  @include ste.composite-var(ste.$sans-body-l);
+
+  color: ste.$sys-neutral-text-main;
+
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+
+  &[data-layout-type='mobile'] {
+    .description {
+      -webkit-line-clamp: 4;
+    }
+  }
+}
+
+.logo {
+  flex-shrink: 0;
+  height: 40px;
+  width: 144px;
+
+  a {
+    height: 100%;
+    width: 100%;
+    display: block;
+    text-decoration: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  img {
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+  }
+}

package/src/components/CardProduct/CardProduct.tsx

@@ -0,0 +1,123 @@
+import { AnchorHTMLAttributes } from 'react';
+
+import { ArrowLinksSVG } from '@cloud-ru/uikit-product-icons';
+import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Card, CardProps } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { Icon, IconProps } from '../../helperComponents/Icon';
+import { useCardInteractions } from '../../hooks';
+import { MapLayoutToTitleTypography } from './constants';
+import styles from './styles.module.scss';
+
+export type CardProductProps = WithSupportProps<
+  WithLayoutType<{
+    title: string;
+    description?: string;
+    showIcon?: boolean;
+    icon?: IconProps['icon'];
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    disabled?: boolean;
+    onClick?: CardProps['onClick'];
+    tags?: TagSpecialProps[];
+    className?: string;
+    outline?: boolean;
+    showBadge?: boolean;
+  }>
+>;
+
+export function CardProduct({
+  className,
+  layoutType,
+  icon,
+  title,
+  description,
+  href,
+  target,
+  onClick,
+  disabled,
+  tags,
+  outline,
+  showIcon = true,
+  showBadge = false,
+  'data-test-id': dataTestId = 'card-product',
+  ...rest
+}: CardProductProps) {
+  const Title = MapLayoutToTitleTypography[layoutType];
+
+  const { anchorRef, handleCardKeyDown, handleCardClick, handleLinkClick } = useCardInteractions({
+    href,
+    onClick,
+    disabled,
+  });
+
+  return (
+    <Card
+      disabled={disabled}
+      className={className}
+      size='m'
+      data-layout-type={layoutType}
+      data-test-id={dataTestId}
+      onClick={handleCardClick}
+      onKeyDown={handleCardKeyDown}
+      outline={outline}
+      functionBadge={
+        showBadge ? (
+          <div className={styles.cardFunctionBadgeWrapper}>
+            <ButtonFunction
+              icon={<ArrowLinksSVG className={styles.badgeArrow} />}
+              appearance='primary'
+              onClick={handleCardClick}
+              href={href}
+              size='s'
+            />
+          </div>
+        ) : undefined
+      }
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.wrapper}>
+        {showIcon && <Icon icon={icon} size='m' data-test-id={`${dataTestId}__icon`} decor />}
+
+        <div className={styles.content}>
+          <Title data-test-id={`${dataTestId}__title`} className={styles.title}>
+            {href ? (
+              <a
+                tabIndex={-1}
+                ref={anchorRef}
+                href={href}
+                target={target}
+                onClick={handleLinkClick}
+                data-test-id={`${dataTestId}__title-link`}
+              >
+                {title}
+              </a>
+            ) : (
+              title
+            )}
+          </Title>
+
+          {description && (
+            <TruncateString
+              data-test-id={`${dataTestId}__description`}
+              text={description}
+              className={styles.description}
+              maxLines={3}
+            />
+          )}
+
+          {tags && tags.length > 0 && (
+            <div className={styles.tagList}>
+              {tags.map((tag, index) => (
+                <TagSpecial data-test-id={`${dataTestId}__tag-${index + 1}`} key={index} {...tag} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/CardProduct/constants.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+export const MapLayoutToTitleTypography = {
+  [LAYOUT_TYPE.Desktop]: Typography.SansTitleM,
+  [LAYOUT_TYPE.DesktopSmall]: Typography.SansTitleM,
+  [LAYOUT_TYPE.Mobile]: Typography.SansLabelL,
+  [LAYOUT_TYPE.Tablet]: Typography.SansLabelL,
+} as const satisfies Record<LayoutType, ComponentType>;

package/src/components/CardProduct/index.ts

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

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

@@ -0,0 +1,73 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  [data-layout-type='mobile'] &,
+  [data-layout-type='tablet'] & {
+    gap: 12px;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-top: 6px;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+
+  a {
+    color: ste.$sys-neutral-text-main;
+    text-decoration: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  [data-layout-type='mobile'] &,
+  [data-layout-type='tablet'] & {
+    gap: 0;
+    padding-top: 0;
+  }
+}
+
+.title {
+  color: ste.$sys-neutral-text-main;
+  word-break: break-word;
+}
+
+.description {
+  @include ste.composite-var(ste.$sans-body-m);
+
+  color: ste.$sys-neutral-text-support;
+  word-break: break-word;
+}
+
+.tagList {
+  display: flex;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  [data-layout-type='mobile'] &,
+  [data-layout-type='tablet'] & {
+    padding-bottom: 0;
+  }
+}
+
+.badgeArrow {
+  color: ste.$sys-neutral-text-main;
+}

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './CardBasic';
+export * from './CardCase';
+export * from './CardInfo';
+export * from './CardList';
+export * from './CardPartner';
+export * from './CardMarketplace';
+export * from './CardProduct';
+export * from './CardMedia';

package/src/components/utils.ts

@@ -0,0 +1,15 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export function noop() {}
+
+export const getTypographySize = (layoutType: LayoutType): TypographyProps['size'] => {
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return 'm';
+
+    default:
+      return 'l';
+  }
+};

package/src/constants.ts

@@ -0,0 +1 @@
+export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space', ' '];