playbook_ui 12.6.0 → 12.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ffe02f5811c58c2f395f4dc42933e6277b77d392e3cbc9657611b91c9d82617
-  data.tar.gz: b45d5e741b3d219bee86e6f37d8c3c8f7d1f4cbfb482b77fe352acfd703c64ad
+  metadata.gz: 127ac17d49b80d6d30ec216a6f2e0a7e81908664c6a85b1341bdce717f12699a
+  data.tar.gz: e15e17d77315240d2c81ea9df13c84d5b6633c55ac9f19a4e0b5ed24e5b2df1e
 SHA512:
-  metadata.gz: b86a515a02c0c3cbd155a4840243d2e50bcefca3ed2a34cca2d67078087b0e2db728fae764e01d526f4da9579aa9249fc9ae245ca435b786a8c75b6a7225bf82
-  data.tar.gz: bc734f1f1b3cd1ae6d20754334dc6a5590d77bd393a5bcad9fb73f33d330c8d46b6f5ee6eaae0d1ada5754e4e349cdf2d1b9dd2ff307decace3ed1a5a46a0b0d
+  metadata.gz: b7089e126a6c6340ccde8c062ad95411bf8c3470cefce3c9309bb591e0efc0a5fac5f56b3984c37ca0f12bd8710c3e7a646f1d77405ec3b2f3d412b3d69de452
+  data.tar.gz: b7abd953f3e8c3215b7b142790c5ac6fd15e99b0b44cf3a425dfa7b7c41db5e1f19f9696a363305f055a76d4c7cd2ab8d8387004465eeb90016350c839cad40a

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -5,8 +5,7 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
-
-
+@import "./sass_partials/input_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -20,8 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus, :focus-within {
-    div.cal_icon_wrapper, input.text_input{
+  &:focus,
+  :focus-within {
+    div.cal_icon_wrapper,
+    input.date_picker_input {
       @include transition_default;
       border-color: $primary;
     }
@@ -33,18 +34,20 @@
   @import "./sass_partials/header_styles";
   @import "./sass_partials/overrides";
 
-  .text_input.flatpickr-input {
+  .date_picker_input.flatpickr-input {
     text-overflow: ellipsis;
     padding-right: $space_xl + 10 !important;
   }
+
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
     border: 1px solid $border_light;
   }
+
   // Hide Caret
   &:before,
   &:after {
     content: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -5,13 +5,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
-
 import Icon from '../pb_icon/_icon'
-import TextInput from '../pb_text_input/_text_input'
+import Caption from '../pb_caption/_caption'
+import Body from '../pb_body/_body'
 
 type DatePickerProps = {
   allowInput?: boolean,
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -27,15 +27,15 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: {[key: string]: string},
-  inputData?: {[key: string]: string},
-  inputOnChange?: (arg: string) => void,
+  inputAria?: { [key: string]: string },
+  inputData?: { [key: string]: string },
+  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: ArrayLike<Node> | Node | string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -68,8 +68,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     id,
     inLine = false,
-    inputAria,
-    inputData,
+    inputAria = {},
+    inputData = {},
     inputOnChange,
     inputValue,
     label = 'Date Picker',
@@ -87,11 +87,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    yearRange = [ 1900, 2100 ],
+    yearRange = [1900, 2100],
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const inputAriaProps = buildAriaProps(inputAria)
+  const inputDataProps = buildDataProps(inputData)
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
     globalProps(props),
@@ -128,13 +131,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
-    if (dark){
+    if (dark) {
       base += ' dark'
     }
-    if (hideLabel){
+    if (hideLabel) {
       base += ' no_label_shift'
     }
-    if (error){
+    if (error) {
       base += ' error'
     }
     return base
@@ -142,61 +145,75 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-      <div className="input_wrapper">
-        <TextInput
-            aria={inputAria}
+      <div
+        {...inputAriaProps}
+        {...inputDataProps}
+        className="input_wrapper">
+
+        <Caption
+          className="pb_date_picker_kit_label"
+          text={hideLabel ? null : label}
+        />
+
+        <div className="date_picker_input_wrapper">
+          <input
             autoComplete="off"
-            dark={dark}
-            data={inputData}
+            className="date_picker_input"
             disabled={disableInput}
-            error={error}
             id={pickerId}
-            label={hideLabel ? null : label}
             name={name}
             onChange={inputOnChange}
             placeholder={placeholder}
             value={inputValue}
-        />
+          />
 
-        { !hideIcon &&
+          {error && <Body
+            status="negative"
+            text={error}
+            variant={null}
+          />
+          }
+        </div>
+
+        {!hideIcon &&
           <div
-              className={iconWrapperClass()}
-              id={`cal-icon-${pickerId}`}
+            className={iconWrapperClass()}
+            id={`cal-icon-${pickerId}`}
           >
-          <Icon
+            <Icon
               className="cal_icon"
               icon="calendar-alt"
-          />
-        </div>
+            />
+          </div>
         }
 
-        { hideIcon && inLine ? 
+        {hideIcon && inLine ?
           <div>
             <div
-                className={iconWrapperClass()}
-                id={`${pickerId}-icon-plus`}
+              className={iconWrapperClass()}
+              id={`${pickerId}-icon-plus`}
             >
               <Icon
-                  className="date-picker-plus-icon"
-                  icon="plus"
+                className="date-picker-plus-icon"
+                icon="plus"
               />
             </div>
             <div
-                className={iconWrapperClass()}
-                id={`${pickerId}-angle-down`}
+              className={iconWrapperClass()}
+              id={`${pickerId}-angle-down`}
             >
-                <Icon
-                    className="angle_down_icon"
-                    icon="angle-down" 
-                />
+              <Icon
+                className="angle_down_icon"
+                icon="angle-down"
+              />
             </div>
-          </div>  
-        : null }
+          </div>
+          : null}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -112,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
+    allowInput,
     closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { allow_input: true, picker_id: "date-picker-allow-input"}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerAllowInput = (props) => (
+    <>
+        <DatePicker
+            allowInput
+            pickerId="date-picker-allow-input"
+            {...props}
+        />
+    </>
+)
+
+export default DatePickerAllowInput

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md

@@ -0,0 +1 @@
+Setting the `allowInput` prop to true permits users to key values directly into the input. This prop is set to false by default.

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

@@ -4,6 +4,7 @@ examples:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
@@ -22,11 +23,11 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
 
-
   react:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange

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

@@ -18,3 +18,4 @@ export { default as DatePickerTime } from './_date_picker_time.jsx'
 export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
+export { default as DatePickerAllowInput } from './_date_picker_allow_input'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -0,0 +1,68 @@
+@import "../../pb_textarea/textarea_mixin";
+
+[class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
+
+  .pb_date_picker_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+
+  .date_picker_input_wrapper {
+    display: block;
+
+    input::placeholder,
+    .date_picker_input .placeholder {
+      @include pb_body_light;
+    }
+
+    input,
+    .date_picker_input {
+      max-height: 45px;
+      @include pb_textarea_light;
+      overflow: hidden;
+    }
+
+    input:hover,
+    .date_picker_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:focus,
+    .date_picker_input:focus,
+    input:-webkit-autofill:focus,
+    .date_picker_input:-webkit-autofill:focus {
+      @include pb_textarea_focus;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+  }
+
+  &.error {
+    .date_picker_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      input,
+      .date_picker_input {
+        border-color: $error;
+      }
+    }
+  }
+
+  &.inline {
+    .date_picker_input_wrapper input::placeholder,
+    .date_picker_input_wrapper .date_picker_input .placeholder {
+      opacity: 1;
+    }
+
+    &:not(:hover) {
+      .date_picker_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
   <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title }) %>
+    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
     <br />
     <%= example %>
     <br>

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

@@ -12,11 +12,18 @@ type MultiLevelSelectProps = {
   id?: string;
   treeData?: { [key: string]: string }[];
   onChange?: any;
-  onSelect?: (SelectedNodes: { [key: string]: any }) => void;
+  onSelect?: (prop: { [key: string]: any }) => void;
 };
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
-  const { aria = {}, className, data = {}, id, treeData, onSelect } = props;
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    treeData,
+    onSelect = () => {},
+  } = props;
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -28,6 +35,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const [formattedData, setFormattedData] = useState(treeData);
   const [selectedItems, setSelectedItems] = useState([]);
+  const [checkedData, setCheckedData] = useState([]);
 
   const onChange = (currentNode: { [key: string]: any }) => {
     const updatedData = formattedData.map((item: any) => {
@@ -62,16 +70,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const uniqueSelected = selected.filter(
       (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
     );
-    onSelect(uniqueSelected);
+    setCheckedData(uniqueSelected);
   }, [selectedItems]);
 
+  useEffect(() => {
+    let el = document.getElementById("pb_data_wrapper");
+
+    if (el) {
+      el.setAttribute("data-tree", JSON.stringify(checkedData));
+    }
+
+    onSelect(checkedData);
+  }, [checkedData]);
+
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <MultiSelectHelper
         treeData={formattedData}
         id={id}
         onChange={onChange}
-        onSelect={onSelect}
         {...props}
       />
     </div>

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

@@ -0,0 +1,72 @@
+<% 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.md

@@ -1,3 +1,5 @@
 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.
 
-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 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.

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

@@ -1,5 +1,6 @@
 examples:
-  
+  rails:
+  - multi_level_select_default: Default
   
   react:
   - multi_level_select_default: Default

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -0,0 +1,3 @@
+<div id="pb_data_wrapper" data-tree="">
+<%= react_component("MultiLevelSelect", object.multi_level_select_options ) %>
+</div>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMultiLevelSelect
+    class MultiLevelSelect < Playbook::KitBase
+      prop :tree_data, type: Playbook::Props::Array,
+                       default: []
+
+      def classname
+        generate_classname("pb_multi_level_select")
+      end
+
+      def multi_level_select_options
+        {
+          id: id,
+          treeData: tree_data,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -29,10 +29,9 @@ test('should render custom class', () => {
       <MultiLevelSelect
           className='custom-class'
           data={{ testid: testId}}
-          onSelect={()=> console.log("hello")}
           treeData={treeData}
       /> 
-  ) 
+  )
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass('custom-class')

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -14,6 +14,7 @@ type NavProps = {
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
+  dark?: boolean,
   highlight?: boolean,
   id?: string,
   onClick?: EventHandler,
@@ -29,6 +30,7 @@ const Nav = (props: NavProps) => {
     children,
     className,
     data = {},
+    dark = false,
     highlight = true,
     id,
     link = '#',
@@ -64,6 +66,7 @@ const Nav = (props: NavProps) => {
               onClick={onClick}
           >
             <Caption
+                dark={dark}
                 size="md"
                 text={`${title}`}
             />

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -6,7 +6,7 @@
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
-        <%= pb_rails("caption", props: { text: object.title }) %>
+        <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>
   <% end %>