playbook_ui 12.8.0.pre.alpha.PLAY645typescriptprogresstep298 → 12.8.0.pre.alpha.PLAY649mapkitstyles299
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_map/_map.scss +54 -1
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +24 -8
- data/app/pb_kits/playbook/pb_progress_step/{_progress_step.tsx → _progress_step.jsx} +7 -15
- data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.tsx → _progress_step_item.jsx} +11 -18
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +3 -4
- data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js +0 -109
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1a81921a9d8f66328fdf77236a5286c4e3931308805b7e10d452538346c3549f
|
4
|
+
data.tar.gz: fc0d9ab00112ce0c1bd88f37ba2d52da406df628284291e8e89135b03cb20e99
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3e03c35c457723e4c219c44fd15e9e9e85215ef4d7803d3f0a91ba77a47073339f60c2c55fa4c8446dcc4bd90b4e2c6030b389eaa60709e18e694439c932079d
|
7
|
+
data.tar.gz: 4911d567f232bb912f4f950984fa0fd39ffef63ec55d1f7f1fc2a1a00a8bf89debf484f485cc88c76ca8ce53bc91fab537aaa9704892f74ad8c951cdb487ab8f
|
@@ -17,6 +17,46 @@
|
|
17
17
|
box-shadow: $shadow_deep;
|
18
18
|
}
|
19
19
|
}
|
20
|
+
|
21
|
+
.mapboxgl-ctrl-attrib.mapboxgl-compact,
|
22
|
+
.maplibregl-ctrl-attrib.maplibregl-compact {
|
23
|
+
background-color: unset;
|
24
|
+
}
|
25
|
+
.mapboxgl-ctrl-attrib.mapboxgl-compact-show,
|
26
|
+
.maplibregl-ctrl-attrib.maplibregl-compact-show {
|
27
|
+
background-color: $card_light;
|
28
|
+
box-shadow: $shadow_deep;
|
29
|
+
color: $text_lt_default;
|
30
|
+
}
|
31
|
+
|
32
|
+
.mapboxgl-ctrl-group:not(:empty),
|
33
|
+
.maplibregl-ctrl-group:not(:empty) {
|
34
|
+
position: absolute;
|
35
|
+
top: 150px;
|
36
|
+
right: $space_xs + 2;
|
37
|
+
margin: unset;
|
38
|
+
box-shadow: unset;
|
39
|
+
border-radius: $border_radius_md;
|
40
|
+
|
41
|
+
.mapbox-gl-draw_ctrl-draw-btn {
|
42
|
+
width: 36px;
|
43
|
+
height: 40px;
|
44
|
+
box-shadow: $shadow_deep;
|
45
|
+
background: $card_light;
|
46
|
+
border: solid 1px $border_light;
|
47
|
+
}
|
48
|
+
|
49
|
+
.mapbox-gl-draw_polygon {
|
50
|
+
border-top-left-radius: $border_radius_md;
|
51
|
+
border-top-right-radius: $border_radius_md;
|
52
|
+
}
|
53
|
+
|
54
|
+
.mapbox-gl-draw_trash {
|
55
|
+
border-bottom-left-radius: $border_radius_md;
|
56
|
+
border-bottom-right-radius: $border_radius_md;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
20
60
|
.custom-nav-control {
|
21
61
|
position: absolute;
|
22
62
|
right: $space_xs + 2;
|
@@ -53,7 +93,7 @@
|
|
53
93
|
align-items: center;
|
54
94
|
|
55
95
|
svg {
|
56
|
-
width: $space_xs +
|
96
|
+
width: $space_xs + 6;
|
57
97
|
height: $space_sm;
|
58
98
|
display: flex;
|
59
99
|
}
|
@@ -116,5 +156,18 @@
|
|
116
156
|
background-color: #221e3d;
|
117
157
|
}
|
118
158
|
}
|
159
|
+
|
160
|
+
.maplibregl-ctrl-attrib-button {
|
161
|
+
background-color: $text_dk_light;
|
162
|
+
}
|
163
|
+
.mapboxgl-ctrl-attrib.mapboxgl-compact-show,
|
164
|
+
.maplibregl-ctrl-attrib.maplibregl-compact-show {
|
165
|
+
background-color: $bg_dark;
|
166
|
+
box-shadow: $shadow_deep;
|
167
|
+
color: $text_dk_default;
|
168
|
+
a {
|
169
|
+
color: $text_dk_default;
|
170
|
+
}
|
171
|
+
}
|
119
172
|
}
|
120
173
|
}
|
@@ -1,28 +1,35 @@
|
|
1
|
-
import React, { useRef, useEffect } from 'react'
|
2
|
-
import { Map } from '../../'
|
1
|
+
import React, { useRef, useEffect, useState } from 'react'
|
2
|
+
import { Map, mapTheme } from '../../'
|
3
3
|
import maplibregl from 'maplibre-gl'
|
4
4
|
import MapboxDraw from "@mapbox/mapbox-gl-draw";
|
5
|
-
import mapTheme from '../pbMapTheme'
|
6
5
|
|
7
6
|
const MapWithPlugin = (props) => {
|
8
7
|
//set Map instance to access from outside useEffect
|
8
|
+
const [mapInstance, setMapInstance] = useState(null)
|
9
9
|
const mapContainerRef = useRef(null)
|
10
10
|
|
11
11
|
//Set default position
|
12
12
|
const defaultPosition = [-75.379143, 39.831200]
|
13
13
|
|
14
|
+
// linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
|
15
|
+
const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
|
16
|
+
const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
|
17
|
+
const handleFlyTo = (map) => {map.flyTo({
|
18
|
+
center: defaultPosition,
|
19
|
+
... mapTheme.flyToConfig
|
20
|
+
});}
|
21
|
+
|
14
22
|
//This function should contain all maplibre related code
|
15
23
|
const loadMap = ( { target: map }) => {
|
16
24
|
//set marker/pin
|
17
|
-
|
18
|
-
const marker = new maplibregl.Marker({
|
25
|
+
new maplibregl.Marker({
|
19
26
|
color: mapTheme.marker,
|
20
27
|
}).setLngLat(defaultPosition)
|
21
28
|
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
22
29
|
.addTo(map);
|
23
30
|
|
24
31
|
//add maplibre default zoom controls
|
25
|
-
map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
32
|
+
// map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
26
33
|
|
27
34
|
// disable map zoom when using scroll
|
28
35
|
map.scrollZoom.disable();
|
@@ -36,12 +43,15 @@ const MapWithPlugin = (props) => {
|
|
36
43
|
}
|
37
44
|
});
|
38
45
|
map.addControl(draw);
|
46
|
+
|
47
|
+
//set map instance
|
48
|
+
setMapInstance(map)
|
39
49
|
}
|
40
50
|
|
41
51
|
useEffect(() => {
|
42
52
|
new maplibregl.Map({
|
43
53
|
container: mapContainerRef.current,
|
44
|
-
center:
|
54
|
+
center: defaultPosition,
|
45
55
|
...mapTheme.mapConfig
|
46
56
|
}).on('load', loadMap)
|
47
57
|
}, [])
|
@@ -49,7 +59,13 @@ const MapWithPlugin = (props) => {
|
|
49
59
|
|
50
60
|
|
51
61
|
return (
|
52
|
-
<Map
|
62
|
+
<Map flyTo
|
63
|
+
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
64
|
+
zoomBtns
|
65
|
+
zoomInClick={() => {handleZoomIn(mapInstance)}}
|
66
|
+
zoomOutClick={()=> {handleZoomOut(mapInstance)}}
|
67
|
+
{...props}
|
68
|
+
>
|
53
69
|
<div
|
54
70
|
ref={mapContainerRef}
|
55
71
|
style={{
|
@@ -1,14 +1,15 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
1
3
|
import React from 'react'
|
2
4
|
import classnames from 'classnames'
|
3
|
-
import {
|
5
|
+
import { buildCss } from '../utilities/props'
|
4
6
|
import { globalProps } from '../utilities/globalProps'
|
5
7
|
|
6
8
|
type ProgressStepProps = {
|
7
|
-
aria?: { [key: string]: string },
|
8
9
|
className?: string,
|
9
|
-
data?:
|
10
|
+
data?: string,
|
10
11
|
id?: string,
|
11
|
-
children?: React.ReactChild
|
12
|
+
children?: array<React.ReactChild>,
|
12
13
|
orientation?: "horizontal" | "vertical",
|
13
14
|
icon?: boolean,
|
14
15
|
showIcon?: boolean,
|
@@ -16,21 +17,16 @@ type ProgressStepProps = {
|
|
16
17
|
color?: string,
|
17
18
|
}
|
18
19
|
|
19
|
-
const ProgressStep = (props: ProgressStepProps)
|
20
|
+
const ProgressStep = (props: ProgressStepProps) => {
|
20
21
|
const {
|
21
|
-
aria = {},
|
22
22
|
className,
|
23
23
|
children,
|
24
24
|
color,
|
25
|
-
data = {},
|
26
25
|
orientation = 'horizontal',
|
27
26
|
icon = false,
|
28
27
|
showIcon = false,
|
29
28
|
variant,
|
30
29
|
} = props
|
31
|
-
|
32
|
-
const ariaProps = buildAriaProps(aria)
|
33
|
-
const dataProps = buildDataProps(data)
|
34
30
|
const iconStyle = icon === true || showIcon === true ? 'icon' : ''
|
35
31
|
const progressStepCss = buildCss(
|
36
32
|
'pb_progress_step_kit',
|
@@ -41,11 +37,7 @@ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
|
|
41
37
|
)
|
42
38
|
|
43
39
|
return (
|
44
|
-
<ul
|
45
|
-
{...ariaProps}
|
46
|
-
{...dataProps}
|
47
|
-
className={classnames(progressStepCss, globalProps(props), className)}
|
48
|
-
>
|
40
|
+
<ul className={classnames(progressStepCss, globalProps(props), className)}>
|
49
41
|
{children}
|
50
42
|
</ul>
|
51
43
|
)
|
data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.tsx → _progress_step_item.jsx}
RENAMED
@@ -1,35 +1,29 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
1
3
|
import React from 'react'
|
2
4
|
import classnames from 'classnames'
|
3
5
|
|
4
|
-
import { buildCss
|
6
|
+
import { buildCss } from '../utilities/props'
|
5
7
|
|
6
8
|
import Icon from '../pb_icon/_icon'
|
7
9
|
|
8
10
|
type ProgressStepItemProps = {
|
9
11
|
className?: string,
|
10
|
-
data?: { [key: string]: string },
|
11
12
|
status?: "complete" | "active" | "inactive" | "hidden",
|
12
|
-
children?: React.
|
13
|
+
children?: React.Node,
|
13
14
|
icon?: string,
|
14
15
|
}
|
15
16
|
|
16
|
-
const ProgressStepItem = (
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
icon = 'check',
|
23
|
-
} = props
|
24
|
-
|
17
|
+
const ProgressStepItem = ({
|
18
|
+
className,
|
19
|
+
status = 'inactive',
|
20
|
+
children,
|
21
|
+
icon = 'check',
|
22
|
+
}: ProgressStepItemProps) => {
|
25
23
|
const progressStepItem = buildCss('pb_progress_step_item', status)
|
26
|
-
const dataProps = buildDataProps(data)
|
27
24
|
|
28
25
|
return (
|
29
|
-
<li
|
30
|
-
{...dataProps}
|
31
|
-
className={classnames(progressStepItem, className)}
|
32
|
-
>
|
26
|
+
<li className={classnames(progressStepItem, className)}>
|
33
27
|
<div className="box">
|
34
28
|
<div className="circle">
|
35
29
|
<Icon icon={icon} />
|
@@ -39,5 +33,4 @@ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
|
|
39
33
|
</li>
|
40
34
|
)
|
41
35
|
}
|
42
|
-
|
43
36
|
export default ProgressStepItem
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
|
-
import ProgressStep from '../_progress_step.
|
4
|
-
import ProgressStepItem from '../_progress_step_item.
|
3
|
+
import ProgressStep from '../_progress_step.jsx'
|
4
|
+
import ProgressStepItem from '../_progress_step_item.jsx'
|
5
5
|
|
6
6
|
const ProgressStepDefault = (props) => (
|
7
7
|
<div>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
|
-
import ProgressStep from '../_progress_step.
|
4
|
-
import ProgressStepItem from '../_progress_step_item.
|
3
|
+
import ProgressStep from '../_progress_step.jsx'
|
4
|
+
import ProgressStepItem from '../_progress_step_item.jsx'
|
5
5
|
|
6
6
|
const ProgressStepVertical = (props) => (
|
7
7
|
<div>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.8.0.pre.alpha.
|
4
|
+
version: 12.8.0.pre.alpha.PLAY649mapkitstyles299
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -1666,9 +1666,9 @@ files:
|
|
1666
1666
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
|
1667
1667
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
|
1668
1668
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
|
1669
|
+
- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
|
1669
1670
|
- app/pb_kits/playbook/pb_progress_step/_progress_step.scss
|
1670
|
-
- app/pb_kits/playbook/pb_progress_step/
|
1671
|
-
- app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
|
1671
|
+
- app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
|
1672
1672
|
- app/pb_kits/playbook/pb_progress_step/docs/_description.md
|
1673
1673
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
|
1674
1674
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
|
@@ -1683,7 +1683,6 @@ files:
|
|
1683
1683
|
- app/pb_kits/playbook/pb_progress_step/docs/index.js
|
1684
1684
|
- app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
|
1685
1685
|
- app/pb_kits/playbook/pb_progress_step/progress_step.rb
|
1686
|
-
- app/pb_kits/playbook/pb_progress_step/progress_step.test.js
|
1687
1686
|
- app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
|
1688
1687
|
- app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
|
1689
1688
|
- app/pb_kits/playbook/pb_radio/_radio.scss
|
@@ -1,109 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { render, screen } from '../utilities/test-utils'
|
3
|
-
|
4
|
-
import ProgressStep from './_progress_step.tsx'
|
5
|
-
import ProgressStepItem from './_progress_step_item.tsx'
|
6
|
-
|
7
|
-
const testId = 'progressStepId'
|
8
|
-
const step1Id = 'step1Id'
|
9
|
-
const step2Id = 'step2Id'
|
10
|
-
const step3Id = 'step3Id'
|
11
|
-
|
12
|
-
const ProgressStepTest = () => {
|
13
|
-
return (
|
14
|
-
<>
|
15
|
-
<ProgressStep
|
16
|
-
aria={{ label: testId }}
|
17
|
-
className={'custom-class'}
|
18
|
-
data={{ testid: testId }}
|
19
|
-
>
|
20
|
-
<ProgressStepItem
|
21
|
-
data={{ testid: step1Id }}
|
22
|
-
status="complete"
|
23
|
-
>
|
24
|
-
{'Step 1'}
|
25
|
-
</ProgressStepItem>
|
26
|
-
<ProgressStepItem
|
27
|
-
data={{ testid: step2Id }}
|
28
|
-
status="active"
|
29
|
-
>
|
30
|
-
{'Step 2'}
|
31
|
-
</ProgressStepItem>
|
32
|
-
<ProgressStepItem
|
33
|
-
data={{ testid: step3Id }}
|
34
|
-
status="inactive"
|
35
|
-
>
|
36
|
-
{'Step 3'}
|
37
|
-
</ProgressStepItem>
|
38
|
-
</ProgressStep>
|
39
|
-
</>
|
40
|
-
)
|
41
|
-
}
|
42
|
-
|
43
|
-
test('should render custom class and data', () => {
|
44
|
-
render(<ProgressStepTest/>)
|
45
|
-
|
46
|
-
const kit = screen.getByTestId(testId)
|
47
|
-
expect(kit).toHaveClass('custom-class')
|
48
|
-
})
|
49
|
-
|
50
|
-
test('should render aria-label', () => {
|
51
|
-
render(<ProgressStepTest />)
|
52
|
-
|
53
|
-
const kit = screen.getByTestId(testId)
|
54
|
-
expect(kit).toHaveAttribute('aria-label', testId)
|
55
|
-
})
|
56
|
-
|
57
|
-
test('should render the horizontal variant', () => {
|
58
|
-
render(<ProgressStepTest />)
|
59
|
-
|
60
|
-
const kit = screen.getByTestId(testId)
|
61
|
-
expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
|
62
|
-
})
|
63
|
-
|
64
|
-
test('should render the vertical variant', () => {
|
65
|
-
render(
|
66
|
-
<ProgressStep
|
67
|
-
aria={{ label: testId }}
|
68
|
-
data={{ testid: testId }}
|
69
|
-
orientation="vertical"
|
70
|
-
>
|
71
|
-
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
72
|
-
<ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
|
73
|
-
<ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
|
74
|
-
</ProgressStep>
|
75
|
-
)
|
76
|
-
|
77
|
-
const kit = screen.getByTestId(testId)
|
78
|
-
expect(kit).toHaveClass('pb_progress_step_kit_vertical')
|
79
|
-
})
|
80
|
-
|
81
|
-
test('should render the tracker variant', () => {
|
82
|
-
render(
|
83
|
-
<ProgressStep
|
84
|
-
aria={{ label: testId }}
|
85
|
-
data={{ testid: testId }}
|
86
|
-
variant="tracker"
|
87
|
-
>
|
88
|
-
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
89
|
-
<ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
|
90
|
-
<ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
|
91
|
-
</ProgressStep>
|
92
|
-
)
|
93
|
-
|
94
|
-
const kit = screen.getByTestId(testId)
|
95
|
-
expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
|
96
|
-
})
|
97
|
-
|
98
|
-
|
99
|
-
test('should render the children elements', () => {
|
100
|
-
render(<ProgressStepTest />)
|
101
|
-
|
102
|
-
const step1Kit = screen.getByTestId(step1Id)
|
103
|
-
const step2Kit = screen.getByTestId(step2Id)
|
104
|
-
const step3Kit = screen.getByTestId(step3Id)
|
105
|
-
|
106
|
-
expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
|
107
|
-
expect(step2Kit).toHaveClass('pb_progress_step_item_active')
|
108
|
-
expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
|
109
|
-
})
|