Repository: kiwicom/mobile
Pull request #817 (2018-07-04 09:15:30)

MMB: Add colors to be used for multicity boarding pass icons


Patch:
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/BoardingPassMultiCity.js b/app/MMB/src/scenes/tickets/boardingPasses/BoardingPassMultiCity.js
index b3b38fa8..98da06f8 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/BoardingPassMultiCity.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/BoardingPassMultiCity.js
@@ -5,6 +5,7 @@ import { Translation } from '@kiwicom/mobile-localization';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { TextIcon, StyleSheet, Color } from '@kiwicom/mobile-shared';
 import idx from 'idx';
+import last from 'lodash/last';
 
 import type { BoardingPassMultiCity as BookingType } from './__generated__/BoardingPassMultiCity.graphql';
 import FlightSegments from './FlightSegments';
@@ -13,21 +14,25 @@ type Props = {|
   +data: BookingType,
 |};
 
-const BoardingPassMultiCity = (props: Props) => {
+export const BoardingPassMultiCity = (props: Props) => {
   const trips = idx(props.data, _ => _.trips) || [];
-  return trips.map((trip, index) => (
-    /* TODO: Icons should change color */
-    <FlightSegments
-      key={index}
-      data={trip}
-      icon={<TextIcon code="&#xe079;" style={styles.outboundIcon} />}
-      iconTitle={
-        <Translation
-          passThrough={idx(trip, _ => _.arrival.airport.city.name)}
-        />
-      }
-    />
-  ));
+  return trips.map((trip, index) => {
+    const color = Color.tripColorCodes[index] || last(Color.tripColorCodes); // if we have more trips than colors, fallback to last color code
+    return (
+      <FlightSegments
+        key={index}
+        data={trip}
+        icon={
+          <TextIcon code="&#xe079;" style={[styles.outboundIcon, { color }]} />
+        }
+        iconTitle={
+          <Translation
+            passThrough={idx(trip, _ => _.arrival.airport.city.name)}
+          />
+        }
+      />
+    );
+  });
 };
 
 export default createFragmentContainer(
@@ -50,7 +55,6 @@ export default createFragmentContainer(
 
 const styles = StyleSheet.create({
   outboundIcon: {
-    color: Color.brand,
     transform: [{ rotate: '90deg' }],
   },
 });
diff --git a/packages/shared/src/Color.js b/packages/shared/src/Color.js
index 074c21d5..4966262b 100644
--- a/packages/shared/src/Color.js
+++ b/packages/shared/src/Color.js
@@ -54,6 +54,20 @@ const ColorPalette = {
   },
 };
 
+const tripColorCodes = [
+  '#00A991',
+  '#FBAD18',
+  '#d50c6a',
+  '#35dc93',
+  '#ef7209',
+  '#863ccd',
+  '#006dc7',
+  '#4fb52e',
+  '#30363d',
+  '#ff80ce',
+  '#ff2424',
+];
+
 export default {
   brand: ColorPalette.product.normal,
   brandLight: ColorPalette.product.light,
@@ -70,4 +84,5 @@ export default {
   textLight: ColorPalette.ink.light,
 
   ...ColorPalette,
+  tripColorCodes,
 };


Test patch:
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/BoardingPassMultiCity.test.js b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/BoardingPassMultiCity.test.js
new file mode 100644
index 00000000..e352a83e
--- /dev/null
+++ b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/BoardingPassMultiCity.test.js
@@ -0,0 +1,20 @@
+// @flow strict
+
+import * as React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import { BoardingPassMultiCity } from '../BoardingPassMultiCity';
+
+const renderer = new ShallowRenderer();
+
+const props = {
+  trips: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
+};
+describe('BoardingPassMultiCity', () => {
+  it('renders even with many trips', () => {
+    expect(
+      // $FlowExpectedError: Passing just what is needed to test that the component renders
+      renderer.render(<BoardingPassMultiCity data={props} />),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap
new file mode 100644
index 00000000..05955045
--- /dev/null
+++ b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap
@@ -0,0 +1,328 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BoardingPassMultiCity renders even with many trips 1`] = `
+Array [
+  <Relay(FlightSegments)
+    data={1}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#00A991",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={2}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#FBAD18",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={3}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#d50c6a",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={4}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#35dc93",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={5}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ef7209",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={6}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#863ccd",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={7}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#006dc7",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={8}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#4fb52e",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={9}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#30363d",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={10}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ff80ce",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={11}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ff2424",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={12}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ff2424",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={13}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ff2424",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+  <Relay(FlightSegments)
+    data={14}
+    icon={
+      <TextIcon
+        code=""
+        style={
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "90deg",
+                },
+              ],
+            },
+            Object {
+              "color": "#ff2424",
+            },
+          ]
+        }
+      />
+    }
+    iconTitle={<Translation />}
+  />,
+]
+`;