Repository: kiwicom/mobile
Pull request #1131 (2018-09-26 11:17:27)

Replacing Icons by Orbit Icons; UI tweaks to match design more closely


Patch:
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/orderSummary/OrderSummary.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/orderSummary/OrderSummary.js
index 620759c2..d78a4598 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/orderSummary/OrderSummary.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/orderSummary/OrderSummary.js
@@ -41,7 +41,11 @@ class OrderSummary extends React.Component<Props, State> {
     return (
       <TouchableWithoutFeedback onPress={this.updateExpanded}>
         <View style={styleSheet.wrapper}>
-          <TextIcon code="l" style={[styleSheet.textIcon, styleExpanded]} />
+          <TextIcon
+            code="&#xe09D;"
+            orbit={true}
+            style={[styleSheet.textIcon, styleExpanded]}
+          />
           {this.state.isExpanded && (
             <React.Fragment>
               <InsuranceRow insuranceType="TRAVEL_PLUS" />
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/IconWithText.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/IconWithText.js
index 4b3172ac..297f90e3 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/IconWithText.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/IconWithText.js
@@ -15,13 +15,13 @@ type Props = {|
 const IconWithText = (props: Props) => {
   const textStyle = StyleSheet.create({
     text: {
-      fontSize: 12,
+      fontSize: 13,
       color: props.color || defaultTokens.colorTextSecondary,
     },
   });
   return (
     <View style={styles.container}>
-      <TextIcon style={textStyle.text} code={props.textIconCode} />
+      <TextIcon style={textStyle.text} code={props.textIconCode} orbit={true} />
       <Text style={textStyle.text}>
         <Translation passThrough=" " />
         {props.text}
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/PassengerInfo.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/PassengerInfo.js
index 541555b9..eaa0113c 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/PassengerInfo.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/PassengerInfo.js
@@ -12,11 +12,9 @@ export type Props = {|
   +birthday: Date | null,
 |};
 
-const PassengerInfo = ({ title, fullName, birthday }: Props) => (
+const PassengerInfo = ({ fullName, birthday }: Props) => (
   <View style={styles.passenger}>
-    <Text style={styles.passengerText}>
-      <Translation passThrough={`${title}. ${fullName}`} />
-    </Text>
+    <Translation passThrough={fullName} />
     {birthday !== null && (
       <Text style={[styles.passengerText, styles.passengerBirthday]}>
         <Translation
@@ -36,10 +34,7 @@ const styles = StyleSheet.create({
     marginTop: 16,
     marginBottom: 10,
   },
-  passengerText: {
-    fontSize: 12,
-  },
   passengerBirthday: {
-    color: defaultTokens.colorTextSecondary,
+    color: defaultTokens.paletteInkNormal,
   },
 });
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/Price.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/Price.js
index 72c05806..cd672404 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/Price.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/Price.js
@@ -5,7 +5,9 @@ import {
   Price as OriginalPrice,
   type StylePropType,
   Text,
+  StyleSheet,
 } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 import { Translation } from '@kiwicom/mobile-localization';
 
 type PriceType = {|
@@ -21,7 +23,7 @@ type Props = {|
 
 const Price = (props: Props) => {
   const { price, isSelected, textDisabled } = props;
-  const style = isSelected ? undefined : textDisabled;
+  const style = isSelected ? styles.price : [styles.price, textDisabled];
   if (price === null) {
     return (
       <Text style={style}>
@@ -44,4 +46,11 @@ const Price = (props: Props) => {
   );
 };
 
+const styles = StyleSheet.create({
+  price: {
+    color: defaultTokens.paletteInkNormal,
+    fontSize: 13,
+  },
+});
+
 export default Price;
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButton.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButton.js
index 088251d5..0eed70af 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButton.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButton.js
@@ -25,9 +25,6 @@ export default function VariantButton(props: Props) {
   const colorTextDisabled = props.isSelected
     ? undefined
     : styleSheet.textDisabled;
-  const textIcon = React.cloneElement(props.iconComponent, {
-    style: [styleSheet.iconStyle, colorTextDisabled],
-  });
   return (
     <Touchable
       onPress={props.onPress}
@@ -38,8 +35,12 @@ export default function VariantButton(props: Props) {
       disabled={props.price === undefined}
     >
       <React.Fragment>
-        <View style={styleSheet.iconWrapper}>{textIcon}</View>
-        <Text style={colorTextDisabled}>{props.title}</Text>
+        <View style={styleSheet.iconWrapper}>{props.iconComponent}</View>
+        <View style={styleSheet.titleWrapper}>
+          <Text style={[styleSheet.text, colorTextDisabled]}>
+            {props.title}
+          </Text>
+        </View>
         <Price
           isSelected={props.isSelected}
           textDisabled={styleSheet.textDisabled}
@@ -54,7 +55,8 @@ const styleSheet = StyleSheet.create({
   variantButton: {
     flex: 1,
     margin: 1,
-    padding: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 2,
     borderRadius: 5,
     alignItems: 'center',
   },
@@ -62,11 +64,14 @@ const styleSheet = StyleSheet.create({
     backgroundColor: defaultTokens.paletteWhite,
   },
   iconWrapper: {
-    marginBottom: 7,
+    paddingVertical: 1,
   },
-  iconStyle: {
+  titleWrapper: {
+    paddingVertical: 4,
+  },
+  text: {
     color: defaultTokens.paletteInkNormal,
-    fontSize: 19,
+    fontSize: 15,
   },
   textDisabled: {
     color: defaultTokens.colorTextSecondary,
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButtons.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButtons.js
index 5af908cc..e40ac377 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButtons.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/variantButtons/VariantButtons.js
@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import idx from 'idx';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 import { Translation } from '@kiwicom/mobile-localization';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 
@@ -47,21 +48,33 @@ class VariantButtons extends React.Component<Props> {
     return (
       <React.Fragment>
         <VariantButton
-          iconComponent={<TextIcon code="'" />}
+          iconComponent={
+            <TextIcon
+              code="'"
+              orbit={true}
+              style={[styles.icon, styles.travelPlus]}
+            />
+          }
           title={<Translation id="mmb.trip_services.insurance.variant.plus" />}
           price={travelPlusPrice}
           isSelected={this.props.selectedVariant === 'TRAVEL_PLUS'}
           onPress={this.selectTravelPlus}
         />
         <VariantButton
-          iconComponent={<TextIcon code="'" />}
+          iconComponent={
+            <TextIcon
+              code="'"
+              orbit={true}
+              style={[styles.icon, styles.travelBasic]}
+            />
+          }
           title={<Translation id="mmb.trip_services.insurance.variant.basic" />}
           price={travelBasicPrice}
           isSelected={this.props.selectedVariant === 'TRAVEL_BASIC'}
           onPress={this.selectTravelBasic}
         />
         <VariantButton
-          iconComponent={<TextIcon code=":" />}
+          iconComponent={<TextIcon code=":" orbit={true} style={styles.icon} />}
           title={<Translation id="mmb.trip_services.insurance.variant.none" />}
           price={nonePrice}
           isSelected={this.props.selectedVariant === 'NONE'}
@@ -72,6 +85,18 @@ class VariantButtons extends React.Component<Props> {
   }
 }
 
+const styles = StyleSheet.create({
+  icon: {
+    fontSize: 25,
+  },
+  travelPlus: {
+    color: defaultTokens.colorIconWarning,
+  },
+  travelBasic: {
+    color: defaultTokens.colorIconInfo,
+  },
+});
+
 export default createFragmentContainer(
   VariantButtons,
   graphql`
diff --git a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
index 5accf5f8..e4b96159 100644
--- a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
+++ b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
@@ -8,6 +8,7 @@ import { defaultTokens } from '@kiwicom/mobile-orbit';
 const styles = StyleSheet.create({
   icon: {
     color: defaultTokens.colorIconAttention,
+    fontSize: 12,
   },
 });
 
@@ -102,29 +103,29 @@ export default [
     title: (
       <Translation id="mmb.trip_services.insurance.selection.more_info.tourist_assistance" />
     ),
-    travelBasic: <TextIcon style={styles.icon} code="V" />,
-    travelPlus: <TextIcon style={styles.icon} code="V" />,
+    travelBasic: <TextIcon style={styles.icon} code="V" orbit={true} />,
+    travelPlus: <TextIcon style={styles.icon} code="V" orbit={true} />,
   },
   {
     title: (
       <Translation id="mmb.trip_services.insurance.selection.more_info.medical_assistance" />
     ),
-    travelBasic: <TextIcon style={styles.icon} code="V" />,
-    travelPlus: <TextIcon style={styles.icon} code="V" />,
+    travelBasic: <TextIcon style={styles.icon} code="V" orbit={true} />,
+    travelPlus: <TextIcon style={styles.icon} code="V" orbit={true} />,
   },
   {
     title: (
       <Translation id="mmb.trip_services.insurance.selection.more_info.telephone_assistance" />
     ),
-    travelBasic: <TextIcon style={styles.icon} code="V" />,
-    travelPlus: <TextIcon style={styles.icon} code="V" />,
+    travelBasic: <TextIcon style={styles.icon} code="V" orbit={true} />,
+    travelPlus: <TextIcon style={styles.icon} code="V" orbit={true} />,
   },
   {
     title: (
       <Translation id="mmb.trip_services.insurance.selection.more_info.interpretation_and_translation" />
     ),
-    travelBasic: <TextIcon style={styles.icon} code="V" />,
-    travelPlus: <TextIcon style={styles.icon} code="V" />,
+    travelBasic: <TextIcon style={styles.icon} code="V" orbit={true} />,
+    travelPlus: <TextIcon style={styles.icon} code="V" orbit={true} />,
   },
   {
     title: (
diff --git a/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOption.js b/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOption.js
index 119c3eb1..821c550e 100644
--- a/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOption.js
+++ b/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOption.js
@@ -20,9 +20,9 @@ type Props = {|
 
 export default function CardOption(props: Props) {
   const leftIconStyle =
-    props.leftIcon.type.displayName === 'Image'
-      ? styles.leftImageStyle
-      : styles.leftIconStyle;
+    props.leftIcon.type.displayName === 'TextIcon'
+      ? styles.leftIconStyle
+      : styles.leftImageStyle;
 
   const leftIcon = React.cloneElement(props.leftIcon, { style: leftIconStyle });
 
@@ -41,7 +41,7 @@ export default function CardOption(props: Props) {
         </View>
 
         {props.isActive && (
-          <TextIcon code="&#xe01e;" style={styles.checkedIcon} />
+          <TextIcon code="V" style={styles.checkedIcon} orbit={true} />
         )}
       </View>
     </TouchableWithoutFeedback>
@@ -75,6 +75,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   checkedIcon: {
+    fontSize: 15,
     color: defaultTokens.paletteProductNormal,
   },
   leftIconContainer: {
@@ -84,7 +85,7 @@ const styles = StyleSheet.create({
     marginEnd: 5,
   },
   leftIconStyle: {
-    fontSize: 10,
+    fontSize: 18,
     color: defaultTokens.paletteInkNormal,
   },
   leftImageStyle: {
diff --git a/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOptions.js b/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOptions.js
index cf649b4a..90b78935 100644
--- a/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOptions.js
+++ b/app/MMB/src/scenes/tripServices/insurance/paymentScene/CardOptions.js
@@ -64,7 +64,7 @@ export default class PaymentScene extends React.Component<Props> {
         </View>
 
         <CardOption
-          leftIcon={<TextIcon code="&#xe034;" />}
+          leftIcon={<TextIcon code="&#xe122;" orbit={true} />}
           isActive={isAnotherCardActive}
           onPress={this.onPressAnotherCard}
           cardOption={
diff --git a/app/MMB/src/scenes/tripServices/insurance/paymentScene/PaymentFormTitle.js b/app/MMB/src/scenes/tripServices/insurance/paymentScene/PaymentFormTitle.js
index 0cde1dba..2fe15ea7 100644
--- a/app/MMB/src/scenes/tripServices/insurance/paymentScene/PaymentFormTitle.js
+++ b/app/MMB/src/scenes/tripServices/insurance/paymentScene/PaymentFormTitle.js
@@ -9,8 +9,7 @@ import { defaultTokens } from '@kiwicom/mobile-orbit';
 export default function CreditCardNumberInput() {
   return (
     <View style={styles.row}>
-      {/* TODO: change icon to match orbit icon */}
-      <TextIcon code="u" style={styles.icon} />
+      <TextIcon code="u" orbit={true} style={styles.icon} />
       <Text style={styles.text}>
         <Translation passThrough=" " />
         <Translation id="mmb.trip_services.insurance.payment.header" />
diff --git a/app/MMB/src/scenes/tripServices/insurance/paymentScene/SecurityCodeInput.js b/app/MMB/src/scenes/tripServices/insurance/paymentScene/SecurityCodeInput.js
index 4f601805..e8c0db05 100644
--- a/app/MMB/src/scenes/tripServices/insurance/paymentScene/SecurityCodeInput.js
+++ b/app/MMB/src/scenes/tripServices/insurance/paymentScene/SecurityCodeInput.js
@@ -61,7 +61,7 @@ export default class SecurityCodeInput extends React.Component<Props> {
         />
         <TouchableWithoutFeedback onPress={this.onPress}>
           <View style={[styles.helpIcon, helpIconOffset]}>
-            <TextIcon code="F" style={styles.icon} />
+            <TextIcon code="F" orbit={true} style={styles.icon} />
           </View>
         </TouchableWithoutFeedback>
       </React.Fragment>
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"
+    />
+  }
+/>
+`;