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

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

@@ -0,0 +1,56 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm';
+
+$icon-sizes: (
+  's': $icon-xs,
+  'm': $icon-s,
+);
+
+.toggleLayout {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      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 */
+      }
+    }
+  }
+
+  &[data-disabled=true] {
+    cursor: not-allowed;
+    color: $sys-neutral-text-disabled;
+  }
+}
+
+.togglePrivate {
+  cursor: pointer;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  opacity: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Switch';
+export * from './Radio';
+export * from './Favorite';
+export * from './ToggleGroup';

package/src/components/styles.module.scss

@@ -0,0 +1,24 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm';
+
+@mixin container($component) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($toggles, $size, $component, 'container');
+    }
+  }
+
+  &[data-focusvisible=true] {
+    @include outline-var($container-focused-s);
+    &[data-size='s'] {
+      outline-offset: simple-var($theme-variables, 'border-width', 'state-focus', 's');
+    }
+  }
+}

package/src/constants.ts

@@ -0,0 +1,19 @@
+export enum Mode {
+  Checkbox = 'checkbox',
+  Radio = 'radio',
+}
+
+export enum Size {
+  S = 's',
+  M = 'm',
+}
+
+export enum FavoriteIcon {
+  Star = 'star',
+  Heart = 'heart',
+}
+
+export enum SelectionMode {
+  Single = 'single',
+  Multiple = 'multiple',
+}

package/src/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+import { SelectionMode } from './constants';
+
+type ToggleGroupContextType = {
+  value: string | undefined | string[];
+  onChange: ((id: string) => void) | undefined;
+  selectionMode: SelectionMode;
+};
+
+export const ToggleGroupContext = createContext<ToggleGroupContextType>({
+  value: undefined,
+  onChange: undefined,
+  selectionMode: SelectionMode.Single,
+});
+
+export const useToggleGroupContext = () => useContext(ToggleGroupContext);

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,71 @@
+import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { Mode, Size } from './constants';
+
+export type InputVisualState = {
+  focusVisible: boolean;
+  disabled: boolean;
+  checked: boolean;
+  hover: boolean;
+  size: Size;
+};
+
+export type DataAttributes = Record<`data-${string}`, string | boolean>;
+
+export type TogglePrivateProps = WithSupportProps<{
+  className?: string;
+  /** Размер */
+  size?: Size;
+  /** Колбек рендера компонента */
+  render: (visualState: InputVisualState) => ReactNode;
+  /** Режим работы */
+  mode?: Mode;
+  /** HTML-аттрибут id */
+  id?: string;
+  /** HTML-аттрибут value */
+  value?: string;
+  /** HTML-аттрибут name */
+  name?: string;
+  /** HTML-аттрибут tab-index */
+  tabIndex?: number;
+  /** HTML-аттрибут autofocus */
+  autofocus?: boolean;
+  /** HTML-аттрибут checked */
+  checked?: boolean;
+  /** HTML-аттрибут checked по-умолчанию */
+  defaultChecked?: boolean;
+  /** HTML-аттрибут disabled */
+  disabled?: boolean;
+  /** Колбек смены значения */
+  onChange?: (checked: boolean) => void;
+  /** Колбек клика */
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  /** Колбек потери фокуса */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек приобретения фокуса */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+}>;
+
+export type ToggleProps = WithSupportProps<
+  Pick<
+    TogglePrivateProps,
+    | 'id'
+    | 'name'
+    | 'value'
+    | 'tabIndex'
+    | 'autofocus'
+    | 'checked'
+    | 'defaultChecked'
+    | 'disabled'
+    | 'onChange'
+    | 'onClick'
+    | 'onBlur'
+    | 'onFocus'
+    | 'className'
+    | 'size'
+  > & {
+    inputRef?: RefObject<HTMLInputElement>;
+  }
+>;

package/src/utils.ts

@@ -0,0 +1,21 @@
+import { Size } from './constants';
+import { DataAttributes } from './types';
+
+export function getVisualStateAttributes(state: Record<string, string | boolean>) {
+  return Object.entries(state).reduce<DataAttributes>(function (result, [name, value]) {
+    result[`data-${name.toLowerCase()}`] = value;
+    return result;
+  }, {});
+}
+
+export function getIconSize(size?: Size) {
+  switch (size) {
+    case Size.S: {
+      return 16;
+    }
+    case Size.M:
+    default: {
+      return 24;
+    }
+  }
+}