Repository: kiwicom/mobile
Pull request #1455 (2019-01-22 11:50:10)

Shared: Use universal-button in CloseButton component


Patch:
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
index 460eb0a5..f1ba80e9 100644
--- a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
@@ -128,9 +128,6 @@ export default class HotelAmenitiesPopup extends React.Component<Props, State> {
           buttonTitle={
             <Translation id="hotels_search.filter.hotel_facilities_popup.save" />
           }
-          buttonCloseTitle={
-            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
-          }
           onSave={this.onSave}
           onClose={this.props.onClose}
           isVisible={this.props.isVisible}
diff --git a/app/hotels/src/filter/order/OrderPopup.js b/app/hotels/src/filter/order/OrderPopup.js
index 027cb893..e35d710d 100644
--- a/app/hotels/src/filter/order/OrderPopup.js
+++ b/app/hotels/src/filter/order/OrderPopup.js
@@ -57,7 +57,6 @@ export default class OrderPopup extends React.Component<Props, State> {
     return (
       <ButtonPopup
         buttonTitle={<Translation id="shared.button.save" />}
-        buttonCloseTitle={<Translation id="shared.button.close" />}
         onSave={this.onSave}
         onClose={this.onClose}
         isVisible={this.props.isVisible}
diff --git a/app/hotels/src/filter/price/PricePopup.js b/app/hotels/src/filter/price/PricePopup.js
index 74a54c89..84cebc16 100644
--- a/app/hotels/src/filter/price/PricePopup.js
+++ b/app/hotels/src/filter/price/PricePopup.js
@@ -73,9 +73,6 @@ export default class PricePopup extends React.Component<Props, State> {
           buttonTitle={
             <Translation id="hotels_search.filter.price_popup.save" />
           }
-          buttonCloseTitle={
-            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
-          }
           onSave={this.onSave}
           onClose={this.props.onClose}
           isVisible={this.props.isVisible}
diff --git a/app/hotels/src/filter/score/ScorePopup.js b/app/hotels/src/filter/score/ScorePopup.js
index 316770f0..68c7074b 100644
--- a/app/hotels/src/filter/score/ScorePopup.js
+++ b/app/hotels/src/filter/score/ScorePopup.js
@@ -73,9 +73,6 @@ export default class ScorePopup extends React.Component<Props, State> {
           buttonTitle={
             <Translation id="hotels_search.filter.score_popup.save" />
           }
-          buttonCloseTitle={
-            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
-          }
           onSave={this.onSave}
           onClose={this.props.onClose}
           isVisible={this.props.isVisible}
diff --git a/app/hotels/src/filter/stars/StarsPopup.js b/app/hotels/src/filter/stars/StarsPopup.js
index 971d38fa..eb72fafe 100644
--- a/app/hotels/src/filter/stars/StarsPopup.js
+++ b/app/hotels/src/filter/stars/StarsPopup.js
@@ -96,9 +96,6 @@ export default class StarsPopup extends React.Component<Props, State> {
           buttonTitle={
             <Translation id="hotels_search.filter.stars_popup.save" />
           }
-          buttonCloseTitle={
-            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
-          }
           onSave={this.onSave}
           onClose={this.props.onClose}
           isVisible={this.props.isVisible}
diff --git a/packages/shared/src/buttons/CloseButton.js b/packages/shared/src/buttons/CloseButton.js
index ef30f796..9d747471 100644
--- a/packages/shared/src/buttons/CloseButton.js
+++ b/packages/shared/src/buttons/CloseButton.js
@@ -1,10 +1,9 @@
 // @flow strict
 
 import * as React from 'react';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
 import { Translation } from '@kiwicom/mobile-localization';
+import { Button } from '@kiwicom/universal-components';
 
-import Button from './Button';
 import ButtonTitle from './ButtonTitle';
 import StyleSheet from '../PlatformStyleSheet';
 import type { StylePropType } from '../../types/Styles';
@@ -16,7 +15,7 @@ type Props = {|
 
 export default function CloseButton({ onPress, style }: Props) {
   return (
-    <Button onPress={onPress} style={[styles.button, style]}>
+    <Button onPress={onPress} style={style} type="secondary">
       <ButtonTitle
         style={styles.text}
         text={<Translation id="shared.button.close" />}
@@ -26,9 +25,6 @@ export default function CloseButton({ onPress, style }: Props) {
 }
 
 const styles = StyleSheet.create({
-  button: {
-    backgroundColor: defaultTokens.paletteCloudNormal,
-  },
   text: {
     fontWeight: '800',
     fontSize: 16,
diff --git a/packages/shared/src/popup/ButtonPopup.js b/packages/shared/src/popup/ButtonPopup.js
index 9aae1cbb..a60c2a28 100644
--- a/packages/shared/src/popup/ButtonPopup.js
+++ b/packages/shared/src/popup/ButtonPopup.js
@@ -7,10 +7,10 @@ import type { TranslationType } from '@kiwicom/mobile-localization';
 import Popup from './Popup';
 import TextButton from '../buttons/TextButton';
 import StyleSheet from '../PlatformStyleSheet';
+import CloseButton from '../buttons/CloseButton';
 
 type Props = {|
   +buttonTitle: TranslationType,
-  +buttonCloseTitle: TranslationType,
   +children: React.Node,
   +isVisible: boolean,
   +onClose: Function,
@@ -38,11 +38,7 @@ export default class ButtonPopup extends React.Component<Props> {
         bottomContent={
           <View style={styles.buttonsWrapper}>
             <View style={[styles.button, styles.buttonFirst]}>
-              <TextButton
-                title={this.props.buttonCloseTitle}
-                onPress={this.onClose}
-                type="secondary"
-              />
+              <CloseButton onPress={this.onClose} />
             </View>
             <View style={styles.button}>
               <TextButton


Test patch:
diff --git a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
index 650de331..49038104 100644
--- a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
+++ b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
@@ -3,11 +3,6 @@
 exports[`StarsPopup should render popup 1`] = `
 <withOrientation>
   <ButtonPopup
-    buttonCloseTitle={
-      <Translation
-        id="hotels_search.filter.hotel_facilities_popup.close"
-      />
-    }
     buttonTitle={
       <Translation
         id="hotels_search.filter.stars_popup.save"
diff --git a/packages/shared/src/popup/__tests__/ButtonPopup.test.js b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
index 33ad1aa8..a7268698 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopup.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
@@ -7,13 +7,13 @@ import { Translation } from '@kiwicom/mobile-localization';
 import ButtonPopup from '../ButtonPopup';
 import Touchable from '../../Touchable';
 import Dimensions from '../../view/Dimensions';
+import CloseButton from '../../buttons/CloseButton';
 
 const renderPopup = (onSave, onClose) =>
   renderer.create(
     <Dimensions.Provider dimensions={{ width: 500, height: 700 }}>
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
-        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={onSave}
         onClose={onClose}
@@ -34,6 +34,19 @@ describe('ButtonPopup', () => {
     });
 
     expect(onSave).toBeCalled();
+    expect(onClose).not.toBeCalled();
+  });
+
+  it('close button should call onClose', async () => {
+    const onSave = jest.fn();
+    const onClose = jest.fn();
+    const testRenderer = renderPopup(onSave, onClose);
+    const testInstance = testRenderer.root;
+    await testInstance.findAllByType(CloseButton).forEach(async child => {
+      await child.props.onPress();
+    });
+
+    expect(onSave).not.toBeCalled();
     expect(onClose).toBeCalled();
   });
 });
diff --git a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
index 1feea87b..222f8b5b 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
@@ -13,7 +13,6 @@ describe('ButtonPopup playground', () => {
     PlaygroundRenderer.render(
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
-        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={noop}
         onClose={noop}
diff --git a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
index 84841496..f79b3d6b 100644
--- a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
+++ b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
@@ -23,15 +23,8 @@ exports[`ButtonPopup playground renders in playground 1`] = `
           ]
         }
       >
-        <TextButton
-          disabled={false}
+        <CloseButton
           onPress={[Function]}
-          title={
-            <Translation
-              passThrough="Close"
-            />
-          }
-          type="secondary"
         />
       </View>
       <View