From 9ab28b5a19aa9a6c325de94e5073ad816c7c8fa4 Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <lightbringer1991@yahoo.com>
Date: Thu, 10 Jan 2019 16:35:17 +1100
Subject: [PATCH] feat: allow Panel props to be passed down from Accordion
 component

---
 src/components/adslot-ui/Accordion/index.jsx  | 20 +++++--------
 .../adslot-ui/Accordion/index.spec.jsx        | 30 +++++++++++++++----
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/adslot-ui/Accordion/index.jsx b/src/components/adslot-ui/Accordion/index.jsx
index 5b64a457e..0f35e4bdb 100644
--- a/src/components/adslot-ui/Accordion/index.jsx
+++ b/src/components/adslot-ui/Accordion/index.jsx
@@ -9,20 +9,14 @@ const AccordionComponent = ({ dts, panels, onPanelClick }) => (
     <Card.Content fill>
       {_.map(panels, panel => {
         const panelDts = dts ? `panel-${panel.id}` : undefined;
+        const panelProps = {
+          key: panel.id,
+          onClick: onPanelClick,
+          dts: panelDts,
+          ..._.omit(panel, ['content', 'onClick']),
+        };
 
-        return (
-          <Panel
-            key={panel.id}
-            id={panel.id}
-            icon={panel.icon}
-            title={panel.title}
-            isCollapsed={panel.isCollapsed}
-            onClick={onPanelClick}
-            dts={panelDts}
-          >
-            {panel.content}
-          </Panel>
-        );
+        return <Panel {...panelProps}>{panel.content}</Panel>;
       })}
     </Card.Content>
   </Card.Container>
diff --git a/src/components/adslot-ui/Accordion/index.spec.jsx b/src/components/adslot-ui/Accordion/index.spec.jsx
index 2ef51d159..135b205a3 100644
--- a/src/components/adslot-ui/Accordion/index.spec.jsx
+++ b/src/components/adslot-ui/Accordion/index.spec.jsx
@@ -10,17 +10,17 @@ describe('AccordionComponent', () => {
   const { panel1, panel2, panel3 } = PanelMocks;
 
   it('should render with defaults', () => {
-    const component = shallow(<Accordion panels={[]} onPanelClick={_.noop} />);
-    const cardElement = component.find(Card.Content);
+    const wrapper = shallow(<Accordion panels={[]} onPanelClick={_.noop} />);
+    const cardElement = wrapper.find(Card.Content);
     expect(cardElement).to.have.length(1);
     expect(cardElement.children()).to.have.length(0);
   });
 
   it('should render with props', () => {
     const panels = [panel1, panel2, panel3];
-    const component = shallow(<Accordion panels={panels} onPanelClick={_.noop} dts="my-accordian" />);
+    const wrapper = shallow(<Accordion panels={panels} onPanelClick={_.noop} dts="my-accordian" />);
 
-    const cardElement = component.find(Card.Content);
+    const cardElement = wrapper.find(Card.Content);
     expect(cardElement).to.have.length(1);
 
     const panelElements = cardElement.find(Panel);
@@ -43,8 +43,8 @@ describe('AccordionComponent', () => {
   it('should pass onPanelClick down to panels', () => {
     const callback = sinon.spy();
     const panels = [panel1, panel2, panel3];
-    const component = mount(<Accordion panels={panels} onPanelClick={callback} />);
-    const panelElements = component.find(Panel);
+    const wrapper = mount(<Accordion panels={panels} onPanelClick={callback} />);
+    const panelElements = wrapper.find(Panel);
 
     panelElements
       .at(0)
@@ -67,4 +67,22 @@ describe('AccordionComponent', () => {
     expect(callback.secondCall.calledWith('2')).to.equal(true);
     expect(callback.thirdCall.calledWith('3')).to.equal(true);
   });
+
+  it('should pass custom props down to panels', () => {
+    const panels = [panel1, panel2, { ...panel3, className: 'test-class', randomProp: 'random-prop-value' }];
+    const wrapper = mount(<Accordion panels={panels} onPanelClick={_.noop} />);
+
+    expect(
+      wrapper
+        .find(Panel)
+        .at(2)
+        .prop('className')
+    ).to.equal('test-class');
+    expect(
+      wrapper
+        .find(Panel)
+        .at(2)
+        .prop('randomProp')
+    ).to.equal('random-prop-value');
+  });
 });