Repository: kiwicom/mobile
Pull request #1126 (2018-09-25 12:31:11)

Hotels: New design for drop marker


Patch:
diff --git a/packages/playground/src/PlaygroundImports.js b/packages/playground/src/PlaygroundImports.js
index e120978d..e3ef596a 100644
--- a/packages/playground/src/PlaygroundImports.js
+++ b/packages/playground/src/PlaygroundImports.js
@@ -23,10 +23,11 @@ import '../../../packages/shared/src/forms/__tests__/Checkbox.test.js';
 import '../../../packages/shared/src/forms/__tests__/AgePicker.test.js';
 import '../../../packages/shared/src/buttons/__tests__/TextButton.test.js';
 import '../../../packages/shared/src/buttons/__tests__/LinkButton.test.js';
-import '../../../packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js';
+import '../../../packages/shared/src/buttons/__tests__/IncrementDecrementButtons.playground.test.js';
 import '../../../packages/shared/src/buttons/__tests__/Button.test.js';
 import '../../../packages/shared/src/__tests__/Text.test.js';
 import '../../../packages/shared/src/__tests__/SimpleCard.test.js';
 import '../../../packages/shared/src/__tests__/ReadMore.test.js';
+import '../../../packages/shared/src/__tests__/DropMarker.playground.test.js';
 import '../../../packages/shared/src/__tests__/AdaptableBadge.test.js';
 import '../../../packages/pdf/src/__tests__/PdfViewer.test.js';
diff --git a/packages/shared/src/DropMarker.js b/packages/shared/src/DropMarker.js
index fc6927ab..55e2b02c 100644
--- a/packages/shared/src/DropMarker.js
+++ b/packages/shared/src/DropMarker.js
@@ -1,15 +1,11 @@
 // @flow strict
 
 import * as React from 'react';
+import { View } from 'react-native';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import StyleSheet from './PlatformStyleSheet';
-import Icon from './icons/Icon';
-
-type Props = {|
-  +size?: number,
-  +color?: string,
-|};
+import TextIcon from './icons/TextIcon';
 
 /**
  * This drop marker is always pointing to the (0,0) coordinate. It's because
@@ -25,22 +21,70 @@ type Props = {|
  *   |       |
  *   `-------`
  */
-export default function DropMarker({
-  size = 50,
-  color = defaultTokens.paletteProductNormal,
-}: Props) {
-  const styles = createStyles(size);
-  return <Icon name="place" size={size} color={color} style={styles.icon} />;
+export default function DropMarker() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>
+        <TextIcon code="&#xe085;" orbit={true} style={styles.icon} />
+      </View>
+      <View style={styles.blueArrow} />
+      <View style={styles.whiteArrow} />
+      <View style={styles.arrowBorder} />
+    </View>
+  );
 }
 
-const createStyles = (size: number) =>
-  StyleSheet.create({
-    icon: {
-      ios: {
-        position: 'absolute',
-        left: -size / 2,
-        top: -size,
-      },
-      android: {},
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    height: 24,
+    width: 24,
+    borderRadius: 4,
+    borderColor: defaultTokens.paletteInkLight,
+    borderWidth: 0.5,
+    backgroundColor: defaultTokens.paletteWhite,
+    padding: 2,
+    position: 'absolute',
+    start: -12,
+    top: -24,
+  },
+  iconContainer: {
+    flex: 1,
+    backgroundColor: defaultTokens.paletteBlueNormal,
+    borderRadius: 2,
+  },
+  icon: {
+    color: defaultTokens.paletteWhite,
+    fontSize: 12,
+    padding: 4,
+  },
+  blueArrow: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderWidth: 8,
+    borderTopColor: defaultTokens.paletteBlueNormal,
+    alignSelf: 'center',
+    zIndex: parseInt(defaultTokens.zIndexModal),
+    bottom: -11,
+    position: 'absolute',
+  },
+  whiteArrow: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderWidth: 6,
+    borderTopColor: defaultTokens.paletteWhite,
+    alignSelf: 'center',
+    position: 'absolute',
+    bottom: -12,
+    zIndex: parseInt(defaultTokens.zIndexDefault),
+  },
+  arrowBorder: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderWidth: 7,
+    borderTopColor: defaultTokens.paletteInkLight,
+    alignSelf: 'center',
+    position: 'absolute',
+    bottom: -14,
+    zIndex: 0,
+  },
+});


