Repository: kiwicom/mobile
Pull request #1130 (2018-09-26 11:14:12)

Hotels: New design for hotel review score


Patch:
diff --git a/app/hotels/src/components/HotelReviewScore.js b/app/hotels/src/components/HotelReviewScore.js
index 5ac1b198..b04ef312 100644
--- a/app/hotels/src/components/HotelReviewScore.js
+++ b/app/hotels/src/components/HotelReviewScore.js
@@ -13,6 +13,11 @@ type Props = {|
   +hotel: HotelReviewScore_hotel,
 |};
 
+type ColorType = {|
+  +backgroundColor: string,
+  +color: string,
+|};
+
 export class HotelReviewScore extends React.Component<Props> {
   /**
    * One decimal point with trailing zero.
@@ -32,16 +37,29 @@ export class HotelReviewScore extends React.Component<Props> {
    * It doesn't assign color in case of review score out of range.
    * In this case, default color of the badge (grey) is used.
    */
-  calculateColor = (score: number): ?string => {
+  calculateColor = (score: number): ColorType => {
     if (score >= 0 === score < 3) {
-      return defaultTokens.paletteRedNormal;
+      return {
+        backgroundColor: defaultTokens.paletteRedLight,
+        color: defaultTokens.paletteRedNormal,
+      };
     }
     if (score >= 3 === score <= 7) {
-      return defaultTokens.paletteOrangeNormal;
+      return {
+        backgroundColor: defaultTokens.paletteOrangeLight,
+        color: defaultTokens.paletteOrangeNormal,
+      };
     }
     if (score > 7 === score <= 10) {
-      return defaultTokens.paletteGreenNormal;
+      return {
+        backgroundColor: defaultTokens.paletteGreenLight,
+        color: defaultTokens.paletteGreenNormal,
+      };
     }
+    return {
+      backgroundColor: '',
+      color: '',
+    };
   };
 
   render = () => {
@@ -49,7 +67,7 @@ export class HotelReviewScore extends React.Component<Props> {
     if (reviewScore === null) {
       return null;
     }
-
+    const { backgroundColor, color } = this.calculateColor(reviewScore);
     return (
       <AdaptableBadge
         translation={
@@ -58,10 +76,15 @@ export class HotelReviewScore extends React.Component<Props> {
         style={[
           style.adaptableBadge,
           {
-            backgroundColor: this.calculateColor(reviewScore),
+            backgroundColor,
+          },
+        ]}
+        textStyle={[
+          style.adaptableBadgeText,
+          {
+            color,
           },
         ]}
-        textStyle={style.adaptableBadgeText}
       />
     );
   };
@@ -69,6 +92,7 @@ export class HotelReviewScore extends React.Component<Props> {
 
 const style = StyleSheet.create({
   adaptableBadge: {
+    borderRadius: 3,
     android: {
       paddingHorizontal: 8,
     },
diff --git a/packages/playground/src/Playground.js b/packages/playground/src/Playground.js
index d635c6da..bfa5f7a7 100644
--- a/packages/playground/src/Playground.js
+++ b/packages/playground/src/Playground.js
@@ -87,11 +87,11 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderBottomWidth: 1,
     borderColor: defaultTokens.paletteInkDark,
-    backgroundColor: defaultTokens.paletteCloudNormal,
+    backgroundColor: defaultTokens.paletteWhite,
   },
   sectionText: {
     paddingBottom: 10,
-    color: defaultTokens.paletteCloudNormal,
+    color: defaultTokens.colorTextAttention,
     fontSize: 10,
   },
 });
diff --git a/packages/playground/src/PlaygroundImports.js b/packages/playground/src/PlaygroundImports.js
index e3ef596a..0c5681b6 100644
--- a/packages/playground/src/PlaygroundImports.js
+++ b/packages/playground/src/PlaygroundImports.js
@@ -8,6 +8,7 @@ import '../../../app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js';
 import '../../../app/hotels/src/gallery/__tests__/PhotosStripeHeader.test.js';
 import '../../../app/hotels/src/filter/stars/__tests__/StarsPopup.test.js';
 import '../../../app/hotels/src/filter/stars/__tests__/StarsFilter.test.js';
+import '../../../app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js';
 import '../../../app/hotels/src/allHotels/__tests__/LoadMoreButton.test.js';
 import '../../../app/MMB/src/scenes/passenger/visa/__tests__/VisaRequired.test.js';
 import '../../../app/MMB/src/scenes/passenger/__tests__/Passenger.test.js';


Test patch:
diff --git a/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js b/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js
new file mode 100644
index 00000000..3cdc1fdb
--- /dev/null
+++ b/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js
@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+
+import { HotelReviewScore } from '../HotelReviewScore';
+
+const $refType: any = null;
+const getProps = (score: number = 1.2) => ({
+  review: {
+    score,
+  },
+  $refType,
+});
+
+it('renders with red value', () => {
+  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps()} />);
+});
+
+it('renders with yellow value', () => {
+  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps(5.8)} />);
+});
+
+it('renders with green value', () => {
+  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps(9.2)} />);
+});
diff --git a/app/hotels/src/components/__tests__/HotelReviewScore.test.js b/app/hotels/src/components/__tests__/HotelReviewScore.test.js
index 4442433d..7b430fbb 100644
--- a/app/hotels/src/components/__tests__/HotelReviewScore.test.js
+++ b/app/hotels/src/components/__tests__/HotelReviewScore.test.js
@@ -26,12 +26,34 @@ describe('calculateColor', () => {
     const ORANGE = defaultTokens.paletteOrangeNormal;
     const GREEN = defaultTokens.paletteGreenNormal;
 
-    expect(HRS.calculateColor(-1)).toBeUndefined();
-    expect(HRS.calculateColor(0)).toBe(RED);
-    expect(HRS.calculateColor(3)).toBe(ORANGE);
-    expect(HRS.calculateColor(7)).toBe(ORANGE);
-    expect(HRS.calculateColor(10)).toBe(GREEN);
-    expect(HRS.calculateColor(11)).toBeUndefined();
+    const RED_BACKGROUND = defaultTokens.paletteRedLight;
+    const ORANGE_BACKGROUND = defaultTokens.paletteOrangeLight;
+    const GREEN_BACKGROUND = defaultTokens.paletteGreenLight;
+
+    expect(HRS.calculateColor(-1)).toEqual({
+      backgroundColor: '',
+      color: '',
+    });
+    expect(HRS.calculateColor(0)).toEqual({
+      backgroundColor: RED_BACKGROUND,
+      color: RED,
+    });
+    expect(HRS.calculateColor(3)).toEqual({
+      backgroundColor: ORANGE_BACKGROUND,
+      color: ORANGE,
+    });
+    expect(HRS.calculateColor(7)).toEqual({
+      backgroundColor: ORANGE_BACKGROUND,
+      color: ORANGE,
+    });
+    expect(HRS.calculateColor(10)).toEqual({
+      backgroundColor: GREEN_BACKGROUND,
+      color: GREEN,
+    });
+    expect(HRS.calculateColor(11)).toEqual({
+      backgroundColor: '',
+      color: '',
+    });
   });
 });
 
