@snack-uikit/toggles 0.7.1-preview-104ad22c.0

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

@@ -0,0 +1,77 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '../styles.module';
+
+$sizes: 's', 'm';
+
+$icon-sizes: (
+  's': $icon-xs,
+  'm': $icon-s,
+);
+
+.container {
+  @include container('checkbox');
+}
+
+.box {
+  box-sizing: border-box;
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
+  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+  border-style: solid; // это наверное должно быть в композитном токене box
+
+  &[data-checked=false] {
+    &[data-focusvisible=true],
+    &[data-hover=true] {
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
+    }
+    &[data-disabled=true] {
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    }
+  }
+
+  &[data-indeterminate=true],
+  &[data-checked=true] {
+    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    &[data-focusvisible=true],
+    &[data-hover=true] {
+      background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+      border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+    }
+    &[data-disabled=true] {
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'checkbox', 'box');
+
+      svg {
+        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: none;
+
+  width: 100%;
+  height: 100%;
+
+  color: simple-var($theme-variables, 'sys', 'primary', 'on-accent');
+
+  &[data-indeterminate=true],
+  &[data-checked=true] {
+    display: block;
+  }
+}

package/src/components/Favorite/Favorite.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+
+import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
+
+import { FavoriteIcon, Size } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.scss';
+
+const CHECKED_ICONS = {
+  [FavoriteIcon.Star]: StarFilledSVG,
+  [FavoriteIcon.Heart]: HeartFilledSVG,
+};
+
+const UNCHECKED_ICONS = {
+  [FavoriteIcon.Star]: StarSVG,
+  [FavoriteIcon.Heart]: HeartSVG,
+};
+
+export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
+  /** Иконка */
+  icon?: FavoriteIcon;
+};
+
+export function Favorite({
+  inputRef,
+  'data-test-id': dataTestId,
+  size = Size.M,
+  icon = FavoriteIcon.Heart,
+  ...restProps
+}: FavoriteProps) {
+  const iconSize = useMemo(() => getIconSize(size), [size]);
+
+  return (
+    <TogglePrivate
+      {...restProps}
+      data-test-id={dataTestId}
+      ref={inputRef}
+      size={size}
+      render={function Favorite(visualState) {
+        const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
+        const data = getVisualStateAttributes({ ...visualState, icon });
+        return (
+          <div className={styles.container} {...data}>
+            <Icon className={styles.icon} {...data} size={iconSize} />
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+Favorite.sizes = Size;

package/src/components/Favorite/index.ts

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

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

@@ -0,0 +1,36 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '../styles.module';
+
+$sizes: 's', 'm';
+$icons: ('star': 'yellow', 'heart': 'red');
+
+.container {
+  @include container('favourite');
+
+  outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+  &[data-checked=true] {
+    outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+  }
+}
+
+.icon {
+  color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
+  &[data-hover=true] {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
+  }
+
+  @each $icon, $color in $icons {
+    &[data-icon='#{$icon}'] {
+      &[data-checked=true] {
+        color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+        &[data-focusvisible=true],
+        &[data-hover=true] {
+          color: simple-var($theme-variables, 'sys', $color, 'accent-hovered');
+        }
+      }
+    }
+  }
+
+  
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,30 @@
+import { Mode, Size } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.scss';
+
+export type RadioProps = ToggleProps;
+
+export function Radio({ inputRef, 'data-test-id': dataTestId, ...restProps }: RadioProps) {
+  return (
+    <TogglePrivate
+      {...restProps}
+      data-test-id={dataTestId}
+      mode={Mode.Radio}
+      ref={inputRef}
+      render={function Radio(visualState) {
+        const data = getVisualStateAttributes(visualState);
+        return (
+          <div className={styles.container} {...data}>
+            <div className={styles.box} {...data}>
+              <div className={styles.flag} {...data} />
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+Radio.sizes = Size;

package/src/components/Radio/index.ts

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

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

@@ -0,0 +1,74 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '../styles.module';
+
+$sizes: 's', 'm';
+
+.container {
+  @include container('radio');
+}
+
+.box {
+  position: relative;
+
+  box-sizing: border-box;
+
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
+  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+  border-style: solid; // это наверное должно быть в композитном токене box
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'radio', 'box');
+    }
+  }
+
+  &[data-focusvisible=true],
+  &[data-hover=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
+  }
+  
+  &[data-disabled=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
+    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+  }
+
+  &[data-checked=true] {
+    border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    &[data-focusvisible=true],
+    &[data-hover=true] {
+      border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+    }
+    &[data-disabled=true] {
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    }
+  }
+}
+
+.flag {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+
+  &[data-hover=true] {
+    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+  }
+
+  &[data-disabled=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+  }
+
+  &[data-checked=false] {
+    display: none;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'radio', 'flag');
+    }
+  }
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+
+import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
+
+import { Size } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.scss';
+
+export type SwitchProps = ToggleProps & {
+  /** Показывать ли иконку в переключателе */
+  showIcon?: boolean;
+};
+
+export function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size = Size.M, ...restProps }: SwitchProps) {
+  const iconSize = useMemo(() => getIconSize(size), [size]);
+
+  return (
+    <TogglePrivate
+      {...restProps}
+      size={size}
+      data-test-id={dataTestId}
+      ref={inputRef}
+      render={function Switch(visualState) {
+        const data = getVisualStateAttributes(visualState);
+        return (
+          <div className={styles.container} {...data}>
+            <div className={styles.box} {...data} />
+            <div className={styles.containerFlag} {...data}>
+              <div className={styles.flag} {...data} />
+              {showIcon && (
+                <>
+                  <div className={styles.flag_icon_off} {...data}>
+                    <CrossSVG size={iconSize} />
+                  </div>
+                  <div className={styles.flag_icon_on} {...data}>
+                    <CheckSVG size={iconSize} />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+Switch.sizes = Size;

package/src/components/Switch/index.ts

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

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

@@ -0,0 +1,124 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '../styles.module';
+
+$sizes: 's', 'm';
+$switchAnimationDuration: .1s;
+
+.container {
+  @include container('switch');
+}
+
+.box {
+  position: relative;
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'switch', 'box');
+    }
+  }
+
+  &[data-hover=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
+  }
+
+  &[data-disabled=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+  }
+
+  &[data-checked=true] {
+    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    &[data-hover=true] {
+      background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+    }
+    &[data-disabled=true] {
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    }
+  }
+}
+
+.containerFlag {
+  position: absolute;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition-timing-function: linear;
+  transition-duration: $switchAnimationDuration;
+  transition-property: left;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'switch', 'container-flag');
+      &[data-checked=true] {
+        left: calc(100% - #{simple-var($toggles, $size, 'switch', 'container-flag', 'width')});
+      }
+    }
+  }
+}
+
+.flag {
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, 'switch', 'flag');
+    }
+  }
+
+  &[data-disabled=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+  }
+}
+
+@mixin flagIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+
+  color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');
+
+  fill: transparent;
+
+  transition: opacity $switchAnimationDuration linear;
+  
+  &[data-hover=true] {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
+  }
+
+  &[data-checked=true] {
+    color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    &[data-hover=true] {
+      color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+    }
+  }
+
+  &[data-disabled=true] {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+  }
+
+}
+
+.flag_icon_off {
+  @include flagIcon();
+
+  opacity: 1;
+  &[data-checked=true] {
+    opacity: 0;
+  }
+}
+
+.flag_icon_on {
+  @include flagIcon();
+
+  opacity: 0;
+  &[data-checked=true] {
+    opacity: 1;
+  }
+}

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,76 @@
+import { ReactNode, useCallback } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { SelectionMode } from '../../constants';
+import { ToggleGroupContext } from '../../context';
+
+export type ToggleGroupProps = {
+  /** Вложенный контент */
+  children: ReactNode;
+} & (
+  | {
+      /** Начальное состояние */
+      defaultValue?: string;
+      /** Controlled состояние */
+      value?: string;
+      /** Controlled обработчик измения состояния */
+      onChange?(value: (string | undefined) | string): void;
+      /** Режим выбора */
+      selectionMode?: SelectionMode.Single;
+    }
+  | {
+      /** Начальное состояние */
+      defaultValue?: string[];
+      /** Controlled состояние */
+      value?: string[];
+      /** Controlled обработчик измения состояния */
+      onChange?(value: (string[] | undefined) | string[]): void;
+      /** Режим выбора */
+      selectionMode?: SelectionMode.Multiple;
+    }
+);
+
+export function ToggleGroup({
+  children,
+  value: valueProp,
+  onChange: onChangeProp,
+  selectionMode = SelectionMode.Single,
+  defaultValue,
+}: ToggleGroupProps) {
+  const [value, setValue] = useUncontrolledProp<string | string[] | undefined>(valueProp, defaultValue, cb => {
+    onChangeProp?.(cb(value));
+  });
+
+  const onChange = useCallback(
+    (newValue: string) => {
+      if (selectionMode === SelectionMode.Single) {
+        return setValue((oldValue: string | undefined) => {
+          if (newValue !== oldValue) {
+            return newValue;
+          }
+
+          return undefined;
+        });
+      }
+
+      return setValue((oldValues: string[] | undefined = []) => {
+        if (Array.isArray(oldValues)) {
+          if (oldValues.includes(newValue)) {
+            return oldValues.filter(oldValue => oldValue !== newValue);
+          }
+
+          return oldValues.concat(newValue);
+        }
+
+        return undefined;
+      });
+    },
+    [selectionMode, setValue],
+  );
+
+  return (
+    <ToggleGroupContext.Provider value={{ value, onChange, selectionMode }}>{children}</ToggleGroupContext.Provider>
+  );
+}
+
+ToggleGroup.selectionModes = SelectionMode;

package/src/components/ToggleGroup/hooks.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from 'react';
+
+import { SelectionMode } from '../../constants';
+import { useToggleGroupContext } from '../../context';
+
+type UseToggleGroupProps = {
+  value: string;
+};
+
+export function useToggleGroup({ value: itemValue }: UseToggleGroupProps) {
+  const { value, onChange, selectionMode } = useToggleGroupContext();
+
+  const isChecked = useMemo(() => {
+    if (typeof value === 'string') {
+      return value === itemValue;
+    }
+
+    if (Array.isArray(value)) {
+      return value.includes(itemValue);
+    }
+
+    return false;
+  }, [value, itemValue]);
+
+  const handleClick = useCallback(() => {
+    onChange?.(itemValue);
+  }, [itemValue, onChange]);
+
+  return {
+    isChecked,
+    handleClick,
+    multipleSelection: selectionMode === SelectionMode.Multiple,
+  };
+}

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './hooks';

package/src/components/TogglePrivate/TogglePrivate.tsx

@@ -0,0 +1,69 @@
+import cn from 'classnames';
+import { forwardRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Mode, Size } from '../../constants';
+import { TogglePrivateProps } from '../../types';
+import { getVisualStateAttributes } from '../../utils';
+import styles from './styles.module.scss';
+
+export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(function TogglePrivate(
+  {
+    render,
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    className,
+    size = Size.M,
+    mode = Mode.Checkbox,
+    'data-test-id': testId,
+    ...otherProps
+  },
+  ref,
+) {
+  const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [hover, setHover] = useState(false);
+
+  const visualState = {
+    disabled: Boolean(disabled),
+    focusVisible,
+    checked,
+    hover,
+    size,
+  };
+
+  return (
+    <span
+      className={cn(className, styles.toggleLayout)}
+      data-size={size}
+      data-test-id={testId}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      {...getVisualStateAttributes(visualState)}
+    >
+      {render(visualState)}
+      <input
+        {...otherProps}
+        data-test-id={`${testId}-native-input`}
+        ref={ref}
+        type={mode}
+        className={styles.togglePrivate}
+        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);
+        }}
+      />
+    </span>
+  );
+});

package/src/components/TogglePrivate/index.ts

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