playbook_ui 12.29.0 → 12.30.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d6b07b61b7b29b66f8649816faa1c0cf9f658df0f80ca5c580541f384efe3e3
-  data.tar.gz: af3e2140059844f20d5289e2d56ba87d26c0df0fc2061a271648a2b26d913171
+  metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
+  data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
 SHA512:
-  metadata.gz: e3154d4f0a1cbc50826fc27e321bb09debfa07735a91b31fe9c99a459b979585a349242bc2f88e12e3d149d8c87c378e1a99faa6872969af257f84df7c1ad1fc
-  data.tar.gz: 5f8e5f58faaaaac3bdc5a97f09cbe21765f2159918d5047825589dbac05a7c71d7321874867d64963c71910f343a93b7298a38af00dcab42e4e50e09e918525e
+  metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
+  data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -93,10 +93,23 @@ const Icon = (props: IconProps) => {
     className
   )
 
+  const classesEmoji = classnames(
+    'pb_icon_kit',
+    globalProps(props),
+    'icon_circle_emoji',
+    className
+  )
+
   aria.label ? null : aria.label = `${icon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
 
+  const isValidEmoji = (emoji: string) => {
+    // Using regular expression to check if the string is a valid emoji/emoji Unicode
+    const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+    return emojiRegex.test(emoji);
+  };
+
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
     if (customIcon)
@@ -111,6 +124,19 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
+    else if (isValidEmoji(icon))
+      return (
+        <>
+          <span
+              {...dataProps}
+              className={classesEmoji}
+              id={id}
+          >
+            {icon}
+          </span>
+        </>
+      )
+
     else
       return (
         <>
@@ -134,4 +160,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,5 +1,7 @@
 <% if object.custom_icon %>
   <%= object.render_svg(object.custom_icon) %>
+<% elsif object.valid_emoji(object.icon) %>
+  <span class="pb_icon_kit icon_circle_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -38,6 +38,11 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
+      def valid_emoji(icon)
+        emoji_regex = /\p{Emoji}/
+        emoji_regex.match?(icon)
+      end
+
       def classname
         generate_classname(
           "pb_icon_kit",

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -20,6 +20,11 @@ $pb_icon_circle_sizes: (
   object-fit: cover;
   overflow: hidden;
   position: relative;
+// font-family set to sans-serif ONLY for emojis.
+//Needed to fix misalignment issue caused by Proxima font
+  .icon_circle_emoji {
+    font-family: monospace;
+  }
 
   i,
   svg {

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -32,6 +32,7 @@ const IconCircle = (props: IconCircleProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
 
+
   return (
     <div
         {...ariaProps}
@@ -39,12 +40,13 @@ const IconCircle = (props: IconCircleProps) => {
         className={classes}
         id={id}
     >
-      <Icon
+        <Icon
           dark={dark}
           icon={icon}
-      />
+        />
+        
     </div>
   )
 }
 
-export default IconCircle
+export default IconCircle

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -1,35 +1,41 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   variant: "royal",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "archive",
+  icon: "rocket",
   variant: "orange",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "arrow-alt-right",
+  icon: "rocket",
   variant: "purple",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "cloud",
+  icon: "rocket",
   variant: "teal",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "award",
+  icon: "rocket",
   variant: "red",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "bolt",
+  icon: "rocket",
   variant: "yellow",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "calendar",
+  icon: "rocket",
   variant: "green",
   size: "sm"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "user"
+  icon: "rocket"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "😁",
+  size:"sm"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  icon: "&#128525;",
+  size:"md",
+  variant: "red"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  icon: '&#x1F389;',
+  size: "lg",
+  variant: "teal"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconCircle from '../_icon_circle'
+
+const IconCircleEmoji = (props) => {
+  return (
+    <div>
+      <IconCircle
+          icon="😁"
+          size="sm"
+          {...props}
+      />
+      <br/>
+      <IconCircle
+          icon="&#128525;"
+          size="md"
+          variant="red"
+          {...props}
+      />
+      <br/>
+      <IconCircle
+          icon="&#x1F389;"
+          size="lg"
+          variant="teal"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCircleEmoji

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.md

@@ -0,0 +1 @@
+The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string to the `icon` prop as shown in the code snippet below.

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,24 +1,24 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "xs"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "sm"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "md"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "lg"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "xl"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="sm"

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

@@ -4,8 +4,11 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_emoji: With Emoji
+
 
   react:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_emoji: With Emoji

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

@@ -1,3 +1,4 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
 export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
+export { default as IconCircleEmoji } from './_icon_circle_emoji.jsx'

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbIconCircle
     class IconCircle < Playbook::KitBase
       prop :icon, required: true
+      prop :emoji, type: Playbook::Props::String,
+                   default: ""
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import IconCircle from './_icon_circle'
+
+const testId = "icon-circle-kit"
+
+describe("IconCircle Kit", () => {
+    test("renders classname", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="user"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_circle_kit_md_default")
+    })
+
+    test("renders icon", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="user"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector('.pb_icon_kit')
+        expect(icon).toBeInTheDocument()
+    })
+
+    test("renders emoji", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="&#128525;"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveTextContent("😍")
+    })
+
+    test('displays color variants', () => {
+        [
+          "default",
+          "royal",
+          "blue",
+          "purple",
+          "teal",
+          "red",
+          "yellow",
+          "green"
+        ].forEach((colorVariant) => {
+          render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="rocket"
+                size="sm"
+                variant={colorVariant}
+            />
+          )
+          const kit = screen.getByTestId(testId)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_sm_${colorVariant}`)
+      
+          cleanup()
+        })
+      })
+
+      test('displays size as expected', () => {
+        [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ].forEach((sizeVariant) => {
+          render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="rocket"
+                size={sizeVariant}
+            />
+          )
+          const kit = screen.getByTestId(testId)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_${sizeVariant}_default`)
+      
+          cleanup()
+        })
+      })
+
+})

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -6,11 +6,11 @@ export const getAncestorsOfUnchecked = (
   if (item.parent_id) {
     const ancestor = filterFormattedDataById(data, item.parent_id);
     ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
   }
   return data;
 };
-  
+
 //function is going over formattedData and returning all objects that match the
 //id of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -20,9 +20,9 @@ export const filterFormattedDataById = (
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
-      if (item.id.toLowerCase() === (term.toLowerCase())) {
+      if (item.id.toLowerCase() === term.toLowerCase()) {
         matched.push(item);
-        return
+        return;
       }
 
       if (item.children && item.children.length > 0) {
@@ -75,24 +75,29 @@ export const getCheckedItems = (
   });
   return checkedItems;
 };
-    
-export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
+
+export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
   const checkedDefault: { [key: string]: any }[] = [];
 
-  const traverseTree = (items:{ [key: string]: any }[]) => {
+  const traverseTree = (items: { [key: string]: any }[]) => {
     if (!Array.isArray(items)) {
       return;
     }
-    items.forEach((item:{ [key: string]: any }) => {
+    items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-          const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
+          const uncheckedChildren = item.children.filter(
+            (child: { [key: string]: any }) => !child.checked
+          );
           if (uncheckedChildren.length === 0) {
             checkedDefault.push(item);
             return;
           }
         } else {
-          const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
+          const parent = items.find(
+            (parentItem: { [key: string]: any }) =>
+              parentItem.id === item.parentId
+          );
           if (!parent || !parent.checked) {
             checkedDefault.push(item);
           }
@@ -112,23 +117,47 @@ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
 
 export const recursiveCheckParent = (
   item: { [key: string]: any },
-  data:any
+  data: any
 ) => {
   if (item.parent_id !== null) {
-  const parent = filterFormattedDataById(data, item.parent_id);
-  const allChildrenChecked = parent[0].children.every(
-    (child: { [key: string]: any }) => child.checked
-  );
-  if (allChildrenChecked) {
-    parent[0].checked = true;
-    const parentHasParent = parent[0].parent_id !== null;
-    if (parentHasParent) {
-      recursiveCheckParent(
-        parent[0],
-        data
-      );
+    const parent = filterFormattedDataById(data, item.parent_id);
+    const allChildrenChecked = parent[0].children.every(
+      (child: { [key: string]: any }) => child.checked
+    );
+    if (allChildrenChecked) {
+      parent[0].checked = true;
+      const parentHasParent = parent[0].parent_id !== null;
+      if (parentHasParent) {
+        recursiveCheckParent(parent[0], data);
+      }
+    }
+  }
+  return data;
+};
+
+export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+  let expandedItems: any[] = [];
+
+  const traverse = (items: string | any[], ancestors: any[] = []) => {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const itemAncestors = [...ancestors, item];
+
+      if (item.expanded) {
+        expandedItems.push(item.id);
+      }
+      if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
+        traverse(item.children, itemAncestors);
+      }
     }
-}
-}
-return data;
-}
+  };
+
+  traverse(treeData);
+  return expandedItems;
+};

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

@@ -23,7 +23,7 @@
     .input_wrapper {
       background-color: $white;
       cursor: pointer;
-      padding: $space_xs + 4 $space_sm;
+      padding: $space_xs + 1 $space_sm;
       border: 1px solid #e4e8f0;
       border-radius: $border_rad_heavier;
       display: flex;
@@ -36,7 +36,6 @@
       input {
         border: none;
         font-family: $font_family_base;
-        padding: $space_xs;
         &:focus {
           outline: none;
         }

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

@@ -15,6 +15,7 @@ import {
   getCheckedItems,
   getDefaultCheckedItems,
   recursiveCheckParent,
+  getExpandedItems,
 } from "./_helper_functions"
 
 type MultiLevelSelectProps = {
@@ -22,6 +23,7 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   id?: string
+  inputDisplay?: "pills" | "none"
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
@@ -34,6 +36,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    inputDisplay = "pills",
     name,
     returnAllSelected = false,
     treeData,
@@ -50,26 +53,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const dropdownRef = useRef(null)
 
-
-  const getExpandedItems = (treeData: { [key: string]: string }[]) => {
-    let expandedItems: any[] = [];
-    
-    const traverse = (items: string | any[]) => {
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.expanded) {
-          expandedItems.push(item.id);
-        }
-        if (Array.isArray(item.children)) {
-          traverse(item.children);
-        }
-      }
-    }
-  
-    traverse(treeData);
-    return expandedItems;
-  }
-
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -174,8 +157,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
-
-
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
@@ -331,7 +312,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
 
-            {returnedArray.length !== 0 && returnAllSelected
+            {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
@@ -342,7 +323,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
             {!returnAllSelected &&
-              defaultReturn.length !== 0 &&
+              defaultReturn.length !== 0 && inputDisplay === "pills" ?
               defaultReturn.map((item, index) => (
                 <FormPill
                   key={index}
@@ -350,9 +331,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                   size='small'
                   onClick={(event: any) => handlePillClose(event, item)}
                 />
-              ))}
-            {returnedArray.length !== 0 && returnAllSelected && <br />}
-            {defaultReturn.length !== 0 && !returnAllSelected && <br />}
+              ))
+              : null
+            }
+            {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
+            {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
               id='multiselect_input'
               onChange={(e) => {
@@ -365,11 +348,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
           {isClosed ? (
             <div key='chevron-down'>
-              <Icon icon='chevron-down' />
+              <Icon icon='chevron-down' size="xs"/>
             </div>
           ) : (
             <div key='chevron-up'>
-              <Icon icon='chevron-up' />
+              <Icon icon='chevron-up' size="xs"/>
             </div>
           )}
         </div>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md

@@ -1,3 +1,5 @@
 The `returnAllSelected` or `return_all_selected` prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node. 
 
-__NOTE__ :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 
+__NOTE__: This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 
+
+__NOTE__: For larger trees that may return many pill selections, you can optionally set `input_display: "none"`(for Rails) or `inputDisplay = "none"`(for React) to hide all pills within the input.