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

package/src/helperComponents/Icon/Icon.tsx

@@ -0,0 +1,31 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type IconElement = JSXElementConstructor<{ size?: number; className?: string }>;
+
+export type IconProps = {
+  icon: ReactNode | IconElement | { src: string; alt?: string };
+  size: 'm' | 'l';
+  'data-test-id'?: string;
+  decor?: boolean;
+};
+
+const isElementConstructor = (icon: IconProps['icon']): icon is IconElement =>
+  typeof icon === 'object' && icon !== null && 'render' in icon;
+
+export function Icon({ icon: Icon, size = 'm', 'data-test-id': dataTestId, decor }: IconProps) {
+  const isIcon = isElementConstructor(Icon);
+  const isImg = !isIcon && typeof Icon === 'object' && Icon !== null && 'src' in Icon;
+
+  if (isIcon || isImg) {
+    return (
+      <div className={styles.icon} data-size={size} data-test-id={dataTestId} data-decor={decor || undefined}>
+        {isIcon && <Icon />}
+        {isImg && <img src={Icon.src} alt={Icon.alt} />}
+      </div>
+    );
+  }
+
+  return Icon as ReactNode;
+}

package/src/helperComponents/Icon/index.ts

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

package/src/helperComponents/Icon/styles.module.scss

@@ -0,0 +1,49 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+$decor-padding: 8px;
+
+.icon {
+  flex-shrink: 0;
+  color: ste.$sys-graphite-text-main;
+  position: relative;
+
+  svg, img {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &[data-decor] {
+    padding: $decor-padding;
+
+    & svg, img {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      width: calc(100% - 2 * #{$decor-padding}) !important; /* stylelint-disable-line declaration-no-important */
+      height: calc(100% - 2 * #{$decor-padding}) !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      opacity: 50%;
+      background-color: ste.$sys-graphite-decor-default;
+      border-radius: ste.$radius-icon-predefined-decor-square-m;
+    }
+  }
+
+  &[data-size='m'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  &[data-size='l'] {
+    height: 48px;
+    width: 48px;
+  }
+}

package/src/hooks.ts

@@ -0,0 +1,40 @@
+import { KeyboardEvent, MouseEvent, MouseEventHandler, useRef } from 'react';
+
+import { noop } from './components/utils';
+import { TRIGGER_CLICK_KEY_CODES } from './constants';
+
+type useCardInteractionsProps = {
+  href?: string;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+
+export function useCardInteractions({ href, disabled, onClick }: useCardInteractionsProps) {
+  const anchorRef = useRef<HTMLAnchorElement>(null);
+
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    onClick?.(e);
+  };
+
+  const handleCardClick = disabled || !href ? undefined : noop;
+
+  const handleCardKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+
+    if (TRIGGER_CLICK_KEY_CODES.includes(e.key)) {
+      anchorRef?.current?.click();
+    }
+  };
+
+  return {
+    anchorRef,
+    handleLinkClick,
+    handleCardClick,
+    handleCardKeyDown,
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './helperComponents/Icon';