@cloud-ru/uikit-product-claudia 1.6.2

package/src/components/ButtonClaudia/ButtonClaudia.tsx

@@ -0,0 +1,33 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { HTML_TYPE, SIZE, TARGET } from './constants';
+import { ButtonPrivate } from './helperComponents';
+import styles from './styles.module.scss';
+import { CommonButtonProps } from './types';
+import { extractCommonButtonProps } from './utils';
+
+export type ButtonClaudiaProps = WithSupportProps<Omit<CommonButtonProps, 'appearance' | 'iconPosition'>>;
+
+export const ButtonClaudia = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonClaudiaProps>(
+  (
+    { className, size = SIZE.S, target = TARGET.Blank, type = HTML_TYPE.Button, tabIndex, fullWidth = false, ...rest },
+    ref,
+  ) => (
+    <ButtonPrivate
+      {...extractSupportProps(rest)}
+      {...extractCommonButtonProps(rest)}
+      className={cn(styles.button, styles.specificityX2, className)}
+      iconClassName={styles.icon}
+      labelClassName={styles.label}
+      size={size}
+      fullWidth={fullWidth}
+      target={target}
+      type={type}
+      tabIndex={tabIndex}
+      ref={ref}
+    />
+  ),
+);

package/src/components/ButtonClaudia/constants.ts

