feat(DropdownHeader): add DropdownHeader to the Design System

Author: MellyGray

packages/design-system/src/lib/components/dropdown-button/dropdown-header/DropdownHeader.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react'
+import { Dropdown } from 'react-bootstrap'
+
+export function DropdownHeader({ children }: PropsWithChildren) {
+  return <Dropdown.Header>{children}</Dropdown.Header>
+}

packages/design-system/src/lib/index.ts

@@ -3,6 +3,7 @@ export { Button } from './components/button/Button'
 export { DropdownButton } from './components/dropdown-button/DropdownButton'
 export { DropdownButtonItem } from './components/dropdown-button/dropdown-button-item/DropdownButtonItem'
 export { DropdownSeparator } from './components/dropdown-button/dropdown-separator/DropdownSeparator'
+export { DropdownHeader } from './components/dropdown-button/dropdown-header/DropdownHeader'
 export { Col } from './components/grid/Col'
 export { Container } from './components/grid/Container'
 export { Row } from './components/grid/Row'

packages/design-system/src/lib/stories/dropdown-button/DropdownButton.stories.tsx

@@ -4,6 +4,7 @@ import { DropdownButton } from '../../components/dropdown-button/DropdownButton'
 import { IconName } from '../../components/icon/IconName'
 import { CanvasFixedHeight } from '../CanvasFixedHeight'
 import { DropdownSeparator } from '../../components/dropdown-button/dropdown-separator/DropdownSeparator'
+import { DropdownHeader } from '../../components/dropdown-button/dropdown-header/DropdownHeader'
 
 /**
  * ## Description
@@ -131,6 +132,19 @@ export const WithSeparatorBetweenOptions: Story = {
   )
 }
 
+export const WithSeparatorHeaderBetweenOptions: Story = {
+  render: () => (
+    <CanvasFixedHeight height={150}>
+      <DropdownButton withSpacing title="Dropdown Button" id="dropdown-1" variant="primary">
+        <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+        <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        <DropdownHeader>Header</DropdownHeader>
+        <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
+      </DropdownButton>
+    </CanvasFixedHeight>
+  )
+}
+
 /**
  * This is an example use case for a navigation dropdown button.
  */

packages/design-system/tests/component/dropdown-button/dropdown-header/DropdownHeader.spec.tsx

@@ -0,0 +1,9 @@
+import { DropdownHeader } from '../../../../src/lib/components/dropdown-button/dropdown-header/DropdownHeader'
+
+describe('DropdownHeader', () => {
+  it('renders the dropdown header', () => {
+    cy.customMount(<DropdownHeader>Header</DropdownHeader>)
+
+    cy.findByRole('heading', { name: 'Header' }).should('exist')
+  })
+})