@cloud-ru/uikit-product-button-predefined 0.7.4

package/src/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/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/helperComponents/ButtonPrivate/index.ts

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

package/src/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/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/helperComponents/index.ts

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

package/src/hooks.ts

@@ -0,0 +1,15 @@
+import { useUncontrolledProp } from 'uncontrollable';
+
+type UseValueControl<TValue> = {
+  value?: TValue;
+  onChange?(value: TValue): void;
+  defaultValue?: TValue;
+};
+
+export function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>) {
+  return useUncontrolledProp<TValue>(value, defaultValue, (newValue: TValue) => {
+    const newState = typeof newValue === 'function' ? newValue(value) : newValue;
+
+    onChange?.(newState);
+  });
+}

package/src/index.ts

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

package/src/styles.module.scss

@@ -0,0 +1,79 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
+
+@mixin icon-fill($color) {
+  .icon {
+    color: $color;
+  }
+}
+
+@mixin label-color($color) {
+  .label {
+    color: $color;
+  }
+}
+
+@mixin icon-size($icon-sizes, $size) {
+  .icon {
+    display: inline-flex;
+
+    svg {
+      width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+      height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}
+
+@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;
+  }
+}

package/src/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/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 };
+}