From c6f9d1cb1836ba1c4170a41234a8b63e23169cfb Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Tue, 23 Jul 2019 03:22:53 -0700
Subject: [PATCH] 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
---
 .../navigation/components/FavoriteButton.js   | 47 +++++++++++++++++++
 .../components/NavigationInfoBox.js           |  8 +++-
 .../navigation/components/SearchBar.js        | 11 ++---
 src/plugins/navigation/components/index.js    |  1 +
 4 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/plugins/navigation/components/FavoriteButton.js

diff --git a/src/plugins/navigation/components/FavoriteButton.js b/src/plugins/navigation/components/FavoriteButton.js
new file mode 100644
index 000000000..c7b582122
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/plugins/navigation/components/NavigationInfoBox.js b/src/plugins/navigation/components/NavigationInfoBox.js
index 367056142..e0a574014 100644
--- a/src/plugins/navigation/components/NavigationInfoBox.js
+++ b/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}
diff --git a/src/plugins/navigation/components/SearchBar.js b/src/plugins/navigation/components/SearchBar.js
index 374e75a26..baec400e0 100644
--- a/src/plugins/navigation/components/SearchBar.js
+++ b/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
-            icon="star"
+          <FavoriteButton
             size={16}
-            outline={true}
+            highlighted={false}
             onClick={() => this.favorite(this.state.query)}
           />
         </IconContainer>
diff --git a/src/plugins/navigation/components/index.js b/src/plugins/navigation/components/index.js
index 048cacf2c..429d0d35e 100644
--- a/src/plugins/navigation/components/index.js
+++ b/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';