@snack-uikit/toggles 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.9.4 (2024-01-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.20.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+
+
+
+
+
+## 0.9.3 (2023-12-28)
+
+
+### Bug Fixes
+
+* **FF-3960:** add loading state, update colors ([c7678cd](https://github.com/cloud-ru-tech/snack-uikit/commit/c7678cd99cbf2e30618b80d2991b328d234069e4))
+
+
+
+
+
 ## 0.9.2 (2023-12-18)
 
 ### Only dependencies have been changed

package/README.md

@@ -112,6 +112,7 @@ return (
 | size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
 | showIcon | `boolean` | - | Показывать ли иконку в переключателе |
+| loading | `boolean` | - |  |
 ## Radio
 ### Props
 | name | type | default value | description |

package/dist/components/Switch/Switch.d.ts

@@ -2,5 +2,6 @@ import { ToggleProps } from '../../types';
 export type SwitchProps = ToggleProps & {
     /** Показывать ли иконку в переключателе */
     showIcon?: boolean;
+    loading?: boolean;
 };
-export declare function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size, ...restProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, loading, size, ...restProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch/Switch.js

@@ -10,17 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
 import { SIZE } from '../../constants';
-import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { Spinner } from '../../helperComponents';
+import { getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
 import styles from './styles.module.css';
 export function Switch(_a) {
-    var { inputRef, 'data-test-id': dataTestId, showIcon, size = SIZE.M } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "showIcon", "size"]);
-    const iconSize = useMemo(() => getIconSize(size), [size]);
+    var { inputRef, 'data-test-id': dataTestId, showIcon, loading, size = SIZE.M } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "showIcon", "loading", "size"]);
     return (_jsx(TogglePrivate, Object.assign({}, restProps, { size: size, "data-test-id": dataTestId, ref: inputRef, render: function Switch(visualState) {
             const data = getVisualStateAttributes(visualState);
-            return (_jsxs("div", Object.assign({ className: styles.container }, data, { children: [_jsx("div", Object.assign({ className: styles.box }, data)), _jsxs("div", Object.assign({ className: styles.containerFlag }, data, { children: [_jsx("div", Object.assign({ className: styles.flag }, data)), showIcon && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: styles.flag_icon_off }, data, { children: _jsx(CrossSVG, { size: iconSize }) })), _jsx("div", Object.assign({ className: styles.flag_icon_on }, data, { children: _jsx(CheckSVG, { size: iconSize }) }))] }))] }))] })));
+            return (_jsxs("div", Object.assign({ className: styles.container }, data, { children: [_jsx("div", Object.assign({ className: styles.box }, data)), _jsxs("div", Object.assign({ className: styles.containerFlag }, data, { children: [_jsx("div", Object.assign({ className: styles.flag }, data)), (showIcon || loading) && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: styles.flag_icon_off }, data, { children: loading ? _jsx(Spinner, {}) : _jsx(CrossSVG, { size: 16 }) })), _jsx("div", Object.assign({ className: styles.flag_icon_on }, data, { children: loading ? _jsx(Spinner, {}) : _jsx(CheckSVG, { size: 16 }) }))] }))] }))] })));
         } })));
 }

package/dist/components/Switch/styles.module.css

