RubyGems - playbook_ui - Versions diffs - 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637 - Mend

playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1472) hide show

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

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

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

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

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

@@ -1,74 +0,0 @@
-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 DELETED Viewed

@@ -1,13 +0,0 @@
-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 DELETED Viewed

@@ -1,88 +0,0 @@
-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 DELETED Viewed

@@ -1,8 +0,0 @@
-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 DELETED Viewed

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

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

	@@ -1,2 +0,0 @@
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 DELETED Viewed

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

	@@ -1,2 +0,0 @@
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 DELETED Viewed

@@ -1,76 +0,0 @@
-<%= 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 DELETED Viewed

@@ -1,100 +0,0 @@
-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 DELETED Viewed

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

@@ -1,18 +0,0 @@
-<%= 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 DELETED Viewed

@@ -1,32 +0,0 @@
-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 DELETED Viewed

@@ -1,11 +0,0 @@
-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 DELETED Viewed

	@@ -1,2 +0,0 @@
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/docs/_multi_level_select_default.html.erb DELETED Viewed

@@ -1,72 +0,0 @@
-<% 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
-    }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx DELETED Viewed

@@ -1,86 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-const 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",
-          },
-        ],
-      },
-    ],
-  },
-];
-const MultiLevelSelectDefault = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-default"
-          onSelect={(selectedNodes) =>
-          console.log("Selected Items", selectedNodes)
-          }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  );
-};
-export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md DELETED Viewed

@@ -1,5 +0,0 @@
-The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
-For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
-For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.