@cloud-ru/uikit-product-claudia 1.6.2

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

@@ -0,0 +1,179 @@
+@use '@sbercloud/figma-tokens-giga-id/build/scss/components/styles-tokens-button-buttonFunction' as buttonFunction;
+@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,
+);
+
+$function-focus-outline-offset: 0;
+$function-filter-brightness-hover: 0.9;
+$function-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');
+      }
+    }
+  }
+}
+
+@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-function-colors {
+  @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-light'));
+  @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-light'));
+
+  background-color: transparent;
+  border: none;
+
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      @if $appearance == 'primary' {
+        @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'));
+      }
+
+      @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'));
+
+          .icon {
+            filter: brightness($function-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'));
+
+          .icon {
+            filter: brightness($function-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'));
+
+          .icon {
+            filter: brightness($function-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'));
+
+          .icon {
+            svg path {
+              fill: currentColor;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.button.specificityX2 {
+  display: inline-flex;
+
+  @include button-anatomy-styles(buttonFunction.$button-function, $sizes, $variants, $typography);
+  @include loading-label-only(buttonFunction.$button-function);
+  @include giga-function-colors;
+  @include button-focus-outline;
+
+  &:focus-visible {
+    outline-offset: $function-focus-outline-offset;
+  }
+
+  &[data-size] {
+    @each $variant in $variants {
+      &[data-variant='#{$variant}'] {
+        padding-left: stv.$dimension-0m;
+        padding-right: stv.$dimension-0m;
+      }
+    }
+
+    &[data-variant='icon-before'] {
+      padding-left: stv.$dimension-0m;
+      padding-right: stv.$dimension-0m;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+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 = {
+  className?: string;
+  disabled?: boolean;
+  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;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  tabIndex?: number;
+  fullWidth?: boolean;
+};
+
+export type AnchorButtonProps = {
+  href?: string;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/src/components/ButtonGiga/ButtonGigaFunction/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/ButtonGigaMama/ButtonGigaMama.tsx

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

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

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

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

@@ -0,0 +1,180 @@
+/* stylelint-disable color-no-hex */
+// TODO: refactor styles to use tokens
+@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';
+
+$mama-gap: 4px;
+$mama-width: 304px;
+$mama-max-height: 72px;
+$mama-padding: 24px 0px;
+$mama-border-radius: 12px;
+$mama-icon-height: 24px;
+$mama-before-padding: 1px;
+
+$mama-gradient-color-start: #7cb5f2;
+$mama-gradient-color-middle: #5fd7c2;
+$mama-gradient-color-end: #26d07c;
+$mama-gradient: radial-gradient(
+  92.53% 92.53% at 65.87% 21.69%,
+  $mama-gradient-color-start 15%,
+  $mama-gradient-color-middle 45%,
+  $mama-gradient-color-end 65%
+);
+
+$mama-box-shadow-hover: 0px 0px 1px 0px #00000026 inset;
+$mama-box-shadow-active: 0px 0px 1px 0px #0000004d inset;
+$mama-filter-brightness-hover: 0.9;
+$mama-filter-brightness-active: 0.7;
+
+@mixin icon-fill($color) {
+  .icon {
+    color: $color;
+  }
+}
+
+@mixin label-color($color) {
+  .label {
+    color: $color;
+  }
+}
+
+.button.specificity {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $mama-gap;
+  width: $mama-width;
+  max-height: $mama-max-height;
+  padding: $mama-padding;
+  border-radius: $mama-border-radius;
+
+  background-color: styles-tokens-element.color-on-background-with-opacity(
+    transparent,
+    stv.$sys-primary-decor-default,
+    0.7
+  );
+  border: none;
+
+  &[data-full-width] {
+    width: 100%;
+  }
+
+  @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+
+  .label {
+    @include styles-tokens-element.composite-var(stv.$sans-title-m);
+  }
+
+  .icon {
+    color: stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support');
+    height: $mama-icon-height;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: $mama-before-padding;
+    border-radius: inherit;
+    background: $mama-gradient;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &: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: stv.simple-var(stv.$theme-variables, 'sys', 'neutral', 'text-disabled');
+      }
+    }
+  }
+
+  &:hover:not(:disabled):not([data-disabled]) {
+    @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+    @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+
+    box-shadow: $mama-box-shadow-hover;
+
+    &::before {
+      filter: brightness($mama-filter-brightness-hover);
+    }
+
+    .icon {
+      filter: brightness($mama-filter-brightness-hover);
+    }
+
+    .label {
+      filter: brightness($mama-filter-brightness-hover);
+    }
+  }
+
+  &:active:not(:disabled):not([data-disabled]) {
+    @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+    @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+
+    box-shadow: $mama-box-shadow-active;
+
+    &::before {
+      filter: brightness($mama-filter-brightness-active);
+    }
+
+    .label {
+      filter: brightness($mama-filter-brightness-active);
+    }
+
+    .icon {
+      filter: brightness($mama-filter-brightness-active);
+    }
+  }
+
+  &:focus-visible:not(:disabled):not([data-disabled]) {
+    @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+    @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+
+    .label {
+      filter: brightness($mama-filter-brightness-hover);
+    }
+
+    .icon {
+      filter: brightness($mama-filter-brightness-hover);
+    }
+
+    @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;
+  }
+
+  &[data-loading]:not(:disabled):not([data-disabled]) {
+    @include label-color(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'text-support'));
+    @include icon-fill(stv.simple-var(stv.$theme-variables, 'sys', 'primary', 'accent-pressed'));
+
+    box-shadow: $mama-box-shadow-active;
+
+    &::before {
+      filter: brightness($mama-filter-brightness-active);
+    }
+
+    .label {
+      filter: brightness($mama-filter-brightness-active);
+    }
+
+    .icon {
+      filter: brightness($mama-filter-brightness-active);
+    }
+  }
+}

package/src/components/ButtonGiga/ButtonGigaMama/utils.ts

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

package/src/components/ButtonGiga/ButtonGigaOutline/ButtonGigaOutline.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 ButtonGigaOutlineProps = WithSupportProps<Omit<CommonButtonProps, 'appearance'>>;
+
+export const ButtonGigaOutline = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonGigaOutlineProps>(
+  (
+    {
+      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/ButtonGigaOutline/index.ts

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