Test patch:
diff --git a/packages/shared/src/__tests__/DropMarker.playground.test.js b/packages/shared/src/__tests__/DropMarker.playground.test.js
new file mode 100644
index 00000000..f37cdeaa
--- /dev/null
+++ b/packages/shared/src/__tests__/DropMarker.playground.test.js
@@ -0,0 +1,19 @@
+// @flow
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { View } from 'react-native';
+
+import DropMarker from '../DropMarker';
+
+it('renders', () => {
+  PlaygroundRenderer.render(
+    <View style={{ height: 100, width: 100 }}>
+      <View style={{ position: 'absolute', top: '50%', left: '50%' }}>
+        <DropMarker />
+      </View>
+    </View>,
+    false,
+    'DropMarker',
+  );
+});
diff --git a/packages/shared/src/__tests__/__snapshots__/DropMarker.playground.test.js.snap b/packages/shared/src/__tests__/__snapshots__/DropMarker.playground.test.js.snap
new file mode 100644
index 00000000..416f6e29
--- /dev/null
+++ b/packages/shared/src/__tests__/__snapshots__/DropMarker.playground.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<Context.Consumer>
+  [Function]
+</Context.Consumer>
+`;
diff --git a/packages/shared/src/__tests__/__snapshots__/DropMarker.test.js.snap b/packages/shared/src/__tests__/__snapshots__/DropMarker.test.js.snap
index 9bd216c3..ad0a52a4 100644
--- a/packages/shared/src/__tests__/__snapshots__/DropMarker.test.js.snap
+++ b/packages/shared/src/__tests__/__snapshots__/DropMarker.test.js.snap
@@ -1,31 +1,167 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calculates the offsets base on icon size 1`] = `
-<Icon
-  color="#00a991"
-  name="place"
-  size={50}
+<Component
   style={
     Object {
-      "left": -25,
+      "backgroundColor": "#fff",
+      "borderColor": "#7f91a8",
+      "borderRadius": 4,
+      "borderWidth": 0.5,
+      "height": 24,
+      "padding": 2,
       "position": "absolute",
-      "top": -50,
+      "start": -12,
+      "top": -24,
+      "width": 24,
     }
   }
-/>
+>
+  <Component
+    style={
+      Object {
+        "backgroundColor": "#0176D2",
+        "borderRadius": 2,
+        "flex": 1,
+      }
+    }
+  >
+    <TextIcon
+      code=""
+      orbit={true}
+      style={
+        Object {
+          "color": "#fff",
+          "fontSize": 12,
+          "padding": 4,
+        }
+      }
+    />
+  </Component>
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#0176D2",
+        "borderWidth": 8,
+        "bottom": -11,
+        "position": "absolute",
+        "zIndex": 825,
+      }
+    }
+  />
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#fff",
+        "borderWidth": 6,
+        "bottom": -12,
+        "position": "absolute",
+        "zIndex": 1,
+      }
+    }
+  />
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#7f91a8",
+        "borderWidth": 7,
+        "bottom": -14,
+        "position": "absolute",
+        "zIndex": 0,
+      }
+    }
+  />
+</Component>
 `;
 
 exports[`calculates the offsets base on icon size 2`] = `
-<Icon
-  color="#00a991"
-  name="place"
-  size={100}
+<Component
   style={
     Object {
-      "left": -50,
+      "backgroundColor": "#fff",
+      "borderColor": "#7f91a8",
+      "borderRadius": 4,
+      "borderWidth": 0.5,
+      "height": 24,
+      "padding": 2,
       "position": "absolute",
-      "top": -100,
+      "start": -12,
+      "top": -24,
+      "width": 24,
     }
   }
-/>
+>
+  <Component
+    style={
+      Object {
+        "backgroundColor": "#0176D2",
+        "borderRadius": 2,
+        "flex": 1,
+      }
+    }
+  >
+    <TextIcon
+      code=""
+      orbit={true}
+      style={
+        Object {
+          "color": "#fff",
+          "fontSize": 12,
+          "padding": 4,
+        }
+      }
+    />
+  </Component>
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#0176D2",
+        "borderWidth": 8,
+        "bottom": -11,
+        "position": "absolute",
+        "zIndex": 825,
+      }
+    }
+  />
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#fff",
+        "borderWidth": 6,
+        "bottom": -12,
+        "position": "absolute",
+        "zIndex": 1,
+      }
+    }
+  />
+  <Component
+    style={
+      Object {
+        "alignSelf": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderTopColor": "#7f91a8",
+        "borderWidth": 7,
+        "bottom": -14,
+        "position": "absolute",
+        "zIndex": 0,
+      }
+    }
+  />
+</Component>
 `;
