@cloud-ru/ds-toggles 1.0.0

package/src/components/Favourite/Favourite.tsx

@@ -0,0 +1,116 @@
+import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@cloud-ru/ds-icons/interface/system';
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { KeyboardEventHandler, useState } from 'react';
+
+import { FAVOURITE_ICON, MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants';
+import { FavouriteIcon, ToggleProps } from '../../types';
+import { getIconSize } from '../../utils';
+import styles from './styles.module.scss';
+
+export type FavouriteProps = ToggleProps & {
+  /** Вариант иконки: звезда или сердце */
+  icon?: FavouriteIcon;
+  /** Обработчик keyup */
+  onKeyUp?: KeyboardEventHandler<HTMLSpanElement>;
+};
+
+const SPINNER_SIZE_MAP = {
+  [SIZE.XS]: LOADER_SIZE.XS,
+  [SIZE.S]: LOADER_SIZE.S,
+};
+
+const ICONS = {
+  [FAVOURITE_ICON.Star]: { checked: StarFilledSVG, unchecked: StarSVG },
+  [FAVOURITE_ICON.Heart]: { checked: HeartFilledSVG, unchecked: HeartSVG },
+} as const;
+
+function Icon({
+  size,
+  checked,
+  loading,
+  variant,
+  disabled,
+}: Required<Pick<FavouriteProps, 'checked' | 'loading' | 'size' | 'disabled'>> & { variant: FavouriteIcon }) {
+  if (loading) {
+    return <Spinner size={SPINNER_SIZE_MAP[size]} />;
+  }
+
+  const iconSize = getIconSize(size);
+  const IconComponent = checked ? ICONS[variant].checked : ICONS[variant].unchecked;
+
+  return (
+    <IconComponent
+      className={styles.icon}
+      size={iconSize}
+      data-checked={checked}
+      data-variant={variant}
+      data-disabled={disabled || undefined}
+    />
+  );
+}
+
+export function Favourite({
+  inputRef,
+  checked: checkedProp,
+  defaultChecked,
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  loading = false,
+  size = SIZE.S,
+  className,
+  'data-test-id': dataTestId,
+  icon = FAVOURITE_ICON.Heart,
+  ...otherProps
+}: FavouriteProps) {
+  const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  return (
+    <span
+      className={cn(styles.root, className)}
+      role={MODE.Checkbox}
+      data-size={size}
+      data-icon={icon}
+      data-loading={loading}
+      data-disabled={disabled}
+      data-checked={checked}
+      data-focusvisible={focusVisible || undefined}
+      data-test-id={dataTestId}
+    >
+      <div className={styles.container}>
+        <div className={styles.framing}>
+          <div className={styles.flag}>
+            <div className={styles.surface} data-text-opacity={(!loading && !disabled) || undefined}>
+              <Icon size={size} checked={checked} variant={icon} loading={loading} disabled={disabled} />
+            </div>
+          </div>
+        </div>
+
+        {!loading && (
+          <input
+            {...otherProps}
+            data-test-id={dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined}
+            ref={inputRef}
+            type={MODE.Checkbox}
+            className={styles.inputPrivate}
+            checked={checked}
+            disabled={disabled}
+            onChange={e => setChecked(e.target.checked)}
+            onFocus={event => {
+              setFocusVisible(event.target.matches(':focus-visible'));
+              onFocus?.(event);
+            }}
+            onBlur={event => {
+              setFocusVisible(false);
+              onBlur?.(event);
+            }}
+          />
+        )}
+      </div>
+    </span>
+  );
+}

package/src/components/Favourite/index.ts

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

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

@@ -0,0 +1,138 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/toggles.module' as toggles;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 'xs', 's';
+
+.inputPrivate {
+  cursor: pointer;
+
+  position: absolute;
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  opacity: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.backgroundStateLayer {
+  border-radius: 0 !important;
+  visibility: initial;
+}
+
+.flag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.framing {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+}
+
+.surface {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  position: absolute;
+
+  // Невыбранный контур: без этого цвет наследуется от окружения потребителя.
+  color: base.$sn-theme-color-neutral-accent;
+
+  &[data-checked='true'] {
+    &[data-variant='star'] {
+      color: base.$sn-theme-color-yellow-accent;
+    }
+
+    &[data-variant='heart'] {
+      color: base.$sn-theme-color-red-accent;
+    }
+
+    &[data-disabled='true'] {
+      color: base.$sn-theme-color-neutral-accent;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.root {
+  position: relative;
+
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+
+  vertical-align: middle;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .container {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container');
+      }
+
+      .framing {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing');
+
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-height');
+      }
+
+      .flag {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag');
+      }
+
+      .surface {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag', 'surface');
+      }
+    }
+  }
+
+  &[data-loading='false'][data-disabled='false'] {
+    .container {
+      @include m.has-content-with-text-opacity(#{framing});
+    }
+  }
+
+  // Спиннер в макете красится `neutral/accent`; без явного цвета он наследует текст потребителя.
+  &[data-loading='true'] .flag {
+    color: base.$sn-theme-color-neutral-accent;
+  }
+
+  &[data-disabled='true'] {
+    .framing {
+      opacity: base.$sn-theme-effect-opacity-disabled;
+    }
+  }
+
+  &[data-focusvisible='true'] {
+    .framing {
+      outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
+      outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+    }
+  }
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,84 @@
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getVisualStateAttributes } from '../../utils';
+import styles from './styles.module.scss';
+
+export type RadioProps = ToggleProps;
+
+const SPINNER_SIZE_MAP = {
+  [SIZE.XS]: LOADER_SIZE.XS,
+  [SIZE.S]: LOADER_SIZE.S,
+};
+
+export function Radio({
+  inputRef,
+  'data-test-id': dataTestId,
+  checked: checkedProp,
+  defaultChecked,
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  loading = false,
+  className,
+  size = SIZE.S,
+  ...otherProps
+}: RadioProps) {
+  const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const stateDataAttributes = getVisualStateAttributes({
+    loading,
+    disabled,
+    checked,
+  });
+
+  return (
+    <span
+      className={cn(styles.root, className)}
+      role={MODE.Radio}
+      data-size={size}
+      {...stateDataAttributes}
+      data-test-id={dataTestId || undefined}
+    >
+      <div className={styles.container}>
+        <div className={styles.framing} {...stateDataAttributes} data-focusvisible={focusVisible || undefined}>
+          <div className={styles.backgroundStateLayer} data-state='emptyNeutralOnBackground' />
+          <div className={styles.flag}>
+            {loading ? (
+              <Spinner size={SPINNER_SIZE_MAP[size]} />
+            ) : (
+              <div className={styles.surface} {...stateDataAttributes} data-text-opacity={checked || undefined} />
+            )}
+          </div>
+        </div>
+
+        {!loading && (
+          <input
+            {...otherProps}
+            data-test-id={dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined}
+            ref={inputRef}
+            type={MODE.Radio}
+            className={styles.inputPrivate}
+            checked={checked}
+            disabled={disabled}
+            onChange={e => setChecked(e.target.checked)}
+            onFocus={event => {
+              setFocusVisible(event.target.matches(':focus-visible'));
+              onFocus?.(event);
+            }}
+            onBlur={event => {
+              setFocusVisible(false);
+              onBlur?.(event);
+            }}
+          />
+        )}
+      </div>
+    </span>
+  );
+}

package/src/components/Radio/index.ts

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

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

@@ -0,0 +1,159 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/toggles.module' as toggles;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 'xs', 's';
+
+.inputPrivate {
+  cursor: pointer;
+
+  position: absolute;
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  opacity: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.backgroundStateLayer {
+  visibility: initial;
+}
+
+.framing {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  &[data-loading="false"] {
+    border-color: base.$sn-theme-color-neutral-accent;
+    border-style: solid;
+    background-color: base.$sn-theme-color-neutral-background1Level;
+
+    &[data-disabled="true"] {
+      opacity: base.$sn-theme-effect-opacity-disabled;
+    }
+
+    &[data-disabled="false"] {
+      &[data-checked="false"] {
+        border-color: base.$sn-theme-color-neutral-accent;
+      }
+
+      &[data-checked="true"] {
+        border-color: base.$sn-theme-color-primary-accent;
+      }
+
+      &[data-focusvisible="true"] {
+        $outlineWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
+
+        outline: $outlineWidth solid base.$sn-theme-color-available-complementary;
+        outline-offset: $outlineWidth;
+      }
+    }
+  }
+}
+
+.flag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.surface {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &[data-loading="false"][data-checked="true"] {
+    &[data-disabled="false"] {
+      background: base.$sn-theme-color-primary-accent;
+    }
+
+    &[data-disabled="true"] {
+      background: base.$sn-theme-color-neutral-accent;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.root {
+  position: relative;
+
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+
+  vertical-align: middle;
+
+  // Sizes
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .container {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'container');
+      }
+
+      .framing {
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'min-width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'min-height');
+
+
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing');
+      }
+
+      .flag {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'flag')
+      }
+
+      .surface {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'flag', 'surface');
+      }
+    }
+  }
+
+  // States management
+  &[data-loading="false"][data-disabled="false"] {
+    .container {
+      @include m.has-state-layer-as-child(#{backgroundStateLayer});
+    }
+
+    // Слой тонирует и рамку: `inset: 0` из миксина накрыл бы только padding-box.
+    @each $size in $sizes {
+      &[data-size='#{$size}'] .backgroundStateLayer {
+        inset: calc(
+          -1 * #{base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'border-width')}
+        );
+      }
+    }
+  }
+
+  // Спиннер в макете красится `neutral/accent`; без явного цвета он наследует текст потребителя.
+  &[data-loading="true"] .flag {
+    color: base.$sn-theme-color-neutral-accent;
+  }
+
+  &[data-loading="true"],
+  &[data-disabled="true"] {
+    .backgroundStateLayer {
+      visibility: hidden;
+    }
+  }
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,94 @@
+import { CheckSVG } from '@cloud-ru/ds-icons/interface/system';
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import styles from './styles.module.scss';
+
+export type SwitchProps = ToggleProps;
+
+const SPINNER_SIZE_MAP = {
+  [SIZE.XS]: LOADER_SIZE.XS,
+  [SIZE.S]: LOADER_SIZE.S,
+};
+
+function Icon({ size, loading }: Required<Pick<SwitchProps, 'loading' | 'size'>>) {
+  if (loading) {
+    return <Spinner size={SPINNER_SIZE_MAP[size]} className={styles.spinner} />;
+  }
+
+  const iconSize = getIconSize(size);
+
+  return <CheckSVG aria-hidden className={styles.icon} size={iconSize} />;
+}
+
+export function Switch({
+  inputRef,
+  checked: checkedProp,
+  defaultChecked,
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  loading = false,
+  size = SIZE.S,
+  className,
+  'data-test-id': dataTestId,
+  ...otherProps
+}: SwitchProps) {
+  const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const stateDataAttributes = getVisualStateAttributes({
+    loading,
+    disabled,
+    checked,
+  });
+
+  return (
+    <span
+      className={cn(styles.root, className)}
+      role={MODE.Checkbox}
+      data-size={size}
+      {...stateDataAttributes}
+      data-focusvisible={focusVisible || undefined}
+      data-test-id={dataTestId || undefined}
+    >
+      <div className={styles.container}>
+        <div className={styles.framing} {...stateDataAttributes}>
+          <div className={styles.backgroundStateLayer} data-state='emptyDarkOnAccent' />
+          <div className={styles.flag}>
+            <div className={styles.surface} {...stateDataAttributes}>
+              <Icon size={size} loading={Boolean(loading)} />
+            </div>
+          </div>
+        </div>
+
+        {!loading && (
+          <input
+            {...otherProps}
+            data-test-id={dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined}
+            ref={inputRef}
+            type={MODE.Checkbox}
+            className={styles.inputPrivate}
+            checked={checked}
+            disabled={disabled}
+            onChange={e => setChecked(e.target.checked)}
+            onFocus={event => {
+              setFocusVisible(event.target.matches(':focus-visible'));
+              onFocus?.(event);
+            }}
+            onBlur={event => {
+              setFocusVisible(false);
+              onBlur?.(event);
+            }}
+          />
+        )}
+      </div>
+    </span>
+  );
+}

package/src/components/Switch/index.ts

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