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

package/src/components/CardInfo/CardInfo.tsx

@@ -0,0 +1,120 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Card } from '@snack-uikit/card';
+import { Typography } from '@snack-uikit/typography';
+
+import { Icon, IconProps } from '../../helperComponents/Icon';
+import { useCardInteractions } from '../../hooks';
+import { getTypographySize } from '../utils';
+import styles from './styles.module.scss';
+
+export type CardInfoProps = WithSupportProps<
+  WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Слот под иконку/кастомную ноду */
+    icon?: IconProps['icon'];
+    /** Тег */
+    tag?: Pick<TagSpecialProps, 'text' | 'appearance'>;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** Наличие обводки */
+    outline?: boolean;
+    /** CSS-класс */
+    className?: string;
+  }>
+>;
+
+export function CardInfo({
+  title,
+  description,
+  icon,
+  href,
+  target = '_blank',
+  onClick,
+  tag,
+  disabled = false,
+  className,
+  layoutType,
+  outline,
+  'data-test-id': dataTestId = 'card-info',
+  ...rest
+}: CardInfoProps) {
+  const { anchorRef, handleLinkClick, handleCardClick, handleCardKeyDown } = useCardInteractions({
+    href,
+    disabled,
+    onClick,
+  });
+
+  return (
+    <Card
+      {...extractSupportProps(rest)}
+      size='m'
+      className={cn(styles.card, className)}
+      disabled={disabled}
+      outline={outline}
+      onClick={handleCardClick}
+      onKeyDown={handleCardKeyDown}
+      data-test-id={dataTestId}
+    >
+      <div data-layout-type={layoutType} className={styles.wrapper}>
+        {tag && <TagSpecial {...tag} className={styles.tag} data-test-id={`${dataTestId}__tag`} />}
+
+        {icon && <Icon size='m' data-test-id={`${dataTestId}__icon`} icon={icon} />}
+
+        <div className={styles.content}>
+          <Typography
+            tag='h3'
+            family='sans'
+            purpose='title'
+            size={getTypographySize(layoutType)}
+            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`}
+              >
+                <RichText richText={title} />
+              </a>
+            ) : (
+              <RichText richText={title} />
+            )}
+          </Typography>
+
+          {description && (
+            <Typography
+              tag='div'
+              family='sans'
+              purpose='body'
+              size={getTypographySize(layoutType)}
+              data-test-id={`${dataTestId}__description`}
+            >
+              <RichText className={styles.description} richText={description} />
+            </Typography>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/CardInfo/index.ts

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

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

@@ -0,0 +1,52 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.card {
+  position: relative;
+  border-radius: 0;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: ste.$dimension-2m;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: ste.$dimension-050m;
+
+    .title {
+      color: ste.$sys-neutral-text-main;
+
+      a {
+        color: ste.$sys-neutral-text-main;
+        text-decoration: none;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    .description {
+      color: ste.$sys-neutral-text-support;
+    }
+  }
+
+  .tag {
+    position: absolute;
+    right: ste.$dimension-050m;
+    top: ste.$dimension-050m;
+  }
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: 12px;
+  }
+}

package/src/components/CardInfo/utilsTypes.ts

@@ -0,0 +1,3 @@
+export type BetterOmit<Type, Prop> = {
+  [Property in keyof Type as Exclude<Property, Prop>]: Type[Property];
+};

package/src/components/CardList/CardList.tsx

@@ -0,0 +1,90 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { getTitleTruncateMaxLines, getTitleTypographyProps } from './utils';
+
+export type CardListProps = WithSupportProps<
+  WithLayoutType<{
+    /** Изображение */
+    img: string;
+    /** Теги */
+    tags: Omit<TagSpecialProps, 'size' | 'className'>[];
+    /** Ссылка */
+    href: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Дата */
+    labelDate?: string;
+  }>
+>;
+
+export function CardList({
+  disabled,
+  layoutType,
+  img,
+  title,
+  className,
+  labelDate,
+  href,
+  onClick,
+  tags,
+  target,
+  'data-test-id': dataTestId = 'card-list',
+  ...rest
+}: CardListProps) {
+  return (
+    <a
+      {...extractSupportProps(rest)}
+      href={href}
+      target={target}
+      className={cn(styles.wrapper, className)}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      onClick={disabled ? undefined : onClick}
+      data-layout-type={layoutType}
+    >
+      <div className={styles.imgWrapper} data-test-id={`${dataTestId}-imgWrapper`}>
+        <img className={styles.img} src={img} alt='card_img' data-test-id={`${dataTestId}-img`} />
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.tagRow}>
+          {tags.map((tag, idx) => (
+            <TagSpecial {...tag} key={idx} />
+          ))}
+        </div>
+
+        <Typography className={styles.title} tag='h3' family='sans' {...getTitleTypographyProps({ layoutType })}>
+          <TruncateString
+            text={title}
+            maxLines={getTitleTruncateMaxLines({ layoutType })}
+            data-test-id={`${dataTestId}-title`}
+          />
+        </Typography>
+
+        {labelDate && (
+          <Typography.SansBodyS className={styles.labelDate} data-test-id={`${dataTestId}-time`}>
+            {labelDate}
+          </Typography.SansBodyS>
+        )}
+      </div>
+    </a>
+  );
+}

package/src/components/CardList/index.ts

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

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

@@ -0,0 +1,102 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as element;
+
+$transition: 0.3s;
+$scale: 1.05;
+
+.title {
+  flex: 1 0 auto;
+
+  color: var.$sys-neutral-text-main;
+}
+
+.img,
+.title {
+  transition: all $transition;
+}
+
+.imgWrapper {
+  .img {
+    height: 100%;
+    width: 100%;
+  }
+
+  aspect-ratio: 1.6;
+  height: 176px;
+  overflow: hidden;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var.$dimension-2m;
+  text-decoration: none;
+
+  &[data-layout-type='tablet'] {
+    .imgWrapper {
+      height: 160px;
+    }
+  }
+
+  &[data-layout-type='mobile'] {
+    .imgWrapper {
+      aspect-ratio: unset;
+      width: 100%;
+      height: auto;
+    }
+
+    grid-template-columns: 1fr;
+  }
+
+  &[aria-disabled] {
+    pointer-events: none;
+    cursor: not-allowed;
+
+    .title {
+      color: var.$sys-neutral-text-disabled;
+    }
+
+    .imgWrapper {
+      opacity: 0.5;
+    }
+  }
+
+  &:not([aria-disabled]) {
+    &:hover {
+      .title {
+        color: var.$sys-primary-accent-hovered;
+      }
+    }
+
+    &:focus-visible {
+      @include element.outline-var(element.$container-focused-m);
+
+      outline-color: var.$sys-primary-decor-activated;
+    }
+
+    &:hover,
+    &:focus-visible {
+      .img {
+        scale: $scale;
+      }
+    }
+  }
+}
+
+.tagRow {
+  display: flex;
+  justify-content: flex-start;
+  gap: var.$dimension-1m;
+
+  flex-wrap: wrap;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-2m;
+}
+
+.labelDate {
+  color: var.$sys-neutral-text-light;
+}

package/src/components/CardList/utils.ts

@@ -0,0 +1,35 @@
+import { LAYOUT_TYPE, WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { PURPOSE, SIZE, TypographyProps } from '@snack-uikit/typography';
+
+type Props = WithLayoutType<unknown>;
+
+export const getTitleTypographyProps = ({ layoutType }: Props): Pick<TypographyProps, 'size' | 'purpose'> => {
+  switch (layoutType) {
+    case LAYOUT_TYPE.Mobile:
+    case LAYOUT_TYPE.Tablet:
+      return {
+        purpose: PURPOSE.Title,
+        size: SIZE.L,
+      };
+    case LAYOUT_TYPE.Desktop:
+    case LAYOUT_TYPE.DesktopSmall:
+    default:
+      return {
+        purpose: PURPOSE.Headline,
+        size: SIZE.S,
+      };
+  }
+};
+
+export const getTitleTruncateMaxLines = ({ layoutType }: Props): number => {
+  switch (layoutType) {
+    case LAYOUT_TYPE.Mobile:
+      return 5;
+    case LAYOUT_TYPE.Tablet:
+      return 3;
+    case LAYOUT_TYPE.Desktop:
+    case LAYOUT_TYPE.DesktopSmall:
+    default:
+      return 2;
+  }
+};

package/src/components/CardMarketplace/CardMarketplace.tsx

@@ -0,0 +1,112 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Card } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { useCardInteractions } from '../../hooks';
+import { getTypographySize } from '../utils';
+import styles from './styles.module.scss';
+
+export type CardMarketplaceProps = WithSupportProps<
+  WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Ссылка */
+    href: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Ссылка на изображение */
+    logo: {
+      src: string;
+      alt?: string;
+    };
+    /** Тег */
+    tag?: Omit<TagSpecialProps, 'className'>;
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+  }>
+>;
+
+export function CardMarketplace({
+  title,
+  description,
+  logo,
+  href,
+  target = '_blank',
+  onClick,
+  tag,
+  disabled = false,
+  className,
+  layoutType,
+  'data-test-id': dataTestId = 'card-marketplace',
+  ...rest
+}: CardMarketplaceProps) {
+  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}
+      data-test-id={dataTestId}
+      outline
+    >
+      <div data-layout-type={layoutType} className={styles.wrapper}>
+        <img alt={logo.alt ?? title} data-test-id={`${dataTestId}__logo`} src={logo.src} className={styles.logo} />
+
+        <div className={styles.content}>
+          <Typography
+            tag='h3'
+            family='sans'
+            purpose='title'
+            size={getTypographySize(layoutType)}
+            className={styles.title}
+            data-test-id={`${dataTestId}__title`}
+          >
+            <a
+              tabIndex={-1}
+              ref={anchorRef}
+              href={href}
+              target={target}
+              onClick={handleLinkClick}
+              data-test-id={`${dataTestId}__title-link`}
+            >
+              <TruncateString text={title} maxLines={2} />
+            </a>
+          </Typography>
+
+          {description && (
+            <TruncateString
+              className={styles.description}
+              text={description}
+              maxLines={4}
+              data-test-id={`${dataTestId}__description`}
+            />
+          )}
+        </div>
+
+        {tag && <TagSpecial data-test-id={`${dataTestId}__tag`} className={styles.tag} {...tag} />}
+      </div>
+    </Card>
+  );
+}

package/src/components/CardMarketplace/index.ts

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

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

@@ -0,0 +1,73 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-card' as ste;
+
+.card {
+  position: relative;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+
+  &[data-layout-type=mobile],
+  &[data-layout-type=tablet] {
+    gap: 12px;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+
+  [data-layout-type=mobile] &,
+  [data-layout-type=tablet] & {
+    gap: 4px;
+  }
+}
+
+
+.title {
+  color: ste.$sys-neutral-text-main;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.description {
+  @include ste.composite-var(ste.$sans-body-l);
+
+  color: ste.$sys-neutral-text-support;
+
+  [data-layout-type=mobile] &,
+  [data-layout-type=tablet] & {
+    @include ste.composite-var(ste.$sans-body-m);
+  }
+}
+
+.tag {
+  position: absolute;
+  right: ste.simple-var(ste.$card-content-m-container, 'padding');
+  top: ste.simple-var(ste.$card-content-m-container, 'padding');
+}
+
+.logo {
+  flex-shrink: 0;
+  height: 40px;
+  width: 40px;
+  object-fit: contain;
+}