@vkontakte/vkui 5.8.2 → 5.9.0

package/src/components/Avatar/Avatar.module.css

@@ -0,0 +1,55 @@
+.Avatar {
+  border-radius: 50%;
+}
+
+.Avatar--has-gradient {
+  color: var(--vkui--color_text_contrast);
+}
+
+.Avatar--gradient-red {
+  background-color: #e52e40;
+  background-image: linear-gradient(135deg, #ff7583, #e52e40);
+}
+
+.Avatar--gradient-pink {
+  background-color: #e62e6b;
+  background-image: linear-gradient(135deg, #ff8880, #e62e6b);
+}
+
+.Avatar--gradient-orange {
+  background-color: #e66b2e;
+  background-image: linear-gradient(135deg, #ffbf80, #e66b2e);
+}
+
+.Avatar--gradient-yellow {
+  background-color: #e7a902;
+  background-image: linear-gradient(135deg, #ffd54f, #e7a902);
+}
+
+.Avatar--gradient-green {
+  background-color: #6cd97e;
+  background-image: linear-gradient(135deg, #6cd97e, #12b212);
+}
+
+.Avatar--gradient-l-blue {
+  background-color: #2bb4d6;
+  background-image: linear-gradient(135deg, #7df1fa, #2bb4d6);
+}
+
+.Avatar--gradient-blue {
+  background-color: #3f8ae0;
+  background-image: linear-gradient(135deg, #6cf, #3f8ae0);
+}
+
+.Avatar--gradient-violet {
+  background-color: #8f3fe0;
+  background-image: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}
+
+.Avatar__initials {
+  font-family: var(--vkui--font_family_accent);
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  text-align: center;
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
+import { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
+import {
+  AvatarBadgeWithPreset,
+  type AvatarBadgeWithPresetProps,
+} from './AvatarBadge/AvatarBadgeWithPreset';
+import { getInitialsFontSize } from './helpers';
+import styles from './Avatar.module.css';
+
+export type {
+  AvatarBadgeProps,
+  AvatarBadgeWithPresetProps,
+  ImageBaseOverlayProps as AvatarOverlayProps,
+};
+
+export const AVATAR_DEFAULT_SIZE = 48;
+
+const COLORS_NUMBER_TO_TEXT_MAP = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet',
+} as const;
+
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;
+
+export type InitialsAvatarTextGradients =
+  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]
+  | 'blue';
+
+const gradientStyles = {
+  'red': styles['Avatar--gradient-red'],
+  'orange': styles['Avatar--gradient-orange'],
+  'yellow': styles['Avatar--gradient-yellow'],
+  'green': styles['Avatar--gradient-green'],
+  'blue': styles['Avatar--gradient-blue'],
+  'l-blue': styles['Avatar--gradient-l-blue'],
+  'violet': styles['Avatar--gradient-violet'],
+};
+
+export interface AvatarProps extends ImageBaseProps {
+  /**
+   * Инициалы пользователя.
+   *
+   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.
+   *
+   * > ⚠️ Перебивает `fallbackIcon`.
+   */
+  initials?: string;
+  /**
+   * Задаёт градиент для фона.
+   *
+   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+   *
+   * 1: 'red'
+   * 2: 'orange'
+   * 3: 'yellow'
+   * 4: 'green'
+   * 5: 'l-blue'
+   * 6: 'violet'
+   *
+   * > Если необходимо задать свой градиент, то используйте значение `"custom"` и определите цвет градиента либо через
+   * > свой класс в `className`, либо через `style={{ backgroundImage: "..." }}`.
+   */
+  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Avatar
+ */
+export const Avatar = ({
+  size = AVATAR_DEFAULT_SIZE,
+  className,
+  gradientColor,
+  initials,
+  fallbackIcon,
+  children,
+  ...restProps
+}: AvatarProps) => {
+  const gradientName =
+    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
+  const isGradientNotCustom = gradientName && gradientName !== 'custom';
+  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;
+
+  return (
+    <ImageBase
+      {...restProps}
+      size={size}
+      fallbackIcon={rewrittenFallbackIcon}
+      className={classNames(
+        styles['Avatar'],
+        gradientName && styles['Avatar--has-gradient'],
+        isGradientNotCustom && gradientStyles[gradientName],
+        className,
+      )}
+    >
+      {initials && (
+        <div
+          className={styles['Avatar__initials']}
+          style={{
+            fontSize: getInitialsFontSize(size),
+          }}
+        >
+          {initials}
+        </div>
+      )}
+      {children}
+    </ImageBase>
+  );
+};
+
+Avatar.Badge = AvatarBadge;
+
+Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
+
+Avatar.Overlay = ImageBase.Overlay;

package/src/components/Avatar/AvatarBadge/AvatarBadge.module.css

@@ -0,0 +1,28 @@
+.AvatarBadge {
+  right: 0;
+  bottom: 0;
+}
+
+.AvatarBadge--shifted {
+  right: -2px;
+  bottom: -2px;
+}
+
+.AvatarBadge--preset-online,
+.AvatarBadge--preset-onlineMobile {
+  right: 14%;
+  bottom: 14%;
+  color: var(--vkui--color_accent_green);
+  transform: translate(50%, 50%);
+}
+
+/**
+ * Перебиваем свойства `ImageBaseBadge` для этих кейсов
+ */
+.AvatarBadge--preset-online {
+  padding: 0;
+}
+
+.AvatarBadge--preset-onlineMobile {
+  border-radius: 3px;
+}

package/src/components/Avatar/AvatarBadge/AvatarBadge.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';
+import styles from './AvatarBadge.module.css';
+
+export type AvatarBadgeProps = ImageBaseBadgeProps;
+
+export const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {
+  const { size } = React.useContext(ImageBaseContext);
+  return (
+    <ImageBase.Badge
+      {...restProps}
+      className={classNames(
+        styles['AvatarBadge'],
+        size < 96 && styles['AvatarBadge--shifted'],
+        className,
+      )}
+    />
+  );
+};

package/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  getBadgeIconSizeByImageBaseSize,
+  ImageBase,
+  type ImageBaseBadgeProps,
+  ImageBaseContext,
+} from '../../ImageBase/ImageBase';
+import { Icon12Circle, Icon12OnlineMobile } from './icons';
+import styles from './AvatarBadge.module.css';
+
+export interface AvatarBadgeWithPresetProps
+  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {
+  /**
+   * Использует предзаданные настройки.
+   *
+   * За каждым пресетом закреплена своя иконка и стили.
+   */
+  preset?: 'online' | 'online-mobile';
+}
+
+export const AvatarBadgeWithPreset = ({
+  preset = 'online',
+  className,
+  ...restProps
+}: AvatarBadgeWithPresetProps) => {
+  const { size } = React.useContext(ImageBaseContext);
+  const badgeSize = getBadgeIconSizeByImageBaseSize(size);
+  const isOnlinePreset = preset === 'online';
+  const presetClassName = isOnlinePreset
+    ? styles['AvatarBadge--preset-online']
+    : styles['AvatarBadge--preset-onlineMobile'];
+  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;
+
+  return (
+    <ImageBase.Badge
+      background="stroke"
+      className={classNames(styles['AvatarBadge'], presetClassName, className)}
+      {...restProps}
+    >
+      <Icon width={badgeSize} height={badgeSize} />
+    </ImageBase.Badge>
+  );
+};

package/src/components/Avatar/AvatarBadge/icons.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {
+  Icon12Circle as Icon12CircleLib,
+  Icon12OnlineMobile as Icon12OnlineMobileLib,
+} from '@vkontakte/icons';
+
+export const Icon12Circle = ({
+  width = 12,
+  height = 12,
+  ...restProps
+}: React.ComponentProps<typeof Icon12CircleLib>) => {
+  return (
+    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />
+  );
+};
+
+export const Icon12OnlineMobile = ({
+  width = 8,
+  height = 12,
+  ...restProps
+}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {
+  return (
+    <Icon12OnlineMobileLib
+      {...restProps}
+      width={width >= 24 ? 9 : 8}
+      height={height >= 24 ? 15 : 12}
+    />
+  );
+};

package/src/components/Avatar/helpers.ts

@@ -0,0 +1,36 @@
+import type { ImageBaseSize } from '../ImageBase/ImageBase';
+
+const MAX_FONT_SIZE = 30;
+const MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;
+const RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;
+
+/**
+ * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.
+ */
+export function getInitialsFontSize(avatarSize: number): number {
+  if (avatarSize <= 16) {
+    return 5;
+  } else if (avatarSize <= 24) {
+    return 8;
+  } else if (avatarSize <= 32) {
+    return 10;
+  } else if (avatarSize <= 36) {
+    return 13;
+  } else if (avatarSize <= 44) {
+    return 14;
+  } else if (avatarSize <= 48) {
+    return 17;
+  } else if (avatarSize < 56) {
+    return 18;
+  } else if (avatarSize <= 64) {
+    return 21;
+  } else if (avatarSize <= 88) {
+    return 26;
+  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {
+    return MAX_FONT_SIZE;
+  }
+
+  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);
+  const evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,26 @@
+.Badge {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.Badge--mode-new {
+  background-color: var(--vkui--color_icon_accent);
+}
+
+.Badge--mode-prominent {
+  background-color: var(--vkui--color_accent_red);
+}
+
+/**
+ * CMP:
+ * TabbarItem
+ */
+:global(.vkuiInternalTabbarItem__label) .Badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Badge.module.css';
+
+const stylesMode = {
+  new: styles['Badge--mode-new'],
+  prominent: styles['Badge--mode-prominent'],
+};
+
+export interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
+  mode: 'new' | 'prominent';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Badge
+ */
+export const Badge = ({ mode = 'new', ...restProps }: BadgeProps) => (
+  <RootComponent
+    Component="span"
+    baseClassName={classNames(styles['Badge'], stylesMode[mode])}
+    {...restProps}
+  />
+);

package/src/components/Banner/Banner.module.css

@@ -0,0 +1,154 @@
+.Banner {
+  isolation: isolate;
+  color: var(--vkui--color_text_primary);
+}
+
+/* TODO [>=6]: удалить или прийти к padding*/
+.Banner--withPadding {
+  margin: 12px 0;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.Banner__in {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  padding: 12px;
+  background-color: var(--vkui--color_background_secondary);
+  border-radius: var(--vkui--size_border_radius--regular);
+  overflow: hidden;
+}
+
+.Banner__in::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
+  border-radius: inherit;
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: var(--vkui_internal--z_index_banner_content);
+}
+
+.Banner__before {
+  position: relative;
+  margin-right: 12px;
+  z-index: var(--vkui_internal--z_index_banner_content);
+}
+
+.Banner__content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  min-width: 0;
+  z-index: var(--vkui_internal--z_index_banner_content);
+}
+
+.Banner__subheader,
+.Banner__text {
+  color: var(--vkui--color_text_subhead);
+}
+
+.Banner__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: var(--vkui_internal--z_index_banner_background);
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+.Banner__bg,
+.Banner__bg > * {
+  width: 100%;
+  height: 100%;
+}
+
+.Banner__aside {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  width: 28px;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Banner__dismiss {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  color: var(--vkui--color_icon_secondary);
+  z-index: var(--vkui_internal--z_index_banner_hover);
+}
+
+.Banner__actions {
+  margin-top: 12px;
+}
+
+.Banner__subheader:not(:first-child),
+.Banner__text:not(:first-child) {
+  margin-top: 2px;
+}
+
+/**
+ * Mode "image"
+ */
+.Banner--mode-image .Banner__in {
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.Banner--inverted .Banner__dismiss,
+.Banner--inverted .Banner__expand,
+.Banner--inverted {
+  color: var(--vkui--color_text_contrast);
+}
+
+.Banner--inverted .Banner__subheader {
+  color: var(--vkui--color_text_contrast);
+  opacity: 0.72;
+}
+
+/**
+ * Size "m"
+ */
+.Banner--size-m .Banner__in {
+  padding: 16px;
+}
+
+.Banner--size-m .Banner__subheader:not(:first-child),
+.Banner--size-m .Banner__text:not(:first-child) {
+  margin-top: 4px;
+}
+
+.Banner--ios .Banner__dismiss,
+.Banner--ios.Banner--mode-image .Banner__dismiss {
+  color: var(--vkui--color_icon_secondary);
+}
+
+/**
+ * CMP:
+ * FormStatus
+ */
+:global(.vkuiInternalFormStatus) .Banner__in::before {
+  border: 0;
+}
+
+:global(.vkuiInternalFormStatus--mode-error) .Banner__in {
+  background-color: var(--vkui--color_background_negative_tint);
+}
+
+:global(.vkuiInternalFormStatus--mode-error) .Banner__subheader {
+  color: var(--vkui--color_background_negative);
+}