Bring dropdown and checkbox dropdown into PUI [#154075625]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>

spec/pivotal-ui-react/dropdown/dropdown-item_spec.js

@@ -1,140 +1,148 @@
 import '../spec_helper';
 import {DropdownItem} from '../../../src/react/dropdowns';
 
-import {findByClass, findByTag, clickOn} from '../spec_helper';
-
 describe('DropdownItem', () => {
-  let result;
-  const renderComponent = props => ReactDOM.render(
-    <DropdownItem {...props}>DropdownItem Text</DropdownItem>, root
-  );
-
-  it('passes through header', () => {
-    result = renderComponent({header: true});
-    expect(findByClass(result, 'dropdown-header')).toContainText('DropdownItem Text');
-  });
+  let subject;
 
-  it('passes through divider', () => {
-    result = renderComponent({divider: true});
-    expect(findByClass(result, 'divider')).toBeDefined();
+  beforeEach(() => {
+    subject = ReactDOM.render(<DropdownItem>DropdownItem Text</DropdownItem>, root);
   });
 
-  it('passes through className and style to the li ', () => {
-    result = renderComponent({
-      className: 'test-item-class',
-      style: {opacity: '0.5'}
+  describe('header', () => {
+    beforeEach(() => {
+      subject::setProps({header: true});
     });
 
-    const listItem = findByTag(result, 'li');
-    expect(listItem).toHaveClass('test-item-class');
-    expect(listItem).toHaveCss({opacity: '0.5'});
+    it('passes through header', () => {
+      expect('#root .dropdown-header').toContainText('DropdownItem Text');
+    });
   });
 
-  it('passes through id to the anchor if an href is provided', () => {
-    result = renderComponent({id: 'test-item-id'});
+  describe('divider', () => {
+    beforeEach(() => {
+      subject::setProps({divider: true});
+    });
 
-    let listItem = findByTag(result, 'li');
-    expect(listItem).not.toHaveAttr('id');
+    it('passes through divider', () => {
+      expect('#root .divider').toExist();
+    });
+  });
 
-    result = renderComponent({id: 'test-item-id', href: 'test'});
+  describe('className', () => {
+    beforeEach(() => {
+      subject::setProps({className: 'test-item-class'});
+    });
 
-    listItem = findByTag(result, 'li');
-    expect(listItem).not.toHaveAttr('id');
-    expect(listItem.querySelector('a')).toHaveAttr('id', 'test-item-id');
+    it('passes through className to the li', () => {
+      expect('#root li').toHaveClass('test-item-class');
+    });
   });
 
-  it('passes through href and target to the anchor', () => {
-    result = renderComponent({href: 'test', target: '_blank'});
-    expect(findByTag(result, 'a')).toHaveAttr('href', 'test');
-    expect(findByTag(result, 'a')).toHaveAttr('target', '_blank');
+  describe('style', () => {
+    beforeEach(() => {
+      subject::setProps({style: {opacity: '0.5'}});
+    });
+
+    it('passes through style to the li', () => {
+      expect('#root li').toHaveCss({opacity: '0.5'});
+    });
   });
 
-  describe('onSelect handling', () => {
-    let handleSelectSpy;
+  describe('id', () => {
+    beforeEach(() => {
+      subject::setProps({id: 'test-item-id'});
+    });
+
     describe('with href', () => {
-      it('passes through onSelect on anchor click', () => {
-        handleSelectSpy = jasmine.createSpy('handleSelect');
-        const eventKey = '1';
-        result = renderComponent({href: 'test', onSelect: handleSelectSpy, eventKey});
+      beforeEach(() => {
+        subject::setProps({href: 'test'});
+      });
 
-        clickOn(findByTag(result, 'a'));
-        expect(handleSelectSpy).toHaveBeenCalled();
+      it('passes through id to the anchor', () => {
+        expect('#root li a').toHaveAttr('id', 'test-item-id');
       });
     });
 
     describe('without href', () => {
-      it('passes through onSelect on list item click', () => {
-        handleSelectSpy = jasmine.createSpy('handleSelect');
-        const eventKey = '1';
-        result = renderComponent({onSelect: handleSelectSpy, eventKey});
-
-        clickOn(findByTag(result, 'li'));
-        expect(handleSelectSpy).toHaveBeenCalled();
+      it('does not pass through id to the anchor', () => {
+        expect('#root li').not.toHaveAttr('id');
+        expect('#root li a').not.toExist();
       });
     });
+  });
 
-    describe('with disabled prop', () => {
-      it('does not call onSelect handler', () => {
-        handleSelectSpy = jasmine.createSpy('handleSelect');
-        result = renderComponent({href: 'test', onSelect: handleSelectSpy, disabled: true});
+  describe('with href and target', () => {
+    beforeEach(() => {
+      subject::setProps({href: 'test', target: '_blank'});
+    });
+
+    it('passes through href and target to the anchor', () => {
+      expect('#root a').toHaveAttr('href', 'test');
+      expect('#root a').toHaveAttr('target', '_blank');
+    });
+  });
 
-        expect(findByTag(result, 'li')).toHaveClass('disabled');
-        expect(findByTag(result, 'a')).toHaveAttr('disabled');
+  describe('onSelect handling', () => {
+    let handleSelectSpy;
+    const eventKey = '1';
+
+    beforeEach(() => {
+      handleSelectSpy = jasmine.createSpy('handleSelect');
+      subject::setProps({onSelect: handleSelectSpy, eventKey});
+    });
 
-        clickOn(findByTag(result, 'a'));
+    describe('when li is clicked', () => {
+      beforeEach(() => {
+        $('#root li').click();
+      });
 
-        expect(handleSelectSpy).not.toHaveBeenCalled();
+      it('calls onSelect on li click', () => {
+        expect(handleSelectSpy).toHaveBeenCalledWith(jasmine.any(Object), eventKey);
       });
     });
   });
 
   describe('onClick handling', () => {
     let handleClickSpy;
-    describe('with href', () => {
-      it('passes through onClick on anchor click', () => {
-        handleClickSpy = jasmine.createSpy('handleClick');
-        result = renderComponent({href: 'test', onClick: handleClickSpy});
 
-        clickOn(findByTag(result, 'a'));
-        expect(handleClickSpy).toHaveBeenCalled();
-      });
+    beforeEach(() => {
+      handleClickSpy = jasmine.createSpy('handleClick');
+      subject::setProps({onClick: handleClickSpy});
     });
 
-    describe('without href', () => {
-      it('passes through onClick on list item click', () => {
-        handleClickSpy = jasmine.createSpy('handleClick');
-        result = renderComponent({onClick: handleClickSpy});
+    describe('when li is clicked', () => {
+      beforeEach(() => {
+        $('#root li').click();
+      });
 
-        clickOn(findByTag(result, 'li'));
-        expect(handleClickSpy).toHaveBeenCalled();
+      it('calls onClick on li click', () => {
+        expect(handleClickSpy).toHaveBeenCalledWith(jasmine.any(Object));
       });
     });
 
     describe('with disabled prop', () => {
-      it('does not call onClick handler', () => {
-        handleClickSpy = jasmine.createSpy('handleClick');
-        result = renderComponent({href: 'test', onClick: handleClickSpy, disabled: true});
-
-        expect(findByTag(result, 'li')).toHaveClass('disabled');
-        expect(findByTag(result, 'a')).toHaveAttr('disabled');
+      beforeEach(() => {
+        subject::setProps({href: 'test', disabled: true});
+      });
 
-        clickOn(findByTag(result, 'a'));
+      it('does not call onClick handler', () => {
+        expect('#root li').toHaveClass('disabled');
+        expect('#root a').toHaveAttr('disabled');
+        $('#root a').click();
 
         expect(handleClickSpy).not.toHaveBeenCalled();
       });
     });
   });
 
-
   describe('when an a tag is passed in as a child', () => {
     beforeEach(() => {
-      result = ReactDOM.render(
+      subject = ReactDOM.render(
         <DropdownItem><a href="custom">link</a></DropdownItem>, root
       );
 
       it('renders the child link', () => {
-        const listItem = findByTag(result, 'li');
-        expect(listItem.querySelector('a')).toHaveAttr('id', 'custom');
+        expect('#root li a').toHaveAttr('id', 'custom');
       });
     });
   });

spec/pivotal-ui-react/dropdown/dropdown_spec.js

@@ -27,10 +27,10 @@ describe('Dropdown', () => {
   });
 
   it('correctly styles the dropdown-toggle, and adds a chevron icon', () => {
-    expect('.dropdown-toggle').toHaveText('Dropping');
-    expect('.dropdown-toggle').toHaveClass('test-btn-class');
-    expect('.dropdown-toggle').toHaveAttr('aria-haspopup', 'true');
-    expect('.dropdown-toggle').toHaveAttr('aria-label', 'Nessun Dorma');
+    expect('.dropdown button').toHaveText('Dropping');
+    expect('.dropdown button').toHaveClass('test-btn-class');
+    expect('.dropdown button').toHaveAttr('aria-haspopup', 'true');
+    expect('.dropdown button').toHaveAttr('aria-label', 'Nessun Dorma');
 
     expect('.icon-chevron_down').toExist();
   });

spec/pivotal-ui-react/notification/notification_spec.js → spec/pivotal-ui-react/notifications/notifications_spec.js

@@ -1,8 +1,7 @@
 import '../spec_helper';
 import {Notifications, NotificationItem, AlertNotifications} from '../../../src/react/notifications';
 
-
-describe('Notification', () => {
+describe('Notifications', () => {
   const props = {
     className: 'test-class',
     id: 'test-id',

src/css/buttons/buttons.scss

@@ -35,11 +35,7 @@
   &:hover,
   &:focus,
   &:hover:focus {
-
     outline: none;
-    .icon {
-
-    }
   }
 
   // Button Content Rules

src/css/dropdowns/dropdown-flat.scss

@@ -0,0 +1,19 @@
+@import "../pui-variables";
+
+.dropdown.dropdown-flat {
+
+  .dropdown-toggle {
+    border: 1px solid transparent;
+    background-color: transparent;
+    text-transform: uppercase;
+    color: $btn-default-color;
+    font-weight: $btn-font-weight;
+    letter-spacing: $btn-letter-spacing;
+  }
+
+  &.dropdown-open {
+    .dropdown-toggle {
+      border: 1px solid transparent;
+    }
+  }
+}

src/css/dropdowns/dropdown-lg.scss

@@ -0,0 +1,43 @@
+@import "../pui-variables";
+
+.dropdown.dropdown-lg {
+  .dropdown-icon-col {
+    height: 40px;
+
+    .dropdown-toggle {
+      width: 40px;
+    }
+  }
+
+  .dropdown-toggle {
+    height: ($base-unit*5);
+    line-height: ($base-unit*5) - 2px;
+    font-size: 16px;
+  }
+
+  a.dropdown-label {
+    height: ($base-unit*5);
+    line-height: ($base-unit*5) - 2px;
+    font-size: 16px;
+  }
+
+  .dropdown-menu {
+    li {
+      padding: $base-unit;
+      line-height: 24px;
+      font-size: 16px;
+    }
+  }
+
+  &.dropdown-split .dropdown-toggle {
+    width: 40px;
+  }
+
+  .icon-toggle {
+    font-size: 20px;
+  }
+
+  &.dropdown-icon-only:not(.dropdown-split) {
+    width: 40px;
+  }
+}

src/css/dropdowns/dropdown-link.scss

@@ -0,0 +1,16 @@
+@import "../pui-variables";
+
+.dropdown.dropdown-link {
+  width: initial;
+  white-space: nowrap;
+
+  .dropdown-toggle, .dropdown-icon-col {
+    border: 1px solid transparent;
+    color: $link-color;
+    background-color: transparent;
+  }
+
+  .icon-toggle svg {
+    fill: $link-color;
+  }
+}

src/css/dropdowns/dropdown-sm.scss

@@ -0,0 +1,40 @@
+@import "../pui-variables";
+
+.dropdown.dropdown-sm {
+  .dropdown-icon-col {
+    height: 24px;
+  }
+
+  .dropdown-toggle {
+    height: ($base-unit*3);
+    line-height: ($base-unit*3) - 2px;
+    font-size: 12px;
+  }
+
+  a.dropdown-label {
+    height: ($base-unit*3);
+    line-height: ($base-unit*3) - 2px;
+    font-size: 12px;
+  }
+
+  .dropdown-menu {
+    li {
+      padding: $base-unit;
+      line-height: 16px;
+      font-size: 12px;
+    }
+  }
+
+  &.dropdown-split .dropdown-toggle {
+    width: 24px;
+    padding: 11px;
+  }
+
+  .icon-toggle {
+    font-size: 14px;
+  }
+
+  &.dropdown-icon-only:not(.dropdown-split) {
+    width: 24px;
+  }
+}