playbook_ui 12.4.0.pre.alpha.map1 → 12.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfb56ccfe4d074f937f3852aca075561d3c1bfcc5d17dba3387cd7c83d65e2d3
-  data.tar.gz: 782e95a4369e896264d23ed06aa3abd7b51ac4998cf88a0b196964ccdf95c7b5
+  metadata.gz: 4c9cb603d0564380dc76fd27efdc587607430f9e349d5288672a6f44ae9cdd7e
+  data.tar.gz: b677f2dfb9bfe0bfc848018c3a84be1f94af01e87372ff4ba0dbf78a50c0857c
 SHA512:
-  metadata.gz: e568396ef02503818d31e36846f0bb92c69e0857dd7a7c10b4c8d7de0187cf5adf29c87092f4fc29804efaaa5816e0d08198699843bb6755bedcff83220dd205
-  data.tar.gz: 746452d8c6cffee0eec29e9864283b81d6fc63df8218eee2f5ed5c320916026ca63076f7add17ef57b51a1a0e16dbf600d1ae2dfa5e393e2e4c256c675304bc0
+  metadata.gz: 5671ee0b58e71684f090dcac6d15c2297d19c071b7f58082badd065319fdf91e27a3884779a8e3c021101515a40c7a9b2c0c07c880b632894faafb23a16322ac
+  data.tar.gz: ea93cf50049661329f814c893e245ceff4d3be4c4bd5ce9264624eafea84d0a82a833d50cebb6e233d90e5e124c60372d68f5516c4ba4269992325b4178e5b86

data/app/pb_kits/playbook/index.js

@@ -123,7 +123,4 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
-export { default as dialogHelper } from './pb_dialog/dialogHelper'
-
-//Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -27,9 +27,9 @@ type ButtonPropTypes = {
   size?: 'sm' | 'md' | 'lg',
   text?: string,
   type?: 'inline' | null,
-  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  htmlType: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link',
+  variant: 'primary' | 'secondary' | 'link',
   wrapperClass?: string,
 } & GlobalProps
 

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

@@ -1,120 +1,8 @@
 @import "../tokens/typography";
-@import "../tokens/colors";
+@import "../tokens/colors"; 
 @import "../tokens/shadows";
-@import "../tokens/border_radius";
 
-[class*="pb_map"] {
+.pb_map {
   font-family: $font_family_base !important;
 
-  .maplibregl-ctrl-attrib-button {
-    &:focus {
-      box-shadow: unset;
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 1px $primary_action;
-    }
-    &:hover {
-      box-shadow: $shadow_deep;
-    }
-  }
-  .custom-nav-control {
-    position: absolute;
-    right: $space_xs + 2;
-    top: $space_xs + 2;
-    z-index: 2;
-
-    .custom-nav-control-zoom {
-      border-radius: $border_radius_md;
-      box-shadow: $shadow_deep;
-      background: $card_light;
-      .map-zoom-in-button {
-        border-bottom-left-radius: unset;
-        border-bottom-right-radius: unset;
-        border-bottom: transparent;
-      }
-      .map-zoom-out-button {
-        border-top-left-radius: unset;
-        border-top-right-radius: unset;
-      }
-    }
-
-    .map-zoom-in-button,
-    .map-zoom-out-button,
-    .map-flyto-button {
-      border: solid 1px $border_light;
-      cursor: pointer;
-      padding: $space_xs + 2;
-      text-align: center;
-      color: $text_lt_light;
-      background-color: $card_light;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        width: $space_xs + 4;
-        height: $space_sm;
-        display: flex;
-      }
-
-      &:hover {
-        background-color: darken($bg_light, 2%);
-      }
-
-      &:focus-visible {
-        border: solid 1px $primary_action;
-        box-shadow: unset;
-      }
-    }
-
-    .map-flyto-button {
-      border-radius: $border_radius_md;
-      margin-top: $space_xs;
-      box-shadow: $shadow_deep;
-      background-color: $card_light;
-    }
-  }
-
-  .maplibregl-popup-content {
-    padding: $space_sm;
-    background-color: $card_light;
-    box-shadow: $shadow_deeper;
-  }
-
-  &.dark {
-    .maplibregl-canvas {
-      filter: invert(100%) brightness(175%) contrast(80%) sepia(50%) saturate(2)
-        hue-rotate(185deg);
-    }
-
-    .pb_section_separator_kit_card_horizontal::after {
-      background: $border_dark;
-    }
-    .custom-nav-control-zoom {
-      border: solid 1px #0a0527;
-      background: $bg_dark;
-    }
-
-    .maplibregl-popup-content {
-      background-color: $bg_dark;
-      color: $text_dk_default;
-    }
-
-    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
-    .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
-      border-top-color: $bg_dark;
-    }
-    .map-zoom-in-button,
-    .map-zoom-out-button,
-    .map-flyto-button {
-      color: $text_dk_default;
-      background-color: $bg_dark;
-      border-color: $border_dark;
-
-      &:hover {
-        background-color: #221e3d;
-      }
-    }
-  }
 }

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

