feat(AccordionItem): Change title to PropType.node (carbon-design-sys…

…tem#753) Change the AccordionItem title prop to be type node to support nodes in titles. Allows more interesting AccordionItem titles. Fixes carbon-design-system#752 Signed-off-by: Andrew Borley <[email protected]>
joshblack · Mar 29, 2018 · 1db8ba8 · 1db8ba8
1 parent 1f2c730
commit 1db8ba8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/components/Accordion/Accordion-story.js b/src/components/Accordion/Accordion-story.js
@@ -53,7 +53,13 @@ storiesOf('Accordion', module).addWithInfo(
           <SelectItem value="option-3" text="Option 3" />
         </Select>
       </AccordionItem>
-      <AccordionItem title="Section 4 title" {...props}>
+      <AccordionItem
+        title={
+          <h4>
+            Section 4 title (<em>the title can be a node</em>)
+          </h4>
+        }
+        {...props}>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

diff --git a/src/components/AccordionItem/AccordionItem-test.js b/src/components/AccordionItem/AccordionItem-test.js
@@ -59,6 +59,35 @@ describe('AccordionItem', () => {
     });
   });
 
+  describe('Renders a node title as expected', () => {
+    const titleNode = shallow(
+      <h2 className="TitleClass">
+        <img src="some_image.png" alt="Something" />
+        A heading
+      </h2>
+    );
+    const wrapper = shallow(
+      <AccordionItem title={titleNode} className="extra-class">
+        Lorem ipsum.
+      </AccordionItem>
+    );
+
+    it('renders heading as expected', () => {
+      const heading = wrapper.find('.bx--accordion__heading');
+      expect(heading.length).toBe(1);
+      expect(heading.find(Icon).length).toBe(1);
+      const title = heading.find('.bx--accordion__title');
+      expect(title.text()).toBe('A heading');
+      expect(title.find('h2').exists()).toEqual(true);
+      expect(title.find('h2').hasClass('TitleClass')).toEqual(true);
+      expect(title.find('img').exists()).toEqual(true);
+      expect(title.find('img').props()).toEqual({
+        alt: 'Something',
+        src: 'some_image.png',
+      });
+    });
+  });
+
   describe('Check that functions passed in as props are called', () => {
     const onClick = jest.fn();
     const onHeadingClick = jest.fn();

diff --git a/src/components/AccordionItem/AccordionItem.js b/src/components/AccordionItem/AccordionItem.js
@@ -7,7 +7,7 @@ export default class AccordionItem extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    title: PropTypes.string,
+    title: PropTypes.node,
     open: PropTypes.bool,
     onClick: PropTypes.func,
     onHeadingClick: PropTypes.func,