fix: added controlled logic for switch

src/ebay-switch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots ebay-switch Controlled switch-button 1`] = `
+<DocumentFragment>
+  <span
+    class="field"
+  >
+    <span
+      class="switch"
+    >
+      <input
+        aria-checked="false"
+        class="switch__control"
+        id="switch-30"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <span
+        class="switch__button"
+      />
+    </span>
+    <label
+      class="field__label field__label--end"
+      for="switch-30"
+    >
+      Unchecked
+    </label>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Storyshots ebay-switch Default switch-button 1`] = `
 <DocumentFragment>
   <span

src/ebay-switch/__tests__/index.spec.tsx

@@ -18,6 +18,15 @@ describe('<EbaySwitch>', () => {
 
             expect(spy).toBeCalledWith(anySyntheticEvent, { value, checked: true })
         })
+
+        it('should not change when controlled', () => {
+            const checked = true
+            const wrapper = render(<EbaySwitch checked={checked} />)
+            const input = wrapper.container.querySelector('input')
+            fireEvent.click(input)
+
+            expect(input?.checked).toBe(checked)
+        })
     })
 })
 

src/ebay-switch/__tests__/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { action } from '../../../.storybook/action'
 import { EbaySwitch } from '../index'
 
@@ -44,3 +44,29 @@ export const DisabledSwitchButton = () => (
 DisabledSwitchButton.story = {
     name: 'Disabled switch-button'
 }
+
+export const ControlledSwitchButton = () => {
+    const [checked, setChecked] = useState(false)
+    return (
+        <span className="field">
+            <EbaySwitch
+                checked={checked}
+                id="switch-30"
+                onChange={(e, props) => {
+                    action("onChange")(e, props)
+                    if (props) {
+                        setChecked(props.checked)
+                    }
+                }}
+            />
+            <label className="field__label field__label--end" htmlFor="switch-30">
+                {checked ? "Checked" : "Unchecked"}
+            </label>
+        </span>
+    );
+};
+
+ControlledSwitchButton.story = {
+    name: "Controlled switch-button",
+};
+

src/ebay-switch/ebay-switch.tsx

@@ -6,16 +6,19 @@ type Props = Omit<ComponentProps<'input'>, 'onChange'> & {
     onChange?: EbayChangeEventHandler<HTMLInputElement, { value: string | number, checked: boolean }>;
 }
 
+const isControlled = checked => typeof checked !== 'undefined'
+
 const EbaySwitch: FC<Props> = ({
     id,
     value,
     name,
     className,
     checked,
+    defaultChecked = false,
     onChange = () => {},
     ...rest
 }) => {
-    const [isChecked, setChecked] = useState(!!checked)
+    const [isChecked, setChecked] = useState(defaultChecked)
 
     useEffect(() => {
         setChecked(!!checked)
@@ -40,8 +43,8 @@ const EbaySwitch: FC<Props> = ({
                 role="switch"
                 type="checkbox"
                 value={value}
-                aria-checked={isChecked}
-                checked={isChecked}
+                aria-checked={isControlled(checked) ? checked : isChecked}
+                checked={isControlled(checked) ? checked : isChecked}
                 name={name}
                 onChange={handleChange}
             />