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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0754b3a864404fcaf46b40703c33a6507b0964d9f64b7b8e7557d9846b297aba
4
- data.tar.gz: edb037066952b45d0768a3c59d3aca3a008a937a741bf82ff37d5950f06d679f
3
+ metadata.gz: 1a81921a9d8f66328fdf77236a5286c4e3931308805b7e10d452538346c3549f
4
+ data.tar.gz: fc0d9ab00112ce0c1bd88f37ba2d52da406df628284291e8e89135b03cb20e99
5
5
  SHA512:
6
- metadata.gz: af949289757a115a26081aa1aee68f791584150523e59499c97092a4c80269a1f41234ea7c7022294661cc079efb442a58f37bd65c06aa0a94d3a1cf3cfcf120
7
- data.tar.gz: b8ae58b94e8d6027297420f4bdf90fc8a6586516a87540b94f6fffd5ca7fe613df2f31012bff008b730868eff336950afe41a2ed3b35b7cfd535f6f87405e96b
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 + 4;
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,7 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map } from '../../'
2
+ import { Map, mapTheme } from '../../'
3
3
  import maplibregl from 'maplibre-gl'
4
- import mapTheme from '../pbMapTheme'
5
4
 
6
5
  const MapDefault = (props) => {
7
6
 
@@ -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
- /* eslint-disable-next-line */
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: [-75.379143, 39.831200],
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 {...props} >
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 { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
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?: { [key: string]: string },
10
+ data?: string,
10
11
  id?: string,
11
- children?: React.ReactChild[] | 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): React.ReactElement => {
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
  )
@@ -1,35 +1,29 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import classnames from 'classnames'
3
5
 
4
- import { buildCss, buildDataProps } from '../utilities/props'
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.ReactChild[] | React.ReactChild,
13
+ children?: React.Node,
13
14
  icon?: string,
14
15
  }
15
16
 
16
- const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
17
- const {
18
- className,
19
- data = {},
20
- status = 'inactive',
21
- children,
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.tsx'
4
- import ProgressStepItem from '../_progress_step_item.tsx'
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,6 +1,6 @@
1
1
  import React from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.tsx'
3
+ import ProgressStep from '../_progress_step.jsx'
4
4
  import ProgressStepItem from '../_progress_step_item'
5
5
 
6
6
  import Caption from '../../pb_caption/_caption'
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.tsx'
3
+ import ProgressStep from '../_progress_step.jsx'
4
4
  import ProgressStepItem from '../_progress_step_item'
5
5
 
6
6
  import Caption from '../../pb_caption/_caption'
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.tsx'
4
- import ProgressStepItem from '../_progress_step_item.tsx'
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>
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.8.0"
5
- VERSION = "12.8.0.pre.alpha.PLAY645typescriptprogresstep298"
5
+ VERSION = "12.8.0.pre.alpha.PLAY649mapkitstyles299"
6
6
  end
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.PLAY645typescriptprogresstep298
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/_progress_step.tsx
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
- })