feat: Add the ability to pass custom Dropdown menu toggle

__tests__/__snapshots__/storyshots.test.js.snap

@@ -6060,6 +6060,46 @@ exports[`Storyshots Components/DropdownMenu Basic 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/DropdownMenu With Custom Toggle 1`] = `
+<div
+  className="dropdown"
+>
+  <button
+    aria-expanded={false}
+    className="dropdown btn btn-primary"
+    data-testid="dropdown-lesson"
+    disabled={false}
+    id="dropdown-lesson"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-kebab-horizontal"
+      fill="currentColor"
+      focusable="false"
+      height={24}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 24 24"
+      width={24}
+    >
+      <path
+        d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"
+        fillRule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Components/DropdownMenu With Separators 1`] = `
 <div
   className="dropdown"

components/DropdownMenu.test.js

@@ -14,7 +14,31 @@ const dropdownMenuItems = [
 
 let testBtnOnClick = ''
 
-describe('MdInput Component', () => {
+describe('DropdownMenu Component', () => {
+  test('Should render custom toggle', () => {
+    const textToTest = 'custom toggle'
+
+    const { queryByText } = render(
+      <DropdownMenu
+        items={dropdownMenuItems}
+        customToggle={{ Component: () => <span>{textToTest}</span> }}
+      />
+    )
+
+    expect(queryByText(textToTest)).toBeInTheDocument()
+  })
+
+  test('Should render custom toggle styles', () => {
+    const { queryByText } = render(
+      <DropdownMenu
+        items={dropdownMenuItems}
+        customToggle={{ style: 'customClass' }}
+      />
+    )
+
+    expect(queryByText('None').classList.contains('customClass')).toBeTruthy()
+  })
+
   test('Should render divider when an item is null', () => {
     const { container, queryByRole } = render(
       <DropdownMenu title="Admin" items={dropdownMenuItems} />

components/DropdownMenu.tsx

@@ -19,26 +19,37 @@ type DropDownMenuProps = {
   //changes the underlying component CSS base class name
   //https://react-bootstrap.github.io/components/dropdowns/#api
   bsPrefix?: string
+  customToggle?: {
+    Component?: () => JSX.Element
+    style?: string
+  }
 }
 
 const ChevronRight = () => <ChevronRightIcon size={17} />
 
 export const DropdownMenu: React.FC<DropDownMenuProps> = ({
   items,
   title,
+  customToggle,
   bsPrefix = ''
 }) => {
   const [activeItem, setActiveItem] = useState({ title })
 
   return (
     <Dropdown bsPrefix={bsPrefix}>
       <Dropdown.Toggle
-        bsPrefix={styles.dropdown}
+        bsPrefix={customToggle?.style ? customToggle.style : styles.dropdown}
         id="dropdown-lesson"
         data-testid="dropdown-lesson"
       >
-        {activeItem.title || 'None'}
-        <ChevronRight />
+        {customToggle?.Component ? (
+          <customToggle.Component />
+        ) : (
+          <>
+            {activeItem.title || 'None'}
+            <ChevronRight />
+          </>
+        )}
       </Dropdown.Toggle>
 
       <Dropdown.Menu className={styles.dropdown__menu}>

components/__snapshots__/DropdownMenu.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MdInput Component Should change value of testBtnOnClick upon click 1`] = `
+exports[`DropdownMenu Component Should change value of testBtnOnClick upon click 1`] = `
 <div>
   <div
     class="dropdown"
@@ -71,7 +71,7 @@ exports[`MdInput Component Should change value of testBtnOnClick upon click 1`]
 </div>
 `;
 
-exports[`MdInput Component Should render divider when an item is null 1`] = `
+exports[`DropdownMenu Component Should render divider when an item is null 1`] = `
 <div>
   <div
     class="dropdown"

stories/components/DropdownMenu.stories.tsx

@@ -1,3 +1,4 @@
+import { KebabHorizontalIcon } from '@primer/octicons-react'
 import React from 'react'
 import { DropdownMenu } from '../../components/DropdownMenu'
 
@@ -31,3 +32,12 @@ export const Basic: React.FC = () => (
 export const _WithSeparators: React.FC = () => (
   <DropdownMenu title="Admin" items={separatedMenu} />
 )
+
+export const _WithCustomToggle: React.FC = () => (
+  <DropdownMenu
+    customToggle={{
+      Component: () => <KebabHorizontalIcon size={24} />
+    }}
+    items={separatedMenu}
+  />
+)