mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-05 09:50:34 +03:00
Added new switch component for toggle UI
no issue - Mimics behavior and UI of toggle button in Ghost Admin
This commit is contained in:
parent
ee1dfbc0af
commit
9cc5badd2f
20
ghost/portal/src/components/common/Switch.js
Normal file
20
ghost/portal/src/components/common/Switch.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function Switch({id, label, onToggle, checked = false}) {
|
||||||
|
return (
|
||||||
|
<div className="for-switch">
|
||||||
|
<label className="switch" htmlFor={id}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={checked}
|
||||||
|
id={id}
|
||||||
|
onChange={e => onToggle(e)}
|
||||||
|
aria-label={label}
|
||||||
|
/>
|
||||||
|
<span className="input-toggle-component"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Switch;
|
36
ghost/portal/src/components/common/Switch.test.js
Normal file
36
ghost/portal/src/components/common/Switch.test.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {render, fireEvent} from '@testing-library/react';
|
||||||
|
import Switch from './Switch';
|
||||||
|
|
||||||
|
const setup = (overrides = {}) => {
|
||||||
|
const mockOnToggle = jest.fn();
|
||||||
|
const props = {
|
||||||
|
onToggle: mockOnToggle,
|
||||||
|
label: 'Test Switch',
|
||||||
|
id: 'test-switch'
|
||||||
|
};
|
||||||
|
const utils = render(
|
||||||
|
<Switch {...props} />
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkboxEl = utils.getByLabelText(props.label);
|
||||||
|
return {
|
||||||
|
checkboxEl,
|
||||||
|
mockOnToggle,
|
||||||
|
...utils
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Switch', () => {
|
||||||
|
test('renders', () => {
|
||||||
|
const {checkboxEl} = setup();
|
||||||
|
expect(checkboxEl).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('calls onToggle on click', () => {
|
||||||
|
const {checkboxEl, mockOnToggle} = setup();
|
||||||
|
fireEvent.click(checkboxEl);
|
||||||
|
|
||||||
|
expect(mockOnToggle).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user