playbook_ui 12.27.0.pre.alpha.expandednotworking853 → 12.28.0.pre.alpha.PLAY837MapCustomButton868

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a910f0a34e4b15a05338890da54fbc4127569527ff821e0a1bc1d7798907b7b
-  data.tar.gz: 06da8f4e5abcae0b35ae9bb2bfcbc086fc334b92d8d0f18cdbbb61bd9e69cfbb
+  metadata.gz: a11d84418c9c01374cd74d38a154f76d034ff440cd3a8580ffdace764232279e
+  data.tar.gz: fbf756271614a013e06861498022157b2a6c585f7402a6d14c2c1a34052745cd
 SHA512:
-  metadata.gz: 7231015efe6dd12735a8b4ac07b6596b97ec320e7f13ce29ba67eccbd827f6ba0a3f63f52a76d5bcb29a429bbc9f653ffa0afea79d686976e1ad84b304aea0bc
-  data.tar.gz: 7f57205311d9ff7bb7f5df373d176fc921c917c88ca2fd3d8f413f10294fe214915a34c9dfa63dc57194312c70cb628ea50bb19df5e5b72c1510a1bcb7df2ec9
+  metadata.gz: 366d06de731005646685950b3bd763a791716076d22bb077265dee3ed18727fb7d6eefdc5063e1cb02b4246fee19cf8d692260294fd2c91c422cff8fec7dc0d6
+  data.tar.gz: ca19bd5db001368a141c1fa553313170d5fdc6ec1badb596160027f9c105cb97f7e117f9c3915b8cd039d7e8c0014dac4ba816a93e6f3cdbb90cbdb7860f6cd2

data/app/pb_kits/playbook/index.js

@@ -60,6 +60,7 @@ export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Map} from './pb_map/_map'
+export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

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

@@ -5,6 +5,21 @@
 @import "./_pb_map_button_mixin.scss";
 
 [class*="pb_map"] {
+  .pb_map-custom-button {
+    @include pb_map_button;
+    position: relative;
+    margin-top: $space_xs;
+    box-shadow: $shadow_deep;
+    .pb_icon_kit {
+      width: $space_sm - 2;
+      height: $space_sm;
+    }
+
+    .pb_button_content {
+      height: $space_sm;
+    }
+  }
+
   .mapboxgl-map,
   .maplibregl-map {
     font-family: $font_family_base !important;
@@ -185,7 +200,7 @@
     }
     .map-zoom-in-button,
     .map-zoom-out-button,
-    .map-flyto-button {
+    .map-flyto-button, .pb_map-custom-button {
       @include pb_map_button_dark;
     }
 

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

@@ -3,9 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
-import Flex  from "../pb_flex/_flex"
-import Icon from '../pb_icon/_icon'
-import Button from '../pb_button/_button'
+import MapControls from './_map_controls';
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -47,29 +45,13 @@ const Map = (props: MapProps) => {
     >
       {
         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>
+          <Map.Controls
+          flyTo={flyTo}
+          flyToClick={flyToClick}
+          zoomBtns={zoomBtns}
+          zoomInClick={zoomInClick}
+          zoomOutClick={zoomOutClick}
+          />
          ) : null
       }
       {children}
@@ -77,4 +59,5 @@ const Map = (props: MapProps) => {
   )
 }
 
+Map.Controls = MapControls
 export default Map

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

@@ -0,0 +1,47 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+import Flex from "../pb_flex/_flex";
+
+type MapControlTypes = {
+  zoomBtns?: boolean, 
+  flyTo?: boolean, 
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
+  children?: React.ReactNode | React.ReactNode[]
+}
+
+const MapControls = ({
+  zoomBtns,
+  zoomInClick,
+  zoomOutClick,
+  flyTo,
+  flyToClick,
+  children,
+}: MapControlTypes) => {
+  return (
+    <Flex className="custom-nav-control" orientation="column">
+      {zoomBtns ? (
+        <>
+          <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}
+        </>
+      ) : null}
+      {children}
+    </Flex>
+  );
+};
+
+export default MapControls;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+
+type MapCustomButtonTypes = {
+  onClick?: () => {};
+  icon?: string;
+};
+
+const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
+  return (
+    <Button className="pb_map-custom-button" onClick={onClick}>
+      <Icon icon={icon} />
+    </Button>
+  );
+};
+
+export default MapCustomButton;

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

