Added FavoriteButton component

Summary: I've added a favorite button component. The FavoriteButton is a toggle button that has a gold favorited state and an outlined non-favorited state. This is passed in as a prop.

Reviewed By: jknoxville

Differential Revision: D16418215

fbshipit-source-id: b695ea223d5a543df6bf1e588dc6756f9e84e8e1

src/plugins/navigation/components/FavoriteButton.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {styled} from 'flipper';
+import {IconButton} from './';
+
+type Props = {|
+  onClick?: () => void,
+  highlighted: boolean,
+  size: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
+|};
+
+const FavoriteButtonContainer = styled('div')({
+  position: 'relative',
+  '>:first-child': {
+    position: 'absolute',
+  },
+  '>:last-child': {
+    position: 'relative',
+  },
+});
+
+export default (props: Props) => {
+  const {highlighted, onClick, ...iconButtonProps} = props;
+  return (
+    <FavoriteButtonContainer>
+      {highlighted ? (
+        <IconButton
+          outline={false}
+          color="#FFD700"
+          icon="star"
+          {...iconButtonProps}
+        />
+      ) : null}
+      <IconButton
+        outline={true}
+        icon="star"
+        onClick={onClick}
+        {...iconButtonProps}
+      />
+    </FavoriteButtonContainer>
+  );
+};

src/plugins/navigation/components/NavigationInfoBox.js

@@ -8,7 +8,7 @@
 
 import {styled} from 'flipper';
 import {parseURIParameters} from '../util/uri';
-import {IconButton} from './';
+import {IconButton, FavoriteButton} from './';
 
 type Props = {|
   uri: ?string,
@@ -64,7 +64,11 @@ export default (props: Props) => {
     return (
       <NavigationInfoBoxContainer>
         <div className="icon-container">
-          <IconButton icon="star" outline={true} size={16} />
+          <FavoriteButton
+            highlighted={false}
+            size={16}
+            onClick={() => props.onFavorite(uri)}
+          />
           <IconButton
             icon="eye"
             size={16}

src/plugins/navigation/components/SearchBar.js

@@ -14,7 +14,7 @@ import {
   Toolbar,
   Glyph,
 } from 'flipper';
-import {IconButton} from './';
+import {IconButton, FavoriteButton} from './';
 
 type Props = {|
   onFavorite: (query: string) => void,
@@ -29,12 +29,12 @@ const IconContainer = styled('div')({
   display: 'inline-flex',
   height: '16px',
   alignItems: 'center',
-  '>*': {
+  '': {
     marginLeft: 10,
     '.icon-button': {
       height: 16,
     },
-    img: {
+    'img,div': {
       verticalAlign: 'top',
       alignItems: 'none',
     },
@@ -86,10 +86,9 @@ class SearchBar extends Component<Props, State> {
             outline={true}
             onClick={() => this.navigateTo(this.state.query)}
           />
-          <IconButton
+          <FavoriteButton
-            icon="star"
             size={16}
-            outline={true}
+            highlighted={false}
             onClick={() => this.favorite(this.state.query)}
           />
         </IconContainer>

src/plugins/navigation/components/index.js

@@ -6,6 +6,7 @@
  * @flow strict-local
  */
 
+export {default as FavoriteButton} from './FavoriteButton';
 export {default as IconButton} from './IconButton';
 export {default as NavigationInfoBox} from './NavigationInfoBox';
 export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';