feat(AccordionCollapse): add as prop support (react-bootstrap#5991)

* Add As Prop in AccordionCollapse Component

* Added test case for AccordionCollapse --should output h1

Author: Amanporwal510

src/AccordionCollapse.tsx

@@ -6,15 +6,16 @@ import { Transition } from 'react-transition-group';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Collapse, { CollapseProps } from './Collapse';
 import AccordionContext from './AccordionContext';
-import { BsPrefixRefForwardingComponent, BsPrefixOnlyProps } from './helpers';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
-export interface AccordionCollapseProps
-  extends BsPrefixOnlyProps,
-    CollapseProps {
+export interface AccordionCollapseProps extends BsPrefixProps, CollapseProps {
   eventKey: string;
 }
 
 const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
   /**
    * A key that corresponds to the toggler that triggers this collapse's expand or collapse.
    */
@@ -28,7 +29,17 @@ const AccordionCollapse: BsPrefixRefForwardingComponent<
   'div',
   AccordionCollapseProps
 > = React.forwardRef<Transition<any>, AccordionCollapseProps>(
-  ({ bsPrefix, className, children, eventKey, ...props }, ref) => {
+  (
+    {
+      as: Component = 'div',
+      bsPrefix,
+      className,
+      children,
+      eventKey,
+      ...props
+    },
+    ref,
+  ) => {
     const { activeEventKey } = useContext(AccordionContext);
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-collapse');
 
@@ -39,7 +50,7 @@ const AccordionCollapse: BsPrefixRefForwardingComponent<
         {...props}
         className={classNames(className, bsPrefix)}
       >
-        <div>{React.Children.only(children)}</div>
+        <Component>{React.Children.only(children)}</Component>
       </Collapse>
     );
   },

test/AccordionSpec.js

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 
 import Accordion from '../src/Accordion';
+import AccordionCollapse from '../src/AccordionCollapse';
 import Dropdown from '../src/Dropdown';
 import ListGroup from '../src/ListGroup';
 import Nav from '../src/Nav';
@@ -14,6 +15,19 @@ describe('<Accordion>', () => {
     mount(<Accordion flush />).assertSingle('.accordion.accordion-flush');
   });
 
+  it('should output a h1', () => {
+    const wrapper = mount(
+      <Accordion>
+        <Accordion.Button>Hi</Accordion.Button>
+        <AccordionCollapse as="h1" eventKey="0">
+          <span>hidden Data</span>
+        </AccordionCollapse>
+      </Accordion>,
+    );
+
+    wrapper.find('AccordionCollapse').assertSingle('h1');
+  });
+
   it('should only have second item collapsed', () => {
     const wrapper = mount(
       <Accordion defaultActiveKey="0">