@@ -0,0 +1,83 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme, MapCustomButton } from '../..'
+import maplibregl from 'maplibre-gl'
+
+const MapWithCustomButton = (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 is called by the useEffect when map instance first loads
+  const loadMap = ( { target: map }) => {
+        //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
+        .addTo(map);
+
+        // 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 
+      {...props}
+  >
+    <Map.Controls flyTo
+        flyToClick={()=> {handleFlyTo(mapInstance)}}
+        zoomBtns
+        zoomInClick={() => {handleZoomIn(mapInstance)}}
+        zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+    >
+      <MapCustomButton icon="home" 
+          onClick={() => alert("button clicked!")}
+      />
+      <MapCustomButton icon="search" 
+          onClick={() => alert("button clicked!")}
+      />
+    </Map.Controls>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0, 
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+
+export default MapWithCustomButton

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

@@ -0,0 +1 @@
+If you want to add custom buttons to the Map, you can use the `MapCustomButton` component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.

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
+  - map_with_custom_button: Map With Custom Button

data/app/pb_kits/playbook/pb_map/docs/index.js

@@ -1,2 +1,3 @@
 export { default as MapDefault } from './_map_default.jsx'
 export { default as MapWithPlugin } from './_map_with_plugin.jsx'
+export {default as MapWithCustomButton} from './_map_with_custom_button.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
 import intlTelInput from 'intl-tel-input'
@@ -64,7 +64,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -111,6 +111,23 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     }
   }, [error, onValidate])
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const showFormattedError = (reason = '') => {
     const countryName = itiInit.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
@@ -201,8 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       allowDropdown: !disabled,
       autoInsertDialCode: false,
       initialCountry,
-      onlyCountries,
-      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
+      onlyCountries
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -242,7 +258,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...wrapperProps}>
       <TextInput
-          ref={inputRef}
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
+            }
+          }
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import { Body, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputAccessInputElement = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
+    useEffect(() => {
+        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
+    }, [])
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <Body text="Click the input field below:" />
+            <PhoneNumberInput
+                id="access-input-element"
+                ref={ref}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputAccessInputElement

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md

@@ -0,0 +1,3 @@
+To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
+
+`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import { Button, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputClearField = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Use clearField() to clear the field.
+    const handleClick = () => {
+        ref.current.clearField()
+    }
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <PhoneNumberInput
+                id="clear-field"
+                ref={ref}
+                {...props}
+            />
+
+            <Button
+                onClick={handleClick}
+                text="Clear the Input Field"
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputClearField

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md

@@ -0,0 +1,3 @@
+To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
+
+`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

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

@@ -6,6 +6,8 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
+  - phone_number_input_clear_field: Clearing the Input Field
+  - phone_number_input_access_input_element: Accessing the Input Element
 
   rails:
   - phone_number_input_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -3,3 +3,5 @@ export { default as PhoneNumberInputPreferredCountries } from './_phone_number_i
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
+export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
+export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    custom_icon: svg_url,
+    title_text: "Customization", 
+    body_text: "Personalize everything",
+    input_id: 1,
+    checked: true,
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+
+const svg = {
+  newChat: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const SelectableCardIconCustom = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Talk to someone you love"
+          checked
+          customIcon={svg.newChat}
+          inputId={1}
+          titleText="New Chat"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconCustom

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

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

@@ -5,10 +5,10 @@ examples:
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
   - selectable_card_icon_options: With Options
-
-
+  - selectable_card_icon_custom: Custom Icon
 
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_custom: Custom Icon

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js

@@ -1,3 +1,4 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
+export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -8,12 +8,14 @@
     value: object.value,
     checked: object.checked,
     disabled: object.disabled,
+    custom_icon: object.custom_icon,
     icon: object.checkmark,
     multi: object.multi,
     dark: object.dark,
     input_options: object.input_options
   }) do %>
     <%= pb_rails("selectable_icon", props: {
+      custom_icon: object.custom_icon,
       icon: object.icon,
       inputs: "disabled",
       text: object.title_text,

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableCardIcon
     class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String
       prop :body_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -5,7 +5,7 @@
 
     <% if object.inputs == "disabled" %>
 
-      <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
+      <%= pb_rails("icon", props: { custom_icon: object.custom_icon, icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableIcon
     class SelectableIcon < Playbook::KitBase
       # Icon props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       # Title text
       prop :text, type: Playbook::Props::String