playbook_ui 12.3.1 → 12.4.0.pre.alpha.map1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03ffd4e3909a43dd2714dc9758a33fc752497e9094813c57184cfd8eab6c2425
-  data.tar.gz: 5fe6360b001e357d6e211c16e36ec5ddaf30ff5bc6d88d3d07272cd52d305076
+  metadata.gz: cfb56ccfe4d074f937f3852aca075561d3c1bfcc5d17dba3387cd7c83d65e2d3
+  data.tar.gz: 782e95a4369e896264d23ed06aa3abd7b51ac4998cf88a0b196964ccdf95c7b5
 SHA512:
-  metadata.gz: '09002a0c8f9c2983ee3f5e484d75ef119bd874bcd85f39a6b23c8bb5b656b531543525ddbb83c1565eb308517f78c315918583ab5850966e3f5b33ab6583ea4d'
-  data.tar.gz: af4db16c100917ba7fda5be538be2be422610c9bb41b8d6dc58e3ff54763171f6f48a6b6bf2a2302db52904863533b37137c560363cbaf65c148df304c969ec8
+  metadata.gz: e568396ef02503818d31e36846f0bb92c69e0857dd7a7c10b4c8d7de0187cf5adf29c87092f4fc29804efaaa5816e0d08198699843bb6755bedcff83220dd205
+  data.tar.gz: 746452d8c6cffee0eec29e9864283b81d6fc63df8218eee2f5ed5c320916026ca63076f7add17ef57b51a1a0e16dbf600d1ae2dfa5e393e2e4c256c675304bc0

data/app/pb_kits/playbook/_playbook.scss

@@ -61,6 +61,7 @@
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
+@import 'pb_phone_number_input/phone_number_input';
 @import 'pb_pill/pill';
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
@@ -106,4 +107,3 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
-

data/app/pb_kits/playbook/data/menu.yml

@@ -32,6 +32,7 @@ kits:
     - form_group
     - form_pill
     - passphrase
+    - phone_number_input
     - radio
     - rich_text_editor
     - select

data/app/pb_kits/playbook/index.js

@@ -69,6 +69,7 @@ export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'
 export { default as PersonContact } from './pb_person_contact/_person_contact'
+export { default as PhoneNumberInput} from './pb_phone_number_input/_phone_number_input'
 export { default as Pill } from './pb_pill/_pill'
 export { default as ProgressPills } from './pb_progress_pills/_progress_pills'
 export { default as ProgressSimple } from './pb_progress_simple/_progress_simple'
@@ -122,4 +123,7 @@ 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'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'
+
+//Theming
+export {default as mapTheme} from './pb_map/pbMapTheme'

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_dashboard_value/{_dashboard_value.jsx → _dashboard_value.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -11,22 +9,22 @@ import StatValue from '../pb_stat_value/_stat_value'
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   statChange?: {
-    change?: string,
-    value?: string | Number
+    change? : 'increase' | 'decrease' | 'neutral',
+    value?: string | number
   },
   statLabel?: string,
   statValue?: {
     unit?: string,
-    value?: string | Number
+    value?: string | number
   }
 }
 
