feat: new prop activeClassName

- Add new optional prop activeClassName to AccordionItem
- Remove Consumer from Accordion.tsx as it is not used.

src/components/Accordion.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
-import { AccordionContext, Consumer, Provider } from './AccordionContext';
+import { Provider } from './AccordionContext';
 import { UUID } from './ItemContext';
 
 type AccordionProps = Pick<
@@ -25,7 +25,7 @@ export default class Accordion extends React.Component<AccordionProps> {
 
     static displayName: DisplayName.Accordion = DisplayName.Accordion;
 
-    renderAccordion = (accordionContext: AccordionContext): JSX.Element => {
+    renderAccordion = (): JSX.Element => {
         const {
             preExpanded,
             allowMultipleExpanded,
@@ -45,7 +45,7 @@ export default class Accordion extends React.Component<AccordionProps> {
                 allowZeroExpanded={this.props.allowZeroExpanded}
                 onChange={this.props.onChange}
             >
-                <Consumer>{this.renderAccordion}</Consumer>
+                {this.renderAccordion()}
             </Provider>
         );
     }

src/components/AccordionItem.spec.tsx

@@ -46,6 +46,22 @@ describe('AccordionItem', () => {
                 'foo',
             ]);
         });
+
+        it(`switch item's className to activeClassName when it is expanded`, () => {
+            const { getByTestId } = render(
+                <Accordion preExpanded={[UUIDS.FOO]}>
+                    <AccordionItem
+                        uuid={UUIDS.FOO}
+                        data-testid={UUIDS.FOO}
+                        activeClassName="accordion__item___active"
+                    />
+                </Accordion>,
+            );
+
+            expect(Array.from(getByTestId(UUIDS.FOO).classList)).toEqual([
+                'accordion__item___active',
+            ]);
+        });
     });
 
     describe('children prop', () => {

src/components/AccordionItem.tsx

@@ -2,10 +2,16 @@ import * as React from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
 import { nextUuid } from '../helpers/uuid';
-import { Provider as ItemProvider, UUID } from './ItemContext';
+import {
+    Consumer as ItemConsumer,
+    ItemContext,
+    Provider as ItemProvider,
+    UUID,
+} from './ItemContext';
 
 type Props = DivAttributes & {
     uuid?: UUID;
+    activeClassName?: string;
 };
 
 const defaultProps = {
@@ -19,12 +25,26 @@ export default class AccordionItem extends React.Component<Props> {
 
     instanceUuid: UUID = nextUuid();
 
+    renderChildren = (itemContext: ItemContext): JSX.Element => {
+        const { uuid, className, activeClassName, ...rest } = this.props;
+        const { expanded } = itemContext;
+        const cx = expanded && activeClassName ? activeClassName : className;
+
+        return (
+            <div
+                data-accordion-component="AccordionItem"
+                className={cx}
+                {...rest}
+            />
+        );
+    };
+
     render(): JSX.Element {
-        const { uuid = this.instanceUuid, ...rest } = this.props;
+        const { uuid = this.instanceUuid } = this.props;
 
         return (
             <ItemProvider uuid={uuid}>
-                <div data-accordion-component="AccordionItem" {...rest} />
+                <ItemConsumer>{this.renderChildren}</ItemConsumer>
             </ItemProvider>
         );
     }