playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -0,0 +1,16 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("button", props: { type: object.type,
+                                  link: object.link,
+                                  new_window:object.new_window,
+                                  target: object.target,
+                                  dark: object.dark,
+                                  border_radius: "lg" }) do %>
+  <%= pb_rails("icon", props: { icon: object.icon,
+                                fixed_width: true,
+                                dark: object.dark,
+                                size: "2x",
+                                color: "text_lt_default",
+                                classname: "icon_button_icon",
+                                padding_x: "xxs", padding_y: "xs" }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIconButton
+    class IconButton < ::Playbook::KitBase
+      prop :type, type: Playbook::Props::Enum,
+                  values: %w[button submit reset],
+                  default: "button"
+      prop :icon, required: false, default: "bars"
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default link],
+                     default: "default"
+      def classname
+        generate_classname("pb_icon_button_kit", variant)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,10 +1,32 @@
-<%= content_tag(:li,
-                aria: object.aria,
-                class: object.classname,
-                data: object.data,
-                id: object.id,
-                tabindex: object.tabindex,
-                **combined_html_options
-  ) do %>
+<% if object.draggable? %>
+  <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+    <%= content_tag(:li,
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+      <% if object.drag_handle %>
+        <span style="vertical-align: middle;">
+          <%= pb_rails("body") do %>
+            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+          <% end %>
+        </span>
+      <% end %>
+      <%= content.presence %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:li,
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
     <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -3,11 +3,18 @@
 module Playbook
   module PbList
     class Item < Playbook::KitBase
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :drag_id, type: Playbook::Props::String
       prop :tabindex
 
       def classname
         generate_classname("pb_item_kit")
       end
+
+      def draggable?
+        drag_id.present?
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,13 +1,33 @@
-<%= content_tag(:div, class: object.list_classname) do %>
-  <%= content_tag(:"#{object.ordered_class}",
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
-                  role: object.role,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
-      <%= content.presence %>
+<% if object.enable_drag %>
+  <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
+    <%= pb_rails("draggable/draggable_container") do %>
+      <%= content_tag(:div, class: object.list_classname) do %>
+        <%= content_tag(:"#{object.ordered_class}",
+                        aria: object.aria,
+                        class: object.classname,
+                        data: object.data,
+                        id: object.id,
+                        role: object.role,
+                        tabindex: object.tabindex,
+                        **combined_html_options
+          ) do %>
+            <%= content.presence %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:div, class: object.list_classname) do %>
+    <%= content_tag(:"#{object.ordered_class}",
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    role: object.role,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+        <%= content.presence %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -7,6 +7,10 @@ module Playbook
                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :enable_drag, type: Playbook::Props::Boolean,
+                         default: false
+      prop :items, type: Playbook::Props::Array,
+                   default: []
       prop :layout, type: Playbook::Props::Enum,
                     values: ["left", "right", ""],
                     default: ""

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
@@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -24,6 +24,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     color: $primary;
     font-weight: $bold;
     font-size: $font_smallest - 1;
+
+    &.dark {
+      border: $pb_multiple_users_border_size solid $bg_dark;
+    }
   }
 
   .multiple_users_badge_xxs {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -50,6 +50,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
 
   const itemClasses = classnames(
     'pb_multiple_users_item',
+    dark && 'dark',
     buildCss('multiple_users_badge', avatarSizeClass)
   )
 

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,7 +4,7 @@
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -35,6 +35,7 @@ type PhoneNumberInputProps = {
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
+  formatAsYouType?: boolean,
 }
 
 enum ValidationError {
@@ -87,6 +88,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     required = false,
     preferredCountries = [],
     value = "",
+    formatAsYouType = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -99,8 +101,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   )
 
   const inputRef = useRef<HTMLInputElement>()
+  const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -130,8 +132,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     }
   })
 
+  const unformatNumber = (formattedNumber: any) => {
+    return formattedNumber.replace(/\D/g, "")
+  }
+
   const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
+    const countryName = itiRef.current.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
     setError(`Invalid ${countryName} phone number${reasonText}`)
     return true
@@ -189,12 +195,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
-    if (itiInit) isValid(itiInit.isValidNumber())
-    if (validateOnlyNumbers(itiInit)) return
-    if (validateTooLongNumber(itiInit)) return
-    if (validateTooShortNumber(itiInit)) return
-    if (validateUnhandledError(itiInit)) return
-    if (validateMissingAreaCode(itiInit)) return
+    if (itiRef.current) isValid(itiRef.current.isValidNumber())
+    if (validateOnlyNumbers(itiRef.current)) return
+    if (validateTooLongNumber(itiRef.current)) return
+    if (validateTooShortNumber(itiRef.current)) return
+    if (validateUnhandledError(itiRef.current)) return
+    if (validateMissingAreaCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -203,10 +209,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
-    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    let phoneNumberData
+    if (formatAsYouType) {
+      const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+      phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+    } else {
+      phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+    }
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiInit.isValidNumber())
+    isValid(itiRef.current.isValidNumber())
   }
 
   // Separating Concerns as React Docs Recommend
@@ -230,9 +242,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       onlyCountries,
       countrySearch: false,
       fixDropdownWidth: false,
-      formatAsYouType: false,
+      formatAsYouType: formatAsYouType,
     })
 
