Floating Route Marker (uber#5191)

* feat(map-marker): begin work for floating route marker * feat(map-marker): tweak examples * feat(map-marker): progress * feat(map-marker): merge * feat(map-marker): refactor * feat(map-marker): reset color * feat(map-marker): clean documentation * feat(map-marker): begin examples * feat(map-marker): progress on types * feat(map-marker): new line to satisfy linter in thumbs * feat(map-marker): progress on examples * feat(map-marker): clean * feat(map-marker): implement offset function * feat(map-marker): update labels * feat(map-marker): complete tests * test(vrt): update visual snapshots for f8b7bda (uber#5225) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: Chase Starr <[email protected]>
vmatthes · Nov 17, 2022 · b41fcf6 · b41fcf6
1 parent e417394
commit b41fcf6
Show file tree

Hide file tree

Showing 66 changed files with 1,738 additions and 101 deletions.
diff --git a/documentation-site/cheat-sheet.js b/documentation-site/cheat-sheet.js
@@ -1922,165 +1922,191 @@ const outlines = [
   {
     file: 'src/map-marker/types.ts',
     definitions: [
-      { name: 'AnchorPositions', lineStart: 23, children: [] },
-      { name: 'NeedleSize', lineStart: 26, children: [] },
-      { name: 'PinHead', lineStart: 28, children: [] },
-      { name: 'PinHeadSize', lineStart: 30, children: [] },
-      { name: 'FloatingMarkerSize', lineStart: 32, children: [] },
-      { name: 'FloatingMarkerAnchorType', lineStart: 34, children: [] },
-      { name: 'BadgeEnhancerSize', lineStart: 37, children: [] },
-      { name: 'LabelEnhancerPosition', lineStart: 39, children: [] },
-      { name: 'Kind', lineStart: 42, children: [] },
-      { name: 'LocationPuckSize', lineStart: 44, children: [] },
-      { name: 'LocationPuckType', lineStart: 45, children: [] },
+      { name: 'AnchorPositions', lineStart: 24, children: [] },
+      { name: 'NeedleSize', lineStart: 27, children: [] },
+      { name: 'PinHead', lineStart: 29, children: [] },
+      { name: 'PinHeadSize', lineStart: 31, children: [] },
+      { name: 'FloatingMarkerSize', lineStart: 33, children: [] },
+      { name: 'FloatingMarkerAnchorType', lineStart: 35, children: [] },
+      { name: 'BadgeEnhancerSize', lineStart: 38, children: [] },
+      { name: 'LabelEnhancerPosition', lineStart: 40, children: [] },
+      { name: 'Kind', lineStart: 43, children: [] },
+      { name: 'LocationPuckSize', lineStart: 45, children: [] },
+      { name: 'LocationPuckType', lineStart: 46, children: [] },
+      { name: 'FloatingRouteMarkerAnchorPositions', lineStart: 48, children: [] },
       {
         name: 'FixedMarkerOverrides',
-        lineStart: 46,
+        lineStart: 51,
         children: [
-          { name: 'Root', lineStart: 47 },
-          { name: 'InnerAnchor', lineStart: 48 },
-          { name: 'OuterAnchor', lineStart: 49 },
-          { name: 'PinHead', lineStart: 50 },
-          { name: 'PinHeadContent', lineStart: 51 },
-          { name: 'PinHeadContainer', lineStart: 52 },
-          { name: 'Needle', lineStart: 53 },
-          { name: 'DragShadow', lineStart: 54 },
-          { name: 'DragShadowContainer', lineStart: 55 },
-          { name: 'DragContainer', lineStart: 56 },
-          { name: 'BadgeEnhancer', lineStart: 57 },
-          { name: 'LabelEnhancer', lineStart: 58 },
-          { name: 'LabelEnhancerContainer', lineStart: 59 },
+          { name: 'Root', lineStart: 52 },
+          { name: 'InnerAnchor', lineStart: 53 },
+          { name: 'OuterAnchor', lineStart: 54 },
+          { name: 'PinHead', lineStart: 55 },
+          { name: 'PinHeadContent', lineStart: 56 },
+          { name: 'PinHeadContainer', lineStart: 57 },
+          { name: 'Needle', lineStart: 58 },
+          { name: 'DragShadow', lineStart: 59 },
+          { name: 'DragShadowContainer', lineStart: 60 },
+          { name: 'DragContainer', lineStart: 61 },
+          { name: 'BadgeEnhancer', lineStart: 62 },
+          { name: 'LabelEnhancer', lineStart: 63 },
+          { name: 'LabelEnhancerContainer', lineStart: 64 },
         ],
       },
       {
         name: 'NeedleProps',
-        lineStart: 62,
+        lineStart: 67,
         children: [
-          { name: 'size', lineStart: 63 },
-          { name: 'background', lineStart: 64 },
-          { name: 'overrides', lineStart: 65 },
+          { name: 'size', lineStart: 68 },
+          { name: 'background', lineStart: 69 },
+          { name: 'overrides', lineStart: 70 },
         ],
       },
       {
         name: 'ItemProps',
-        lineStart: 68,
+        lineStart: 73,
         children: [
-          { name: 'children', lineStart: 69 },
-          { name: 'color', lineStart: 70 },
-          { name: 'size', lineStart: 71 },
+          { name: 'children', lineStart: 74 },
+          { name: 'color', lineStart: 75 },
+          { name: 'size', lineStart: 76 },
         ],
       },
       {
         name: 'LabelEnhancer',
-        lineStart: 74,
+        lineStart: 79,
         children: [
-          { name: 'labelEnhancerContent', lineStart: 75 },
-          { name: 'labelEnhancerPosition', lineStart: 76 },
+          { name: 'labelEnhancerContent', lineStart: 80 },
+          { name: 'labelEnhancerPosition', lineStart: 81 },
         ],
       },
-      { name: 'LabelEhancerComponent', lineStart: 79, children: [] },
+      { name: 'LabelEhancerComponent', lineStart: 84, children: [] },
       {
         name: 'BadgeEnhancer',
-        lineStart: 85,
+        lineStart: 90,
         children: [
-          { name: 'badgeEnhancerSize', lineStart: 86 },
-          { name: 'badgeEnhancerContent', lineStart: 87 },
+          { name: 'badgeEnhancerSize', lineStart: 91 },
+          { name: 'badgeEnhancerContent', lineStart: 92 },
         ],
       },
-      { name: 'BadgeEnhancerComponent', lineStart: 92, children: [] },
+      { name: 'BadgeEnhancerComponent', lineStart: 97, children: [] },
       {
         name: 'BadgePosition',
-        lineStart: 97,
+        lineStart: 102,
         children: [
-          { name: 'x', lineStart: 98 },
-          { name: 'y', lineStart: 99 },
+          { name: 'x', lineStart: 103 },
+          { name: 'y', lineStart: 104 },
         ],
       },
-      { name: 'FixedMarkerProps', lineStart: 102, children: [] },
+      { name: 'FixedMarkerProps', lineStart: 107, children: [] },
       {
         name: 'FloatingMarkerOverrides',
-        lineStart: 118,
+        lineStart: 123,
         children: [
-          { name: 'Root', lineStart: 119 },
-          { name: 'InnerAnchor', lineStart: 120 },
-          { name: 'OuterAnchor', lineStart: 121 },
-          { name: 'PinHead', lineStart: 122 },
-          { name: 'PinHeadContent', lineStart: 123 },
-          { name: 'PinHeadContainer', lineStart: 124 },
-          { name: 'AnchorContainer', lineStart: 125 },
-          { name: 'Needle', lineStart: 126 },
-          { name: 'DragShadow', lineStart: 127 },
-          { name: 'DragShadowContainer', lineStart: 128 },
-          { name: 'DragContainer', lineStart: 129 },
-          { name: 'BadgeEnhancer', lineStart: 130 },
-          { name: 'LabelEnhancer', lineStart: 131 },
-          { name: 'LabelEnhancerContainer', lineStart: 132 },
+          { name: 'Root', lineStart: 124 },
+          { name: 'InnerAnchor', lineStart: 125 },
+          { name: 'OuterAnchor', lineStart: 126 },
+          { name: 'PinHead', lineStart: 127 },
+          { name: 'PinHeadContent', lineStart: 128 },
+          { name: 'PinHeadContainer', lineStart: 129 },
+          { name: 'AnchorContainer', lineStart: 130 },
+          { name: 'Needle', lineStart: 131 },
+          { name: 'DragShadow', lineStart: 132 },
+          { name: 'DragShadowContainer', lineStart: 133 },
+          { name: 'DragContainer', lineStart: 134 },
+          { name: 'BadgeEnhancer', lineStart: 135 },
+          { name: 'LabelEnhancer', lineStart: 136 },
+          { name: 'LabelEnhancerContainer', lineStart: 137 },
         ],
       },
       {
         name: 'FloatingMarkerProps',
-        lineStart: 135,
+        lineStart: 140,
         children: [
-          { name: 'label', lineStart: 136 },
-          { name: 'anchor', lineStart: 137 },
-          { name: 'endEnhancer', lineStart: 138 },
-          { name: 'startEnhancer', lineStart: 141 },
-          { name: 'anchorType', lineStart: 144 },
-          { name: 'size', lineStart: 145 },
-          { name: 'overrides', lineStart: 146 },
+          { name: 'label', lineStart: 141 },
+          { name: 'anchor', lineStart: 142 },
+          { name: 'endEnhancer', lineStart: 143 },
+          { name: 'startEnhancer', lineStart: 146 },
+          { name: 'anchorType', lineStart: 149 },
+          { name: 'size', lineStart: 150 },
+          { name: 'overrides', lineStart: 151 },
         ],
       },
-      { name: 'PinHeadProps', lineStart: 149, children: [] },
+      { name: 'PinHeadProps', lineStart: 154, children: [] },
       {
         name: 'DragShadowProps',
-        lineStart: 167,
+        lineStart: 172,
         children: [
-          { name: 'background', lineStart: 168 },
-          { name: 'dragging', lineStart: 169 },
-          { name: 'height', lineStart: 170 },
-          { name: 'overrides', lineStart: 171 },
+          { name: 'background', lineStart: 173 },
+          { name: 'dragging', lineStart: 174 },
+          { name: 'height', lineStart: 175 },
+          { name: 'overrides', lineStart: 176 },
         ],
       },
       {
         name: 'LocationPuckOverrides',
-        lineStart: 174,
+        lineStart: 179,
         children: [
-          { name: 'Root', lineStart: 175 },
-          { name: 'LocationPuckApproximation', lineStart: 176 },
-          { name: 'ConsumerLocationPuckCore', lineStart: 177 },
-          { name: 'EarnerLocationPuckCore', lineStart: 178 },
+          { name: 'Root', lineStart: 180 },
+          { name: 'LocationPuckApproximation', lineStart: 181 },
+          { name: 'ConsumerLocationPuckCore', lineStart: 182 },
+          { name: 'EarnerLocationPuckCore', lineStart: 183 },
         ],
       },
       {
         name: 'LocationPuckProps',
-        lineStart: 181,
+        lineStart: 186,
         children: [
-          { name: 'size', lineStart: 182 },
-          { name: 'heading', lineStart: 183 },
-          { name: 'confidenceRadius', lineStart: 184 },
-          { name: 'showHeading', lineStart: 185 },
-          { name: 'type', lineStart: 186 },
-          { name: 'overrides', lineStart: 187 },
+          { name: 'size', lineStart: 187 },
+          { name: 'heading', lineStart: 188 },
+          { name: 'confidenceRadius', lineStart: 189 },
+          { name: 'showHeading', lineStart: 190 },
+          { name: 'type', lineStart: 191 },
+          { name: 'overrides', lineStart: 192 },
         ],
       },
       {
         name: 'ConsumerLocationPuckProps',
-        lineStart: 190,
+        lineStart: 195,
         children: [
-          { name: 'heading', lineStart: 191 },
-          { name: 'confidenceRadius', lineStart: 192 },
-          { name: 'showHeading', lineStart: 193 },
-          { name: 'overrides', lineStart: 194 },
+          { name: 'heading', lineStart: 196 },
+          { name: 'confidenceRadius', lineStart: 197 },
+          { name: 'showHeading', lineStart: 198 },
+          { name: 'overrides', lineStart: 199 },
         ],
       },
       {
         name: 'EarnerLocationPuckProps',
-        lineStart: 196,
+        lineStart: 201,
+        children: [
+          { name: 'heading', lineStart: 202 },
+          { name: 'confidenceRadius', lineStart: 203 },
+          { name: 'size', lineStart: 204 },
+          { name: 'overrides', lineStart: 205 },
+        ],
+      },
+      {
+        name: 'FloatingRouteMarkerOverrides',
+        lineStart: 208,
+        children: [
+          { name: 'Root', lineStart: 209 },
+          { name: 'PointerContainer', lineStart: 210 },
+          { name: 'Pointer', lineStart: 211 },
+          { name: 'Label', lineStart: 212 },
+          { name: 'SecondaryLabel', lineStart: 213 },
+          { name: 'IconContainer', lineStart: 214 },
+        ],
+      },
+      {
+        name: 'FloatingRouteMarkerProps',
+        lineStart: 217,
         children: [
-          { name: 'heading', lineStart: 197 },
-          { name: 'confidenceRadius', lineStart: 198 },
-          { name: 'size', lineStart: 199 },
-          { name: 'overrides', lineStart: 200 },
+          { name: 'label', lineStart: 218 },
+          { name: 'secondaryLabel', lineStart: 219 },
+          { name: 'startEnhancer', lineStart: 220 },
+          { name: 'endEnhancer', lineStart: 223 },
+          { name: 'anchorPosition', lineStart: 226 },
+          { name: 'overrides', lineStart: 227 },
+          { name: 'selected', lineStart: 228 },
         ],
       },
     ],

diff --git a/documentation-site/components/gallery.js b/documentation-site/components/gallery.js
@@ -231,6 +231,10 @@ const COMPONENTS = {
       href: '/components/floating-marker',
       Component: thumbnails.SvgFloatingMarker,
     },
+    {
+      href: '/components/floating-route-marker',
+      Component: thumbnails.SvgFloatingRouteMarker,
+    },
     {
       href: '/components/location-puck',
       Component: thumbnails.SvgLocationPuck,

diff --git a/documentation-site/components/thumbs/components/FloatingRouteMarker.js b/documentation-site/components/thumbs/components/FloatingRouteMarker.js
@@ -0,0 +1,19 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* THIS FILE IS AUTO-GENERATED. DO NOT MODIFY. */
+
+import React from 'react';
+
+export default function SvgFloatingRouteMarker(props) {
+  return (
+    <svg width={232} height={145} fill="none" {...props}>
+      <rect x={90} y={62} width={51.872} height={22} rx={4.436} fill={props.colors[1]} />
+      <path fill={props.colors[2]} d="M94.436 66h43v6h-43zM94.436 74h28v6h-28z" />
+      <path d="M85.564 88.436L98.872 84 90 75.128l-4.436 13.308z" fill={props.colors[1]} />
+    </svg>
+  );
+}
diff --git a/documentation-site/components/thumbs/components/LocationPuck.js b/documentation-site/components/thumbs/components/LocationPuck.js
@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 /* THIS FILE IS AUTO-GENERATED. DO NOT MODIFY. */
-/* eslint-disable flowtype/require-valid-file-annotation */
+
 import React from 'react';
 
 export default function SvgLocationPuck(props) {

diff --git a/documentation-site/components/thumbs/index.js b/documentation-site/components/thumbs/index.js
@@ -73,6 +73,7 @@ export { default as SvgTooltip } from './components/Tooltip.js';
 export { default as SvgFixedMarker } from './components/FixedMarker.js';
 export { default as SvgFloatingMarker } from './components/FloatingMarker.js';
 export { default as SvgLocationPuck } from './components/LocationPuck.js';
+export { default as SvgFloatingRouteMarker } from './components/FloatingRouteMarker.js';
 
 // Utility
 export { default as SvgAspectRatioBox } from './components/AspectRatioBox.js';

diff --git a/documentation-site/components/thumbs/svg/floating-route-marker.svg b/documentation-site/components/thumbs/svg/floating-route-marker.svg
diff --git a/documentation-site/components/thumbs/template.js b/documentation-site/components/thumbs/template.js
@@ -24,6 +24,7 @@ function template(api, opts, values) {
   return template.ast`
 ${header}
 ${imports}
+${'\n'}
 export default function ${componentName} (${props}) {
   return ${jsx}
 }