playbook_ui 12.4.0 → 12.5.0.pre.alpha.filter1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +4 -1
- data/app/pb_kits/playbook/pb_button/_button.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +37 -33
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
- data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
- data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
- data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
- data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
- data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
- data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +55 -0
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +41 -0
- data/app/pb_kits/playbook/pb_map/_map.scss +114 -2
- data/app/pb_kits/playbook/pb_map/_map.tsx +42 -2
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +47 -24
- data/app/pb_kits/playbook/pb_map/docs/_map_default.md +5 -5
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +20 -17
- data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_map/pbMapTheme.ts +23 -0
- data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} +35 -35
- data/app/pb_kits/playbook/pb_message/message.test.js +63 -0
- data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} +56 -56
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +43 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +36 -35
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
- data/lib/playbook/version.rb +2 -2
- metadata +22 -16
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +0 -37
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import classnames from 'classnames'
|
|
3
|
+
|
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
5
|
+
import { globalProps } from '../utilities/globalProps'
|
|
6
|
+
|
|
7
|
+
import Body from '../pb_body/_body'
|
|
8
|
+
import Icon from '../pb_icon/_icon'
|
|
9
|
+
|
|
10
|
+
type LoadingInlineProps = {
|
|
11
|
+
align?: "left" | "center" | "right",
|
|
12
|
+
aria?: { [key: string]: string },
|
|
13
|
+
className?: string,
|
|
14
|
+
data?: { [key: string]: string },
|
|
15
|
+
id?: string,
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const LoadingInline = (props: LoadingInlineProps) => {
|
|
19
|
+
const {
|
|
20
|
+
align = 'left',
|
|
21
|
+
aria = {},
|
|
22
|
+
className,
|
|
23
|
+
data = {},
|
|
24
|
+
id,
|
|
25
|
+
} = props
|
|
26
|
+
|
|
27
|
+
const ariaProps = buildAriaProps(aria)
|
|
28
|
+
const dataProps = buildDataProps(data)
|
|
29
|
+
const classes = classnames(
|
|
30
|
+
buildCss(`pb_loading_inline_kit_${align}`),
|
|
31
|
+
globalProps(props),
|
|
32
|
+
className
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div
|
|
37
|
+
{...ariaProps}
|
|
38
|
+
{...dataProps}
|
|
39
|
+
className={classes}
|
|
40
|
+
id={id}
|
|
41
|
+
>
|
|
42
|
+
<Body color="light">
|
|
43
|
+
<Icon
|
|
44
|
+
aria={{ label: 'loading icon' }}
|
|
45
|
+
fixedWidth
|
|
46
|
+
icon="spinner"
|
|
47
|
+
pulse
|
|
48
|
+
/>
|
|
49
|
+
{' Loading'}
|
|
50
|
+
</Body>
|
|
51
|
+
</div>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default LoadingInline
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
import LoadingInline from './_loading_inline'
|
|
4
|
+
|
|
5
|
+
const testId = "loadingInline"
|
|
6
|
+
|
|
7
|
+
test('should render custom class and data', () => {
|
|
8
|
+
render(
|
|
9
|
+
<LoadingInline
|
|
10
|
+
className='custom-class'
|
|
11
|
+
data={{ testid: testId }}
|
|
12
|
+
/>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
const kit = screen.getByTestId(testId)
|
|
16
|
+
expect(kit).toHaveClass('custom-class')
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
test('should render id', () => {
|
|
20
|
+
render(
|
|
21
|
+
<LoadingInline
|
|
22
|
+
data={{ testid: testId }}
|
|
23
|
+
id={testId}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
const kit = screen.getByTestId(testId)
|
|
28
|
+
expect(kit).toHaveProperty('id', testId)
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
test('should render aria-label', () => {
|
|
32
|
+
render(
|
|
33
|
+
<LoadingInline
|
|
34
|
+
aria={{ label: testId }}
|
|
35
|
+
data={{ testid: testId }}
|
|
36
|
+
/>
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
const kit = screen.getByTestId(testId)
|
|
40
|
+
expect(kit).toHaveAttribute('aria-label', testId)
|
|
41
|
+
})
|
|
@@ -1,8 +1,120 @@
|
|
|
1
1
|
@import "../tokens/typography";
|
|
2
|
-
@import "../tokens/colors";
|
|
2
|
+
@import "../tokens/colors";
|
|
3
3
|
@import "../tokens/shadows";
|
|
4
|
+
@import "../tokens/border_radius";
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
[class*="pb_map"] {
|
|
6
7
|
font-family: $font_family_base !important;
|
|
7
8
|
|
|
9
|
+
.maplibregl-ctrl-attrib-button {
|
|
10
|
+
&:focus {
|
|
11
|
+
box-shadow: unset;
|
|
12
|
+
}
|
|
13
|
+
&:focus-visible {
|
|
14
|
+
box-shadow: 0 0 0 1px $primary_action;
|
|
15
|
+
}
|
|
16
|
+
&:hover {
|
|
17
|
+
box-shadow: $shadow_deep;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.custom-nav-control {
|
|
21
|
+
position: absolute;
|
|
22
|
+
right: $space_xs + 2;
|
|
23
|
+
top: $space_xs + 2;
|
|
24
|
+
z-index: 2;
|
|
25
|
+
|
|
26
|
+
.custom-nav-control-zoom {
|
|
27
|
+
border-radius: $border_radius_md;
|
|
28
|
+
box-shadow: $shadow_deep;
|
|
29
|
+
background: $card_light;
|
|
30
|
+
.map-zoom-in-button {
|
|
31
|
+
border-bottom-left-radius: unset;
|
|
32
|
+
border-bottom-right-radius: unset;
|
|
33
|
+
border-bottom: transparent;
|
|
34
|
+
}
|
|
35
|
+
.map-zoom-out-button {
|
|
36
|
+
border-top-left-radius: unset;
|
|
37
|
+
border-top-right-radius: unset;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.map-zoom-in-button,
|
|
42
|
+
.map-zoom-out-button,
|
|
43
|
+
.map-flyto-button {
|
|
44
|
+
border: solid 1px $border_light;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
padding: $space_xs + 2;
|
|
47
|
+
text-align: center;
|
|
48
|
+
color: $text_lt_light;
|
|
49
|
+
background-color: $card_light;
|
|
50
|
+
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
align-items: center;
|
|
54
|
+
|
|
55
|
+
svg {
|
|
56
|
+
width: $space_xs + 4;
|
|
57
|
+
height: $space_sm;
|
|
58
|
+
display: flex;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
background-color: darken($bg_light, 2%);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:focus-visible {
|
|
66
|
+
border: solid 1px $primary_action;
|
|
67
|
+
box-shadow: unset;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.map-flyto-button {
|
|
72
|
+
border-radius: $border_radius_md;
|
|
73
|
+
margin-top: $space_xs;
|
|
74
|
+
box-shadow: $shadow_deep;
|
|
75
|
+
background-color: $card_light;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.maplibregl-popup-content {
|
|
80
|
+
padding: $space_sm;
|
|
81
|
+
background-color: $card_light;
|
|
82
|
+
box-shadow: $shadow_deeper;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.dark {
|
|
86
|
+
.maplibregl-canvas {
|
|
87
|
+
filter: invert(100%) brightness(175%) contrast(80%) sepia(50%) saturate(2)
|
|
88
|
+
hue-rotate(185deg);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.pb_section_separator_kit_card_horizontal::after {
|
|
92
|
+
background: $border_dark;
|
|
93
|
+
}
|
|
94
|
+
.custom-nav-control-zoom {
|
|
95
|
+
border: solid 1px #0a0527;
|
|
96
|
+
background: $bg_dark;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.maplibregl-popup-content {
|
|
100
|
+
background-color: $bg_dark;
|
|
101
|
+
color: $text_dk_default;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
|
|
105
|
+
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
|
|
106
|
+
border-top-color: $bg_dark;
|
|
107
|
+
}
|
|
108
|
+
.map-zoom-in-button,
|
|
109
|
+
.map-zoom-out-button,
|
|
110
|
+
.map-flyto-button {
|
|
111
|
+
color: $text_dk_default;
|
|
112
|
+
background-color: $bg_dark;
|
|
113
|
+
border-color: $border_dark;
|
|
114
|
+
|
|
115
|
+
&:hover {
|
|
116
|
+
background-color: #221e3d;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
8
120
|
}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
4
|
-
import { globalProps } from '../utilities/globalProps'
|
|
4
|
+
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
5
5
|
|
|
6
|
+
import Flex from "../pb_flex/_flex"
|
|
7
|
+
import Icon from '../pb_icon/_icon'
|
|
8
|
+
import Button from '../pb_button/_button'
|
|
6
9
|
|
|
7
10
|
type MapProps = {
|
|
8
11
|
aria?: { [key: string]: string },
|
|
@@ -10,7 +13,12 @@ type MapProps = {
|
|
|
10
13
|
className?: string,
|
|
11
14
|
data?: { [key: string]: string },
|
|
12
15
|
id?: string,
|
|
13
|
-
|
|
16
|
+
zoomBtns?: boolean,
|
|
17
|
+
flyTo?: boolean,
|
|
18
|
+
zoomInClick?: () => {},
|
|
19
|
+
zoomOutClick?: () => {},
|
|
20
|
+
flyToClick?: () => {},
|
|
21
|
+
} & GlobalProps
|
|
14
22
|
|
|
15
23
|
const Map = (props: MapProps) => {
|
|
16
24
|
const {
|
|
@@ -19,6 +27,11 @@ const Map = (props: MapProps) => {
|
|
|
19
27
|
className,
|
|
20
28
|
data = {},
|
|
21
29
|
id,
|
|
30
|
+
zoomBtns = false,
|
|
31
|
+
flyTo = false,
|
|
32
|
+
zoomInClick,
|
|
33
|
+
zoomOutClick,
|
|
34
|
+
flyToClick
|
|
22
35
|
} = props
|
|
23
36
|
|
|
24
37
|
const ariaProps = buildAriaProps(aria)
|
|
@@ -32,6 +45,33 @@ const Map = (props: MapProps) => {
|
|
|
32
45
|
className={classes}
|
|
33
46
|
id={id}
|
|
34
47
|
>
|
|
48
|
+
{
|
|
49
|
+
zoomBtns ? (
|
|
50
|
+
<Flex className="custom-nav-control" orientation='column'>
|
|
51
|
+
<div className="custom-nav-control-zoom">
|
|
52
|
+
<Button className='map-zoom-in-button'
|
|
53
|
+
onClick={zoomInClick}
|
|
54
|
+
>
|
|
55
|
+
<Icon icon="plus"/>
|
|
56
|
+
</Button>
|
|
57
|
+
<Button className='map-zoom-out-button'
|
|
58
|
+
onClick={zoomOutClick}
|
|
59
|
+
>
|
|
60
|
+
<Icon icon="minus"/>
|
|
61
|
+
</Button>
|
|
62
|
+
</div>
|
|
63
|
+
{
|
|
64
|
+
flyTo ? (
|
|
65
|
+
<Button className='map-flyto-button'
|
|
66
|
+
onClick={flyToClick}
|
|
67
|
+
>
|
|
68
|
+
<Icon icon="eye"/>
|
|
69
|
+
</Button>
|
|
70
|
+
) : null
|
|
71
|
+
}
|
|
72
|
+
</Flex>
|
|
73
|
+
) : null
|
|
74
|
+
}
|
|
35
75
|
{children}
|
|
36
76
|
</div>
|
|
37
77
|
)
|
|
@@ -1,40 +1,63 @@
|
|
|
1
|
-
import React, { useRef, useEffect } from 'react'
|
|
1
|
+
import React, { useRef, useEffect, useState } from 'react'
|
|
2
2
|
import { Map } from '../../'
|
|
3
|
-
|
|
4
3
|
import maplibregl from 'maplibre-gl'
|
|
4
|
+
import mapTheme from '../pbMapTheme'
|
|
5
5
|
|
|
6
|
-
const MapDefault = () => {
|
|
6
|
+
const MapDefault = (props) => {
|
|
7
7
|
|
|
8
|
+
//set Map instance to access from outside useEffect
|
|
9
|
+
const [mapInstance, setMapInstance] = useState(null)
|
|
8
10
|
const mapContainerRef = useRef(null)
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
//Set default position
|
|
13
|
+
const defaultPosition = [-75.379143, 39.831200]
|
|
14
|
+
|
|
15
|
+
// linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
|
|
16
|
+
const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
|
|
17
|
+
const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
|
|
18
|
+
const handleFlyTo = (map) => {map.flyTo({
|
|
19
|
+
center: defaultPosition,
|
|
20
|
+
... mapTheme.flyToConfig
|
|
21
|
+
});}
|
|
22
|
+
|
|
23
|
+
//This function is called by the useEffect when map instance first loads
|
|
24
|
+
const loadMap = ( { target: map }) => {
|
|
20
25
|
//set marker/pin
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}).
|
|
25
|
-
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
|
26
|
+
new maplibregl.Marker({
|
|
27
|
+
color: mapTheme.marker,
|
|
28
|
+
}).setLngLat(defaultPosition)
|
|
29
|
+
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
|
26
30
|
.addTo(map);
|
|
27
31
|
|
|
28
|
-
//add zoom controls
|
|
29
|
-
map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
|
30
|
-
|
|
31
32
|
// disable map zoom when using scroll
|
|
32
33
|
map.scrollZoom.disable();
|
|
34
|
+
|
|
35
|
+
//add attributioncontrols
|
|
36
|
+
map.addControl(new maplibregl.AttributionControl({
|
|
37
|
+
compact: true
|
|
38
|
+
}));
|
|
39
|
+
|
|
40
|
+
//set map instance
|
|
41
|
+
setMapInstance(map)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
new maplibregl.Map({
|
|
46
|
+
container: mapContainerRef.current,
|
|
47
|
+
center: defaultPosition,
|
|
48
|
+
...mapTheme.mapConfig
|
|
49
|
+
}).on('load', loadMap)
|
|
33
50
|
|
|
34
|
-
}
|
|
35
51
|
}, [])
|
|
52
|
+
|
|
36
53
|
return (
|
|
37
|
-
<Map
|
|
54
|
+
<Map flyTo
|
|
55
|
+
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
|
56
|
+
zoomBtns
|
|
57
|
+
zoomInClick={() => {handleZoomIn(mapInstance)}}
|
|
58
|
+
zoomOutClick={()=> {handleZoomOut(mapInstance)}}
|
|
59
|
+
{...props}
|
|
60
|
+
>
|
|
38
61
|
<div
|
|
39
62
|
ref={mapContainerRef}
|
|
40
63
|
style={{
|
|
@@ -44,7 +67,7 @@ return (
|
|
|
44
67
|
top: 0,
|
|
45
68
|
bottom: 0,
|
|
46
69
|
}}
|
|
47
|
-
|
|
70
|
+
/>
|
|
48
71
|
</Map>
|
|
49
72
|
)
|
|
50
73
|
}
|
|
@@ -2,12 +2,12 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
|
|
|
2
2
|
|
|
3
3
|
Basic setup to start using MapLibre:
|
|
4
4
|
- Install the npm package using `yarn add maplibre-gl`
|
|
5
|
-
-
|
|
6
|
-
|
|
7
|
-
or include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
|
|
8
|
-
- To use Maplibre, you must also set a height on the containing div.
|
|
5
|
+
- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
|
|
6
|
+
OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
|
|
9
7
|
- You can now use MapLibre within the Map Kit as shown in this example.
|
|
10
8
|
|
|
11
9
|
__Notes__ :
|
|
12
|
-
-
|
|
10
|
+
- To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example.
|
|
11
|
+
- Use `mapTheme.marker` to set the Marker color.
|
|
12
|
+
- To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
|
|
13
13
|
- `scrollZoom` has been disabled in these doc examples for page usability
|
|
@@ -2,30 +2,26 @@ import React, { useRef, useEffect } from 'react'
|
|
|
2
2
|
import { Map } from '../../'
|
|
3
3
|
import maplibregl from 'maplibre-gl'
|
|
4
4
|
import MapboxDraw from "@mapbox/mapbox-gl-draw";
|
|
5
|
+
import mapTheme from '../pbMapTheme'
|
|
5
6
|
|
|
6
|
-
const MapWithPlugin = () => {
|
|
7
|
+
const MapWithPlugin = (props) => {
|
|
8
|
+
//set Map instance to access from outside useEffect
|
|
9
|
+
const mapContainerRef = useRef(null)
|
|
7
10
|
|
|
8
|
-
|
|
11
|
+
//Set default position
|
|
12
|
+
const defaultPosition = [-75.379143, 39.831200]
|
|
9
13
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
alert('Your browser does not support MapLibre GL');
|
|
13
|
-
} else {
|
|
14
|
-
const map = new maplibregl.Map({
|
|
15
|
-
container: mapContainerRef.current,
|
|
16
|
-
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
|
17
|
-
center: [-75.379143, 39.831200],
|
|
18
|
-
zoom: 13,
|
|
19
|
-
})
|
|
14
|
+
//This function should contain all maplibre related code
|
|
15
|
+
const loadMap = ( { target: map }) => {
|
|
20
16
|
//set marker/pin
|
|
21
17
|
/* eslint-disable-next-line */
|
|
22
18
|
const marker = new maplibregl.Marker({
|
|
23
|
-
color:
|
|
24
|
-
}).setLngLat(
|
|
19
|
+
color: mapTheme.marker,
|
|
20
|
+
}).setLngLat(defaultPosition)
|
|
25
21
|
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
|
26
22
|
.addTo(map);
|
|
27
23
|
|
|
28
|
-
//add zoom controls
|
|
24
|
+
//add maplibre default zoom controls
|
|
29
25
|
map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
|
30
26
|
|
|
31
27
|
// disable map zoom when using scroll
|
|
@@ -40,13 +36,20 @@ const MapWithPlugin = () => {
|
|
|
40
36
|
}
|
|
41
37
|
});
|
|
42
38
|
map.addControl(draw);
|
|
43
|
-
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
new maplibregl.Map({
|
|
43
|
+
container: mapContainerRef.current,
|
|
44
|
+
center: [-75.379143, 39.831200],
|
|
45
|
+
...mapTheme.mapConfig
|
|
46
|
+
}).on('load', loadMap)
|
|
44
47
|
}, [])
|
|
45
48
|
|
|
46
49
|
|
|
47
50
|
|
|
48
51
|
return (
|
|
49
|
-
<Map>
|
|
52
|
+
<Map {...props} >
|
|
50
53
|
<div
|
|
51
54
|
ref={mapContainerRef}
|
|
52
55
|
style={{
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import colors from '../tokens/exports/_colors.scss'
|
|
2
|
+
|
|
3
|
+
const mapTheme = {
|
|
4
|
+
marker : colors.primary_action,
|
|
5
|
+
maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
|
6
|
+
flyToConfig: {
|
|
7
|
+
zoom: 13,
|
|
8
|
+
bearing: 0,
|
|
9
|
+
curve: 1.42, // change the speed at which it zooms
|
|
10
|
+
easing: function (t: any) {
|
|
11
|
+
return t;
|
|
12
|
+
},
|
|
13
|
+
essential: true
|
|
14
|
+
},
|
|
15
|
+
zoomConfig: { duration:1000 },
|
|
16
|
+
mapConfig: {
|
|
17
|
+
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
|
18
|
+
zoom: 13,
|
|
19
|
+
attributionControl: false,
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default mapTheme
|
|
@@ -13,11 +13,11 @@ import Timestamp from '../pb_timestamp/_timestamp'
|
|
|
13
13
|
import Title from '../pb_title/_title'
|
|
14
14
|
|
|
15
15
|
type MessageProps = {
|
|
16
|
-
aria:
|
|
16
|
+
aria: { [key: string]: string },
|
|
17
17
|
avatarName?: string,
|
|
18
|
-
avatarStatus?:
|
|
18
|
+
avatarStatus?: "away" | "offline" | "online",
|
|
19
19
|
avatarUrl?: string,
|
|
20
|
-
children?:
|
|
20
|
+
children?: React.ReactChild[] | React.ReactChild,
|
|
21
21
|
className?: string,
|
|
22
22
|
data?: object,
|
|
23
23
|
id?: string,
|
|
@@ -61,53 +61,53 @@ const Message = (props: MessageProps) => {
|
|
|
61
61
|
|
|
62
62
|
return (
|
|
63
63
|
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
{...ariaProps}
|
|
65
|
+
{...dataProps}
|
|
66
|
+
className={classes}
|
|
67
|
+
id={id}
|
|
68
68
|
>
|
|
69
|
-
|
|
69
|
+
{shouldDisplayAvatar &&
|
|
70
70
|
<Avatar
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
imageUrl={avatarUrl}
|
|
72
|
+
name={avatarName}
|
|
73
|
+
size="xs"
|
|
74
|
+
status={avatarStatus}
|
|
75
75
|
/>
|
|
76
|
-
|
|
76
|
+
}
|
|
77
77
|
<div className="content_wrapper">
|
|
78
78
|
<Flex
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
justify={alignTimestamp === 'left' ? 'none' : 'between'}
|
|
80
|
+
orientation="row"
|
|
81
81
|
>
|
|
82
|
-
|
|
82
|
+
{label &&
|
|
83
83
|
<Title
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
className="message_title"
|
|
85
|
+
size={4}
|
|
86
|
+
text={label}
|
|
87
87
|
/>
|
|
88
|
-
|
|
88
|
+
}
|
|
89
89
|
<Timestamp
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
|
91
|
+
text={timestamp}
|
|
92
|
+
timestamp={''}
|
|
93
|
+
timezone={timezone}
|
|
93
94
|
/>
|
|
94
|
-
|
|
95
|
+
{timestampObject &&
|
|
95
96
|
<Timestamp
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
className={`pull-${alignTimestamp} message_timestamp`}
|
|
98
|
+
text={''}
|
|
99
|
+
timestamp={timestampObject}
|
|
100
|
+
timezone={timezone}
|
|
99
101
|
/>
|
|
100
|
-
|
|
102
|
+
}
|
|
101
103
|
</Flex>
|
|
102
|
-
|
|
104
|
+
{message &&
|
|
103
105
|
<Body
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
className="pb_message_body"
|
|
107
|
+
text={message}
|
|
106
108
|
/>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
{ children }
|
|
110
|
-
</If>
|
|
109
|
+
}
|
|
110
|
+
{children}
|
|
111
111
|
</div>
|
|
112
112
|
</div>
|
|
113
113
|
)
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
import Message from './_message'
|
|
4
|
+
import Image from './../pb_image/_image'
|
|
5
|
+
|
|
6
|
+
const testId = "message"
|
|
7
|
+
|
|
8
|
+
const MessageDefault = () => {
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
<Message
|
|
12
|
+
avatarName="Becca Jacobs"
|
|
13
|
+
avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
|
|
14
|
+
className='custom-class'
|
|
15
|
+
data={{ testid: testId }}
|
|
16
|
+
label="Lucille Sanchez"
|
|
17
|
+
message="Application for Kate Smith is waiting for your approval"
|
|
18
|
+
timestamp="2 days ago"
|
|
19
|
+
>
|
|
20
|
+
<Image
|
|
21
|
+
alt="picture of a misty forest"
|
|
22
|
+
size="md"
|
|
23
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
24
|
+
/>
|
|
25
|
+
</Message>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
test('should render message', () => {
|
|
31
|
+
render(<MessageDefault />)
|
|
32
|
+
|
|
33
|
+
const kit = screen.getByText('Application for Kate Smith is waiting for your approval')
|
|
34
|
+
expect(kit).toBeInTheDocument()
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
test('should render label', () => {
|
|
38
|
+
render(<MessageDefault />)
|
|
39
|
+
|
|
40
|
+
const kit = screen.getByText('Lucille Sanchez')
|
|
41
|
+
expect(kit).toBeInTheDocument()
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
test('should render timestamp', () => {
|
|
45
|
+
render(<MessageDefault />)
|
|
46
|
+
|
|
47
|
+
const kit = screen.getByText('2 days ago')
|
|
48
|
+
expect(kit).toBeInTheDocument()
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
test('should render custom class and data', () => {
|
|
52
|
+
render(<MessageDefault />)
|
|
53
|
+
|
|
54
|
+
const kit = screen.getByTestId(testId)
|
|
55
|
+
expect(kit).toHaveClass('custom-class')
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
test('should render a children', () => {
|
|
59
|
+
render(<MessageDefault />)
|
|
60
|
+
|
|
61
|
+
const kit = screen.getByAltText('picture of a misty forest')
|
|
62
|
+
expect(kit).toBeInTheDocument()
|
|
63
|
+
})
|