Hotels: Remove icon from filter buttons

kiwicom · May 3, 2019 · 3757bb0 · 3757bb0
1 parent 086b5e7
commit 3757bb0
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 183 deletions.
diff --git a/app/hotels/src/filter/FilterButton.js b/app/hotels/src/filter/FilterButton.js
@@ -15,27 +15,15 @@ type Props = {|
   +title: React.Element<(any) => TranslationType> | TranslationType,
   +isActive: boolean,
   +onPress: () => void,
-  +icon?: React.Element<typeof Icon>,
 |};
 
-const FilterButton = ({ title, isActive, onPress, icon }: Props) => {
-  const filterIcon =
-    icon == null
-      ? null
-      : React.cloneElement(icon, {
-          size: 'small',
-          color: isActive
-            ? defaultTokens.paletteCloudNormal
-            : defaultTokens.colorIconPrimary,
-        });
-
+const FilterButton = ({ title, isActive, onPress }: Props) => {
   return (
     <Button
       onPress={onPress}
       style={[styleSheet.buttonGroup, isActive && styleSheet.activeButtonGroup]}
     >
       <View style={styleSheet.row}>
-        <View style={styleSheet.icon}>{filterIcon}</View>
         <Text
           style={[
             styleSheet.buttonText,
@@ -77,9 +65,6 @@ const styleSheet = StyleSheet.create({
     fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
     lineHeight: 17,
   },
-  icon: {
-    paddingEnd: 5,
-  },
   row: {
     flexDirection: 'row',
     alignItems: 'center',

diff --git a/app/hotels/src/filter/__tests__/FilterButton.test.js b/app/hotels/src/filter/__tests__/FilterButton.test.js
@@ -1,28 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { Icon, Translation } from '@kiwicom/mobile-shared';
+import { Translation } from '@kiwicom/mobile-shared';
 import { create } from 'react-test-renderer';
 
 import FilterButton from '../FilterButton';
 
-const FilterIcon = <Icon name="sort" testID="testIcon" />;
 const Title = <Translation passThrough="title" />;
 
-it('renders with icon', () => {
-  const wrapper = create(
-    <FilterButton
-      icon={FilterIcon}
-      title={Title}
-      onPress={jest.fn()}
-      isActive={false}
-    />,
-  );
-  expect(wrapper).toMatchSnapshot();
-  const icon = wrapper.root.findByProps({ testID: 'testIcon' });
-  expect(icon).not.toBeNull();
-});
-
 it('renders correctly without icon', () => {
   const wrapper = create(
     <FilterButton title={Title} onPress={jest.fn()} isActive={false} />,
@@ -35,12 +20,7 @@ it('renders correctly without icon', () => {
 
 it('renders correctly when active', () => {
   const wrapper = create(
-    <FilterButton
-      icon={FilterIcon}
-      title={Title}
-      onPress={jest.fn()}
-      isActive={true}
-    />,
+    <FilterButton title={Title} onPress={jest.fn()} isActive={true} />,
   );
   expect(wrapper).toMatchSnapshot();
   const closeWrapper = wrapper.root.findByProps({ testID: 'closeWrapper' });
@@ -49,12 +29,7 @@ it('renders correctly when active', () => {
 
 it('renders correctly when not active', () => {
   const wrapper = create(
-    <FilterButton
-      icon={FilterIcon}
-      title={Title}
-      onPress={jest.fn()}
-      isActive={false}
-    />,
+    <FilterButton title={Title} onPress={jest.fn()} isActive={false} />,
   );
 
   expect(() => {

diff --git a/app/hotels/src/filter/__tests__/__snapshots__/FilterButton.test.js.snap b/app/hotels/src/filter/__tests__/__snapshots__/FilterButton.test.js.snap
@@ -32,38 +32,6 @@ exports[`renders correctly when active 1`] = `
       }
     }
   >
-    <View
-      style={
-        Object {
-          "paddingEnd": 5,
-        }
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "fontFamily": "orbit-icons",
-            },
-            Object {
-              "fontSize": 16,
-              "height": 16,
-              "lineHeight": 16,
-              "width": 16,
-            },
-            Object {
-              "color": "#e8edf1",
-            },
-            Array [
-              undefined,
-              null,
-            ],
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
     <Text
       style={
         Array [
@@ -135,96 +103,3 @@ exports[`renders correctly when active 1`] = `
   </View>
 </View>
 `;
-
-exports[`renders with icon 1`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#e8edf1",
-      "borderRadius": 2,
-      "flexGrow": 1,
-      "height": 32,
-      "justifyContent": "center",
-      "marginEnd": 8,
-      "opacity": 1,
-      "paddingHorizontal": 10,
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "paddingEnd": 5,
-        }
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "fontFamily": "orbit-icons",
-            },
-            Object {
-              "fontSize": 16,
-              "height": 16,
-              "lineHeight": 16,
-              "width": 16,
-            },
-            Object {
-              "color": "#46515e",
-            },
-            Array [
-              undefined,
-              null,
-            ],
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "#171b1e",
-            "fontFamily": "CircularPro-Book",
-            "fontSize": 14,
-            "fontWeight": "normal",
-            "letterSpacing": -0.15,
-          },
-          Array [
-            Object {
-              "color": "#46515e",
-              "fontSize": 12,
-              "lineHeight": 17,
-            },
-            false,
-          ],
-        ]
-      }
-    >
-      <Text>
-        title
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
diff --git a/app/hotels/src/filter/order/OrderFilter.js b/app/hotels/src/filter/order/OrderFilter.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { Icon, Logger, Translation } from '@kiwicom/mobile-shared';
+import { Logger, Translation } from '@kiwicom/mobile-shared';
 
 import FilterButton from '../FilterButton';
 import type {
@@ -70,7 +70,6 @@ export default class OrderFilter extends React.Component<Props, State> {
           title={this.getTitle()}
           isActive={this.props.isActive}
           onPress={this.filterButtonClicked}
-          icon={<Icon name="sort" />}
         />
         <OrderPopup
           isVisible={this.state.isPopupOpen}

diff --git a/app/hotels/src/filter/price/PriceFilter.js b/app/hotels/src/filter/price/PriceFilter.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Icon, Logger } from '@kiwicom/mobile-shared';
+import { Logger } from '@kiwicom/mobile-shared';
 import { DateUtils } from '@kiwicom/mobile-localization';
 
 import PricePopup from './PricePopup';
@@ -81,7 +81,6 @@ const PriceFilter = (props: Props) => {
             daysOfStay={daysOfStay}
           />
         }
-        icon={<Icon name="money" />}
         isActive={isActive}
         onPress={filterButtonClicked}
       />

diff --git a/app/hotels/src/filter/score/ScoreFilter.js b/app/hotels/src/filter/score/ScoreFilter.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Icon, Logger, Translation } from '@kiwicom/mobile-shared';
+import { Logger, Translation } from '@kiwicom/mobile-shared';
 
 import ScorePopup from './ScorePopup';
 import FilterButton from '../FilterButton';
@@ -72,7 +72,6 @@ export default class ScoreFilter extends React.Component<Props, State> {
       <React.Fragment>
         <FilterButton
           title={this.getTitle(minScore)}
-          icon={<Icon name="thumb-up" />}
           isActive={isActive}
           onPress={this.filterButtonClicked}
         />

diff --git a/app/hotels/src/filter/stars/StarsFilter.js b/app/hotels/src/filter/stars/StarsFilter.js
@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import {
-  Icon,
   Translation,
   TranslationFragment,
   type TranslationType,
@@ -88,7 +87,6 @@ export default class StarsFilter extends React.Component<Props, State> {
       <React.Fragment>
         <FilterButton
           title={this.getTitle(this.props.stars)}
-          icon={<Icon name="star-full" />}
           isActive={this.props.isActive}
           onPress={this.filterButtonClicked}
         />

diff --git a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsFilter.test.js.snap b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsFilter.test.js.snap
@@ -3,12 +3,6 @@
 exports[`StarsFilter renders 1`] = `
 <React.Fragment>
   <FilterButton
-    icon={
-      <Icon
-        color="#7f91a8"
-        name="star-full"
-      />
-    }
     isActive={false}
     onPress={[Function]}
     title={