Add options for styling ProductMenu popover trigger (#52)

* add options for styling product menu popover trigger

* address @danswick's comments

* add changelog entry

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Master
 
+- Add `lightText` prop for styling the `ProductMenu` popover trigger on dark backgrounds. ([#52](https://github.com/mapbox/dr-ui/pull/52))
 - Update Mapbox Studio link in product menu items data file from /help/studio-manual/ to /studio-manual/. ([#50](https://github.com/mapbox/dr-ui/pull/50))
 - Add the option to make an item active in `SectionedNavigtion`. Note: This should be used to indicate which example you're currently viewing when displaying `SectionedNavigation` on individual examples pages. ([#45](https://github.com/mapbox/dr-ui/pull/45))
 - Prevent an empty array from being passed to `secondLevelItems` in `NavigationAccordion`. ([#44](https://github.com/mapbox/dr-ui/pull/44))

src/components/product-menu/__tests__/product-menu-test-cases.js

@@ -66,4 +66,15 @@ testCases.arbitraryElement = {
   }
 };
 
+testCases.customStyle = {
+  description: 'Custom trigger style - display only',
+  element: (
+    <div className="bg-gray-dark py6">
+      <ProductMenu productName="Light on dark" lightText={true}>
+        {renderMenu(locationTestItems)}
+      </ProductMenu>
+    </div>
+  )
+};
+
 export default { testCases };

src/components/product-menu/product-menu.js

@@ -33,19 +33,34 @@ class ProductMenu extends React.PureComponent {
   }
 
   render() {
+    const { props } = this;
+    let underlineStyleClasses = 'border--blue-on-hover';
+    let textStyleClasses = '';
+    if (props.lightText) {
+      underlineStyleClasses = 'border--white-on-hover';
+      textStyleClasses = 'color-white';
+    }
     return (
       <PopoverTrigger
-        content={this.props.children}
+        content={props.children}
         popoverProps={popoverProps}
         onPopoverOpen={this.onPopoverOpen}
         onPopoverClose={this.onPopoverClose}
       >
-        <div className="wmax240-ml wmax180-mm flex-parent flex-parent--space-between-main flex-parent--center-cross cursor-pointer border-b border-b--2 border--transparent border--blue-on-hover">
-          <div className="flex-child txt-fancy txt-l txt-truncate">
-            {this.props.productName}
+        <div
+          className={`wmax240-ml wmax180-mm flex-parent flex-parent--space-between-main flex-parent--center-cross cursor-pointer border-b border-b--2 border--transparent ${underlineStyleClasses}`}
+        >
+          <div
+            className={`flex-child txt-fancy txt-l txt-truncate ${textStyleClasses}`}
+          >
+            {props.productName}
           </div>
           <div className="flex-child">
-            <Icon name="caret-down" inline={true} className="icon h30 w30" />
+            <Icon
+              name="caret-down"
+              inline={true}
+              className={`icon h30 w30 ${textStyleClasses}`}
+            />
           </div>
         </div>
       </PopoverTrigger>
@@ -55,7 +70,12 @@ class ProductMenu extends React.PureComponent {
 
 ProductMenu.propTypes = {
   productName: PropTypes.string.isRequired,
+  lightText: PropTypes.bool,
   children: PropTypes.node.isRequired
 };
 
+ProductMenu.defaultProps = {
+  lightText: false
+};
+
 export default ProductMenu;