fix(InteriorLeftNavItem): revert back to accepting single children (#15)

* fix(InteriorLeftNavItem): revert back to accepting child elements * refactor(InteriorLeftNavItem): use label or children * test(InteriorLeftNav): tests passing * test(InteriorLeftNav): new tests for label props
carbon-design-system · Jun 13, 2017 · bb7370d · bb7370d
1 parent 04fdba7
commit bb7370d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 35 deletions.
diff --git a/.storybook/components/InteriorLeftNavStory.js b/.storybook/components/InteriorLeftNavStory.js
@@ -11,22 +11,34 @@ storiesOf('InteriorLeftNav', module).addWithInfo(
       context to support user orientation. This pattern accommodates the
       breadth of content and tasks users expect to see.
     `,
-  () => (
+  () =>
     <InteriorLeftNav>
       <InteriorLeftNavList title="Example Item 1">
-        <InteriorLeftNavItem href="#example-item-1A" label="Example Item 1A" />
-        <InteriorLeftNavItem href="#example-item-1B" label="Example Item 1B" />
-        <InteriorLeftNavItem href="#example-item-1C" label="Example Item 1C" />
-        <InteriorLeftNavItem href="#example-item-1D" label="Example Item 1D" />
+        <InteriorLeftNavItem href="#example-item-1A">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
+        <InteriorLeftNavItem href="#example-item-1B">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
+        <InteriorLeftNavItem href="#example-item-1C">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
       </InteriorLeftNavList>
       <InteriorLeftNavList title="Example Item 2">
-        <InteriorLeftNavItem href="#example-item-2A" label="Example Item 2A" />
-        <InteriorLeftNavItem href="#example-item-2B" label="Example Item 2B" />
-        <InteriorLeftNavItem href="#example-item-2C" label="Example Item 2C" />
-        <InteriorLeftNavItem href="#example-item-2D" label="Example Item 2D" />
+        <InteriorLeftNavItem href="#example-item-2A">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
+        <InteriorLeftNavItem href="#example-item-2B">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
+        <InteriorLeftNavItem href="#example-item-2C">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
+        <InteriorLeftNavItem href="#example-item-2D">
+          <a href="#">Link Child</a>
+        </InteriorLeftNavItem>
       </InteriorLeftNavList>
-      <InteriorLeftNavItem href="#example-item-3" label="Example Item 3" />
-      <InteriorLeftNavItem href="#example-item-4" label="Example Item 4" />
+      <InteriorLeftNavItem href="#example-item-3" label="Link Label" />
+      <InteriorLeftNavItem href="#example-item-4" label="Link Label" />
     </InteriorLeftNav>
-  )
 );
diff --git a/components/InteriorLeftNavItem.js b/components/InteriorLeftNavItem.js
@@ -8,22 +8,33 @@ const propTypes = {
   activeHref: PropTypes.string,
   tabIndex: PropTypes.number,
   onClick: PropTypes.func,
-  label: PropTypes.string.isRequired,
   blankTarget: PropTypes.bool,
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
   activeHref: '#',
   tabIndex: 0,
+  label: 'InteriorLeftNavItem Label',
   onClick: /* istanbul ignore next */ () => {},
 };
 
+const newChild = (children, tabIndex) => {
+  const child = React.Children.only(children);
+  return React.cloneElement(React.Children.only(child), {
+    tabIndex,
+    className: 'left-nav-list__item-link',
+  });
+};
+
 const InteriorLeftNavItem = ({
   className,
   href,
   activeHref,
   onClick,
   tabIndex,
+  children,
   label,
   ...other
 }) => {
@@ -40,9 +51,11 @@ const InteriorLeftNavItem = ({
       onKeyPress={evt => onClick(evt, href)}
       {...other}
     >
-      <a className="left-nav-list__item-link" href={href} tabIndex={tabIndex}>
-        {label}
-      </a>
+      {children
+        ? newChild(children, tabIndex)
+        : <a className="left-nav-list__item-link" href={href} tabIndex={tabIndex}>
+            {label}
+          </a>}
     </li>
   );
 };

diff --git a/components/__tests__/InteriorLeftNavItem-test.js b/components/__tests__/InteriorLeftNavItem-test.js
@@ -5,18 +5,12 @@ import { shallow, mount } from 'enzyme';
 describe('InteriorLeftNavItem', () => {
   describe('Renders as expected', () => {
     const wrapper = mount(
-      <InteriorLeftNavItem
-        className="extra-class"
-        href="test-href"
-        label="test-label"
-      />
+      <InteriorLeftNavItem className="extra-class" href="test-href" activeHref="test-href">
+        <a href="test-href">link</a>
+      </InteriorLeftNavItem>
     );
-    const matchingHrefs = mount(
-      <InteriorLeftNavItem
-        href="www.google.com"
-        activeHref="www.google.com"
-        label="test-label"
-      />
+    const wrapperNoChild = mount(
+      <InteriorLeftNavItem className="extra-class" href="test-href" activeHref="test-href" />
     );
 
     it('renders a interior left nav item', () => {
@@ -28,21 +22,23 @@ describe('InteriorLeftNavItem', () => {
     it('should add extra classes that are passed via className', () => {
       expect(wrapper.hasClass('extra-class')).toEqual(true);
     });
-    it('should contain a label', () => {
-      expect(wrapper.find('a').text()).toEqual(wrapper.props().label);
+    it('should contain a default label', () => {
+      expect(wrapper.find('a').text()).toEqual('link');
     });
     it('should contain an href', () => {
       expect(wrapper.find('a').props().href).toEqual(wrapper.props().href);
     });
     it('should add active class to item when activeHref is matched', () => {
-      expect(matchingHrefs.hasClass('left-nav-list__item--active')).toEqual(
-        true
-      );
+      expect(wrapper.hasClass('left-nav-list__item--active')).toEqual(true);
     });
     it('has an anchor with the expected class', () => {
-      expect(wrapper.find('a').hasClass('left-nav-list__item-link')).toEqual(
-        true
-      );
+      expect(wrapper.find('a').hasClass('left-nav-list__item-link')).toEqual(true);
+    });
+    it('can render without a child ', () => {
+      expect(wrapperNoChild.length).toEqual(1);
+    });
+    it('has an anchor that matches label when no child is given', () => {
+      expect(wrapperNoChild.find('a').text()).toEqual(wrapperNoChild.props().label);
     });
   });