playbook_ui 12.8.0.pre.alpha.PLAY645typescriptprogresstep297 → 12.8.0.pre.alpha.PLAY649mapkitstyles299

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 283def9e075a0980a2b2087d7e5e97b8c423077dede9ac0a233c92578235289e
-  data.tar.gz: 1e29b357dfb18242784e2603cda7b99faceb8894c7706fef39229dcb0bd4d701
+  metadata.gz: 1a81921a9d8f66328fdf77236a5286c4e3931308805b7e10d452538346c3549f
+  data.tar.gz: fc0d9ab00112ce0c1bd88f37ba2d52da406df628284291e8e89135b03cb20e99
 SHA512:
-  metadata.gz: b631d82e34a76b54112e9e5967d79eff4d1d755122c8d6463118473eb98be618c19d83da7f62d8e6cbfe8b01c8a75d417a89af96ac8836246d8ab29f18961c5d
-  data.tar.gz: dfc3653b07313fdb9304a8ef3b914caded472bfcf5de3347a1d556874056029b88d8fbdb096f75a8ac973a359cfb48fc4b87c6c6c724a05dc533e02b14f00903
+  metadata.gz: 3e03c35c457723e4c219c44fd15e9e9e85215ef4d7803d3f0a91ba77a47073339f60c2c55fa4c8446dcc4bd90b4e2c6030b389eaa60709e18e694439c932079d
+  data.tar.gz: 4911d567f232bb912f4f950984fa0fd39ffef63ec55d1f7f1fc2a1a00a8bf89debf484f485cc88c76ca8ce53bc91fab537aaa9704892f74ad8c951cdb487ab8f

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -17,6 +17,46 @@
       box-shadow: $shadow_deep;
     }
   }
+
+  .mapboxgl-ctrl-attrib.mapboxgl-compact,
+  .maplibregl-ctrl-attrib.maplibregl-compact {
+    background-color: unset;
+  }
+  .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
+  .maplibregl-ctrl-attrib.maplibregl-compact-show {
+    background-color: $card_light;
+    box-shadow: $shadow_deep;
+    color: $text_lt_default;
+  }
+
+  .mapboxgl-ctrl-group:not(:empty),
+  .maplibregl-ctrl-group:not(:empty) {
+    position: absolute;
+    top: 150px;
+    right: $space_xs + 2;
+    margin: unset;
+    box-shadow: unset;
+    border-radius: $border_radius_md;
+
+    .mapbox-gl-draw_ctrl-draw-btn {
+      width: 36px;
+      height: 40px;
+      box-shadow: $shadow_deep;
+      background: $card_light;
+      border: solid 1px $border_light;
+    }
+
+    .mapbox-gl-draw_polygon {
+      border-top-left-radius: $border_radius_md;
+      border-top-right-radius: $border_radius_md;
+    }
+
+    .mapbox-gl-draw_trash {
+      border-bottom-left-radius: $border_radius_md;
+      border-bottom-right-radius: $border_radius_md;
+    }
+  }
+
   .custom-nav-control {
     position: absolute;
     right: $space_xs + 2;
@@ -53,7 +93,7 @@
       align-items: center;
 
       svg {
-        width: $space_xs + 4;
+        width: $space_xs + 6;
         height: $space_sm;
         display: flex;
       }
@@ -116,5 +156,18 @@
         background-color: #221e3d;
       }
     }
