Merge pull request #790 from Adslot/update-accordion-to-pass-props-to…

…-panel feat: allow Panel props to be passed down from Accordion component
Adslot · Jan 10, 2019 · a0eca0b · a0eca0b
2 parents 011b133 + 9ab28b5
commit a0eca0b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git 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
@@ -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');
+  });
 });