RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

Files changed (1479) hide show

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml ADDED Viewed

@@ -0,0 +1,9 @@
+examples:
+  rails:
+  - loading_inline_light: Light
+  react:
+  - loading_inline_light: Default

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as LoadingInlineLight } from './_loading_inline_light.jsx'

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

@@ -0,0 +1,74 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme } from '../../'
+import maplibregl from 'maplibre-gl'
+const MapDefault = (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 flyTo
+      flyToClick={()=> {handleFlyTo(mapInstance)}}
+      zoomBtns
+      zoomInClick={() => {handleZoomIn(mapInstance)}}
+      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+      {...props}
+  >
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+export default MapDefault

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

@@ -0,0 +1,13 @@
+This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found [here](https://maplibre.org/maplibre-gl-js-docs/api/).
+Basic setup to start using MapLibre:
+- Install the npm package using `yarn add maplibre-gl`
+- 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__ :
+- 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 ADDED Viewed

@@ -0,0 +1,88 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme } from '../../'
+import maplibregl from 'maplibre-gl'
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+const MapWithPlugin = (props) => {
+    //set Map instance to access from outside useEffect
+    const [mapInstance, setMapInstance] = useState(null)
+    const mapContainerRef = useRef(null)
+      //Set default position
+    const defaultPosition = [-75.379143, 39.831200]
+    // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
+  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
+  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
+  const handleFlyTo = (map) => {map.flyTo({
+                                center: defaultPosition,
+                                ... mapTheme.flyToConfig
+                                });}
+    //This function should contain all maplibre related code
+    const loadMap = ( { target: map }) => {
+        //set marker/pin
+        new maplibregl.Marker({
+          color: mapTheme.marker,
+        }).setLngLat(defaultPosition)
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+        //add maplibre default zoom controls
+        // map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        // disable map zoom when using scroll
+        map.scrollZoom.disable();
+        //Add polygon draw button using map-box-gl-draw plugin
+        var draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+            polygon: true,
+            trash: true
+            }
+            });
+            map.addControl(draw);
+        //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}
+  >
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+export default MapWithPlugin

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md ADDED Viewed

@@ -0,0 +1,8 @@
+Various plugins are available for use with MapLibre, one of which is the [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw). This plugin is recommended by MapLibre if you need to add the functionality of drawing polygons on the map.
+To test this tool:
+- Click the "draw box" icon to activate the polygon tool
+- Click on a spot on the map to start drawing
+- Continue clicking to create new points, defining the boundaries of the polygon
+- Press enter or re-click the first point to finish the polygon
+- Once drawn, polygons can be selected on click and then moved, by dragging-and-dropping the entire shape; resized, by dragging-and-dropping any boundary point(s); or deleted, by clicking the "trash" button.

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

@@ -0,0 +1,6 @@
+examples:
+  react:
+  - map_default: Default
+  - map_with_plugin: Map With Polygon Draw Plugin

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

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

data/app/pb_kits/playbook/pb_message/docs/_description.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.

data/app/pb_kits/playbook/pb_message/docs/_footer.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ ## Things To Avoid
2	+ Avoid changing the format of this kit. Keep the layout true to its original design.

data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb ADDED Viewed

