feat(AccordionItem): add experimental Accordion Item (#1835)

* feat(AccordionItem): add experimental Accordion Item * test(AccordionItem): Fixes tests for new icon components * chore(AccordionItem): Use aria label prop * fix(AccordionItem): Remove role null * chore(AccordionItem): Remove icon prop * chore(AccorionItem): Adds role null back into legacy icon
carbon-design-system · Feb 7, 2019 · 68d8aa2 · 68d8aa2
1 parent f7c985a
commit 68d8aa2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/src/components/AccordionItem/AccordionItem-test.js b/src/components/AccordionItem/AccordionItem-test.js
@@ -9,6 +9,8 @@ import React from 'react';
 import { iconChevronRight } from 'carbon-icons';
 import AccordionItem from '../AccordionItem';
 import Icon from '../Icon';
+import ChevronRight16 from '@carbon/icons-react/lib/chevron--right/16';
+import { componentsX } from '../../internal/FeatureFlags';
 import { shallow, mount } from 'enzyme';
 
 describe('AccordionItem', () => {
@@ -27,14 +29,21 @@ describe('AccordionItem', () => {
 
     it('renders heading as expected', () => {
       const heading = wrapper.find('.bx--accordion__heading');
+      const icon = componentsX ? ChevronRight16 : Icon;
       expect(heading.length).toBe(1);
-      expect(heading.find(Icon).length).toBe(1);
+      expect(heading.find(icon).length).toBe(1);
       expect(heading.find('.bx--accordion__title').text()).toBe('A heading');
     });
 
     it('should use correct icon', () => {
       const heading = wrapper.find('.bx--accordion__heading');
-      expect(heading.find(Icon).props().icon).toEqual(iconChevronRight);
+      if (componentsX) {
+        expect(heading.find(ChevronRight16).props().icon.id).toEqual(
+          'icon--chevron--right'
+        );
+      } else {
+        expect(heading.find(Icon).props().icon).toEqual(iconChevronRight);
+      }
     });
 
     it('has the expected classes', () => {

diff --git a/src/components/AccordionItem/AccordionItem.js b/src/components/AccordionItem/AccordionItem.js
@@ -11,7 +11,9 @@ import classnames from 'classnames';
 import { iconChevronRight } from 'carbon-icons';
 import { settings } from 'carbon-components';
 import Icon from '../Icon';
+import ChevronRight16 from '@carbon/icons-react/lib/chevron--right/16';
 import { match, keys } from '../../tools/key';
+import { componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -133,12 +135,20 @@ export default class AccordionItem extends Component {
           aria-expanded={this.state.open}
           className={`${prefix}--accordion__heading`}
           onClick={this.handleHeadingClick}>
-          <Icon
-            className={`${prefix}--accordion__arrow`}
-            icon={iconChevronRight}
-            description={iconDescription}
-            role={null} // eslint-disable-line jsx-a11y/aria-role
-          />
+          {componentsX ? (
+            <ChevronRight16
+              className={`${prefix}--accordion__arrow`}
+              aria-label={iconDescription}
+            />
+          ) : (
+            <Icon
+              className={`${prefix}--accordion__arrow`}
+              icon={iconChevronRight}
+              description={iconDescription}
+              role={null} // eslint-disable-line jsx-a11y/aria-role
+            />
+          )}
+
           <div className={`${prefix}--accordion__title`}>{title}</div>
         </Expando>
         <div className={`${prefix}--accordion__content`}>{children}</div>