Repository: kiwicom/mobile
Pull request #893 (2018-07-18 09:44:08)

Hotels: add letterSpacing to Stars component


Patch:
diff --git a/packages/shared/src/Stars.js b/packages/shared/src/Stars.js
index 580162a4..0a2f2b43 100644
--- a/packages/shared/src/Stars.js
+++ b/packages/shared/src/Stars.js
@@ -3,11 +3,24 @@
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
 
+import Text from './Text';
+import StyleSheet from './PlatformStyleSheet';
+
 type Props = {|
   // number of stars
   +rating?: ?number,
 |};
 
 export default function Stars({ rating }: Props) {
-  return <Translation passThrough={'★'.repeat(rating || 0)} />;
+  return (
+    <Text style={styles.stars}>
+      <Translation passThrough={'★'.repeat(rating || 0)} />
+    </Text>
+  );
 }
+
+const styles = StyleSheet.create({
+  stars: {
+    letterSpacing: 2,
+  },
+});


Test patch:
diff --git a/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap b/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap
index b810119d..87e60f5e 100644
--- a/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap
+++ b/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap
@@ -15,11 +15,19 @@ Array [
           "fontWeight": "normal",
           "letterSpacing": -0.15,
         },
-        undefined,
+        Object {
+          "letterSpacing": 2,
+        },
       ]
     }
   >
-    ★★★
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      ★★★
+    </Text>
   </Text>,
   <Text
     accessible={true}
@@ -77,11 +85,19 @@ Array [
           "fontWeight": "normal",
           "letterSpacing": -0.15,
         },
-        undefined,
+        Object {
+          "letterSpacing": 2,
+        },
       ]
     }
   >
-    ★★★★★
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      ★★★★★
+    </Text>
   </Text>,
   <Text
     accessible={true}
@@ -139,11 +155,19 @@ Array [
           "fontWeight": "normal",
           "letterSpacing": -0.15,
         },
-        undefined,
+        Object {
+          "letterSpacing": 2,
+        },
       ]
     }
   >
-    
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      
+    </Text>
   </Text>,
   <Text
     accessible={true}
diff --git a/packages/shared/src/__tests__/__snapshots__/Stars.test.js.snap b/packages/shared/src/__tests__/__snapshots__/Stars.test.js.snap
index 46694e13..691312ed 100644
--- a/packages/shared/src/__tests__/__snapshots__/Stars.test.js.snap
+++ b/packages/shared/src/__tests__/__snapshots__/Stars.test.js.snap
@@ -1,25 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`works with failed rating prop 1`] = `
-<Translation
-  passThrough=""
-/>
+<Text
+  style={
+    Object {
+      "letterSpacing": 2,
+    }
+  }
+>
+  <Translation
+    passThrough=""
+  />
+</Text>
 `;
 
 exports[`works with failed rating prop 2`] = `
-<Translation
-  passThrough=""
-/>
+<Text
+  style={
+    Object {
+      "letterSpacing": 2,
+    }
+  }
+>
+  <Translation
+    passThrough=""
+  />
+</Text>
 `;
 
 exports[`works with rating prop 1`] = `
-<Translation
-  passThrough="★★★"
-/>
+<Text
+  style={
+    Object {
+      "letterSpacing": 2,
+    }
+  }
+>
+  <Translation
+    passThrough="★★★"
+  />
+</Text>
 `;
 
 exports[`works with rating prop 2`] = `
-<Translation
-  passThrough="★★★★★★★★★★"
-/>
+<Text
+  style={
+    Object {
+      "letterSpacing": 2,
+    }
+  }
+>
+  <Translation
+    passThrough="★★★★★★★★★★"
+  />
+</Text>
 `;