playbook_ui 12.4.0 → 12.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c9cb603d0564380dc76fd27efdc587607430f9e349d5288672a6f44ae9cdd7e
-  data.tar.gz: b677f2dfb9bfe0bfc848018c3a84be1f94af01e87372ff4ba0dbf78a50c0857c
+  metadata.gz: 92319a3771d2aa0a3198e988dc95b91e977ee532db2884cd6197912cb045caae
+  data.tar.gz: caaa026385dd1d94a65175ba00ef818caab6a901c5bb0da90cd24920158e885f
 SHA512:
-  metadata.gz: 5671ee0b58e71684f090dcac6d15c2297d19c071b7f58082badd065319fdf91e27a3884779a8e3c021101515a40c7a9b2c0c07c880b632894faafb23a16322ac
-  data.tar.gz: ea93cf50049661329f814c893e245ceff4d3be4c4bd5ce9264624eafea84d0a82a833d50cebb6e233d90e5e124c60372d68f5516c4ba4269992325b4178e5b86
+  metadata.gz: 7469df006da7d11b70de500123a4d260db2a2c8c0b79ee80766dde6a760eaa81c71b59880aad14ee48a7d9ee91b2c6237e766b8c046a19b088b61830b0e5f2b6
+  data.tar.gz: 7e0f3a0e05f403da3b31e8b21ab01ee92fb4139a5223af663a62f9672ff381009a75cd1a9f30ea57289e28ffda043f23cab7364eae1e54973e9f4922d8884f28

data/app/pb_kits/playbook/index.js

@@ -123,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_date_picker/_date_picker.tsx

