@cloud-ru/uikit-product-claudia 1.6.2

package/src/components/ButtonGiga/ButtonGigaOutline/styles.module.scss

@@ -0,0 +1,223 @@
+/* stylelint-disable color-no-hex */
+// TODO: refactor styles to use tokens
+@use '@sbercloud/figma-tokens-giga-id/build/scss/components/styles-tokens-button-buttonOutline' as buttonOutline;
+@use '@sbercloud/figma-tokens-giga-id/build/scss/styles-theme-variables' as stv;
+@use '@sbercloud/figma-tokens-giga-id/build/scss/components/styles-tokens-element';
+
+$sizes: 'xs', 's', 'm', 'l';
+$variants: 'label-only', 'icon-only', 'icon-after';
+$appearances: 'primary', 'neutral';
+$typography: (
+  'xs': stv.$sans-label-s,
+  's': stv.$sans-label-m,
+  'm': stv.$sans-label-l,
+  'l': stv.$sans-label-l,
+);
+
+$outline-gradient-color-start: #7cb5f2;
+$outline-gradient-color-middle: #5fd7c2;
+$outline-gradient-color-end: #26d07c;
+$outline-gradient: radial-gradient(
+  92.53% 92.53% at 65.87% 21.69%,
+  $outline-gradient-color-start 15%,
+  $outline-gradient-color-middle 45%,
+  $outline-gradient-color-end 65%
+);
+$outline-box-shadow-hover: 0px 0px 1px 0px #00000026 inset;
+$outline-box-shadow-active: 0px 0px 1px 0px #0000004d inset;
+$outline-filter-brightness-hover: 0.9;
+$outline-filter-brightness-active: 0.7;
+
+@mixin icon-fill($color) {
+  .icon {
+    color: $color;
+  }
+}
+
+@mixin label-color($color) {
+  .label {
+    color: $color;
+  }
+}
+
+@mixin button-anatomy-styles($button-theme, $sizes, $variants, $typography) {
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .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);
+        }
+      }
+
+      &[data-variant='icon-before'] {
+        @include styles-tokens-element.composite-var($button-theme, 'container', $size, 'icon-after');
+        $padding-from-icon: styles-tokens-element.simple-var(
+          $button-theme,
+          'container',
+          $size,
+          'icon-after',
+          'padding-right'
+        );
+        $padding-from-label: styles-tokens-element.simple-var(
+          $button-theme,
+          'container',
+          $size,
+          'icon-after',
+          'padding-left'
+        );
+        padding-left: $padding-from-icon;
+        padding-right: $padding-from-label;
+      }
+    }
+  }
+}
+
+@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-focus-outline {
+  &:focus-visible {
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
+    outline-color: stv.$sys-available-complementary;
+  }
+}
+
+@mixin giga-outline-colors {
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      @include label-color(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-default'));
+      @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-default'));
+
+      background-color: transparent;
+      border: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        padding: 1px;
+        border-radius: inherit;
+        background: $outline-gradient;
+        mask:
+          linear-gradient(#fff 0 0) content-box,
+          linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        pointer-events: none;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          @include label-color(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-hovered'));
+          @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-hovered'));
+
+          box-shadow: $outline-box-shadow-hover;
+
+          &::before {
+            filter: brightness($outline-filter-brightness-hover);
+          }
+
+          .icon {
+            filter: brightness($outline-filter-brightness-hover);
+          }
+        }
+      }
+
+      @media (hover: none) or (hover: hover) {
+        &:focus-visible {
+          @include label-color(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-hovered'));
+          @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-hovered'));
+        }
+
+        &:active {
+          @include label-color(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-pressed'));
+          @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-pressed'));
+
+          box-shadow: $outline-box-shadow-active;
+
+          &::before {
+            filter: brightness($outline-filter-brightness-active);
+          }
+
+          .icon {
+            filter: brightness($outline-filter-brightness-active);
+          }
+        }
+
+        &[data-loading] {
+          @include label-color(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-pressed'));
+          @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', $appearance, 'accent-pressed'));
+
+          box-shadow: $outline-box-shadow-active;
+
+          &::before {
+            filter: brightness($outline-filter-brightness-active);
+          }
+
+          .icon {
+            filter: brightness($outline-filter-brightness-active);
+          }
+        }
+
+        &:disabled,
+        &[data-disabled] {
+          @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-disabled'));
+          @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-disabled'));
+
+          background-color: transparent;
+
+          &::before {
+            background: stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-disabled');
+          }
+
+          .icon {
+            svg path {
+              fill: currentColor;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.button.specificityX2 {
+  display: inline-flex;
+
+  @include button-anatomy-styles(buttonOutline.$button-outline, $sizes, $variants, $typography);
+  @include loading-label-only(buttonOutline.$button-outline);
+  @include giga-outline-colors;
+  @include button-focus-outline;
+}

package/src/components/ButtonGiga/ButtonGigaOutline/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/ButtonGiga/ButtonGigaOutline/utils.ts

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

package/src/components/ButtonGiga/constants.ts

@@ -0,0 +1,29 @@
+export const APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+} 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/ButtonGiga/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 { APPEARANCE_TO_COLOR_MAP } from './constants';
+import styles from './styles.module.scss';
+import { CommonButtonProps } from './types';
+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.Before,
+      label,
+      labelClassName,
+      loading,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      size,
+      target = TARGET.Blank,
+      type = HTML_TYPE.Button,
+      appearance = APPEARANCE.Primary,
+      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/ButtonGiga/helperComponents/ButtonPrivate/constants.ts

@@ -0,0 +1,15 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+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: Record<ValueOf<typeof APPEARANCE>, ValueOf<typeof APPEARANCE>> = {
+  [APPEARANCE.Primary]: APPEARANCE.Primary,
+  [APPEARANCE.Neutral]: APPEARANCE.Neutral,
+};

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

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

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

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

package/src/components/ButtonGiga/index.ts

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