diff --git a/app/hotels/src/components/__tests__/__snapshots__/HotelReviewScore.playground.test.js.snap b/app/hotels/src/components/__tests__/__snapshots__/HotelReviewScore.playground.test.js.snap
new file mode 100644
index 00000000..2edfdee9
--- /dev/null
+++ b/app/hotels/src/components/__tests__/__snapshots__/HotelReviewScore.playground.test.js.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders with green value 1`] = `
+<AdaptableBadge
+  style={
+    Array [
+      Object {
+        "borderRadius": 3,
+        "paddingHorizontal": 10,
+      },
+      Object {
+        "backgroundColor": "#e7f3e8",
+      },
+    ]
+  }
+  textStyle={
+    Array [
+      Object {
+        "fontWeight": "600",
+      },
+      Object {
+        "color": "#46B655",
+      },
+    ]
+  }
+  translation={
+    <Translation
+      passThrough="9,2"
+    />
+  }
+/>
+`;
+
+exports[`renders with red value 1`] = `
+<AdaptableBadge
+  style={
+    Array [
+      Object {
+        "borderRadius": 3,
+        "paddingHorizontal": 10,
+      },
+      Object {
+        "backgroundColor": "#fae8e8",
+      },
+    ]
+  }
+  textStyle={
+    Array [
+      Object {
+        "fontWeight": "600",
+      },
+      Object {
+        "color": "#d21c1c",
+      },
+    ]
+  }
+  translation={
+    <Translation
+      passThrough="1,2"
+    />
+  }
+/>
+`;
+
+exports[`renders with yellow value 1`] = `
+<AdaptableBadge
+  style={
+    Array [
+      Object {
+        "borderRadius": 3,
+        "paddingHorizontal": 10,
+      },
+      Object {
+        "backgroundColor": "#fcf1cd",
+      },
+    ]
+  }
+  textStyle={
+    Array [
+      Object {
+        "fontWeight": "600",
+      },
+      Object {
+        "color": "#f9971e",
+      },
+    ]
+  }
+  translation={
+    <Translation
+      passThrough="5,8"
+    />
+  }
+/>
+`;