@automattic/vip-design-system 2.13.3 → 2.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/system/Form/Toggle.d.ts +2 -1
  2. package/build/system/Form/Toggle.js +5 -3
  3. package/build/system/Form/Toggle.stories.d.ts +1 -1
  4. package/package.json +1 -1
  5. package/src/system/Form/Toggle.tsx +5 -2
package/build/system/Form/Toggle.d.ts CHANGED
@@ -7,8 +7,9 @@ export type ToggleProps = Switch.SwitchProps & {
7
7
  className?: Argument;
8
8
  onChange?: () => void;
9
9
  variant?: string;
10
+ disabled?: boolean;
10
11
  };
11
12
  export declare const Toggle: {
12
- ({ name, onChange, className, variant, ...rest }: ToggleProps): import("react").JSX.Element;
13
+ ({ name, onChange, className, variant, disabled, ...rest }: ToggleProps): import("react").JSX.Element;
13
14
  displayName: string;
14
15
  };
package/build/system/Form/Toggle.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["name", "onChange", "className", "variant"];
1
+ var _excluded = ["name", "onChange", "className", "variant", "disabled"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
4
  /* eslint-disable max-len */
@@ -17,12 +17,13 @@ export var Toggle = function Toggle(_ref) {
17
17
  className = _ref.className,
18
18
  _ref$variant = _ref.variant,
19
19
  variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
20
+ disabled = _ref.disabled,
20
21
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
21
22
  return _jsx(Switch.Root, _extends({
22
23
  className: classNames('vip-toggle-component', className),
23
24
  sx: {
24
25
  all: 'unset',
25
- cursor: 'pointer',
26
+ cursor: disabled ? 'not-allowed' : 'pointer',
26
27
  position: 'relative',
27
28
  width: 40,
28
29
  height: 20,
@@ -36,8 +37,9 @@ export var Toggle = function Toggle(_ref) {
36
37
  return theme.outline;
37
38
  },
38
39
  '&[disabled]': {
39
- opacity: 0.7
40
+ opacity: 0.5
40
41
  },
42
+ opacity: disabled ? 0.5 : 1,
41
43
  '&[data-state="checked"]': {
42
44
  backgroundColor: variant,
43
45
  backgroundPosition: 'left 2px top 2px',
package/build/system/Form/Toggle.stories.d.ts CHANGED
@@ -5,7 +5,7 @@ import { Toggle } from '..';
5
5
  declare const _default: {
6
6
  title: string;
7
7
  component: {
8
- ({ name, onChange, className, variant, ...rest }: import("./Toggle").ToggleProps): import("react").JSX.Element;
8
+ ({ name, onChange, className, variant, disabled, ...rest }: import("./Toggle").ToggleProps): import("react").JSX.Element;
9
9
  displayName: string;
10
10
  };
11
11
  argTypes: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.13.3",
3
+ "version": "2.13.4",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/Form/Toggle.tsx CHANGED
@@ -17,6 +17,7 @@ export type ToggleProps = Switch.SwitchProps & {
17
17
  className?: Argument;
18
18
  onChange?: () => void;
19
19
  variant?: string;
20
+ disabled?: boolean;
20
21
  };
21
22
 
22
23
  export const Toggle = ( {
@@ -24,13 +25,14 @@ export const Toggle = ( {
24
25
  onChange,
25
26
  className,
26
27
  variant = 'primary',
28
+ disabled,
27
29
  ...rest
28
30
  }: ToggleProps ) => (
29
31
  <Switch.Root
30
32
  className={ classNames( 'vip-toggle-component', className ) }
31
33
  sx={ {
32
34
  all: 'unset',
33
- cursor: 'pointer',
35
+ cursor: disabled ? 'not-allowed' : 'pointer',
34
36
  position: 'relative',
35
37
  width: 40,
36
38
  height: 20,
@@ -44,8 +46,9 @@ export const Toggle = ( {
44
46
 
45
47
  '&:focus-visible': ( theme: ThemeProps ) => theme.outline,
46
48
  '&[disabled]': {
47
- opacity: 0.7,
49
+ opacity: 0.5,
48
50
  },
51
+ opacity: disabled ? 0.5 : 1,
49
52
  '&[data-state="checked"]': {
50
53
  backgroundColor: variant,
51
54
  backgroundPosition: 'left 2px top 2px',