@indico-data/design-system 2.7.0 → 2.8.0

package/lib/src/components/forms/toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+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 declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/toggle/Toggle.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;

package/lib/src/components/forms/toggle/__tests__/Toggle.test.d.ts

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

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

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

package/lib/src/components/index.d.ts

@@ -5,3 +5,4 @@ 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/lib/src/index.d.ts

@@ -10,3 +10,4 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/checkbox/Checkbox.mdx

@@ -8,10 +8,15 @@ This component may be used on it's on or as part of a group. The source code is
 
 <Canvas of={Checkbox.Default} source={{
     code: `
+const [isChecked, setIsChecked] = useState<boolean>(false);
+const handleChange = () => {
+  setIsChecked(!isChecked);
+};
+
 <div>
   <h2 className="mb-2">Checkbox Buttons</h2>
   <Checkbox
-    onChange={onChange}
+    onChange={handleChange}
     id={id}
     label={label}
     name={name}

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -78,7 +78,7 @@ const meta: Meta = {
       defaultValue: { summary: false },
     },
     isChecked: {
-      control: 'boolean',
+      control: false,
       description: 'Toggles the checked state of the checkbox field when true',
       table: {
         category: 'Props',
@@ -111,18 +111,24 @@ export const Default: Story = {
     isChecked: false,
   },
   render: (args) => {
+    const [isChecked, setIsChecked] = useState<boolean>(false);
+
+    const handleChange = () => {
+      setIsChecked(!isChecked);
+    };
+
     return (
       <div>
-        <h2 className="mb-2">Checkbox Buttons</h2>
+        <h2 className="mb-2">Checkbox Button</h2>
         <Checkbox
           key={args.id}
-          onChange={args.onChange}
+          onChange={handleChange}
           id={args.id}
           label={args.label}
           name={args.name}
           value={args.value}
           isDisabled={args.isDisabled}
-          isChecked={args.isChecked}
+          isChecked={isChecked}
         />
       </div>
     );

package/src/components/forms/checkbox/Checkbox.tsx

@@ -28,7 +28,6 @@ export const Checkbox = ({
       <div className="checkbox-wrapper">
         <input
           data-testid={`form-checkbox-input-${name}`}
-          {...rest}
           className="checkbox-input"
           type="checkbox"
           id={id}
@@ -41,6 +40,7 @@ export const Checkbox = ({
           tabIndex={0}
           aria-describedby={id}
           aria-label={label}
+          {...rest}
         />
         <label
           htmlFor={id}

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -30,21 +30,21 @@
   .checkbox-input-label {
     cursor: pointer;
   }
-  [type='checkbox']:checked,
-  [type='checkbox']:not(:checked) {
+  .checkbox-input:checked,
+  .checkbox-input:not(:checked) {
     position: absolute;
     left: -9999px;
   }
-  [type='checkbox']:checked + label,
-  [type='checkbox']:not(:checked) + label {
+  .checkbox-input:checked + label,
+  .checkbox-input:not(:checked) + label {
     position: relative;
     padding-left: var(--pf-padding-7);
     cursor: pointer;
     line-height: 20px;
     display: inline-block;
   }
-  [type='checkbox']:checked + label:before,
-  [type='checkbox']:not(:checked) + label:before {
+  .checkbox-input:checked + label:before,
+  .checkbox-input:not(:checked) + label:before {
     content: '';
     position: absolute;
     left: 0;
@@ -55,8 +55,8 @@
     border-radius: var(--pf-rounded);
     background: var(--pf-checkbox-background-color);
   }
-  [type='checkbox']:checked + label:after,
-  [type='checkbox']:not(:checked) + label:after {
+  .checkbox-input:checked + label:after,
+  .checkbox-input:not(:checked) + label:after {
     content: '';
     width: 12px;
     height: 12px;
@@ -68,31 +68,31 @@
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
   }
-  [type='checkbox']:not(:checked) + label:after {
+  .checkbox-input:not(:checked) + label:after {
     opacity: 0;
     -webkit-transform: scale(0);
     transform: scale(0);
   }
-  [type='checkbox']:checked + label:after {
+  .checkbox-input:checked + label:after {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-  [type='checkbox']:disabled,
-  [type='checkbox']:disabled + label {
+  .checkbox-input:disabled,
+  .checkbox-input:disabled + label {
     cursor: not-allowed;
   }
 
-  [type='checkbox']:disabled + label {
+  .checkbox-input:disabled + label {
     color: var(--pf-checkbox-disabled-color);
     opacity: 0.5;
   }
 
-  [type='checkbox']:disabled + label:before {
+  .checkbox-input:disabled + label:before {
     border-color: var(--pf-checkbox-disabled-color);
   }
 
-  [type='checkbox']:disabled + label:after {
+  .checkbox-input:disabled + label:after {
     background: var(--pf-checkbox-disabled-color);
   }
 }

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Toggle from './Toggle.stories';
+
+<Meta title="Forms/Toggle" name="Toggle" />
+
+# Toggle
+
+Under the hood, Toggle component works the same as a regular Checkbox. Through CSS, we style the checkbox to resemble an on/off switch. 
+
+<Canvas of={Toggle.Default} source={{
+  }} />
+<Controls of={Toggle.Default} />
+
+## Note
+Because of storybook limitations, the "isChecked" prop is not working in the storybook. In addition, neither is the on click. Please refer to the [default](http://localhost:6006/?path=/story/forms-toggle--default) example on the forms section.

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

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+import { useState } from 'react';
+
+const meta: Meta = {
+  title: 'Forms/Toggle',
+  component: Toggle,
+  argTypes: {
+    isChecked: {
+      control: false,
+      description: 'This is the state of the toggle',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+    ref: {
+      table: {
+        disable: true,
+      },
+    },
+    onChange: {
+      control: false,
+      description: 'onChange event handler',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
+        },
+      },
+      action: 'onChange',
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the toggle field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the toggle field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'This holds the value that will be emitted when the toggle is selected',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    id: {
+      control: 'text',
+      description: 'This explains what button group this toggle belongs to.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'This disables the toggle',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    id: 'toggle',
+    label: 'switch label',
+    isDisabled: false,
+    name: 'toggle',
+    value: 'toggle',
+    isChecked: false,
+  },
+  render: (args) => {
+    const [checkedValue, setCheckedValue] = useState<boolean>(false);
+
+    const handleChange = () => {
+      setCheckedValue(!checkedValue);
+    };
+    return (
+      <Toggle
+        key={args.id}
+        onChange={handleChange}
+        id={args.id}
+        label={args.label}
+        name={args.name}
+        value={args.value}
+        isDisabled={args.isDisabled}
+        isChecked={checkedValue}
+      />
+    );
+  },
+};

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

@@ -5,3 +5,4 @@ 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

@@ -64,3 +64,4 @@ 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

@@ -10,6 +10,7 @@
 @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';