playbook_ui 14.15.0.pre.rc.4 → 14.15.0

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.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: {
+    disabled: true,
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.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 MultiLevelSelectDisabled = (props) => {
+    return (
+        <>
+            <MultiLevelSelect
+                disabled
+                id='multiselect-default'
+                onSelect={(selectedNodes) =>
+                    console.log(
+                        "Selected Items",
+                        selectedNodes
+                    )
+                }
+                treeData={treeData}
+                {...props}
+            />
+        </>
+    )
+};
+
+export default MultiLevelSelectDisabled

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

@@ -8,6 +8,7 @@ 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_disabled: Disabled
 
   react:
   - multi_level_select_default: Default
@@ -18,4 +19,4 @@ 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_disabled: Disabled

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

@@ -6,3 +6,4 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
+export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -22,6 +22,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -29,6 +33,7 @@ module Playbook
 
       def multi_level_select_options
         {
+          disabled: disabled,
           id: id,
           inputDisplay: input_display,
           name: name,
@@ -38,6 +43,7 @@ module Playbook
           input_name: input_name,
           variant: variant,
           pillColor: pill_color,
+          wrapped: wrapped,
         }
       end
     end

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -19,7 +19,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import { uniqueId } from 'lodash';
+import { uniqueId } from '../utilities/object';
 
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,6 +1,4 @@
-/*eslint-disable react/no-multi-comp */
-
-import React, { forwardRef, useRef } from 'react'
+import React, { useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -10,7 +8,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean,
+  checked?: boolean, // removed default assignment here
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -24,10 +22,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
-const Radio = ({
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   aria = {},
   alignment,
   children,
@@ -43,110 +41,123 @@ const Radio = ({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
+  checked,
   onChange = () => { void 0 },
   ...props
-}: RadioProps, ref: any) => {
-  const radioRef = useRef(null);
+}, ref) => {
+  const internalRef = useRef<HTMLInputElement>(null)
+  const setRefs = (el: HTMLInputElement) => {
+    internalRef.current = el
+    if (typeof ref === 'function') {
+      ref(el)
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
+    }
+  }
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  );
+  )
 
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  );
+  )
+
+  const checkedProps = checked !== undefined ? { checked } : {}
 
-  const displayRadio = (props: RadioProps & any) => {
-    if (children && customChildren == false)
-      return (children)
+  const displayRadio = (inputProps: any) => {
+    if (children && customChildren === false)
+      return children
     else
-    return (
-    <input
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
+      return (
+        <input
+            {...checkedProps}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={setRefs}
+            type="radio"
+            value={value}
+            {...inputProps}
+        />
+      )
+  }
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement;
+      const target = event.target as HTMLElement
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        radioRef.current?.click();
+        internalRef.current?.click()
       }
     }
-  };
+  }
 
-  return (
-    customChildren ? (
-      <Flex 
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          align='center'
-          className={classesCustom}
-          cursor='pointer'
-          htmlFor={id}
-          htmlOptions={{
-            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              handleContainerClick(event);
-            }) as unknown as () => void
-          }}
-          id="radio-container"
-      >
-        <label className={buildCss('pb_radio_kit', alignment)}>
+  return customChildren ? (
+    <Flex
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        align="center"
+        className={classesCustom}
+        cursor="pointer"
+        htmlFor={id}
+        htmlOptions={{
+          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            handleContainerClick(event)
+          }) as unknown as () => void
+        }}
+        id="radio-container"
+    >
+      <label className={buildCss('pb_radio_kit', alignment)}>
         <input
+            {...checkedProps}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={radioRef}
+            ref={setRefs}
             type="radio"
             value={value}
             {...props}
         />