@@ -14,7 +14,7 @@ type DatePickerProps = {
   aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   defaultDate?: string,
   disableDate?: number[],
   disableInput?: boolean,
@@ -27,8 +27,8 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: object,
-  inputData?: object,
+  inputAria?: {[key: string]: string},
+  inputData?: {[key: string]: string},
   inputOnChange?: (arg: string) => void,
   inputValue?: any,
   label?: string,
@@ -47,7 +47,7 @@ type DatePickerProps = {
   yearRange?: number[],
 } & GlobalProps
 
-const DatePicker = (props: DatePickerProps) => {
+const DatePicker = (props: DatePickerProps): React.ReactElement => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
@@ -67,7 +67,7 @@ const DatePicker = (props: DatePickerProps) => {
     hideIcon = false,
     hideLabel = false,
     id,
-    inLine = true,
+    inLine = false,
     inputAria,
     inputData,
     inputOnChange,
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
-    onChange = () => {},
+    onChange = () => { void 0 },
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -163,36 +163,40 @@ const DatePicker = (props: DatePickerProps) => {
             value={inputValue}
         />
 
-        {!hideIcon &&
+        { !hideIcon &&
           <div
-          className={iconWrapperClass()}
-          id={`cal-icon-${pickerId}`}
-      >
-        <Icon
-            className="cal_icon"
-            icon="calendar-alt"
-        />
-      </div>
-        }
-          
-
-        { hideIcon && inLine ? <><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-icon-plus`}
-        >
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
+          >
           <Icon
-            className="date-picker-plus-icon"
-            icon="plus" />
-        </div><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-angle-down`}
-        >
-            <Icon
-              className="angle_down_icon"
-              icon="angle-down" />
-          </div></> : null}
-          
+              className="cal_icon"
+              icon="calendar-alt"
+          />
+        </div>
+        }
 
+        { hideIcon && inLine ? 
+          <div>
+            <div
+                className={iconWrapperClass()}
+                id={`${pickerId}-icon-plus`}
+            >
+              <Icon
+                  className="date-picker-plus-icon"
+                  icon="plus"
+              />
+            </div>
+            <div
+                className={iconWrapperClass()}
+                id={`${pickerId}-angle-down`}
+            >
+                <Icon
+                    className="angle_down_icon"
+                    icon="angle-down" 
+                />
+            </div>
+          </div>  
+        : null }
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+
+type LoadingInlineProps = {
+  align?: "left" | "center" | "right",
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const LoadingInline = (props: LoadingInlineProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss(`pb_loading_inline_kit_${align}`),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      <Body color="light">
+        <Icon
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
+
+export default LoadingInline

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import LoadingInline from './_loading_inline'
+
+const testId = "loadingInline"
+
+test('should render custom class and data', () => {
+    render(
+        <LoadingInline
+            className='custom-class'
+            data={{ testid: testId }}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render id', () => {
+    render(
+        <LoadingInline
+            data={{ testid: testId }}
+            id={testId}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should render aria-label', () => {
+    render(
+        <LoadingInline
+            aria={{ label: testId }}
+            data={{ testid: testId }}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})

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,63 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import { Map } from '../../'
-
 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 +67,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' />`
-- To use Maplibre, you must also set a height on the containing div.
+- To include the maplibre css, 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' />`
 - 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.
+- To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example. 
+- Use `mapTheme.marker` to set the Marker color. 
+- To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
 - `scrollZoom` has been disabled in these doc examples for page usability

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

@@ -2,30 +2,26 @@ import React, { useRef, useEffect } from 'react'
 import { Map } from '../../'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import mapTheme from '../pbMapTheme'
 
-const MapWithPlugin = () => {
+const MapWithPlugin = (props) => {
+    //set Map instance to access from outside useEffect
+    const mapContainerRef = useRef(null)
 
-  const mapContainerRef = useRef(null)
+      //Set default position
+    const defaultPosition = [-75.379143, 39.831200]
 
-    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",
-        }).setLngLat([-75.379143, 39.831200])
+          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 zoom controls
+        //add maplibre default zoom controls
         map.addControl(new maplibregl.NavigationControl({showCompass: false}))
 
         // disable map zoom when using scroll
@@ -40,13 +36,20 @@ const MapWithPlugin = () => {
             }
             });
             map.addControl(draw);
-      }
+    }
+
+    useEffect(() => {
+         new maplibregl.Map({
+            container: mapContainerRef.current,
+            center: [-75.379143, 39.831200],
+            ...mapTheme.mapConfig
+        }).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_message/{_message.jsx → _message.tsx}

@@ -13,11 +13,11 @@ import Timestamp from '../pb_timestamp/_timestamp'
 import Title from '../pb_title/_title'
 
 type MessageProps = {
-  aria: object,
+  aria: { [key: string]: string },
   avatarName?: string,
-  avatarStatus?: string,
+  avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
-  children?: array<React.ReactNode> | React.ReactNode,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
   id?: string,
@@ -61,53 +61,53 @@ const Message = (props: MessageProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-      <If condition={shouldDisplayAvatar}>
+      {shouldDisplayAvatar &&
         <Avatar
-            imageUrl={avatarUrl}
-            name={avatarName}
-            size="xs"
-            status={avatarStatus}
+          imageUrl={avatarUrl}
+          name={avatarName}
+          size="xs"
+          status={avatarStatus}
         />
-      </If>
+      }
       <div className="content_wrapper">
         <Flex
-            justify={alignTimestamp === 'left' ? 'none' : 'between'}
-            orientation="row"
+          justify={alignTimestamp === 'left' ? 'none' : 'between'}
+          orientation="row"
         >
-          <If condition={label}>
+          {label &&
             <Title
-                className="message_title"
-                size={4}
-                text={label}
+              className="message_title"
+              size={4}
+              text={label}
             />
-          </If>
+          }
           <Timestamp
-              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-              text={timestamp}
-              timezone={timezone}
+            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+            text={timestamp}
+            timestamp={''}
+            timezone={timezone}
           />
-          <If condition={timestampObject}>
+          {timestampObject &&
             <Timestamp
-                className={`pull-${alignTimestamp} message_timestamp`}
-                timestamp={timestampObject}
-                timezone={timezone}
+              className={`pull-${alignTimestamp} message_timestamp`}
+              text={''}
+              timestamp={timestampObject}
+              timezone={timezone}
             />
-          </If>
+          }
         </Flex>
-        <If condition={message}>
+        {message &&
           <Body
-              className="pb_message_body"
-              text={message}
+            className="pb_message_body"
+            text={message}
           />
-        </If>
-        <If condition={children}>
-          { children }
-        </If>
+        }
+        {children}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_message/message.test.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Message from './_message'
+import Image from './../pb_image/_image'
+
+const testId = "message"
+
+const MessageDefault = () => {
+    return (
+        <>
+            <Message
+                avatarName="Becca Jacobs"
+                avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+                className='custom-class'
+                data={{ testid: testId }}
+                label="Lucille Sanchez"
+                message="Application for Kate Smith is waiting for your approval"
+                timestamp="2 days ago"
+            >
+                <Image
+                    alt="picture of a misty forest"
+                    size="md"
+                    url="https://unsplash.it/500/400/?image=634"
+                />
+            </Message>
+        </>
+    )
+}
+
+test('should render message', () => {
+    render(<MessageDefault />)
+
+    const kit = screen.getByText('Application for Kate Smith is waiting for your approval')
+    expect(kit).toBeInTheDocument()
+})
+
+test('should render label', () => {
+    render(<MessageDefault />)
+
+    const kit = screen.getByText('Lucille Sanchez')
+    expect(kit).toBeInTheDocument()
+})
+
+test('should render timestamp', () => {
+    render(<MessageDefault />)
+
+    const kit = screen.getByText('2 days ago')
+    expect(kit).toBeInTheDocument()
+})
+
+test('should render custom class and data', () => {
+    render(<MessageDefault />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render a children', () => {
+    render(<MessageDefault />)
+
+    const kit = screen.getByAltText('picture of a misty forest')
+    expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx}

@@ -15,7 +15,7 @@ import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
 
 type PassphraseProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
   data?: object,
@@ -23,7 +23,7 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
-  onChange: (String) => void,
+  onChange: (inputValue: String) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -40,7 +40,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => {},
+    onChange = () => { },
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -62,11 +62,11 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   const toggleShowPopover = () => setShowPopover(!showPopover)
-  const handleShouldClosePopover = (shouldClosePopover) => {
+  const handleShouldClosePopover = (shouldClosePopover: boolean) => {
     setShowPopover(!shouldClosePopover)
   }
 
-  const toggleShowPassphrase = (e) => {
+  const toggleShowPassphrase = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
     setShowPassphrase(!showPassphrase)
   }
@@ -86,54 +86,54 @@ const Passphrase = (props: PassphraseProps) => {
 
   const popoverReference = (
     <CircleIconButton
-        className={tipClass}
-        dark={dark}
-        icon="info-circle"
-        onClick={toggleShowPopover}
-        variant="link"
+      className={tipClass}
+      dark={dark}
+      icon="info-circle"
+      onClick={toggleShowPopover}
+      variant="link"
     />
   )
 
   return (
-    <div 
-        {...ariaProps} 
-        {...dataProps} 
-        className={classes} 
-        id={id}
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <label>
         <Flex align="baseline">
-          <Caption 
-              className="passphrase-label" 
-              text={label} 
+          <Caption
+            className="passphrase-label"
+            text={label}
           />
-          <If condition={tips.length > 0 && !confirmation}>
+          {tips.length > 0 && !confirmation &&
             <PbReactPopover
-                className="passphrase-tips"
-                closeOnClick="outside"
-                placement="right"
-                reference={popoverReference}
-                shouldClosePopover={handleShouldClosePopover}
-                show={showPopover}
+              className="passphrase-tips"
+              closeOnClick="outside"
+              placement="right"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClosePopover}
+              show={showPopover}
             >
-              <Flex 
-                  align="center" 
-                  orientation="column"
+              <Flex
+                align="center"
+                orientation="column"
               >
-                <Caption 
-                    marginBottom="xs" 
-                    text="Tips for a good passphrase" 
+                <Caption
+                  marginBottom="xs"
+                  text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
-                    <Caption 
-                        key={i} 
-                        marginBottom="xs" 
-                        size="xs"
+                    <Caption
+                      key={i}
+                      marginBottom="xs"
+                      size="xs"
                     >
-                      <Icon 
-                          icon="shield-check" 
-                          marginRight="xs" 
+                      <Icon
+                        icon="shield-check"
+                        marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -141,34 +141,34 @@ const Passphrase = (props: PassphraseProps) => {
                 </div>
               </Flex>
             </PbReactPopover>
-          </If>
+          }
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-              className="passphrase-text-input"
-              dark={dark}
-              marginBottom="xs"
-              onChange={handleChange}
-              placeholder="Enter a passphrase..."
-              type={showPassphrase ? "text" : "password"}
-              value={displayValue}
-              {...inputProps}
+            className="passphrase-text-input"
+            dark={dark}
+            marginBottom="xs"
+            onChange={handleChange}
+            placeholder="Enter a passphrase..."
+            type={showPassphrase ? "text" : "password"}
+            value={displayValue}
+            {...inputProps}
           />
-          <span 
-              className="show-passphrase-icon" 
-              onClick={toggleShowPassphrase}
+          <span
+            className="show-passphrase-icon"
+            onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? "hide-icon" : ""}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "hide-icon" : ""}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? "" : "hide-icon"}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "" : "hide-icon"}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye" />
             </Body>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "hello"
+}) %>

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

@@ -5,3 +5,6 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+
+  rails:
+  - phone_number_input_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb

@@ -0,0 +1,15 @@
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
+
+<script>
+  const formatToGlobalCountryName = () => {
+    return countryName.split('(')[0].trim()
+  }
+  
+  const formatAllCountries = () => {
+    let countryData = window.intlTelInputGlobals.getCountryData()
+    for (let i = 0; i < countryData.length; i++) {
+      let country = countryData[i]
+      country.name = formatToGlobalCountryName(country.name)
+    }
+  }
+  </script>

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPhoneNumberInput
+    class PhoneNumberInput < Playbook::KitBase
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :initial_country, type: Playbook::Props::String,
+                             default: ""
+      prop :is_valid
+      prop :label, type: Playbook::Props::String,
+                   default: ""
+      prop :name, type: Playbook::Props::String,
+                  default: ""
+      prop :onchange
+      prop :only_countries, type: Playbook::Props::Array,
+                            default: []
+      prop :preferred_countries, type: Playbook::Props::Array,
+                                 default: []
+      prop :value, type: Playbook::Props::String,
+                   default: ""
+
+      def classname
+        generate_classname("pb_phone_number_input")
+      end
+
+      def phone_number_input_options
+        {
+          id: id,
+          disabled: disabled,
+          initialCountry: initial_country,
+          isValid: is_valid,
+          label: label,
+          name: name,
+          onChange: onchange,
+          onlyCountries: only_countries,
+          preferredCountries: preferred_countries,
+          value: value,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -28,9 +28,9 @@ type PbPopoverProps = {
   offset?: boolean;
   reference: PopperReference & any;
   show?: boolean;
-  shouldClosePopover?: (arg0: boolean) => boolean | boolean;
-} & GlobalProps &
-  PopperProps<any>;
+  shouldClosePopover?: (arg0: boolean) => void;
+} & GlobalProps & Omit<PopperProps<any>, 'children'>
+& { children?: React.ReactChild[] | React.ReactChild }
 
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -8,7 +8,7 @@
       background-color: $bg_light;
     }
     &[class*=checked_item] {
-      background-color: $bg_light;
+      background-color: $active_light;
     }
   }
   [class^=pb_radio_kit] {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -183,6 +183,10 @@
   }
  
   .typeahead-kit-select__menu {
+    .typeahead-kit-select__menu-list {
+      padding: 0;
+    }
+
     .typeahead-kit-select__option {
       &.typeahead-kit-select__option--is-focused {
         background-color: $hover_light;

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -17,6 +17,7 @@ import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
 import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
+import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
 
 WebpackerReact.registerComponents({
   BarGraph,
@@ -33,6 +34,7 @@ WebpackerReact.registerComponents({
   TreemapChart,
   Typeahead,
   Gauge,
+  PhoneNumberInput
 })
 
 ujs.setup(

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.3.1"
-  VERSION = "12.4.0"
+  PREVIOUS_VERSION = "12.4.0"
+  VERSION = "12.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.4.0
+  version: 12.5.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-20 00:00:00.000000000 Z
+date: 2023-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1379,8 +1379,8 @@ files:
 - app/pb_kits/playbook/pb_list/item.rb
 - app/pb_kits/playbook/pb_list/list.html.erb
 - app/pb_kits/playbook/pb_list/list.rb
-- app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx
 - app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss
+- app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_description.md
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx
@@ -1388,6 +1388,7 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
+- app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
 - app/pb_kits/playbook/pb_logistic/_logistic.jsx
 - app/pb_kits/playbook/pb_map/_map.scss
 - app/pb_kits/playbook/pb_map/_map.tsx
@@ -1398,8 +1399,9 @@ 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_message/_message.jsx
+- app/pb_kits/playbook/pb_map/pbMapTheme.ts
 - app/pb_kits/playbook/pb_message/_message.scss
+- app/pb_kits/playbook/pb_message/_message.tsx
 - app/pb_kits/playbook/pb_message/_message_mixins.scss
 - app/pb_kits/playbook/pb_message/docs/_description.md
 - app/pb_kits/playbook/pb_message/docs/_footer.md
@@ -1412,6 +1414,7 @@ files:
 - app/pb_kits/playbook/pb_message/docs/index.js
 - app/pb_kits/playbook/pb_message/message.html.erb
 - app/pb_kits/playbook/pb_message/message.rb
+- app/pb_kits/playbook/pb_message/message.test.js
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
 - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
@@ -1496,8 +1499,8 @@ files:
 - app/pb_kits/playbook/pb_pagination/docs/example.yml
 - app/pb_kits/playbook/pb_pagination/pagination.html.erb
 - app/pb_kits/playbook/pb_pagination/pagination.rb
-- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
+- app/pb_kits/playbook/pb_passphrase/_passphrase.tsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
@@ -1555,6 +1558,7 @@ files:
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
@@ -1565,6 +1569,8 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
+- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js
 - app/pb_kits/playbook/pb_phone_number_input/types.d.ts
 - app/pb_kits/playbook/pb_pill/_pill.scss

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -1,37 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
-type LoadingInlineProps = {
-  align?: "left" | "center" | "right",
-  className?: string,
-  dark?: boolean,
-  data?: string,
-  id?: string,
-}
-
-const LoadingInline = (props: LoadingInlineProps) => {
-  const { align = 'left' } = props
-  return (
-    <div
-        className={classnames(`pb_loading_inline_kit_${align}`, globalProps(props))}
-    >
-      <Body color="light">
-        <Icon
-            aria={{ label: 'loading icon' }}
-            fixedWidth
-            icon="spinner"
-            pulse
-        />
-        {' Loading'}
-      </Body>
-    </div>
-  )
-}
-
-export default LoadingInline