@@ -0,0 +1,76 @@
+<%= pb_rails("message", props: {
+  label: "Anna Black",
+  message: "How can we assist you today?",
+  timestamp: "20 seconds ago",
+  avatar_name: "Mike Bishop",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  avatar_status: "online"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Patrick Welch",
+  message: "We'll escalate this issue to a Senior Support agent.",
+  timestamp: "9 minutes ago",
+  avatar_name: "Wade Winningham",
+  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
+  align_timestamp: "left"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Lucille Sanchez",
+  message: "Application for Kate Smith is waiting for your approval",
+  timestamp: "4 hours ago",
+  avatar_name: "Becca Jacobs",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Beverly Reyes",
+  message: "We're so sorry you had a bad experience!",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Keith Craig",
+  message: "Please hold for one moment, I'll check with my manager.",
+  timestamp: "2 days ago"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "",
+  message: "We're so sorry you had a bad experience!",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "",
+  message: "Please hold for one moment, I'll check with my manager.",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx ADDED Viewed

@@ -0,0 +1,100 @@
+import React from 'react'
+import Message from '../_message'
+import Image from '../../pb_image/_image'
+const MessageDefault = (props) => {
+  return (
+    <div>
+      <Message
+          avatarName="Mike Bishop"
+          avatarStatus="online"
+          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
+          label="Anna Black"
+          message="How can we assist you today?"
+          timestamp="20 seconds ago"
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          alignTimestamp="left"
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Patrick Welch"
+          message="We will escalate this issue to a Senior Support agent."
+          timestamp="9 minutes ago"
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          avatarName="Becca Jacobs"
+          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+          label="Lucille Sanchez"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="2 days ago"
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          avatarName="Timothy Wenhold"
+          label="Beverly Reyes"
+          message="We are so sorry you had a bad experience!"
+          timestamp="2 days ago"
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          label="Keith Craig"
+          timestamp="2 days ago"
+          {...props}
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
+      <br />
+      <br />
+      <Message
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
+          {...props}
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
+    </div>
+  )
+}
+export default MessageDefault

data/app/pb_kits/playbook/pb_message/docs/_message_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<%= pb_rails("message", props: {
+  label: "Anna Black",
+  message: "Hover over me to check out the real time I was made!",
+  timestamp: "4 hours ago",
+  timestamp_object: DateTime.current,
+  avatar_name: "Lisa Thompson",
+  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  timestamp: "12.20p",
+  align_timestamp: "left",
+  timestamp_object: DateTime.current,
+  avatar_name: "Lisa Thompson",
+  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
+}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx ADDED Viewed

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Message } from '../../'
+const MessageTimestamp = (props) => {
+  return (
+    <>
+      <Message
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Anna Black"
+          message="We will escalate this issue to a Senior Support agent."
+          timestamp="9 minutes ago"
+          timestampObject={new Date}
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          alignTimestamp="left"
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Becca Jacobs"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="12.20p"
+          timestampObject={new Date}
+          {...props}
+      />
+    </>
+  )
+}
+export default MessageTimestamp

data/app/pb_kits/playbook/pb_message/docs/example.yml ADDED Viewed

@@ -0,0 +1,11 @@
+examples:
+  rails:
+  - message_default: Default
+  - message_timestamp: With Timestamp Hover
+  react:
+  - message_default: Default
+  - message_timestamp: With Timestamp Hover

data/app/pb_kits/playbook/pb_message/docs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as MessageDefault } from './_message_default.jsx'
2	+ export { default as MessageTimestamp } from './_message_timestamp.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED Viewed

@@ -36,10 +36,9 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
-      transform: rotate(135deg);
       font-size: 0.5em;
-      transform: rotate(-45deg);
+      transform: rotate(45deg);
       top: 12px;
     }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt } from "./helper_functions";
+import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
 import MultiSelectHelper from "./_multi_select_helper";
 type MultiLevelSelectProps = {
@@ -42,17 +42,31 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems);
+          checkIt(item, selectedItems, setSelectedItems, false);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems);
+          unCheckIt(item, selectedItems, setSelectedItems, false);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems);
+            checkIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+              parents.forEach((item:string) => {
+               const ancestor = findItemById(formattedData,item)
+               ancestor.expanded = true
+              });
+             }
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems);
+            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+             parents.forEach((item:string) => {
+              const ancestor = findItemById(formattedData,item)
+              ancestor.expanded = true
+             });
+            }
           }
         }
       }
@@ -92,17 +106,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[],
+          selectedNodes: { [key: string]: any }[],
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData]);
+  }, [formattedData])
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb ADDED Viewed

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  }] %>
+<%= pb_rails("multi_level_select", props: {
+    id: "default-multi-level-select",
+    tree_data:treeData
+    }) %>