+
+    .maplibregl-ctrl-attrib-button {
+      background-color: $text_dk_light;
+    }
+    .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
+    .maplibregl-ctrl-attrib.maplibregl-compact-show {
+      background-color: $bg_dark;
+      box-shadow: $shadow_deep;
+      color: $text_dk_default;
+      a {
+        color: $text_dk_default;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map } from '../../'
+import { Map, mapTheme } from '../../'
 import maplibregl from 'maplibre-gl'
-import mapTheme from '../pbMapTheme'
 
 const MapDefault = (props) => {
 

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -1,28 +1,35 @@
-import React, { useRef, useEffect } from 'react'
-import { Map } from '../../'
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme } from '../../'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import mapTheme from '../pbMapTheme'
 
 const MapWithPlugin = (props) => {
     //set Map instance to access from outside useEffect
+    const [mapInstance, setMapInstance] = useState(null)
     const mapContainerRef = useRef(null)
 
       //Set default position
     const defaultPosition = [-75.379143, 39.831200]
 
+    // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
+  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
+  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
+  const handleFlyTo = (map) => {map.flyTo({
+                                center: defaultPosition,
+                                ... mapTheme.flyToConfig
+                                });}
+
     //This function should contain all maplibre related code
     const loadMap = ( { target: map }) => {
         //set marker/pin
-        /* eslint-disable-next-line */
-        const marker = new maplibregl.Marker({
+        new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
         .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls
-        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        // map.addControl(new maplibregl.NavigationControl({showCompass: false}))
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
@@ -36,12 +43,15 @@ const MapWithPlugin = (props) => {
             }
             });
             map.addControl(draw);
+
+        //set map instance
+        setMapInstance(map)
     }
 
     useEffect(() => {
          new maplibregl.Map({
             container: mapContainerRef.current,
-            center: [-75.379143, 39.831200],
+            center: defaultPosition,
             ...mapTheme.mapConfig
         }).on('load', loadMap)
     }, [])
@@ -49,7 +59,13 @@ const MapWithPlugin = (props) => {
 
     
 return ( 
-  <Map {...props} >
+  <Map flyTo
+      flyToClick={()=> {handleFlyTo(mapInstance)}}
+      zoomBtns
+      zoomInClick={() => {handleZoomIn(mapInstance)}}
+      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+      {...props}
+  >
        <div
            ref={mapContainerRef}
            style={{

data/app/pb_kits/playbook/pb_progress_step/{_progress_step.tsx → _progress_step.jsx}

@@ -1,14 +1,15 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ProgressStepProps = {
-  aria?: { [key: string]: string },
   className?: string,
-  data?: { [key: string]: string },
+  data?: string,
   id?: string,
-  children?: React.ReactChild[] | React.ReactChild,
+  children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   showIcon?: boolean,
@@ -16,21 +17,16 @@ type ProgressStepProps = {
   color?: string,
 }
 
-const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
+const ProgressStep = (props: ProgressStepProps) => {
   const {
-    aria = {},
     className,
     children,
     color,
-    data = {},
     orientation = 'horizontal',
     icon = false,
     showIcon = false,
     variant,
   } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
   const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
@@ -41,11 +37,7 @@ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
   )
 
   return (
-    <ul
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(progressStepCss, globalProps(props), className)}
-    >
+    <ul className={classnames(progressStepCss, globalProps(props), className)}>
       {children}
     </ul>
   )

data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.tsx → _progress_step_item.jsx}

@@ -1,35 +1,29 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
 type ProgressStepItemProps = {
   className?: string,
-  data?: { [key: string]: string },
   status?: "complete" | "active" | "inactive" | "hidden",
-  children?: React.ReactChild[] | React.ReactChild,
+  children?: React.Node,
   icon?: string,
 }
 
-const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
-  const {
-    className,
-    data = {},
-    status = 'inactive',
-    children,
-    icon = 'check',
-  } = props
-
+const ProgressStepItem = ({
+  className,
+  status = 'inactive',
+  children,
+  icon = 'check',
+}: ProgressStepItemProps) => {
   const progressStepItem = buildCss('pb_progress_step_item', status)
-  const dataProps = buildDataProps(data)
 
   return (
-    <li 
-        {...dataProps}
-        className={classnames(progressStepItem, className)}
-    >
+    <li className={classnames(progressStepItem, className)}>
       <div className="box">
         <div className="circle">
           <Icon icon={icon} />
@@ -39,5 +33,4 @@ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
     </li>
   )
 }
-
 export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.tsx'
-import ProgressStepItem from '../_progress_step_item.tsx'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
 
 const ProgressStepDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.tsx'
+import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import ProgressStep from '../_progress_step.tsx'
+import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.tsx'
-import ProgressStepItem from '../_progress_step_item.tsx'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
 
 const ProgressStepVertical = (props) => (
   <div>

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.8.0"
-  VERSION = "12.8.0.pre.alpha.PLAY645typescriptprogresstep297"
+  VERSION = "12.8.0.pre.alpha.PLAY649mapkitstyles299"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.8.0.pre.alpha.PLAY645typescriptprogresstep297
+  version: 12.8.0.pre.alpha.PLAY649mapkitstyles299
 platform: ruby
 authors:
 - Power UX
@@ -1666,9 +1666,9 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
+- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
 - app/pb_kits/playbook/pb_progress_step/_progress_step.scss
-- app/pb_kits/playbook/pb_progress_step/_progress_step.tsx
-- app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
+- app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/_description.md
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
@@ -1683,7 +1683,6 @@ files:
 - app/pb_kits/playbook/pb_progress_step/docs/index.js
 - app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step.rb
-- app/pb_kits/playbook/pb_progress_step/progress_step.test.js
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
 - app/pb_kits/playbook/pb_radio/_radio.scss

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -1,109 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import ProgressStep from './_progress_step.tsx'
-import ProgressStepItem from './_progress_step_item.tsx'
-
-const testId = 'progressStepId'
-const step1Id = 'step1Id'
-const step2Id = 'step2Id'
-const step3Id = 'step3Id'
-
-const ProgressStepTest = () => {
-  return (
-      <>
-        <ProgressStep
-            aria={{ label: testId }}
-            className={'custom-class'}
-            data={{ testid: testId }} 
-        >
-          <ProgressStepItem 
-              data={{ testid: step1Id }} 
-              status="complete"
-          >
-              {'Step 1'}
-          </ProgressStepItem>
-          <ProgressStepItem 
-              data={{ testid: step2Id }} 
-              status="active"
-          >
-              {'Step 2'}
-          </ProgressStepItem>
-          <ProgressStepItem 
-              data={{ testid: step3Id }} 
-              status="inactive"
-          >
-              {'Step 3'}
-          </ProgressStepItem>
-        </ProgressStep>
-      </>
-  )
-}
-
-test('should render custom class and data', () => {
-  render(<ProgressStepTest/>)
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('custom-class')
-})
-
-test('should render aria-label', () => {
-  render(<ProgressStepTest />)
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveAttribute('aria-label', testId)
-})
-
-test('should render the horizontal variant', () => {
-  render(<ProgressStepTest />)
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
-})
-
-test('should render the vertical variant', () => {
-  render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            data={{ testid: testId }} 
-            orientation="vertical"
-        >
-          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_vertical')
-})
-
-test('should render the tracker variant', () => {
-  render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
-})
-
-
-test('should render the children elements', () => {
-  render(<ProgressStepTest />)
-
-  const step1Kit = screen.getByTestId(step1Id)
-  const step2Kit = screen.getByTestId(step2Id)
-  const step3Kit = screen.getByTestId(step3Id)
-  
-  expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
-  expect(step2Kit).toHaveClass('pb_progress_step_item_active')
-  expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
-})