-const DashboardValue = (props: DashboardValueProps) => {
+const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -53,21 +51,21 @@ const DashboardValue = (props: DashboardValueProps) => {
         className={classes}
         id={id}
     >
-      <If condition={statLabel}>
+      { statLabel && 
         <Body color="light">{statLabel}</Body>
-      </If>
-      <If condition={statValue}>
+      }
+      { statValue && 
         <StatValue
             unit={statValue.unit}
             value={statValue.value}
         />
-      </If>
-      <If condition={statChange}>
+      }
+      { statChange && 
         <StatChange
             change={statChange.change}
             value={statChange.value}
         />
-      </If>
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.jsx → _date_time_stacked.tsx}

@@ -1,6 +1,4 @@
 
-/* @flow */
-
 import React from 'react'
 
 import { buildCss } from '../utilities/props'
@@ -20,7 +18,7 @@ type DateTimeStackedProps = {
   timeZone?: string,
 }
 
-const DateTimeStacked = (props: DateTimeStackedProps) => {
+const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps('Date Time Stacked', ['date'])
 
   const {
@@ -34,7 +32,7 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
 
   return (
     <Flex
-        inline="flex-container"
+        inline={false}
         vertical="stretch"
         {...props}
     >
@@ -44,7 +42,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
             bold
             dark={dark}
             date={date || datetime}
-            timeZone={timeZone}
         />
       </FlexItem>
 
@@ -57,7 +54,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
             className={classes}
             dark={dark}
             date={date || datetime}
-            tag="caption"
             timeZone={timeZone}
         />
       </FlexItem>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -9,17 +9,20 @@ const DateTimeStackedDefault = (props) => (
         {...props}
     />
     <br />
+    <DateTimeStacked
+        datetime={new Date(2018, 2, 20)}
+        {...props}
+    />
+    <br />
     <DateTimeStacked
         datetime={new Date()}
         timeZone="Asia/Tokyo"
-
         {...props}
     />
     <br />
     <DateTimeStacked
         datetime={new Date()}
         timeZone="America/Denver"
-
         {...props}
     />
 

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -5,6 +5,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/animation-curves";
+@import "../tokens/positioning";
 
 
 
@@ -119,6 +120,7 @@
 	position: sticky;
 	top: 0;
 	background-color: $white;
+	z-index: $z_8;
 	}
 
 	// @include pb_card;

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

@@ -1,8 +1,120 @@
 @import "../tokens/typography";
-@import "../tokens/colors"; 
+@import "../tokens/colors";
 @import "../tokens/shadows";
+@import "../tokens/border_radius";
 
-.pb_map {
+[class*="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,8 +1,11 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, 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 },
@@ -10,7 +13,12 @@ type MapProps = {
   className?: string,
   data?: { [key: string]: string },
   id?: string,
-}
+  zoomBtns?: boolean,
+  flyTo?: boolean, 
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
+} & GlobalProps
 
 const Map = (props: MapProps) => {
   const {
@@ -19,6 +27,11 @@ const Map = (props: MapProps) => {
   className,
   data = {},
   id,
+  zoomBtns = false,
+  flyTo = false,
+  zoomInClick,
+  zoomOutClick,
+  flyToClick
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -32,6 +45,33 @@ 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,40 +1,64 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import { Map } from '../../'
-
+import "maplibre-gl/dist/maplibre-gl.css"
 import maplibregl from 'maplibre-gl'
+import mapTheme from '../pbMapTheme'
 
-const MapDefault = () => {
+const MapDefault = (props) => {
 
+  //set Map instance to access from outside useEffect
+  const [mapInstance, setMapInstance] = useState(null)
   const mapContainerRef = useRef(null)
 
-    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 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 }) => {
         //set marker/pin
-        /* 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
+        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
         .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>
+  <Map flyTo
+      flyToClick={()=> {handleFlyTo(mapInstance)}}
+      zoomBtns
+      zoomInClick={() => {handleZoomIn(mapInstance)}}
+      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+      {...props}
+  >
        <div
            ref={mapContainerRef}
            style={{
@@ -44,7 +68,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`
-- 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' />`
+- 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' />`
 - 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. In these doc examples we are using our primary color for the Marker.
+- 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. 
 - `scrollZoom` has been disabled in these doc examples for page usability

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

@@ -2,25 +2,19 @@ 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 = () => {
+const MapWithPlugin = (props) => {
 
   const mapContainerRef = useRef(null)
 
-    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,
-        })
+    //This function should contain all maplibre related code
+    const loadMap = ( { target: map }) => {
         //set marker/pin
         /* eslint-disable-next-line */
         const marker = new maplibregl.Marker({
-          color: "#0056CF",
+          color: mapTheme.marker,
         }).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);
@@ -40,13 +34,21 @@ const MapWithPlugin = () => {
             }
             });
             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>
+  <Map {...props} >
        <div
            ref={mapContainerRef}
            style={{

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

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

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

@@ -0,0 +1,23 @@
+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

data/app/pb_kits/playbook/pb_person/{_person.jsx → _person.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -14,15 +12,15 @@ import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
 
 type PersonProps = {
-  aria?: object,
-  className?: string | array<string>,
-  data?: object,
+  aria?: { [key: string]: string },
+  className?: string | string[],
+  data?: { [key: string]: string },
   firstName: string,
   id?: string,
   lastName: string,
 }
 
-const Person = (props: PersonProps) => {
+const Person = (props: PersonProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -52,13 +50,13 @@ const Person = (props: PersonProps) => {
       >
         {firstName}
       </Body>
-      <If condition={lastName}>
+      {lastName && 
         <Title
             className="pb_person_first"
             size={4}
             text={` ${lastName}`}
         />
-      </If>
+      }
     </div>
   )
 }