FEATURE: uses select-box for topic-notifications-button component

- Introduces ComponentConnector to use a component inside a widget
- Use css to set size of components instead of properties
- Smarted positionning
- Style tweaks

test/javascripts/acceptance/topic-notifications-button-test.js.es6

@@ -19,7 +19,7 @@ acceptance("Topic Notifications button", {
 QUnit.test("Updating topic notification level", assert => {
   visit("/t/internationalization-localization/280");
 
-  const notificationOptions = "#topic-footer-buttons .notification-options";
+  const notificationOptions = "#topic-footer-buttons .topic-notifications";
 
   andThen(() => {
     assert.ok(
@@ -29,7 +29,7 @@ QUnit.test("Updating topic notification level", assert => {
   });
 
   click(`${notificationOptions} .tracking`);
-  click(`${notificationOptions} .dropdown-menu .watching`);
+  click(`${notificationOptions} .select-box-collection .select-box-row[title=tracking]`);
 
   andThen(() => {
     assert.ok(
@@ -44,4 +44,4 @@ QUnit.test("Updating topic notification level", assert => {
     //   'it should display the right notification level in topic timeline'
     // );
   });
-});
+});

test/javascripts/components/select-box-test.js.es6

@@ -222,7 +222,7 @@ componentTest('persists filter state when expandind/collapsing', {
 });
 
 componentTest('supports options to limit size', {
-  template: '{{select-box maxCollectionHeight=20 content=content}}',
+  template: '{{select-box collectionHeight=20 content=content}}',
 
   beforeEach() {
     this.set("content", [{ id: 1, text: "robin" }]);