@opentripplanner/map-popup 3.1.2 → 3.2.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/index.js +21 -14
- package/esm/index.js.map +1 -1
- package/esm/styled.js +0 -21
- package/esm/styled.js.map +1 -1
- package/lib/index.d.ts +3 -4
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +20 -20
- package/lib/index.js.map +1 -1
- package/lib/styled.d.ts +0 -8
- package/lib/styled.d.ts.map +1 -1
- package/lib/styled.js +1 -33
- package/lib/styled.js.map +1 -1
- package/package.json +6 -4
- package/src/MapPopup.story.tsx +24 -11
- package/src/__snapshots__/MapPopup.story.tsx.snap +235 -212
- package/src/index.tsx +29 -20
- package/src/styled.ts +0 -29
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,250 +1,273 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Map Popup FloatingCarEntity smoke-test 1`] = `
|
|
4
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
4
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
5
|
+
<div id="focus-car_6861-popup-focus-trap"
|
|
6
|
+
role="presentation"
|
|
7
|
+
>
|
|
8
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
9
|
+
MILES Car: 0541
|
|
10
|
+
</header>
|
|
11
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
12
|
+
<strong>
|
|
13
|
+
Plan a trip:
|
|
14
|
+
</strong>
|
|
15
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
16
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
17
|
+
<svg viewbox="0 0 512 512"
|
|
18
|
+
height="0.9em"
|
|
19
|
+
width="0.9em"
|
|
20
|
+
aria-hidden="true"
|
|
21
|
+
focusable="false"
|
|
22
|
+
fill="currentColor"
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
25
25
|
>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
26
|
+
<path fill="currentColor"
|
|
27
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
28
|
+
>
|
|
29
|
+
</path>
|
|
30
|
+
</svg>
|
|
31
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
32
|
+
From here
|
|
33
|
+
</button>
|
|
34
|
+
</span>
|
|
35
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
36
|
+
<svg viewbox="0 0 384 512"
|
|
37
|
+
height="0.9em"
|
|
38
|
+
width="0.9em"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
focusable="false"
|
|
41
|
+
fill="currentColor"
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
44
44
|
>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
<path fill="currentColor"
|
|
46
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
47
|
+
>
|
|
48
|
+
</path>
|
|
49
|
+
</svg>
|
|
50
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
51
|
+
To here
|
|
52
|
+
</button>
|
|
53
|
+
</span>
|
|
50
54
|
</span>
|
|
51
|
-
</
|
|
52
|
-
</
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
53
57
|
</div>
|
|
54
58
|
`;
|
|
55
59
|
|
|
56
60
|
exports[`Map Popup FloatingVehicleEntity smoke-test 1`] = `
|
|
57
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
61
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
62
|
+
<div id="focus-22bike_686122-popup-focus-trap"
|
|
63
|
+
role="presentation"
|
|
64
|
+
>
|
|
65
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
66
|
+
BIKETOWN Free-floating bike: 0541
|
|
67
|
+
</header>
|
|
68
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
69
|
+
<strong>
|
|
70
|
+
Plan a trip:
|
|
71
|
+
</strong>
|
|
72
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
73
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
74
|
+
<svg viewbox="0 0 512 512"
|
|
75
|
+
height="0.9em"
|
|
76
|
+
width="0.9em"
|
|
77
|
+
aria-hidden="true"
|
|
78
|
+
focusable="false"
|
|
79
|
+
fill="currentColor"
|
|
80
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
81
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
78
82
|
>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
83
|
+
<path fill="currentColor"
|
|
84
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
85
|
+
>
|
|
86
|
+
</path>
|
|
87
|
+
</svg>
|
|
88
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
89
|
+
From here
|
|
90
|
+
</button>
|
|
91
|
+
</span>
|
|
92
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
93
|
+
<svg viewbox="0 0 384 512"
|
|
94
|
+
height="0.9em"
|
|
95
|
+
width="0.9em"
|
|
96
|
+
aria-hidden="true"
|
|
97
|
+
focusable="false"
|
|
98
|
+
fill="currentColor"
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
97
101
|
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
<path fill="currentColor"
|
|
103
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
104
|
+
>
|
|
105
|
+
</path>
|
|
106
|
+
</svg>
|
|
107
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
108
|
+
To here
|
|
109
|
+
</button>
|
|
110
|
+
</span>
|
|
103
111
|
</span>
|
|
104
|
-
</
|
|
105
|
-
</
|
|
112
|
+
</p>
|
|
113
|
+
</div>
|
|
106
114
|
</div>
|
|
107
115
|
`;
|
|
108
116
|
|
|
109
117
|
exports[`Map Popup StationEntity smoke-test 1`] = `
|
|
110
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
118
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
119
|
+
<div id="focus-22hub_158022-popup-focus-trap"
|
|
120
|
+
role="presentation"
|
|
121
|
+
>
|
|
122
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
123
|
+
BIKETOWN SW Morrison at 18th
|
|
124
|
+
</header>
|
|
125
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
126
|
+
<div>
|
|
127
|
+
Available bikes: 6
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
Available docks: 11
|
|
131
|
+
</div>
|
|
132
|
+
</p>
|
|
133
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
134
|
+
<strong>
|
|
135
|
+
Plan a trip:
|
|
136
|
+
</strong>
|
|
137
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
138
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
139
|
+
<svg viewbox="0 0 512 512"
|
|
140
|
+
height="0.9em"
|
|
141
|
+
width="0.9em"
|
|
142
|
+
aria-hidden="true"
|
|
143
|
+
focusable="false"
|
|
144
|
+
fill="currentColor"
|
|
145
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
146
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
139
147
|
>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
148
|
+
<path fill="currentColor"
|
|
149
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
150
|
+
>
|
|
151
|
+
</path>
|
|
152
|
+
</svg>
|
|
153
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
154
|
+
From here
|
|
155
|
+
</button>
|
|
156
|
+
</span>
|
|
157
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
158
|
+
<svg viewbox="0 0 384 512"
|
|
159
|
+
height="0.9em"
|
|
160
|
+
width="0.9em"
|
|
161
|
+
aria-hidden="true"
|
|
162
|
+
focusable="false"
|
|
163
|
+
fill="currentColor"
|
|
164
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
165
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
158
166
|
>
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
167
|
+
<path fill="currentColor"
|
|
168
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
169
|
+
>
|
|
170
|
+
</path>
|
|
171
|
+
</svg>
|
|
172
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
173
|
+
To here
|
|
174
|
+
</button>
|
|
175
|
+
</span>
|
|
164
176
|
</span>
|
|
165
|
-
</
|
|
166
|
-
</
|
|
177
|
+
</p>
|
|
178
|
+
</div>
|
|
167
179
|
</div>
|
|
168
180
|
`;
|
|
169
181
|
|
|
170
182
|
exports[`Map Popup StopEntity smoke-test 1`] = `
|
|
171
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
183
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
184
|
+
<div id="focus-9526-popup-focus-trap"
|
|
185
|
+
role="presentation"
|
|
186
|
+
>
|
|
187
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
188
|
+
W Burnside & SW 2nd
|
|
189
|
+
</header>
|
|
190
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
191
|
+
<strong>
|
|
192
|
+
Stop ID: 9526
|
|
193
|
+
</strong>
|
|
194
|
+
<button class="styled__ViewStopButton-sc-12v7ov3-0 jdXQjY">
|
|
195
|
+
Stop Viewer
|
|
196
|
+
</button>
|
|
197
|
+
</p>
|
|
198
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
199
|
+
<strong>
|
|
200
|
+
Plan a trip:
|
|
201
|
+
</strong>
|
|
202
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
203
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
204
|
+
<svg viewbox="0 0 512 512"
|
|
205
|
+
height="0.9em"
|
|
206
|
+
width="0.9em"
|
|
207
|
+
aria-hidden="true"
|
|
208
|
+
focusable="false"
|
|
209
|
+
fill="currentColor"
|
|
210
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
211
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
200
212
|
>
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
213
|
+
<path fill="currentColor"
|
|
214
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
215
|
+
>
|
|
216
|
+
</path>
|
|
217
|
+
</svg>
|
|
218
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
219
|
+
From here
|
|
220
|
+
</button>
|
|
221
|
+
</span>
|
|
222
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
223
|
+
<svg viewbox="0 0 384 512"
|
|
224
|
+
height="0.9em"
|
|
225
|
+
width="0.9em"
|
|
226
|
+
aria-hidden="true"
|
|
227
|
+
focusable="false"
|
|
228
|
+
fill="currentColor"
|
|
229
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
230
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
219
231
|
>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
232
|
+
<path fill="currentColor"
|
|
233
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
234
|
+
>
|
|
235
|
+
</path>
|
|
236
|
+
</svg>
|
|
237
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
238
|
+
To here
|
|
239
|
+
</button>
|
|
240
|
+
</span>
|
|
225
241
|
</span>
|
|
226
|
-
</
|
|
227
|
-
</
|
|
242
|
+
</p>
|
|
243
|
+
</div>
|
|
228
244
|
</div>
|
|
229
245
|
`;
|
|
230
246
|
|
|
231
247
|
exports[`Map Popup StopEntityNoHandlers smoke-test 1`] = `
|
|
232
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
233
|
-
<
|
|
234
|
-
|
|
235
|
-
|
|
248
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
249
|
+
<div id="focus-9526-popup-focus-trap"
|
|
250
|
+
role="presentation"
|
|
251
|
+
>
|
|
252
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
253
|
+
W Burnside & SW 2nd
|
|
254
|
+
</header>
|
|
255
|
+
</div>
|
|
236
256
|
</div>
|
|
237
257
|
`;
|
|
238
258
|
|
|
239
|
-
exports[`Map Popup
|
|
240
|
-
<div
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<header class="styled__PopupTitle-sc-
|
|
259
|
+
exports[`Map Popup StopEntitywithEntityPrefix smoke-test 1`] = `
|
|
260
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
261
|
+
<div id="focus-9526-popup-focus-trap"
|
|
262
|
+
role="presentation"
|
|
263
|
+
>
|
|
264
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
265
|
+
<span class="MapPopupstory__DemoIcon-sc-vlk9f0-0 eLlbsf">
|
|
266
|
+
W
|
|
267
|
+
</span>
|
|
245
268
|
W Burnside & SW 2nd
|
|
246
269
|
</header>
|
|
247
|
-
<p class="styled__PopupRow-sc-
|
|
270
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
248
271
|
<strong>
|
|
249
272
|
Stop ID: 9526
|
|
250
273
|
</strong>
|
|
@@ -252,7 +275,7 @@ exports[`Map Popup StopEntityWithFocusTrap smoke-test 1`] = `
|
|
|
252
275
|
Stop Viewer
|
|
253
276
|
</button>
|
|
254
277
|
</p>
|
|
255
|
-
<p class="styled__PopupRow-sc-
|
|
278
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
256
279
|
<strong>
|
|
257
280
|
Plan a trip:
|
|
258
281
|
</strong>
|
package/src/index.tsx
CHANGED
|
@@ -5,10 +5,12 @@ import coreUtils from "@opentripplanner/core-utils";
|
|
|
5
5
|
// eslint-disable-next-line prettier/prettier
|
|
6
6
|
import type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from "@opentripplanner/types";
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { FocusTrapWrapper } from "@opentripplanner/building-blocks";
|
|
9
9
|
import { flatten } from "flat";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
10
|
+
import { FormattedMessage, useIntl } from "react-intl";
|
|
11
|
+
import { Styled } from "@opentripplanner/base-map";
|
|
12
|
+
|
|
13
|
+
import { ViewStopButton } from "./styled";
|
|
12
14
|
|
|
13
15
|
// Load the default messages.
|
|
14
16
|
import defaultEnglishMessages from "../i18n/en-US.yml";
|
|
@@ -33,7 +35,7 @@ const generateLocation = (entity: Entity, name: string) => {
|
|
|
33
35
|
|
|
34
36
|
const StationHubDetails = ({ station }: { station: Station }) => {
|
|
35
37
|
return (
|
|
36
|
-
<
|
|
38
|
+
<Styled.PopupRow>
|
|
37
39
|
<div>
|
|
38
40
|
<FormattedMessage
|
|
39
41
|
defaultMessage={
|
|
@@ -54,13 +56,13 @@ const StationHubDetails = ({ station }: { station: Station }) => {
|
|
|
54
56
|
values={{ value: station.spacesAvailable }}
|
|
55
57
|
/>
|
|
56
58
|
</div>
|
|
57
|
-
</
|
|
59
|
+
</Styled.PopupRow>
|
|
58
60
|
)
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {
|
|
62
64
|
return (
|
|
63
|
-
<
|
|
65
|
+
<Styled.PopupRow>
|
|
64
66
|
<strong>
|
|
65
67
|
<FormattedMessage
|
|
66
68
|
defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
|
|
@@ -71,22 +73,24 @@ const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => v
|
|
|
71
73
|
}}
|
|
72
74
|
/>
|
|
73
75
|
</strong>
|
|
74
|
-
<
|
|
76
|
+
<ViewStopButton onClick={setViewedStop}>
|
|
75
77
|
<FormattedMessage
|
|
76
78
|
defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
|
|
77
79
|
description="Text for link that opens the stop viewer"
|
|
78
80
|
id="otpUi.MapPopup.stopViewer"
|
|
79
81
|
/>
|
|
80
|
-
</
|
|
81
|
-
</
|
|
82
|
+
</ViewStopButton>
|
|
83
|
+
</Styled.PopupRow>
|
|
82
84
|
)
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
type Entity = Stop | Station
|
|
86
88
|
type Props = {
|
|
89
|
+
closePopup?: (arg?: any) => void
|
|
87
90
|
configCompanies?: ConfiguredCompany[];
|
|
88
91
|
entity: Entity
|
|
89
92
|
getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
|
|
93
|
+
getEntityPrefix?: (entity: Entity) => JSX.Element
|
|
90
94
|
setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
|
|
91
95
|
setViewedStop?: StopEventHandler;
|
|
92
96
|
};
|
|
@@ -98,7 +102,8 @@ function entityIsStation(entity: Entity): entity is Station {
|
|
|
98
102
|
/**
|
|
99
103
|
* Renders a map popup for a stop, scooter, or shared bike
|
|
100
104
|
*/
|
|
101
|
-
export function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
|
|
105
|
+
export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {
|
|
106
|
+
|
|
102
107
|
const intl = useIntl()
|
|
103
108
|
if (!entity) return <></>
|
|
104
109
|
|
|
@@ -111,16 +116,21 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
|
|
|
111
116
|
const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
|
|
112
117
|
const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
|
|
113
118
|
|
|
119
|
+
// Double quotes make the query invalid, so remove them from the id just in case
|
|
120
|
+
const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, "")}-popup`
|
|
121
|
+
|
|
114
122
|
return (
|
|
115
|
-
<
|
|
116
|
-
<
|
|
123
|
+
<Styled.MapOverlayPopup>
|
|
124
|
+
<FocusTrapWrapper closePopup={closePopup} id={id}>
|
|
125
|
+
<Styled.PopupTitle>
|
|
126
|
+
{getEntityPrefix && getEntityPrefix(entity)}
|
|
117
127
|
<FormattedMessage
|
|
118
128
|
defaultMessage={defaultMessages["otpUi.MapPopup.popupTitle"]}
|
|
119
129
|
description="Text for title of the popup, contains an optional company name"
|
|
120
130
|
id="otpUi.MapPopup.popupTitle"
|
|
121
131
|
values={{ name, stationNetwork }}
|
|
122
132
|
/>
|
|
123
|
-
</
|
|
133
|
+
</Styled.PopupTitle>
|
|
124
134
|
{/* render dock info if it is available */}
|
|
125
135
|
{entityIsStationHub && <StationHubDetails station={entity} />}
|
|
126
136
|
|
|
@@ -134,19 +144,18 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
|
|
|
134
144
|
|
|
135
145
|
{/* The "Set as [from/to]" ButtonGroup */}
|
|
136
146
|
{setLocation && (
|
|
137
|
-
<
|
|
147
|
+
<Styled.PopupRow>
|
|
138
148
|
<FromToLocationPicker
|
|
139
149
|
label
|
|
140
150
|
location={generateLocation(entity, name)}
|
|
141
151
|
setLocation={setLocation}
|
|
142
152
|
/>
|
|
143
|
-
</
|
|
153
|
+
</Styled.PopupRow>
|
|
144
154
|
)}
|
|
145
|
-
|
|
155
|
+
</FocusTrapWrapper>
|
|
156
|
+
|
|
157
|
+
</Styled.MapOverlayPopup>
|
|
146
158
|
);
|
|
147
159
|
}
|
|
148
160
|
|
|
149
|
-
export default MapPopup;
|
|
150
|
-
|
|
151
|
-
// Rename styled components for export.
|
|
152
|
-
export { S as Styled, FocusTrapWrapper };
|
|
161
|
+
export default MapPopup;
|