-          <span className="pb_radio_button" />
-        </label>
-        <div id="pb-radio-children-wrapper"> {children} </div>
-      </Flex>
-    ) : (
-        <label
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            htmlFor={id}
-        >
-        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
-        <Body
-            dark={dark}
-            status={error ? 'negative' : null}
-            text={label}
-            variant={null}
-        />
       </label>
-    )
-  );
-};
+      <div id="pb-radio-children-wrapper"> {children} </div>
+    </Flex>
+  ) : (
+    <label
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        htmlFor={id}
+    >
+      {displayRadio(props)}
+      <span className="pb_radio_button" />
+      <Body
+          dark={dark}
+          status={error ? 'negative' : null}
+          text={label}
+          variant={null}
+      />
+    </label>
+  )
+})
 
-export default forwardRef(Radio);
+Radio.displayName = "Radio"
+export default Radio

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Radio, Flex, Body } from "playbook-ui"
+
+const RadioReactHook = () => {
+  const { register, watch } = useForm({
+    defaultValues: {
+      size: "Small",
+    },
+  })
+
+  const selectedSize = watch("size", "Small")
+
+  return (
+    <Flex orientation="row">
+      <Flex
+          align="start"
+          orientation="column"
+          paddingRight="lg"
+        >
+        <Radio
+            alignment="left"
+            label="Small"
+            marginBottom='sm'
+            name="size"
+            value="Small"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Medium"
+            marginBottom='sm'
+            name="size"
+            value="Medium"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Large"
+            marginBottom='sm'
+            name="size"
+            value="Large"
+            {...register("size")}
+        />
+      </Flex>
+      <Flex
+          align="start"
+          orientation="column"
+      >
+        <Body
+            text={`Selected Size: ${selectedSize}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default RadioReactHook

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md

@@ -0,0 +1 @@
+You can pass react hook props to the radio kit.

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

@@ -16,6 +16,7 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
+  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -26,4 +27,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,3 +4,4 @@ export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
 export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
+export { default as RadioReactHook } from './_radio_react_hook.jsx'

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -86,3 +86,19 @@ test('has disabled attribute', () => {
   expect(input).toHaveAttribute('disabled')
 })
 
+
+test('has ref in the input element', () => {
+  const ref = React.createRef()
+    render(
+      <Radio
+          data={{ testid: testId }}
+          name="Radio-name"
+          ref={ref}
+          text="Radio"
+          value="radio value"
+      />
+  )
+
+  expect(ref.current).not.toBeNull()
+  expect(ref.current?.tagName).toBe('INPUT')
+})

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button, Body, Select } from "playbook-ui"
+
+const SelectReactHook = (props) => {
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    defaultValues: {
+      food: '',
+    },
+  })
+
+  const [submittedData, setSubmittedData] = useState({
+    food: '',
+  })
+
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+
+  const options = [
+    {
+      value: 1,
+      text: 'Burgers',
+    },
+    {
+      value: 2,
+      text: 'Pizza',
+    },
+    {
+      value: 3,
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Select
+            {...props}
+            {...register("food", { required: true })}
+            error={errors.food ? "Please select a food." : null}
+            label="Favorite Food"
+            options={options}
+        />
+        <br />
+        <Button htmlType="submit"
+            marginTop="sm"
+            text="Submit"
+          />
+      </form>
+      <Body padding="xs"
+          text={`Food: ${submittedData.food}`}
+      />
+    </>
+  )
+}
+
+export default SelectReactHook

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md

@@ -0,0 +1 @@
+You can pass react-hook-form props to a select kit. You can use `register` which will make the value available for both the form validation and submission. 

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

@@ -30,6 +30,7 @@ examples:
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
+  - select_react_hook: React Hook
 
   swift:
   - select_default_swift: Default

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

@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
+export { default as SelectReactHook } from './_select_react_hook.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,8 +1,6 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  data: object.data,
-  class: object.classnames,
-  **combined_html_options) do %>
+<%= pb_content_tag(:div,
+  id: nil,
+  class: object.classnames ) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

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

@@ -1,7 +1,4 @@
-<%= content_tag(:div,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <% if object.inputs == "disabled" %>