Add select divider support

Author: colinrotherham

src/__tests__/index.test.ts

@@ -111,6 +111,7 @@ describe('Index', () => {
       'Row',
       'SearchIcon',
       'Select',
+      'SelectDivider',
       'SelectOption',
       'SkipLink',
       'SummaryList',

src/components/form-elements/select/Select.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
@@ -27,13 +27,17 @@ const SelectComponent = forwardRef<HTMLSelectElement, SelectProps>(
   ),
 );
 
+export const SelectDivider: FC = () => <hr />;
+
 export const SelectOption = forwardRef<HTMLOptionElement, ComponentPropsWithoutRef<'option'>>(
   (props, forwardedRef) => <option ref={forwardedRef} {...props} />,
 );
 
 SelectComponent.displayName = 'Select';
+SelectDivider.displayName = 'Select.Divider';
 SelectOption.displayName = 'Select.Option';
 
 export const Select = Object.assign(SelectComponent, {
+  Divider: SelectDivider,
   Option: SelectOption,
 });

stories/Form Elements/Select.stories.tsx

@@ -58,6 +58,18 @@ export const SelectWithErrorAndHintText: Story = {
   },
 };
 
+export const SelectWithDivider: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
+      <Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
+      <Select.Divider />
+      <Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
+      <Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
+    </Select>
+  ),
+};
+
 export const SelectWithButton: Story = {
   args: {
     formGroupProps: {