SimpleCard: remove vertical margin

Closes this: https://trello.com/c/iznOmCi2/277-design-separators
kiwicom · Jun 18, 2018 · 91ac070 · 91ac070
1 parent 3fd026d
commit 91ac070
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 122 deletions.
diff --git a/app/hotels/src/singleHotel/HotelDetailScreen.js b/app/hotels/src/singleHotel/HotelDetailScreen.js
@@ -16,11 +16,11 @@ import idx from 'idx';
 import Header from './header/Header';
 import HotelInformation from './hotelInformation/HotelInformation';
 import RoomList from './roomList/RoomList';
-import type { Image } from '../gallery/GalleryGrid';
-import type { HotelDetailScreen_availableHotel } from './__generated__/HotelDetailScreen_availableHotel.graphql';
 import BookNow from './bookNow/BookNow';
 import BrandLabel from './brandLabel/BrandLabel';
+import type { Image } from '../gallery/GalleryGrid';
 import type { RoomsConfiguration } from '../singleHotel/AvailableHotelSearchInput';
+import type { HotelDetailScreen_availableHotel } from './__generated__/HotelDetailScreen_availableHotel.graphql';
 
 type Props = {|
   +openGallery: (hotelName: string, images: Image[]) => void,

diff --git a/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js b/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
@@ -10,23 +10,15 @@ import Description from './description/Description';
 import type { HotelInformation_hotel } from './__generated__/HotelInformation_hotel.graphql';
 
 type ContainerProps = {|
-  hotel: any,
-  onGoToMap: () => void,
+  +hotel: any,
+  +onGoToMap: () => void,
 |};
 
 type Props = {|
   ...ContainerProps,
-  hotel: ?HotelInformation_hotel,
+  +hotel: ?HotelInformation_hotel,
 |};
 
-const styles = StyleSheet.create({
-  locationContainer: {
-    borderBottomWidth: 1,
-    borderBottomColor: Color.grey.$200,
-    marginBottom: 15,
-  },
-});
-
 export class HotelInformation extends React.Component<Props> {
   renderDescription = (locationView: React.Node) => (
     <Description hotel={this.props.hotel} locationView={locationView} />
@@ -40,32 +32,37 @@ export class HotelInformation extends React.Component<Props> {
     />
   );
 
-  renderBaseComponent = () => (
-    <View>
-      {this.renderLocation(false)}
-      {this.renderDescription()}
-    </View>
-  );
-
   render = () => {
-    const baseComponent = this.renderBaseComponent();
     return (
       <AdaptableLayout.Consumer
-        renderOnNarrow={baseComponent}
+        renderOnNarrow={
+          <React.Fragment>
+            {this.renderLocation(false)}
+            {this.renderDescription()}
+          </React.Fragment>
+        }
         renderOnWide={
-          <View>
+          <React.Fragment>
             {this.renderDescription(
               <View style={styles.locationContainer}>
                 {this.renderLocation(true)}
               </View>,
             )}
-          </View>
+          </React.Fragment>
         }
       />
     );
   };
 }
 
+const styles = StyleSheet.create({
+  locationContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: Color.grey.$200,
+    marginBottom: 15,
+  },
+});
+
 export default (createFragmentContainer(
   HotelInformation,
   graphql`

diff --git a/app/hotels/src/singleHotel/hotelInformation/description/Description.js b/app/hotels/src/singleHotel/hotelInformation/description/Description.js
@@ -13,50 +13,18 @@ import {
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 
-import type { Description_hotel } from './__generated__/Description_hotel.graphql';
 import Facilities from './Facilities';
-
-const styles = StyleSheet.create({
-  simpleCardWrapper: {
-    android: {
-      marginTop: 10,
-    },
-    ios: {
-      marginTop: -2,
-    },
-  },
-  simpleCardWideWrapper: {
-    marginTop: 10,
-  },
-  summary: {
-    android: {
-      lineHeight: 21,
-    },
-    ios: {
-      lineHeight: 19,
-    },
-  },
-  wideCardChildrenWrapper: {
-    marginVertical: 3,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-  },
-  card: {
-    marginVertical: 0,
-    paddingVertical: 0,
-    paddingHorizontal: 0,
-  },
-});
+import type { Description_hotel } from './__generated__/Description_hotel.graphql';
 
 type ContainerProps = {|
-  hotel: any,
-  locationView?: any,
+  +hotel: any,
+  +locationView?: any,
 |};
 
 type Props = {
   ...ContainerProps,
-  hotel: ?Description_hotel,
-  locationView?: React.Node,
+  +hotel: ?Description_hotel,
+  +locationView?: React.Node,
 };
 
 export class Description extends React.Component<Props> {
@@ -78,19 +46,14 @@ export class Description extends React.Component<Props> {
     </View>
   );
 
-  renderBaseComponent = () => {
-    return (
-      <View style={styles.simpleCardWrapper}>
-        <SimpleCard>{this.renderCardChildren(false)}</SimpleCard>
-      </View>
-    );
-  };
-
   render = () => {
-    const baseComponent = this.renderBaseComponent();
     return (
       <AdaptableLayout.Consumer
-        renderOnNarrow={baseComponent}
+        renderOnNarrow={
+          <View style={styles.simpleCardWrapper}>
+            <SimpleCard>{this.renderCardChildren(false)}</SimpleCard>
+          </View>
+        }
         renderOnWide={
           <View style={styles.simpleCardWideWrapper}>
             <SimpleCard style={styles.card}>
@@ -103,6 +66,35 @@ export class Description extends React.Component<Props> {
   };
 }
 
+const styles = StyleSheet.create({
+  simpleCardWrapper: {
+    android: {
+      marginTop: 10,
+    },
+  },
+  simpleCardWideWrapper: {
+    marginTop: 10,
+  },
+  summary: {
+    android: {
+      lineHeight: 21,
+    },
+    ios: {
+      lineHeight: 19,
+    },
+  },
+  wideCardChildrenWrapper: {
+    marginVertical: 3,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  card: {
+    marginVertical: 0,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+  },
+});
+
 export default (createFragmentContainer(
   Description,
   graphql`

diff --git a/app/hotels/src/singleHotel/hotelInformation/location/Location.js b/app/hotels/src/singleHotel/hotelInformation/location/Location.js
@@ -17,53 +17,16 @@ import idx from 'idx';
 import gradient from './white-to-alpha-horizontal.png';
 import type { Location_hotel } from './__generated__/Location_hotel.graphql';
 
-const styles = StyleSheet.create({
-  background: {
-    backgroundColor: '#ffffff',
-  },
-  wideContainer: {
-    borderRadius: 2,
-  },
-  container: {
-    height: 100,
-    flexDirection: 'row',
-  },
-  leftColumn: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: 15,
-  },
-  rightColumn: {
-    flex: 1,
-  },
-  addressLine: {
-    fontSize: 14,
-    lineHeight: 19,
-    letterSpacing: -0.15,
-  },
-  streetLine: {
-    color: Color.textDark,
-  },
-  cityLine: {
-    color: Color.textLight,
-  },
-  mapBottom: {
-    android: {
-      bottom: -25,
-    },
-  },
-});
-
 type ContainerProps = {|
-  hotel: any,
-  onGoToMap: () => void,
-  isWide: boolean,
+  +hotel: any,
+  +onGoToMap: () => void,
+  +isWide: boolean,
 |};
 
-type Props = {
+type Props = {|
   ...ContainerProps,
-  hotel: ?Location_hotel,
-};
+  +hotel: ?Location_hotel,
+|};
 
 export function Location({ hotel, onGoToMap, isWide }: Props) {
   const address = idx(hotel, _ => _.address);
@@ -113,6 +76,43 @@ export function Location({ hotel, onGoToMap, isWide }: Props) {
   );
 }
 
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: Color.white,
+  },
+  wideContainer: {
+    borderRadius: 2,
+  },
+  container: {
+    height: 100,
+    flexDirection: 'row',
+  },
+  leftColumn: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 15,
+  },
+  rightColumn: {
+    flex: 1,
+  },
+  addressLine: {
+    fontSize: 14,
+    lineHeight: 19,
+    letterSpacing: -0.15,
+  },
+  streetLine: {
+    color: Color.textDark,
+  },
+  cityLine: {
+    color: Color.textLight,
+  },
+  mapBottom: {
+    android: {
+      bottom: -25,
+    },
+  },
+});
+
 export default (createFragmentContainer(
   Location,
   graphql`

diff --git a/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js b/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js
@@ -9,8 +9,7 @@ const renderer = new ShallowRenderer();
 
 it('renders without crashing', () => {
   const props = {
-    openGallery() {},
-    onGoToMap() {},
+    onGoToMap: () => {},
     isWide: false,
     hotel: ({
       hotel: 'asdf',
@@ -22,8 +21,7 @@ it('renders without crashing', () => {
 
 it('renders without crashing with missing data', () => {
   const props = {
-    openGallery() {},
-    onGoToMap() {},
+    onGoToMap: () => {},
     isWide: false,
     hotel: undefined,
   };

diff --git a/packages/shared/src/SimpleCard.js b/packages/shared/src/SimpleCard.js
@@ -9,9 +9,9 @@ import Touchable from './Touchable';
 import type { StylePropType } from '../types/Styles';
 
 type Props = {|
-  children: React.Node,
-  onPress?: Function,
-  style?: StylePropType,
+  +children: React.Node,
+  +onPress?: Function,
+  +style?: StylePropType,
 |};
 
 export default function SimpleCard(props: Props) {
@@ -30,7 +30,6 @@ const styles = StyleSheet.create({
   wrapper: {
     backgroundColor: Color.white,
     borderStyle: 'solid',
-    marginVertical: 3,
     padding: 10,
     android: {
       marginHorizontal: 8,