feat: add range select

Author: ClaraTschamon

src/components/Select/Select.stories.tsx

@@ -20,6 +20,7 @@ export default {
     isFullWidth: { control: { type: 'boolean' } },
     isSearchable: { control: { type: 'boolean' } },
     isMultiple: { control: { type: 'boolean' } },
+    isRange: { control: { type: 'boolean' } },
     onChange: { action: 'Select Changed' },
     onClose: { action: 'Dropdown Closed' },
     options: { control: 'object' },
@@ -124,3 +125,12 @@ NotFullWidth.args = {
     },
   ],
 };
+
+export const RangeSelect = Template.bind({});
+RangeSelect.args = {
+  isRange: true,
+  placeholder: 'Select a range',
+  rangeMin: 1,
+  rangeMax: 100,
+  options: [],
+};

src/components/Select/Select.test.tsx

@@ -238,6 +238,76 @@ describe('The Select component', () => {
     expect(handleChange).toHaveBeenCalledWith(['1']);
   });
 
+  it('handles range selection mode', async () => {
+    const handleChange = jest.fn();
+
+    render(<Select color="black" options={mockOptions} isRange={true} onChange={handleChange} />);
+
+    const toggleButton = screen.getByRole('combobox');
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    expect(screen.getByText('From')).toBeInTheDocument();
+    expect(screen.getByText('To')).toBeInTheDocument();
+
+    const inputFields = screen.getAllByRole('spinbutton');
+
+    fireEvent.change(inputFields[0], {
+      target: { value: '1' },
+    });
+    fireEvent.change(inputFields[1], {
+      target: { value: '100' },
+    });
+
+    expect(handleChange).toHaveBeenCalledWith(['1', '100']);
+  });
+
+  it('displays error messages when the range is invalid', async () => {
+    render(
+      <Select color="black" options={mockOptions} isRange={true} rangeMin={5} rangeMax={10} />
+    );
+
+    const toggleButton = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    const inputFields = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputFields[0], {
+      target: { value: '4' },
+    });
+    fireEvent.change(inputFields[1], {
+      target: { value: '11' },
+    });
+
+    expect(screen.getByText('Value must be at least 5')).toBeInTheDocument();
+    expect(screen.getByText('Value must be at most 10')).toBeInTheDocument();
+  });
+
+  it('displays an error message when the min value of the range is greater than the max value', async () => {
+    render(
+      <Select color="black" options={mockOptions} isRange={true} rangeMin={0} rangeMax={10} />
+    );
+    const toggleButton = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    const inputFields = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputFields[0], {
+      target: { value: '9' },
+    });
+    fireEvent.change(inputFields[1], {
+      target: { value: '4' },
+    });
+
+    expect(
+      screen.getByText('The minimum value cannot be greater than the maximum value')
+    ).toBeInTheDocument();
+  });
+
   it('prevents deselection when preventDeselection is true', async () => {
     const handleChange = jest.fn();