@@ -0,0 +1,29 @@
+export const APPEARANCE = {
+  Tertiary: 'tertiary',
+  Secondary: 'secondary',
+} as const;
+
+export const HTML_TYPE = {
+  Button: 'button',
+  Submit: 'submit',
+  Reset: 'reset',
+} as const;
+
+export const TARGET = {
+  Blank: '_blank',
+  Self: '_self',
+  Parent: '_parent',
+  Top: '_top',
+} as const;
+
+export const SIZE = {
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const ICON_POSITION = {
+  Before: 'before',
+  After: 'after',
+} as const;

package/src/components/ButtonClaudia/helperComponents/ButtonPrivate/ButtonPrivate.tsx

@@ -0,0 +1,99 @@
+import cn from 'classnames';
+import { ForwardedRef, forwardRef, MouseEvent } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { APPEARANCE, HTML_TYPE, ICON_POSITION, TARGET } from '../../constants';
+import { CommonButtonProps } from '../../types';
+import { APPEARANCE_TO_COLOR_MAP } from './constants';
+import styles from './styles.module.scss';
+import { getChildren, getVariant } from './utils';
+
+export type ButtonPrivateProps = WithSupportProps<
+  CommonButtonProps & {
+    iconClassName: string;
+    labelClassName: string;
+    fullWidth?: boolean;
+  }
+>;
+
+export const ButtonPrivate = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPrivateProps>(
+  (
+    {
+      className,
+      disabled,
+      href,
+      icon,
+      iconClassName,
+      iconPosition = ICON_POSITION.After,
+      label,
+      labelClassName,
+      loading,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      size,
+      target = TARGET.Blank,
+      type = HTML_TYPE.Button,
+      appearance = APPEARANCE.Tertiary,
+      tabIndex: tabIndexProp = 0,
+      fullWidth,
+      ...rest
+    },
+    ref,
+  ) => {
+    const variant = getVariant({ label, iconPosition, icon });
+    const children = getChildren({
+      icon,
+      iconClassName,
+      iconPosition,
+      label,
+      labelClassName,
+      loading,
+    });
+    const tabIndex = loading || disabled ? -1 : tabIndexProp;
+
+    const handleClick = (event: MouseEvent<HTMLElement>) => {
+      if (disabled || loading) {
+        event.preventDefault();
+        return;
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const buttonProps = {
+      ...extractSupportProps(rest),
+      className: cn(styles.button, className),
+      'data-disabled': disabled || undefined,
+      'aria-disabled': disabled || undefined,
+      'data-loading': loading || undefined,
+      'data-size': size,
+      'data-full-width': fullWidth || undefined,
+      'data-appearance': APPEARANCE_TO_COLOR_MAP[appearance],
+      'data-variant': variant,
+      onClick: handleClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      tabIndex,
+    };
+
+    if (href) {
+      return (
+        <a role='button' href={href} target={target} {...buttonProps} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+          {children}
+        </a>
+      );
+    }
+
+    return (
+      <button {...buttonProps} type={type} ref={ref as ForwardedRef<HTMLButtonElement>}>
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/ButtonClaudia/helperComponents/ButtonPrivate/constants.ts

@@ -0,0 +1,13 @@
+import { APPEARANCE } from '../../constants';
+
+export enum Variant {
+  LabelOnly = 'label-only',
+  IconOnly = 'icon-only',
+  IconBefore = 'icon-before',
+  IconAfter = 'icon-after',
+}
+
+export const APPEARANCE_TO_COLOR_MAP = {
+  [APPEARANCE.Tertiary]: 'fluorescent-yellow',
+  [APPEARANCE.Secondary]: 'graphite',
+};

package/src/components/ButtonClaudia/helperComponents/ButtonPrivate/index.ts

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

package/src/components/ButtonClaudia/helperComponents/ButtonPrivate/styles.module.scss

@@ -0,0 +1,46 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
+
+.button {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: max-content;
+  min-width: max-content;
+  margin: 0;
+  padding: 0;
+
+  color: transparent;
+  text-decoration: none;
+  text-transform: none;
+
+  background-color: transparent;
+  border: 0 solid transparent;
+  outline: 0;
+  outline-offset: 0;
+
+  &[data-full-width] {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  > * {
+    cursor: pointer;
+  }
+
+  &:disabled,
+  &[data-disabled],
+  &[data-loading] {
+    cursor: not-allowed;
+    > * {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/ButtonClaudia/helperComponents/ButtonPrivate/utils.tsx

@@ -0,0 +1,92 @@
+import { Sun } from '@snack-uikit/loaders';
+
+import { ICON_POSITION } from '../../constants';
+import { ButtonPrivateProps } from './ButtonPrivate';
+import { Variant } from './constants';
+
+type GetVariantProps = Pick<ButtonPrivateProps, 'label' | 'icon' | 'iconPosition'>;
+
+export function getVariant({ label, icon, iconPosition }: GetVariantProps) {
+  if (label && icon && iconPosition === ICON_POSITION.After) {
+    return Variant.IconAfter;
+  }
+
+  if (label && icon && iconPosition === ICON_POSITION.Before) {
+    return Variant.IconBefore;
+  }
+
+  if (label) {
+    return Variant.LabelOnly;
+  }
+
+  return Variant.IconOnly;
+}
+
+type GetWrappedIconProps = Pick<ButtonPrivateProps, 'icon' | 'iconClassName' | 'loading'>;
+
+export function getWrappedIcon({ icon, iconClassName, loading }: GetWrappedIconProps) {
+  if (loading) {
+    return (
+      <span data-test-id={'loading-icon'} className={iconClassName}>
+        <Sun size='s' />
+      </span>
+    );
+  }
+
+  if (icon) {
+    return (
+      <span data-test-id={'icon'} className={iconClassName}>
+        {icon}
+      </span>
+    );
+  }
+
+  return undefined;
+}
+
+type GetWrappedLabelProps = Pick<ButtonPrivateProps, 'label' | 'labelClassName'>;
+
+export function getWrappedLabel({ label, labelClassName }: GetWrappedLabelProps) {
+  return label ? (
+    <span data-test-id={'label'} className={labelClassName}>
+      {label}
+    </span>
+  ) : undefined;
+}
+
+type GetChildrenProps = Pick<
+  ButtonPrivateProps,
+  'icon' | 'label' | 'iconPosition' | 'iconClassName' | 'labelClassName' | 'loading'
+>;
+
+export function getChildren({ icon, label, iconPosition, iconClassName, labelClassName, loading }: GetChildrenProps) {
+  const wrappedIcon = getWrappedIcon({
+    icon,
+    iconClassName,
+    loading,
+  });
+  const wrappedLabel = getWrappedLabel({
+    label,
+    labelClassName,
+  });
+
+  switch (iconPosition) {
+    case ICON_POSITION.Before: {
+      return (
+        <>
+          {wrappedIcon}
+          {wrappedLabel}
+        </>
+      );
+    }
+    case ICON_POSITION.After:
+    default: {
+      return (
+        <>
+          {wrappedLabel}
+          {wrappedIcon}
+        </>
+      );
+    }
+  }
+}

package/src/components/ButtonClaudia/helperComponents/index.ts

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

package/src/components/ButtonClaudia/index.ts

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

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

@@ -0,0 +1,141 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-button-buttonFilled' as buttonFilled;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
+
+$sizes: 'xs', 's', 'm', 'l';
+$variants: 'label-only', 'icon-only', 'icon-after';
+$typography: (
+  'xs': stv.$sans-label-s,
+  's': stv.$sans-label-m,
+  'm': stv.$sans-label-l,
+  'l': stv.$sans-label-l,
+);
+
+@mixin icon-fill($color) {
+  .icon {
+    color: $color;
+  }
+}
+
+@mixin label-color($color) {
+  .label {
+    color: $color;
+  }
+}
+
+@mixin button-anatomy-styles($button-theme, $sizes, $variants, $typography, $hasLabel: true) {
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @if $hasLabel == true {
+        .label {
+          @include styles-tokens-element.composite-var($typography, $size);
+        }
+      }
+
+      .icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        width: styles-tokens-element.$icon-s;
+        height: styles-tokens-element.$icon-s;
+
+        svg {
+          max-width: styles-tokens-element.$icon-s;
+          max-height: styles-tokens-element.$icon-s;
+        }
+      }
+
+      @each $variant in $variants {
+        &[data-variant='#{$variant}'] {
+          @include styles-tokens-element.composite-var($button-theme, 'container', $size, $variant);
+        }
+      }
+    }
+  }
+}
+
+@mixin loading-label-only($button-theme) {
+  &[data-loading][data-variant='label-only'] {
+    .icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .label {
+      @include styles-tokens-element.composite-var($button-theme, 'label', 'load-label-only');
+    }
+  }
+}
+
+@mixin button-common-state {
+  &:focus-visible {
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
+  }
+}
+
+@mixin claudia-button-colors-styles {
+  @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+  @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+
+  background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'accent-default');
+
+  @media (hover: hover) {
+    &:hover {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+
+      background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'accent-hovered');
+    }
+  }
+
+  @media (hover: none) or (hover: hover) {
+    &:focus-visible {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+
+      background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'accent-hovered');
+    }
+
+    &:active {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+
+      background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'accent-pressed');
+    }
+
+    &[data-loading] {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'on-accent'));
+
+      background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'accent-pressed');
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'text-light'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'text-light'));
+
+      background-color: stv.simple-var(stv.$theme-variables, 'sys', 'claudia', 'decor-disabled');
+    }
+  }
+}
+
+@mixin claudia-button-common-state {
+  &:focus-visible {
+    @include button-common-state;
+
+    outline-color: stv.$sys-available-complementary !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.button.specificityX2 {
+  @include button-anatomy-styles(buttonFilled.$button-filled, $sizes, $variants, $typography);
+  @include loading-label-only(buttonFilled.$button-filled);
+  @include claudia-button-colors-styles;
+  @include claudia-button-common-state;
+}

package/src/components/ButtonClaudia/types.ts

@@ -0,0 +1,63 @@
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+} from 'react';
+
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE, ICON_POSITION, SIZE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;
+
+export type IconPosition = ValueOf<typeof ICON_POSITION>;
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type BaseButtonProps = {
+  /** CSS-класс */
+  className?: string;
+  /** Флаг неактивности компонента */
+  disabled?: boolean;
+  /**
+   * Иконка
+   * @type ReactElement
+   */
+  icon?: ReactElement;
+  /** Позиция иконки */
+  iconPosition?: IconPosition;
+  /** Текст кнопки */
+  label?: string;
+  /** Флаг состояния загрузки */
+  loading?: boolean;
+  /** Колбек обработки клика */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /** Колбек обработки нажатия клавиши */
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  /** Колбек обработки фокуса */
+  onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  /** Колбек обработки блюра */
+  onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  /** Размер */
+  size?: Size;
+  /** Внешний вид кнопки */
+  appearance?: Appearance;
+  /** HTML-аттрибут type */
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  /** HTML-аттрибут tab-index */
+  tabIndex?: number;
+  /** Сделать кнопку во всю ширину */
+  fullWidth?: boolean;
+};
+
+export type AnchorButtonProps = {
+  /** Ссылка */
+  href?: string;
+  /** HTML-аттрибут target */
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/src/components/ButtonClaudia/utils.ts

@@ -0,0 +1,15 @@
+import { CommonButtonProps } from './types';
+
+export function extractCommonButtonProps({
+  disabled,
+  href,
+  icon,
+  label,
+  loading,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+}: CommonButtonProps) {
+  return { disabled, href, icon, label, loading, onClick, onKeyDown, onFocus, onBlur };
+}

package/src/components/ButtonGiga/ButtonGigaFunction/ButtonGigaFunction.tsx

@@ -0,0 +1,43 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { HTML_TYPE, ICON_POSITION, SIZE, TARGET } from '../constants';
+import { ButtonPrivate } from '../helperComponents';
+import styles from './styles.module.scss';
+import { CommonButtonProps } from './types';
+import { extractCommonButtonProps } from './utils';
+
+export type ButtonGigaFunctionProps = WithSupportProps<Omit<CommonButtonProps, 'appearance'>>;
+
+export const ButtonGigaFunction = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonGigaFunctionProps>(
+  (
+    {
+      className,
+      size = SIZE.S,
+      target = TARGET.Blank,
+      type = HTML_TYPE.Button,
+      iconPosition = ICON_POSITION.Before,
+      tabIndex,
+      fullWidth = false,
+      ...rest
+    },
+    ref,
+  ) => (
+    <ButtonPrivate
+      {...extractSupportProps(rest)}
+      {...extractCommonButtonProps({ ...rest, iconPosition })}
+      className={cn(styles.button, styles.specificityX2, className)}
+      iconClassName={styles.icon}
+      labelClassName={styles.label}
+      iconPosition={iconPosition}
+      size={size}
+      fullWidth={fullWidth}
+      target={target}
+      type={type}
+      tabIndex={tabIndex}
+      ref={ref}
+    />
+  ),
+);

package/src/components/ButtonGiga/ButtonGigaFunction/index.ts

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