playbook_ui 13.30.0 → 13.31.0.pre.alpha.PBNTR342navtabbing3230

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -4,6 +4,7 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
 
+import Body from '../pb_body/_body';
 import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
@@ -13,236 +14,245 @@ import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
 
 import {
-  separateChildComponents,
-  prepareSubcomponents,
-  handleClickOutside,
+    separateChildComponents,
+    prepareSubcomponents,
+    handleClickOutside,
 } from "./utilities";
 
 type DropdownProps = {
-  aria?: { [key: string]: string };
-  autocomplete?: boolean;
-  children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
-  className?: string;
-  dark?: boolean;
-  data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-  isClosed?: boolean;
-  label?: string;
-  onSelect?: (arg: GenericObject) => null;
-  options: GenericObject;
-  triggerRef?: any;
+    aria?: { [key: string]: string };
+    autocomplete?: boolean;
+    children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
+    className?: string;
+    dark?: boolean;
+    data?: { [key: string]: string };
+    error?: string;
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string;
+    isClosed?: boolean;
+    label?: string;
+    onSelect?: (arg: GenericObject) => null;
+    options: GenericObject;
+    triggerRef?: any;
 };
 
 const Dropdown = (props: DropdownProps) => {
-  const {
-    aria = {},
-    autocomplete = false,
-    children,
-    className,
-    dark = false,
-    data = {},
-    htmlOptions = {},
-    id,
-    isClosed = true,
-    label,
-    onSelect,
-    options,
-    triggerRef
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    buildCss("pb_dropdown"),
-    globalProps(props),
-    className
-  );
-
-  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
-
-  const [filterItem, setFilterItem] = useState("");
-  const [selected, setSelected] = useState<GenericObject>({});
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
-  const [hasContainerSubcomponent, setHasContainerSubcomponent] =
-    useState(true);
-  //state for keyboard events
-  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
-
-  const dropdownRef = useRef(null);
-  const inputRef = useRef(null);
-  const inputWrapperRef = useRef(null);
-  const dropdownContainerRef = useRef(null);
-
-  const { trigger, container, otherChildren } =
-    separateChildComponents(children);
-
-  useEffect(() => {
-    // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
-    //Only needed for when useDropdown hook used with external trigger
-    if (triggerRef?.current) {
-      const parentElement = triggerRef.current.parentNode;
-      if (parentElement) {
-          parentElement.style.position = 'relative';
-      }
-  }
-  // Handle clicks outside the dropdown
-  const handleClick = handleClickOutside({
-    inputWrapperRef,
-    dropdownContainerRef,
-    setIsDropDownClosed,
-    setFocusedOptionIndex,
-    setIsInputFocused,
-  });
-  
-    window.addEventListener("click", handleClick);
-    return () => {
-      window.removeEventListener("click", handleClick);
-    };
-  }, []);
-
-  useEffect(() => {
-    setHasTriggerSubcomponent(!!trigger);
-    setHasContainerSubcomponent(!!container);
-  }, []);
-
-// dropdown to toggle with external control
-  useEffect(()=> {
-    setIsDropDownClosed(isClosed)
-   },[isClosed])
-
-  const filteredOptions = options?.filter((option: GenericObject) => {
-    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-    return String(label).toLowerCase().includes(filterItem.toLowerCase());
-  }
-  );
-
-// For keyboard accessibility: Set focus within dropdown to selected item if it exists
-  useEffect(() => {
-    if (!isDropDownClosed) { 
-        let newIndex = 0; 
-        if (selected && selected?.label) {
-            const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
-            if (selectedIndex >= 0) {
-                newIndex = selectedIndex;
+    const {
+        aria = {},
+        autocomplete = false,
+        children,
+        className,
+        dark = false,
+        data = {},
+        error,
+        htmlOptions = {},
+        id,
+        isClosed = true,
+        label,
+        onSelect,
+        options,
+        triggerRef
+    } = props;
+
+    const ariaProps = buildAriaProps(aria);
+    const dataProps = buildDataProps(data);
+    const htmlProps = buildHtmlProps(htmlOptions);
+    const classes = classnames(
+        buildCss("pb_dropdown"),
+        globalProps(props),
+        className
+    );
+
+    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+
+    const [filterItem, setFilterItem] = useState("");
+    const [selected, setSelected] = useState<GenericObject>({});
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
+    const [hasContainerSubcomponent, setHasContainerSubcomponent] =
+        useState(true);
+    //state for keyboard events
+    const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
+
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const dropdownContainerRef = useRef(null);
+
+    const { trigger, container, otherChildren } =
+        separateChildComponents(children);
+
+    useEffect(() => {
+        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
+        //Only needed for when useDropdown hook used with external trigger
+        if (triggerRef?.current) {
+            const parentElement = triggerRef.current.parentNode;
+            if (parentElement) {
+                parentElement.style.position = 'relative';
             }
         }
-        setFocusedOptionIndex(newIndex);
+        // Handle clicks outside the dropdown
+        const handleClick = handleClickOutside({
+            inputWrapperRef,
+            dropdownContainerRef,
+            setIsDropDownClosed,
+            setFocusedOptionIndex,
+            setIsInputFocused,
+        });
+
+        window.addEventListener("click", handleClick);
+        return () => {
+            window.removeEventListener("click", handleClick);
+        };
+    }, []);
+
+    useEffect(() => {
+        setHasTriggerSubcomponent(!!trigger);
+        setHasContainerSubcomponent(!!container);
+    }, []);
+
+    // dropdown to toggle with external control
+    useEffect(() => {
+        setIsDropDownClosed(isClosed)
+    }, [isClosed])
+
+    const filteredOptions = options?.filter((option: GenericObject) => {
+        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+        return String(label).toLowerCase().includes(filterItem.toLowerCase());
     }
-}, [isDropDownClosed]);
-
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilterItem(e.target.value);
-    setIsDropDownClosed(false);
-  };
-
-  const handleOptionClick = (selectedItem: GenericObject) => {
-    setSelected(selectedItem);
-    setFilterItem("");
-    setIsDropDownClosed(true);
-    onSelect && onSelect(selectedItem);
-  };
-
-  const handleWrapperClick = () => {
-    autocomplete && inputRef.current.focus();
-    toggleDropdown();
-  };
-
-  const handleBackspace = () => {
-    setSelected({});
-    onSelect && onSelect(null);
-    setFocusedOptionIndex(-1);
-  };
-
-  const componentsToRender = prepareSubcomponents({
-    children,
-    hasTriggerSubcomponent,
-    hasContainerSubcomponent,
-    trigger,
-    container,
-    otherChildren,
-    dark
-  });
-
-
-  return (
-    <div {...ariaProps} 
-        {...dataProps} 
-        {...htmlProps}
-        className={classes} 
-        id={id}
-        style={triggerRef ? { position: "absolute"} : { position: "relative"}}
-    >
-      <DropdownContext.Provider
-          value={{
-              autocomplete,
-              dropdownContainerRef,
-              filteredOptions,
-              filterItem,
-              focusedOptionIndex,
-              handleBackspace,
-              handleChange,
-              handleOptionClick,
-              handleWrapperClick,
-              inputRef,
-              inputWrapperRef,
-              isDropDownClosed,
-              isInputFocused,
-              options,
-              selected,
-              setFocusedOptionIndex,
-              setIsDropDownClosed,
-              setIsInputFocused,
-              setSelected,
-              toggleDropdown,
-              triggerRef
-          }}
-      >
-        {label &&
-        <Caption
-            dark={dark}
-            marginBottom="xs"
-            text={label}
-        />
+    );
+
+    // For keyboard accessibility: Set focus within dropdown to selected item if it exists
+    useEffect(() => {
+        if (!isDropDownClosed) {
+            let newIndex = 0;
+            if (selected && selected?.label) {
+                const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
+                if (selectedIndex >= 0) {
+                    newIndex = selectedIndex;
+                }
+            }
+            setFocusedOptionIndex(newIndex);
         }
-        <div className="dropdown_wrapper" 
-            onBlur={() => {
-                // Debounce to delay the execution to prevent jumpiness in Focus state
-                setTimeout(() => {
-                    if (!dropdownRef.current.contains(document.activeElement)) {
-                        setIsInputFocused(false);
-                    }
-                }, 0);
-            }}
-            onFocus={() => setIsInputFocused(true)}
-            ref={dropdownRef}
+    }, [isDropDownClosed]);
+
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFilterItem(e.target.value);
+        setIsDropDownClosed(false);
+    };
+
+    const handleOptionClick = (selectedItem: GenericObject) => {
+        setSelected(selectedItem);
+        setFilterItem("");
+        setIsDropDownClosed(true);
+        onSelect && onSelect(selectedItem);
+    };
+
+    const handleWrapperClick = () => {
+        autocomplete && inputRef.current.focus();
+        toggleDropdown();
+    };
+
+    const handleBackspace = () => {
+        setSelected({});
+        onSelect && onSelect(null);
+        setFocusedOptionIndex(-1);
+    };
+
+    const componentsToRender = prepareSubcomponents({
+        children,
+        hasTriggerSubcomponent,
+        hasContainerSubcomponent,
+        trigger,
+        container,
+        otherChildren,
+        dark
+    });
+
+
+    return (
+        <div {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
         >
-          {children ? (
-            <>
-              {componentsToRender.map((component, index) => (
-                <React.Fragment key={index}>{component}</React.Fragment>
-              ))}
-            </>
-          ) : (
-            <>
-              <DropdownTrigger />
-              <DropdownContainer>
-                {options &&
-                  options?.map((option: GenericObject) => (
-                    <Dropdown.Option key={option.id} 
-                        option={option}
-                    /> 
-                  ))}
-              </DropdownContainer>
-            </>
-          )}
+            <DropdownContext.Provider
+                value={{
+                    autocomplete,
+                    dropdownContainerRef,
+                    filteredOptions,
+                    filterItem,
+                    focusedOptionIndex,
+                    handleBackspace,
+                    handleChange,
+                    handleOptionClick,
+                    handleWrapperClick,
+                    inputRef,
+                    inputWrapperRef,
+                    isDropDownClosed,
+                    isInputFocused,
+                    options,
+                    selected,
+                    setFocusedOptionIndex,
+                    setIsDropDownClosed,
+                    setIsInputFocused,
+                    setSelected,
+                    toggleDropdown,
+                    triggerRef
+                }}
+            >
+                {label &&
+                    <Caption
+                        dark={dark}
+                        marginBottom="xs"
+                        text={label}
+                    />
+                }
+                <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
+                    onBlur={() => {
+                        // Debounce to delay the execution to prevent jumpiness in Focus state
+                        setTimeout(() => {
+                            if (!dropdownRef.current.contains(document.activeElement)) {
+                                setIsInputFocused(false);
+                            }
+                        }, 0);
+                    }}
+                    onFocus={() => setIsInputFocused(true)}
+                    ref={dropdownRef}
+                >
+                    {children ? (
+                        <>
+                            {componentsToRender.map((component, index) => (
+                                <React.Fragment key={index}>{component}</React.Fragment>
+                            ))}
+                        </>
+                    ) : (
+                        <>
+                            <DropdownTrigger />
+                            <DropdownContainer>
+                                {options &&
+                                    options?.map((option: GenericObject) => (
+                                        <Dropdown.Option key={option.id}
+                                            option={option}
+                                        />
+                                    ))}
+                            </DropdownContainer>
+                        </>
+                    )}
+
+                    {error &&
+                        <Body
+                            status="negative"
+                            text={error}
+                        />
+                    }
+                </div>
+            </DropdownContext.Provider>
         </div>
-      </DropdownContext.Provider>
-    </div>
-  )
+    )
 };
 
 Dropdown.Option = DropdownOption;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { Dropdown } from '../../'
+
+const DropdownError = (props) => {
+    const [selectedOption, setSelectedOption] = useState()
+    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const options = [
+        {
+            label: "United States",
+            value: "United States",
+        },
+        {
+            label: "Canada",
+            value: "Canada",
+        },
+        {
+            label: "Pakistan",
+            value: "Pakistan",
+        }
+    ]
+
+    return (
+        <>
+            <Dropdown
+                error={error}
+                onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+                options={options}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownError

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

@@ -7,6 +7,7 @@ examples:
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_error: Dropdown with Error
 
   react:
   - dropdown_default: Default
@@ -16,6 +17,7 @@ examples:
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_error: Dropdown with Error
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -8,4 +8,5 @@ export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_pa
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
-export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
+export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -7,20 +7,24 @@
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
-    <div class="dropdown_wrapper" style="position: relative">
-    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
-    <% if content.present? %>
-        <%= content.presence %>
-    <% else %>
-        <%= pb_rails("dropdown/dropdown_trigger") %>
-        <%= pb_rails("dropdown/dropdown_container") do %>
-            <% if object.options.present? %>
-                <% object.options.each do |option| %>
-                    <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+    <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
+        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
+        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
+
+        <% if content.present? %>
+            <%= content.presence %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+        <% else %>
+            <%= pb_rails("dropdown/dropdown_trigger") %>
+            <%= pb_rails("dropdown/dropdown_container") do %>
+                <% if object.options.present? %>
+                    <% object.options.each do |option| %>
+                        <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+                    <% end %>
                 <% end %>
             <% end %>
+
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% end %>
-    <% end %>
     </div>
 <% end %>
-  

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -7,6 +7,9 @@ module Playbook
                      default: []
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
+      prop :error, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -15,6 +18,12 @@ module Playbook
       def classname
         generate_classname("pb_dropdown")
       end
+
+    private
+
+      def error_class
+        error.present? ? " error" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="home" />
+          <Icon icon="elephant" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-home.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
   expect(customTrigger).toBeInTheDocument()
 })
 
@@ -204,4 +204,19 @@ test('selected option on click', () => {
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
   expect(option).toHaveClass('pb_dropdown_option_selected')
+})
+
+test('show error message', () => {
+  const errorMessage = 'Please make a valid selection'
+
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        error={errorMessage}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveTextContent(errorMessage)
 })