@cloud-ru/uikit-product-card-predefined 0.8.12

package/src/components/CardServiceSmall/CardServiceSmall.tsx

@@ -0,0 +1,140 @@
+import cn from 'classnames';
+import { JSXElementConstructor, KeyboardEventHandler, MouseEventHandler, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { PromoTagPredefined, PromoTagPredefinedProps } from '@cloud-ru/uikit-product-promo-tag-predefined';
+import { Card, CardProps } from '@snack-uikit/card';
+import { PromoTag } from '@snack-uikit/promo-tag';
+import { Favorite } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type CardServiceSmallProps = WithSupportProps<
+  Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'outline' | 'href' | 'checked'> &
+    Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
+      truncate?: Pick<NonNullable<Card.HeaderProps['truncate']>, 'title'>;
+      favorite?: {
+        enabled: boolean;
+        visibilityStrategy: 'always' | 'hover';
+        checked?: boolean;
+        onChange?(value: boolean): void;
+      };
+      promoBadge?: PromoTagPredefinedProps | CardProps['promoBadge'];
+    }
+>;
+
+function isIconProps(
+  props: Card.HeaderProps['emblem'],
+): props is { icon: JSXElementConstructor<{ className?: string }> } {
+  return Boolean(props && 'icon' in props);
+}
+
+export function CardServiceSmall({
+  href,
+  promoBadge,
+  title,
+  emblem,
+  onClick,
+  className,
+  disabled,
+  truncate,
+  outline,
+  checked,
+  favorite,
+  ...rest
+}: CardServiceSmallProps) {
+  const [isFavourite, setIsFavorite] = useUncontrolledProp(favorite?.checked, false, favorite?.onChange);
+  const favoriteRef = useRef<HTMLInputElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const Icon = isIconProps(emblem) ? emblem.icon : undefined;
+
+  const onCardKeyDown: KeyboardEventHandler = event => {
+    if (event.code === 'ArrowRight') {
+      favoriteRef.current?.focus();
+    }
+  };
+
+  const onFavoriteKeyUp: KeyboardEventHandler = event => {
+    event.preventDefault();
+
+    if (event.code === 'ArrowLeft') {
+      cardRef.current?.focus();
+    }
+
+    if (event.code === 'Space' || event.code === 'Enter') {
+      setIsFavorite(!isFavourite);
+    }
+  };
+
+  const onFavoriteClick: MouseEventHandler = event => {
+    event.stopPropagation();
+
+    favoriteRef.current?.blur();
+  };
+
+  return (
+    <div className={cn(styles.wrapper, className)}>
+      <Card
+        {...extractSupportProps(rest)}
+        href={href}
+        ref={cardRef}
+        onKeyDown={onCardKeyDown}
+        header={
+          <div className={styles.contentWrapper}>
+            {Icon && <Icon className={styles.icon} />}
+
+            <div className={styles.contentLayout}>
+              <Typography
+                family='sans'
+                size='s'
+                purpose='title'
+                className={styles.title}
+                data-test-id='card-service-small__title'
+              >
+                <TruncateString text={title} maxLines={truncate?.title} variant='end' />
+              </Typography>
+            </div>
+
+            {favorite && favorite.enabled && (
+              <div className={styles.favoriteWrapper} data-visibility-strategy={favorite.visibilityStrategy}>
+                <Favorite
+                  size='m'
+                  checked={isFavourite}
+                  inputRef={favoriteRef}
+                  onChange={setIsFavorite}
+                  tabIndex={-1}
+                  onKeyUp={onFavoriteKeyUp}
+                  onClick={onFavoriteClick}
+                  data-test-id='card-service-small__favorite'
+                  icon='star'
+                />
+              </div>
+            )}
+          </div>
+        }
+        onClick={onClick}
+        disabled={disabled}
+        outline={outline}
+        checked={checked}
+        size='s'
+      />
+
+      {promoBadge && (
+        <div className={styles.promoTagWrapper}>
+          {typeof promoBadge === 'object' && 'variant' in promoBadge ? (
+            <PromoTagPredefined data-test-id='card-service-small__promo-badge' {...promoBadge} />
+          ) : (
+            <PromoTag
+              color='decor'
+              {...(typeof promoBadge === 'string' ? { text: promoBadge, appearance: 'primary' } : promoBadge)}
+              data-test-id='card-service-small__promo-badge'
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/CardServiceSmall/index.ts

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

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

@@ -0,0 +1,60 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.favoriteWrapper {
+  flex-shrink: 0;
+  // stylelint-disable-next-line declaration-property-value-allowed-list
+  z-index: 1;
+
+  &[data-visibility-strategy='hover'] {
+    display: none;
+  }
+
+  &[data-visibility-strategy='always'] {
+    display: flex;
+  }
+}
+
+.wrapper {
+  position: relative;
+
+  &:hover, &:focus-within {
+    .favoriteWrapper {
+      display: flex;
+    }
+  }
+}
+
+.contentWrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: styles-theme-variables.$dimension-4m;
+  gap: styles-theme-variables.$dimension-1m;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}
+
+.contentLayout {
+  overflow: hidden;
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.title {
+  display: block;
+  max-width: 100%;
+}
+
+.promoTagWrapper {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: flex;
+}

package/src/components/CardSuggest/CardSuggest.tsx

@@ -0,0 +1,54 @@
+import { Card, CardProps } from '@snack-uikit/card';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TRUNCATE_DEFAULTS } from './constants';
+
+export type CardSuggestProps = WithSupportProps<
+  Pick<CardProps, 'promoBadge' | 'onClick' | 'className' | 'disabled' | 'href'> & {
+    size?: 's' | 'm';
+    title: string;
+    description: string;
+    truncate?: {
+      title?: number;
+      description?: number;
+    };
+  }
+>;
+
+export function CardSuggest({
+  title,
+  description,
+  truncate,
+  onClick,
+  className,
+  disabled,
+  href,
+  promoBadge,
+  size,
+  ...rest
+}: CardSuggestProps) {
+  const truncateLines = { ...TRUNCATE_DEFAULTS, ...truncate };
+
+  return (
+    <Card
+      // TODO: typescript error
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      {...extractSupportProps(rest)}
+      size={size}
+      promoBadge={promoBadge}
+      href={href}
+      disabled={disabled}
+      header={<Card.Header title={title} truncate={{ title: truncateLines.title }} />}
+      onClick={onClick}
+      className={className}
+    >
+      <TruncateString
+        text={description}
+        maxLines={truncateLines.description}
+        data-test-id='card-suggest__description'
+      />
+    </Card>
+  );
+}

package/src/components/CardSuggest/constants.ts

@@ -0,0 +1,4 @@
+export const TRUNCATE_DEFAULTS = {
+  title: 2,
+  description: 3,
+};

package/src/components/CardSuggest/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './CardBanner';
+export * from './CardSuggest';
+export * from './CardService';
+export * from './CardServiceSmall';

package/src/index.ts

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