+    itiRef.current = telInputInit;
+
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
@@ -243,7 +257,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-    setItiInit(telInputInit)
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
+    }
   }, [])
 
   let textInputProps: {[key: string]: any} = {

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "phone_number_input",
+    format_as_you_type: true
+}) %>
+
+<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
+
+<%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => {
+        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
+        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
+
+        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
+    })
+<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { PhoneNumberInput, Body } from "playbook-ui";
+
+const PhoneNumberInputFormat = (props) => {
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    const handleOnChange = ({ number }) => {
+        setPhoneNumber(number);
+    };
+
+    return (
+        <>
+            <PhoneNumberInput
+                formatAsYouType
+                id="format"
+                onChange={handleOnChange}
+                {...props}
+            />
+            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
+        </>
+    );
+};
+
+export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -0,0 +1 @@
+NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -8,10 +8,12 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
+  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_format: Format as You Type

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

@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
+export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -21,6 +21,8 @@ module Playbook
                    default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
+      prop :format_as_you_type, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -32,6 +34,7 @@ module Playbook
           dark: dark,
           disabled: disabled,
           error: error,
+          formatAsYouType: format_as_you_type,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../utilities/test-utils";
+import { render, screen, act } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -120,3 +120,22 @@ test("should trigger callback", () => {
 
   expect(handleOnValidate).toBeCalledWith(true)
 });
+
+test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
+    const props = {
+        initialCountry: 'us',
+        formatAsYouType: true,
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    
+    const input = screen.getByRole("textbox");
+    
+    act(() => {
+        input.value = "5555555555";
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(input.value).toBe("555-555-5555");
+});

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

@@ -4,7 +4,7 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-[class^=pb_radio_kit] {
+[class^="pb_radio_kit"] {
   display: inline-flex;
   cursor: pointer;
 
@@ -16,10 +16,11 @@
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;
-    transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
+    transition: background $transition_default ease,
+      box-shadow $transition_default ease, border-color $transition_default ease;
   }
 
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover .pb_radio_button {
       background-color: $bg_light;
       border-color: $border_light;
@@ -52,14 +53,14 @@
       }
     }
 
-    &:disabled:checked + .pb_radio_button{
+    &:disabled:checked + .pb_radio_button {
       cursor: not-allowed;
       background-color: $white;
       border: 6px solid $neutral;
     }
   }
 
-  &[class*=vertical] {
+  &[class*="vertical"] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {
@@ -80,7 +81,7 @@
       }
       &:checked {
         & ~ .pb_radio_button {
-          border: 6px solid $primary;
+          border: 6px solid $active_dark;
         }
       }
 
@@ -103,10 +104,10 @@
       }
     }
 
-    @media (hover:hover) {
+    @media (hover: hover) {
       &:hover {
         .pb_radio_button {
-          background-color: rgba($white,.10);
+          background-color: rgba($white, 0.1);
           border-color: $border_dark;
         }
       }
@@ -115,6 +116,9 @@
       > .pb_radio_button {
         border-color: $error_dark;
       }
+      > .pb_body_kit_negative {
+        color: $error_dark;
+      }
     }
   }
   &.error {

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

@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead 
+        <Typeahead
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title text="Custom Typography" />
+        <Title
+            text="Custom Typography"
+            {...props}
+        />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -209,10 +209,8 @@
   }
   .pb_select_kit_wrapper {
     &.error {
-      .pb_select_kit_wrapper {
-        > select:first-child {
-          border-color: $error_dark;
-        }
+      > select {
+        border-color: $error_dark;
       }
     }
   }
@@ -228,7 +226,7 @@
     &:hover {
       select {
         color: $white !important;
-        background: rgba(0,130,255,0.1);
+        background: $focus_input_dark;
       }
       svg {
         color: $primary !important;

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -127,7 +127,10 @@ const Select = ({
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption text={label} />
+          <Caption 
+              dark={props.dark}
+              text={label} 
+          />
         </label>
       }
       <label
@@ -146,6 +149,7 @@ const Select = ({
         }
         {error &&
           <Body
+              dark={props.dark}
               status="negative"
               text={error}
           />

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

@@ -5,7 +5,7 @@
   **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label }) %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
@@ -23,7 +23,7 @@
         object.all_attributes
       )
       %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
     <% end %>
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -16,6 +16,7 @@ type SelectableIconProps = {
   checked?: boolean,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
+  dark?: boolean,
   disabled?: boolean,
   data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -33,6 +34,7 @@ const SelectableIcon = ({
   className,
   checked = false,
   customIcon,
+  dark = false,
   data = {},
   disabled = false,
   htmlOptions = {},
@@ -52,10 +54,12 @@ const SelectableIcon = ({
   const classes = classnames(
     buildCss('pb_selectable_icon_kit', {
       checked: checked,
+      dark: dark,
       disabled: disabled,
       enabled: !disabled,
     }),
     globalProps(props),
+    dark ? 'dark' : '',
     className
   )
 
@@ -73,17 +77,19 @@ const SelectableIcon = ({
         <>
           <Icon
               customIcon={customIcon}
+              dark={dark}
               icon={icon}
               size="2x"
           />
           <Title
+              dark={dark}
               size={4}
               tag="h4"
               text={text}
           />
         </>
       )}
-          
+
       {inputs === 'enabled' && (
         <>
           <input
@@ -98,10 +104,12 @@ const SelectableIcon = ({
           <label htmlFor={inputIdPresent}>
             <Icon
                 customIcon={customIcon}
+                dark={dark}
                 icon={icon}
                 size="2x"
             />
             <Title
+                dark={dark}
                 size={4}
                 tag="h4"
                 text={text}