@@ -25,7 +25,7 @@
 
 .box{
   position:relative;
-  background-color:var(--sys-neutral-accent-default, #757575);
+  background-color:var(--sys-neutral-decor-activated, #b8b8b8);
 }
 .box[data-size=s]{
   width:var(--size-toggles-s-box-switch-width, 24px);
@@ -101,7 +101,7 @@
   left:50%;
   transform:translate(-50%, -50%);
   display:flex;
-  color:var(--sys-neutral-accent-default, #757575);
+  color:var(--sys-neutral-text-disabled, #9e9e9e);
   fill:transparent;
   transition:opacity 0.1s linear;
   opacity:1;
@@ -116,7 +116,7 @@
   color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .flag_icon_off[data-disabled=true]{
-  color:var(--sys-neutral-decor-disabled, #e7e7e7);
+  color:var(--sys-neutral-on-accent, #fdfdfd);
 }
 .flag_icon_off[data-checked=true]{
   opacity:0;
@@ -128,7 +128,7 @@
   left:50%;
   transform:translate(-50%, -50%);
   display:flex;
-  color:var(--sys-neutral-accent-default, #757575);
+  color:var(--sys-neutral-text-disabled, #9e9e9e);
   fill:transparent;
   transition:opacity 0.1s linear;
   opacity:0;
@@ -143,7 +143,7 @@
   color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .flag_icon_on[data-disabled=true]{
-  color:var(--sys-neutral-decor-disabled, #e7e7e7);
+  color:var(--sys-neutral-on-accent, #fdfdfd);
 }
 .flag_icon_on[data-checked=true]{
   opacity:1;

package/dist/components/TogglePrivate/styles.module.css

@@ -7,14 +7,6 @@
   flex-shrink:0;
   align-items:center;
 }
-.toggleLayout[data-size=s] svg{
-  width:var(--dimension-2m, 16px) !important;
-  height:var(--dimension-2m, 16px) !important;
-}
-.toggleLayout[data-size=m] svg{
-  width:var(--dimension-3m, 24px) !important;
-  height:var(--dimension-3m, 24px) !important;
-}
 .toggleLayout[data-disabled=true]{
   cursor:not-allowed;
   color:var(--sys-neutral-text-disabled, #9e9e9e);

package/dist/helperComponents/Spinner/Spinner.d.ts

@@ -0,0 +1 @@
+export declare function Spinner(): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Spinner/Spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function Spinner() {
+    return (_jsx("svg", { viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: styles.spinner, children: _jsx("path", { d: 'M5 8C5 6.34315 6.34315 5 8 5', stroke: 'black', strokeWidth: '1.5', strokeLinecap: 'round' }) }));
+}

package/dist/helperComponents/Spinner/index.d.ts

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

package/dist/helperComponents/Spinner/index.js

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

package/dist/helperComponents/Spinner/styles.module.css

@@ -0,0 +1,14 @@
+.spinner{
+  pointer-events:none;
+  width:var(--dimension-2m, 16px);
+  height:var(--dimension-2m, 16px);
+  animation:spin 1s ease-in-out infinite;
+}
+.spinner > path{
+  stroke:currentColor;
+}
+@keyframes spin{
+  to{
+    transform:rotate(360deg);
+  }
+}

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.19.2",
+    "@snack-uikit/icons": "0.20.0",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "50ef9bb113ec40897ffb3eeae62539ce82ade899"
+  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
 }

package/src/components/Switch/Switch.tsx

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

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

@@ -11,7 +11,7 @@ $switchAnimationDuration: .1s;
 
 .box {
   position: relative;
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
@@ -82,7 +82,7 @@ $switchAnimationDuration: .1s;
 
   display: flex;
 
-  color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');
+  color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
 
   fill: transparent;
 
@@ -100,7 +100,7 @@ $switchAnimationDuration: .1s;
   }
 
   &[data-disabled=true] {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
   }
 
 }

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

@@ -19,15 +19,6 @@ $icon-sizes: (
   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;

package/src/helperComponents/Spinner/Spinner.tsx

@@ -0,0 +1,9 @@
+import styles from './styles.module.scss';
+
+export function Spinner() {
+  return (
+    <svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={styles.spinner}>
+      <path d='M5 8C5 6.34315 6.34315 5 8 5' stroke='black' strokeWidth='1.5' strokeLinecap='round' />
+    </svg>
+  );
+}

package/src/helperComponents/Spinner/index.ts

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

package/src/helperComponents/Spinner/styles.module.scss

@@ -0,0 +1,19 @@
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+
+.spinner {
+  pointer-events: none;
+  width: $dimension-2m;
+  height: $dimension-2m;
+  animation: spin 1s ease-in-out infinite;
+
+  & > path {
+    stroke: currentColor;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/helperComponents/index.ts

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