playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+type LayoutRoundLabelProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+} & GlobalProps
+
+export const RoundLabel = (props: LayoutRoundLabelProps) => {
+  const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  return (
+    <div
+        className={classnames('layout_round_label', className)}
+        style={dynamicInlineProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+type LayoutRoundProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+} & GlobalProps
+
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
+  ) : children
+
+  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
+    <div
+        className="right_connector"
+        key={`right_connector_${index}`}
+    />
+  ))
+
+  return (
+    <>
+      <div
+          className={classnames('layout_round', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        {childrenWithProps}
+      </div>
+      <div className="connector_container">{rightConnectors}</div>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object' 
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from "../../utilities/object" 
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -73,7 +73,7 @@ test('adds icon', () => {
 
   const kit = screen.getByTestId('icon-test')
 
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
 
@@ -87,7 +87,7 @@ test('adds icon right', () => {
 
   const kit = screen.getByTestId('icon-right-test')
 
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
 

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

@@ -10,6 +10,16 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
 
+&.error {
+  .wrapper {
+    .input_wrapper {
+      border-color: $error;
+    }
+  }
+  [class*=pb_body_kit_negative] {
+    margin-top: $space_xxs;
+  }
+}
   .wrapper {
     position: relative;
 
@@ -92,4 +102,17 @@
   .open {
     display: block;
   }
+
+  &.dark {
+    &.error {
+      .wrapper {
+        .input_wrapper {
+          border-color: $error_dark;
+        }
+      }
+      [class*=pb_body_kit_negative] {
+        color: $error_dark;
+      }
+    }
+  }
 }

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

@@ -7,9 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
+
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import { cloneDeep } from "lodash";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -35,11 +38,14 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
+  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
+  label?: string
   name?: string
+  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
@@ -56,11 +62,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className,
     data = {},
     disabled = false,
+    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
+    label,
+    required = false,
     returnAllSelected = false,
     treeData,
     onChange = () => null,
@@ -77,6 +86,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
+    error && "error",
     globalProps(props),
     className
   );
@@ -439,6 +449,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
+      {label &&
+        <Caption
+            marginBottom="xs"
+            text={label}
+        />
+      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -462,6 +478,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
+                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -476,6 +493,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -488,6 +506,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id} 
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -548,6 +567,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
+                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -580,6 +600,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
+      {error &&
+          <Body
+              dark={props.dark}
+              status="negative"
+              text={error}
+          />
+        }
     </div>
   );
 }) as MultiLevelSelectComponent;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    error: "Please make a valid selection",
+    id: "multi-level-select-error-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } 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",
+        expanded: true,
+        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 MultiLevelSelectError = (props) => {
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+
+  useEffect(() => {
+    if (selectedItems.length === 0) {
+      setErrorState("Please make a valid selection");
+    } else {
+      setErrorState(null);
+    }
+  }, [selectedItems]);
+
+  return (
+    <div>
+      <MultiLevelSelect
+          error={errorState}
+          id="multiselect-error"
+          onSelect={(selectedNodes) => setSelectedItems(selectedNodes)}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectError;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -0,0 +1,71 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -0,0 +1,91 @@
+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",
+        expanded: true,
+        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-label'
+          label="Select a Department"
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDefault;

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

@@ -8,6 +8,8 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
+  - multi_level_select_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
@@ -24,6 +26,8 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
+  - multi_level_select_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)

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

@@ -8,7 +8,9 @@ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_w
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
 export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
+export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
 export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'