@@ -1,11 +1,8 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
-import Flex  from "../pb_flex/_flex"
-import Icon from '../pb_icon/_icon'
-import Button from '../pb_button/_button'
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -13,12 +10,7 @@ type MapProps = {
   className?: string,
   data?: { [key: string]: string },
   id?: string,
-  zoomBtns?: boolean,
-  flyTo?: boolean, 
-  zoomInClick?: () => {},
-  zoomOutClick?: () => {},
-  flyToClick?: () => {},
-} & GlobalProps
+}
 
 const Map = (props: MapProps) => {
   const {
@@ -27,11 +19,6 @@ const Map = (props: MapProps) => {
   className,
   data = {},
   id,
-  zoomBtns = false,
-  flyTo = false,
-  zoomInClick,
-  zoomOutClick,
-  flyToClick
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -45,33 +32,6 @@ const Map = (props: MapProps) => {
         className={classes}
         id={id}
     >
-      {
-        zoomBtns ? (
-          <Flex className="custom-nav-control" orientation='column'>
-            <div className="custom-nav-control-zoom">
-              <Button className='map-zoom-in-button'
-                  onClick={zoomInClick}
-              >
-                    <Icon icon="plus"/>
-              </Button>
-              <Button className='map-zoom-out-button'
-                 onClick={zoomOutClick}
-              >
-                    <Icon icon="minus"/>
-              </Button>
-            </div>
-            {
-              flyTo ? (
-                <Button className='map-flyto-button'
-                  onClick={flyToClick}
-                >
-                      <Icon icon="eye"/>
-                </Button>
-              ) : null
-            }
-         </Flex>
-         ) : null
-      }
       {children}
     </div>
   )

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

@@ -1,64 +1,40 @@
-import React, { useRef, useEffect, useState } from 'react'
+import React, { useRef, useEffect } from 'react'
 import { Map } from '../../'
-import "maplibre-gl/dist/maplibre-gl.css"
+
 import maplibregl from 'maplibre-gl'
-import mapTheme from '../pbMapTheme'
 
-const MapDefault = (props) => {
+const MapDefault = () => {
 
-  //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 is called by the useEffect when map instance first loads
-  const loadMap = ( { target: map }) => {
+    useEffect(() => {
+      if (!maplibregl.supported()) {
+        alert('Your browser does not support MapLibre GL');
+        } else {
+         const map = new maplibregl.Map({
+            container: mapContainerRef.current,
+            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+            center: [-75.379143, 39.831200],
+            zoom: 13,
+        })
         //set marker/pin
-        new maplibregl.Marker({
-          color: mapTheme.marker,
-        }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        /* eslint-disable-next-line */
+        const marker = new maplibregl.Marker({
+          color: "#0056CF",
+        }).setLngLat([-75.379143, 39.831200])
+        .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 zoom controls
+        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-        
-        //add attributioncontrols
-        map.addControl(new maplibregl.AttributionControl({
-          compact: true
-          }));
-
-        //set map instance
-        setMapInstance(map)
-  }
-
-    useEffect(() => {
-         new maplibregl.Map({
-            container: mapContainerRef.current,
-            center: defaultPosition,
-            ...mapTheme.mapConfig
-        }).on('load', loadMap)
 
+      }
     }, [])
-
 return ( 
-  <Map flyTo
-      flyToClick={()=> {handleFlyTo(mapInstance)}}
-      zoomBtns
-      zoomInClick={() => {handleZoomIn(mapInstance)}}
-      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
-      {...props}
-  >
+  <Map>
        <div
            ref={mapContainerRef}
            style={{
@@ -68,7 +44,7 @@ return (
               top: 0, 
               bottom: 0,
            }}
-       />
+        />
     </Map>
 )
 }

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

@@ -2,12 +2,12 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
 
 Basic setup to start using MapLibre:
 - Install the npm package using `yarn add maplibre-gl`
-- import the maplibre-gl CSS using `import "maplibre-gl/dist/maplibre-gl.css"` OR 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");`
- 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' />`
+- 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");`
+ 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' />`
 - To use Maplibre, you must also set a height on the containing div.
 - You can now use MapLibre within the Map Kit as shown in this example.
 
 __Notes__ : 
-- The MapLibre Marker allows us to pass it a HEX value as a color prop but for Playbook styling we recommend importing our `MapTheme` file and passing `mapTheme.marker` to the Marker color prop.
-- To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example. 
+- The MapLibre Marker allows us to pass it a HEX value as a color prop. In these doc examples we are using our primary color for the Marker.
 - `scrollZoom` has been disabled in these doc examples for page usability

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

@@ -2,19 +2,25 @@ import React, { useRef, useEffect } from 'react'
 import { Map } from '../../'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
-import mapTheme from '../pbMapTheme'
 
-const MapWithPlugin = (props) => {
+const MapWithPlugin = () => {
 
   const mapContainerRef = useRef(null)
 
-    //This function should contain all maplibre related code
-    const loadMap = ( { target: map }) => {
+    useEffect(() => {
+      if (!maplibregl.supported()) {
+        alert('Your browser does not support MapLibre GL');
+        } else {
+         const map = new maplibregl.Map({
+            container: mapContainerRef.current,
+            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+            center: [-75.379143, 39.831200],
+            zoom: 13,
+        })
         //set marker/pin
         /* eslint-disable-next-line */
         const marker = new maplibregl.Marker({
-          color: mapTheme.marker,
+          color: "#0056CF",
         }).setLngLat([-75.379143, 39.831200])
         .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
@@ -34,21 +40,13 @@ const MapWithPlugin = (props) => {
             }
             });
             map.addControl(draw);
-    }
-
-    useEffect(() => {
-         new maplibregl.Map({
-            container: mapContainerRef.current,
-            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
-            center: [-75.379143, 39.831200],
-            zoom: 13,
-        }).on('load', loadMap)
+      }
     }, [])
 
 
     
 return ( 
-  <Map {...props} >
+  <Map>
        <div
            ref={mapContainerRef}
            style={{

data/app/pb_kits/playbook/pb_map/docs/example.yml

@@ -4,3 +4,4 @@ examples:
   react:
   - map_default: Default
   - map_with_plugin: Map With Polygon Draw Plugin
+  

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.4.0"
-  VERSION = "12.4.0.pre.alpha.map1"
+  PREVIOUS_VERSION = "12.3.1"
+  VERSION = "12.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.4.0.pre.alpha.map1
+  version: 12.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-24 00:00:00.000000000 Z
+date: 2023-02-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1398,7 +1398,6 @@ files:
 - app/pb_kits/playbook/pb_map/docs/example.yml
 - app/pb_kits/playbook/pb_map/docs/index.js
 - app/pb_kits/playbook/pb_map/map.test.jsx
-- app/pb_kits/playbook/pb_map/pbMapTheme.ts
 - app/pb_kits/playbook/pb_message/_message.jsx
 - app/pb_kits/playbook/pb_message/_message.scss
 - app/pb_kits/playbook/pb_message/_message_mixins.scss
@@ -2423,9 +2422,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_map/pbMapTheme.ts

@@ -1,23 +0,0 @@
-import colors from '../tokens/exports/_colors.scss'
-
-const mapTheme = {
-    marker : colors.primary_action,
-    maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
-    flyToConfig: {
-        zoom: 13,
-        bearing: 0,
-        curve: 1.42, // change the speed at which it zooms
-               easing: function (t: any) {
-                return t;
-                },
-        essential: true
-    },
-    zoomConfig: { duration:1000 },
-    mapConfig: {
-            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
-            zoom: 13,
-            attributionControl: false,
-    }
-}
-
-export default mapTheme