@indico-data/design-system 2.6.0 → 2.8.0

package/src/components/forms/toggle/Toggle.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export interface ToggleProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  id: string;
+  label?: string;
+  name: string;
+  value?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+}
+
+export const Toggle = ({
+  ref,
+  id,
+  label,
+  name,
+  value,
+  onChange,
+  isDisabled,
+  isChecked,
+  ...rest
+}: ToggleProps) => {
+  return (
+    <div className="form-control">
+      <div className="toggle-wrapper">
+        <input
+          data-testid={`form-toggle-input-${name}`}
+          className="toggle-input"
+          type="checkbox"
+          id={id}
+          checked={isChecked}
+          name={name}
+          value={value}
+          disabled={isDisabled}
+          ref={ref}
+          onChange={onChange}
+          tabIndex={0}
+          aria-describedby={id}
+          aria-label={label}
+          {...rest}
+        />
+        <label htmlFor={id} className="switch"></label>
+        <label className={'toggle-label'} htmlFor={id}>
+          {label}
+        </label>
+      </div>
+    </div>
+  );
+};

package/src/components/forms/toggle/__tests__/Toggle.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen, act } from '@testing-library/react';
+import { Toggle } from '@/components/forms/toggle/Toggle';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+
+describe('Toggle', () => {
+  it('renders the Toggle input field', () => {
+    render(<Toggle label="Option 1" name="name" onChange={handleOnChange} id={'ButtonGroup'} />);
+    expect(screen.getByLabelText('Option 1')).toBeInTheDocument();
+  });
+
+  it('calls the onChange function when the Toggle input is clicked', async () => {
+    render(<Toggle label="Option 1" name="name" onChange={handleOnChange} id={'ButtonGroup'} />);
+    expect(handleOnChange).toHaveBeenCalledTimes(0);
+    await userEvent.click(screen.getByLabelText('Option 1'));
+    expect(handleOnChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/forms/toggle/index.ts

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';

package/src/components/forms/toggle/styles/Toggle.scss

@@ -0,0 +1,72 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-toggle-background-color: var(--pf-gray-color-200);
+  --pf-toggle-circle-color: var(--pf-primary-color);
+  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-toggle-background-color: var(--pf-primary-color-100);
+  --pf-toggle-circle-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--pf-toggle-background-color);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.switch::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--pf-toggle-circle-color);
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+.toggle-input:checked + label.switch::after {
+  left: 20px;
+}
+.toggle-input:checked + label.switch {
+  background-color: var(--pf-toggle-checked-background-color);
+}
+.toggle-input:checked,
+.toggle-input:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+.toggle-input:disabled + label.switch {
+  background-color: var(--pf-toggle-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.toggle-input:disabled + label.switch::after {
+  background-color: var(--pf-toggle-disabled-circle-color);
+}
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  cursor: pointer;
+  margin-left: var(--pf-margin-2);
+}

package/src/components/index.ts

@@ -4,3 +4,5 @@ export { Icon } from './icons';
 export { Table } from './table';
 export { Input } from './forms/input';
 export { Radio } from './forms/radio';
+export { Checkbox } from './forms/checkbox';
+export { Toggle } from './forms/toggle';

package/src/index.ts

@@ -63,3 +63,5 @@ export { Icon } from './components/icons';
 export { Table } from './components/table';
 export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
+export { Checkbox } from './components/forms/checkbox';
+export { Toggle as ToggleInput } from './components/forms/toggle';

package/src/styles/index.scss

@@ -8,7 +8,9 @@
 @import '../components/table/styles/Table.scss';
 @import '../components/forms/input/styles/Input.scss';
 @import '../components/forms/radio/styles/Radio.scss';
+@import '../components/forms/checkbox/styles/Checkbox.scss';
 
+@import '../components/forms/toggle/styles/Toggle.scss';
 @import 'typography';
 @import 'colors';
 @import 'borders';