diff --git a/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.playground.test.js b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.playground.test.js
new file mode 100644
index 00000000..26933cbc
--- /dev/null
+++ b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.playground.test.js
@@ -0,0 +1,63 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+
+import IncrementDecrementButtons from '../IncrementDecrementButtons';
+
+it('renders', () => {
+  const onIncrement = jest.fn();
+  const onDecrement = jest.fn();
+  PlaygroundRenderer.render(
+    <IncrementDecrementButtons
+      onIncrement={onIncrement}
+      onDecrement={onDecrement}
+      number={2}
+      min={1}
+      max={3}
+    />,
+    false,
+    'IncrementDecrementButtons',
+  );
+});
+
+it('shows number', () => {
+  const onIncrement = jest.fn();
+  const onDecrement = jest.fn();
+  PlaygroundRenderer.render(
+    <View style={{ backgroundColor: 'white', padding: 10 }}>
+      <IncrementDecrementButtons
+        onIncrement={onIncrement}
+        onDecrement={onDecrement}
+        number={2}
+        showNumber={true}
+        min={1}
+        max={3}
+        numberStyle={{ padding: 10 }}
+      />
+    </View>,
+    false,
+    'IncrementDecrementButtons',
+  );
+});
+
+it('render disabled', () => {
+  const onIncrement = jest.fn();
+  const onDecrement = jest.fn();
+  PlaygroundRenderer.render(
+    <View style={{ backgroundColor: 'white', padding: 10 }}>
+      <IncrementDecrementButtons
+        onIncrement={onIncrement}
+        onDecrement={onDecrement}
+        number={2}
+        showNumber={true}
+        min={1}
+        max={2}
+        numberStyle={{ padding: 10 }}
+      />
+    </View>,
+    false,
+    'IncrementDecrementButtons',
+  );
+});
diff --git a/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
index ba287c92..539b2b4c 100644
--- a/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
+++ b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
@@ -1,9 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
 import renderer from 'react-test-renderer';
-import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
 
 import IncrementDecrementButtons from '../IncrementDecrementButtons';
 import Touchable from '../../Touchable';
@@ -25,62 +23,6 @@ const renderButtons = (
 };
 
 describe('IncrementDecrementButtons', () => {
-  it('renders', () => {
-    const onIncrement = jest.fn();
-    const onDecrement = jest.fn();
-    PlaygroundRenderer.render(
-      <IncrementDecrementButtons
-        onIncrement={onIncrement}
-        onDecrement={onDecrement}
-        number={2}
-        min={1}
-        max={3}
-      />,
-      false,
-      'IncrementDecrementButtons',
-    );
-  });
-
-  it('shows number', () => {
-    const onIncrement = jest.fn();
-    const onDecrement = jest.fn();
-    PlaygroundRenderer.render(
-      <View style={{ backgroundColor: 'white', padding: 10 }}>
-        <IncrementDecrementButtons
-          onIncrement={onIncrement}
-          onDecrement={onDecrement}
-          number={2}
-          showNumber={true}
-          min={1}
-          max={3}
-          numberStyle={{ padding: 10 }}
-        />
-      </View>,
-      false,
-      'IncrementDecrementButtons',
-    );
-  });
-
-  it('render disabled', () => {
-    const onIncrement = jest.fn();
-    const onDecrement = jest.fn();
-    PlaygroundRenderer.render(
-      <View style={{ backgroundColor: 'white', padding: 10 }}>
-        <IncrementDecrementButtons
-          onIncrement={onIncrement}
-          onDecrement={onDecrement}
-          number={2}
-          showNumber={true}
-          min={1}
-          max={2}
-          numberStyle={{ padding: 10 }}
-        />
-      </View>,
-      false,
-      'IncrementDecrementButtons',
-    );
-  });
-
   it('should increment', () => {
     const onIncrement = jest.fn();
     const onDecrement = jest.fn();
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.playground.test.js.snap
similarity index 82%
rename from packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap
rename to packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.playground.test.js.snap
index 6c1208aa..de5f5325 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.playground.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IncrementDecrementButtons render disabled 1`] = `
+exports[`render disabled 1`] = `
 <Context.Consumer>
   [Function]
 </Context.Consumer>
 `;
 
-exports[`IncrementDecrementButtons renders 1`] = `
+exports[`renders 1`] = `
 <Component
   style={
     Object {
@@ -50,7 +50,7 @@ exports[`IncrementDecrementButtons renders 1`] = `
 </Component>
 `;
 
-exports[`IncrementDecrementButtons shows number 1`] = `
+exports[`shows number 1`] = `
 <Context.Consumer>
   [Function]
 </Context.Consumer>