@pushwoosh/dumb-components 1.1.224 → 1.1.225

package/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import type { SwitchProps } from './types';
 /**
- * Toggle switch for a boolean value, with an optional label on either side.
+ * Toggle switch for a boolean value, with an optional label on either side; a click anywhere flips it.
  *
  * @example
  * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>

package/Switch/Switch.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Container, Box, Circle, Label } from './styles';
 /**
- * Toggle switch for a boolean value, with an optional label on either side.
+ * Toggle switch for a boolean value, with an optional label on either side; a click anywhere flips it.
  *
  * @example
  * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>
@@ -13,12 +14,18 @@ export function Switch({
   children,
   onChange
 }) {
+  const handleClick = useCallback(() => {
+    if (!isDisabled) {
+      onChange();
+    }
+  }, [isDisabled, onChange]);
   return _jsxs(Container, {
     labelPosition: labelPosition,
+    isDisabled: isDisabled,
+    onClick: handleClick,
     children: [_jsx(Box, {
       enabled: enabled,
       isDisabled: isDisabled,
-      onClick: onChange,
       children: _jsx(Circle, {
         enabled: enabled,
         isDisabled: isDisabled

package/Switch/__tests__/Switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Switch/__tests__/Switch.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Switch } from '../Switch';
+describe('Switch', () => {
+  it('flips on a click on the label, not only on the toggle', () => {
+    const onChange = jest.fn();
+    render(_jsx(Switch, {
+      enabled: false,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    fireEvent.click(screen.getByText('Save inbox'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+  it('flips on a click on the toggle', () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render(_jsx(Switch, {
+      enabled: true,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    const box = container.querySelector('[tabindex="0"]');
+    if (!box) {
+      throw new Error('toggle not rendered');
+    }
+    fireEvent.click(box);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+  it('stays silent while disabled, label and toggle alike', () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render(_jsx(Switch, {
+      isDisabled: true,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    fireEvent.click(screen.getByText('Save inbox'));
+    fireEvent.click(container.querySelector('[tabindex="0"]'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/Switch/styles.js

@@ -37,9 +37,11 @@ const cssActive = css(["&:active{background:", ";border:2px solid ", ";}"], Colo
 export const Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "sc-csdrg2-0"
-})(["display:flex;align-items:center;flex-direction:", ";"], ({
+})(["display:flex;align-items:center;flex-direction:", ";cursor:", ";"], ({
   labelPosition
-}) => labelPosition === 'left' ? 'row-reverse' : 'row');
+}) => labelPosition === 'left' ? 'row-reverse' : 'row', ({
+  isDisabled
+}) => isDisabled ? 'not-allowed' : 'pointer');
 export const Box = styled.div.attrs({
   tabIndex: '0'
 }).withConfig({

package/Switch/types.d.ts

@@ -12,9 +12,10 @@ export interface SwitchProps {
     /** Fires when the toggle is clicked; flip `enabled` in the handler. */
     onChange: () => void;
 }
-/** Internal style prop carrying the label side. */
+/** Internal style props carrying the label side and the disabled state. */
 export interface AlignProps {
     labelPosition?: string;
+    isDisabled?: boolean;
 }
 /** Internal style prop carrying the toggle state. */
 export interface ComponentProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.224",
+  "version": "1.1.225",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",