playbook_ui 12.7.1 → 12.8.0.pre.alpha.PLAY625phonenumberdark300

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d163824bfc8bd3c476dba23afdaf149ff693c576f3770ab1bcf23637ef32642
-  data.tar.gz: 272fb5d4927e1a8d4a910f705bc3df87c5d5a7d51faa401b0b26820dfe76180b
+  metadata.gz: 9eb2b26240ac24996dac5e3f618f76952765fb12f15a4bafe21457a5bdcbcc6e
+  data.tar.gz: 831d0e1114b3810ae9bff0cfc492adda9e5abde131ebedf72a07e40203f5ed36
 SHA512:
-  metadata.gz: 57e8eb9c7d6f7af39f4dee6e573576107107294c40635a14982027bef2acb2c292a440e3f3a0f7719aff2c5618aa2cb77f20fc5d0338bc1ccdec0603292ccfe5
-  data.tar.gz: 4ea238e7ebbb4461f48446ab78d95e012dfb48b49339268fc9aefb97bc75ce9c6cb72bb9b080885e90500616739d2ac10ade7e5bb6faa696a18aa9ba8fc344c9
+  metadata.gz: 9083337a529acb9ab2375838368e1021d4269ac76dc158c51a3c7f6c502f68fc1acff70e2b6c5651a4337f1d87778a0254d2df959f0c85786d8447fe990af314
+  data.tar.gz: 24beadc5202811b0bd2ca8e2bf13a3574c1e687bfc119cf4e40a868fe9879fac93f5a315b22b8d662b0a1a44038b59dded14ec8abcaf777522a9ae359e4c2110

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -14,8 +14,8 @@ type AvatarProps = {
   dark?: boolean,
   id?: string,
   imageAlt?: string,
-  imageUrl: string,
-  name: string,
+  imageUrl?: string,
+  name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
 } & GlobalProps

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -10,8 +10,8 @@ type MultiLevelSelectProps = {
   className?: string;
   data?: { [key: string]: string };
   id?: string;
+  returnAllSelected?: boolean;
   treeData?: { [key: string]: string }[];
-  onChange?: any;
   onSelect?: (prop: { [key: string]: any }) => void;
 };
 
@@ -21,6 +21,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    returnAllSelected = false,
     treeData,
     onSelect = () => {},
   } = props;
@@ -63,34 +64,59 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   };
 
   useEffect(() => {
-    const selected = selectedItems.filter(
-      (item: { [key: string]: any }) => item.checked
-    );
-    //filter to remove duplicate items
-    const uniqueSelected = selected.filter(
-      (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
-    );
-    setCheckedData(uniqueSelected);
+    if (returnAllSelected) {
+      const selected = selectedItems.filter(
+        (item: { [key: string]: any }) => item.checked
+      );
+      //filter to remove duplicate items
+      const uniqueSelected = selected.filter(
+        (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
+      );
+      setCheckedData(uniqueSelected);
+    }
   }, [selectedItems]);
 
   useEffect(() => {
-    let el = document.getElementById("pb_data_wrapper");
-
+    let el = document.getElementById(`pb_data_wrapper_${id}`);
     if (el) {
       el.setAttribute("data-tree", JSON.stringify(checkedData));
     }
-
-    onSelect(checkedData);
+    if (returnAllSelected) {
+      onSelect(checkedData);
+    }
   }, [checkedData]);
 
-  return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+  const DropDownSelectComponent = useMemo(() => {
+    return (
       <MultiSelectHelper
         treeData={formattedData}
+        onChange={(
+          // @ts-ignore
+          selectedNodes: { [key: string]: any }[], 
+          currentNode: { [key: string]: any }[]
+        ) => {
+          setCheckedData(currentNode);
+          onSelect(currentNode);
+        }}
         id={id}
-        onChange={onChange}
         {...props}
       />
+    );
+  }, [formattedData]);
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      {returnAllSelected ? (
+        <MultiSelectHelper
+          treeData={formattedData}
+          treeMode={returnAllSelected}
+          id={id}
+          onChange={onChange}
+          {...props}
+        />
+      ) : (
+        <>{DropDownSelectComponent}</>
+      )}
     </div>
   );
 };

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

@@ -5,12 +5,13 @@ import "react-dropdown-tree-select/dist/styles.css"
 type HelperProps = {
   id?: string
   treeData?: { [key: string]: string }[]
-  onChange?: () => {}
+  treeMode?: boolean
+  onChange?:  any
 
 }
 
 const MultiSelectHelper = (props: HelperProps) => {
-  const { id, treeData, onChange } = props
+  const { id, treeData, onChange, treeMode } = props
 
 
   return (
@@ -22,7 +23,7 @@ const MultiSelectHelper = (props: HelperProps) => {
         keepChildrenOnSearch
         onChange={onChange}
         texts={{ placeholder: "Select..." }}
-        mode='hierarchical'
+        mode={treeMode ? 'hierarchical' : 'multiSelect'}
       />
   )
 }

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

@@ -0,0 +1,71 @@
+<% 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: "parent-persistence-multi-level-select",
+    tree_data:treeData,
+    return_all_selected: true
+    }) %>

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

@@ -0,0 +1,87 @@
+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",
+        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 MultiLevelSelectReturnAllSelected = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-parent-persistence"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items", selectedNodes)
+          }
+          returnAllSelected
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectReturnAllSelected;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md

@@ -0,0 +1,3 @@
+The `returnAllSelected` or `return_all_selected` prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node. 
+
+__NOTE__ :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 

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

@@ -1,7 +1,9 @@
 examples:
   rails:
   - multi_level_select_default: Default
+  - multi_level_select_return_all_selected: Return All Selected
   
   react:
   - multi_level_select_default: Default
+  - multi_level_select_return_all_selected: Return All Selected
   

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

@@ -1 +1,2 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'

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

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

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

@@ -5,6 +5,8 @@ module Playbook
     class MultiLevelSelect < Playbook::KitBase
       prop :tree_data, type: Playbook::Props::Array,
                        default: []
+      prop :return_all_selected, type: Playbook::Props::Boolean,
+                                 default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -14,6 +16,7 @@ module Playbook
         {
           id: id,
           treeData: tree_data,
+          returnAllSelected: return_all_selected,
         }
       end
     end

data/app/pb_kits/playbook/pb_multiple_users/{_multiple_users.jsx → _multiple_users.tsx}

@@ -9,18 +9,18 @@ import { globalProps } from '../utilities/globalProps'
 import Avatar from '../pb_avatar/_avatar'
 
 type MultipleUsersProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
-  size?: string,
-  users: array<object>,
+  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
+  users: Array<{ [key: string]: string }>,
 }
 
-const MultipleUsers = (props: MultipleUsersProps) => {
+const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -64,16 +64,17 @@ const MultipleUsers = (props: MultipleUsersProps) => {
             {...avatarData}
             className="pb_multiple_users_item"
             dark={dark}
+            imageAlt={avatarData.name}
             key={index}
             size={size}
         />
       ))}
 
-      <If condition={users.length > maxDisplayedUsers}>
+      { users.length > maxDisplayedUsers && 
         <div className={itemClasses}>
           {`+${users.length - 3}`}
         </div>
-      </If>
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import MultipleUsers from './_multiple_users'
+
+const testId = 'multipleUserId'
+
+const MultipleUsersTest = () => {
+  return (
+      <>
+          <MultipleUsers
+              aria={{ label: testId }}
+              className={'custom-class'}
+              data={{ testid: testId }}
+              users={[
+                {
+                  name: 'Patrick Welch',
+                  imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+                },
+                {
+                  name: 'Lucille Sanchez',
+                  imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+                },
+              ]}
+          />
+      </>
+  )
+}
+
+test('it loads the given images urls', () => {
+    render(<MultipleUsersTest/>)
+
+    const image1 = screen.getByAltText('Patrick Welch')
+    const image2 = screen.getByAltText('Lucille Sanchez')
+
+    expect(image1).toHaveAttribute('src', 'https://randomuser.me/api/portraits/men/9.jpg')
+    expect(image2).toHaveAttribute('src', 'https://randomuser.me/api/portraits/women/6.jpg')
+})
+
+test('should render custom class and data', () => {
+    render(<MultipleUsersTest/>)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render aria-label', () => {
+  render(<MultipleUsersTest />)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('aria-label', testId)
+})

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import MultipleUsersStacked from './_multiple_users_stacked'
+
+const testId = 'multipleUsersStacked'
+const className = 'custom-class-name'
+const nameUser1 = 'Patrick Welch'
+const nameUser2 = 'Lucille Sanchez'
+const imageUser1 = 'https://randomuser.me/api/portraits/men/9.jpg'
+const imageUser2 = 'https://randomuser.me/api/portraits/women/6.jpg'
+
+const MultipleUsersStackedDefault = () => {
+    return (
+        <MultipleUsersStacked
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            users={[
+                {
+                    name: nameUser1,
+                    imageUrl: imageUser1,
+                    imageAlt: nameUser1,
+                },
+                {
+                    name: nameUser2,
+                    imageUrl: imageUser2,
+                    imageAlt: nameUser2,
+                },
+            ]}
+        />
+    )
+}
+
+test('should render alt names and images', () => {
+    render(<MultipleUsersStackedDefault />)
+    
+    const image1 = screen.getByAltText(nameUser1)
+    const image2 = screen.getByAltText(nameUser2)
+
+    expect(image1).toHaveAttribute('src', imageUser1)
+    expect(image2).toHaveAttribute('src', imageUser2)
+})
+
+test('should pass data prop', () => {
+    render(<MultipleUsersStackedDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<MultipleUsersStackedDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<MultipleUsersStackedDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})

data/app/pb_kits/playbook/pb_multiple_users_stacked/{_multiple_users_stacked.jsx → _multiple_users_stacked.tsx}

@@ -1,6 +1,3 @@
-/* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -11,12 +8,12 @@ import Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
 
 type MultipleUsersStackedProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
-  users: array<object>,
+  users: Array<{ [key: string]: string }>,
 }
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
@@ -44,11 +41,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
-            {...userObject}
-            className="pb_multiple_users_stacked_item"
-            dark={dark}
-            key={index}
-            size="xs"
+          {...userObject}
+          className="pb_multiple_users_stacked_item"
+          dark={dark}
+          key={index}
+          size="xs"
         />
       )
     })
@@ -59,11 +56,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
-              {...userObject}
-              className="pb_multiple_users_stacked_item second_item"
-              dark={dark}
-              key={index}
-              size="xs"
+            {...userObject}
+            className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
+            key={index}
+            size="xs"
           />
         )
       })
@@ -74,11 +71,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     if (moreThanTwo === true) {
       return (
         <Badge
-            className="pb_multiple_users_stacked_item second_item"
-            dark={dark}
-            rounded
-            text={`+${users.length - displayCount()}`}
-            variant="primary"
+          className="pb_multiple_users_stacked_item second_item"
+          dark={dark}
+          rounded
+          text={`+${users.length - displayCount()}`}
+          variant="primary"
         />
       )
     }
@@ -86,10 +83,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {firstUser()}
       {secondUser()}

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

@@ -4,6 +4,7 @@ $transform-rotate-deg: 135deg;
 $input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
+$bg-dark-country-item: #e2eaf4;
 
 .pb_phone_number_input {
   input::placeholder {
@@ -47,7 +48,7 @@ $flag-min-resolution: 192dpi;
     background-color: $hover_light;
 
     .iti__country-name, .iti__dial-code {
-      color: $primary
+      color: $primary;
     }
   }
 
@@ -129,6 +130,66 @@ $flag-min-resolution: 192dpi;
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
+
+  &.dark {
+    .iti--allow-dropdown .iti__flag-container {
+      background-color: rgba($white, 0);
+
+      &:hover {
+        background-color: rgba($white, 0);
+
+        &+ .text_input {
+          background-color: rgba($white, 0.15);
+        }
+
+        .iti__selected-flag {
+          background-color: rgba($white, 0);
+        }
+      }
+    }
+
+    .iti__selected-flag {
+      background-color: rgba($white, 0);
+      color: $white;
+    }
+
+    .iti__country-list {
+      background-color: $bg_dark; //$card_dark
+      border: 1px solid $border_dark;
+
+      .iti__highlight {
+        background-color: $bg-dark-country-item;
+      }
+    }
+
+    .iti__divider {
+      border-bottom: 1px solid $border_dark;
+    }
+
+    .iti__arrow.iti__arrow--up::before {
+      color: $slate;
+    }
+
+    .iti__country.iti__highlight {  
+      .iti__country-name {
+        color: $text_lt_default;
+      }
+
+      .iti__dial-code {
+        color: $text_lt_light;
+      }
+
+      &.iti__active::after {
+        color: $text_lt_default;
+      }
+    }
+
+    .dropdown_open {
+      .text_input {
+        background-color: rgba($white, 0.025) !important;
+      }
+    }
+  }
   
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {

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

@@ -1,4 +1,3 @@
-/* @flow */
 import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,19 +14,20 @@ declare global {
 }
 
 type PhoneNumberInputProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  disabled?: boolean
-  id?: string
-  initialCountry?: string
-  isValid?: (valid: boolean) => void
-  label?: string
-  name?: string
-  onChange?: (e: React.FormEvent<HTMLInputElement>) => void
-  onlyCountries: string[]
-  preferredCountries?: string[]
-  value?: string
+  aria?: { [key: string]: string },
+  className?: string,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  disabled?: boolean,
+  id?: string,
+  initialCountry?: string,
+  isValid?: (valid: boolean) => void,
+  label?: string,
+  name?: string,
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  onlyCountries: string[],
+  preferredCountries?: string[],
+  value?: string,
 }
 
 enum ValidationError {
@@ -58,6 +58,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const {
     aria = {},
     className,
+    dark = false,
     data = {},
     disabled = false,
     id = "",
@@ -154,6 +155,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
         className={dropDownIsOpen ? 'dropdown_open' : ''}
+        dark={dark}
         disabled={disabled}
         error={error}
         id={id}

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

@@ -1,10 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputDefault = () => (
-  <>
-    <PhoneNumberInput id='default' />
-  </>
+const PhoneNumberInputDefault = (props) => (
+    <>
+        <PhoneNumberInput
+            id='default'
+            {...props} />
+    </>
 )
 
 export default PhoneNumberInputDefault

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

@@ -1,12 +1,14 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInitialCountry = () => (
-  <>
-    <PhoneNumberInput id='initial'
-        initialCountry='br'
-    />
-  </>
+const PhoneNumberInitialCountry = (props) => (
+    <>
+        <PhoneNumberInput
+            id='initial'
+            initialCountry='br'
+            {...props}
+        />
+    </>
 )
 
 export default PhoneNumberInitialCountry

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputOnlyCountries = () => (
+const PhoneNumberInputOnlyCountries = (props) => (
   <>
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
+        {...props} 
     />
   </>
 )

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputPreferredCountries = () => (
+const PhoneNumberInputPreferredCountries = (props) => (
   <>
     <PhoneNumberInput
         id='preferred'
         preferredCountries={['us', 'br', 'ph', 'gb']}
+        {...props} 
     />
   </>
 )

data/app/pb_kits/playbook/pb_progress_pills/{_progress_pills.jsx → _progress_pills.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -11,39 +9,38 @@ import Title from '../pb_title/_title'
 
 type ProgressPillsProps = {
   active?: number,
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
+  dark?: boolean,
   id?: string,
   steps?: number,
   title?: string,
   value?: string,
-  dark?: boolean,
 }
 
-const showSteps = (steps, active, dark) => {
+const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
 
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ step, active, dark }))
+    items.push(ProgressPill({ steps: step, active, dark }))
   }
 
   return items
 }
 
-const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
   <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
-      dark ? ' dark' : ''
-    }`}
-      key={step}
+    className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
+      }`}
+    key={step}
   />
 )
 
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
-    aria = { hidden: true },
+    aria = { hidden: 'true' },
     className,
     data = {},
     id,
@@ -59,27 +56,25 @@ const ProgressPills = (props: ProgressPillsProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-
-      <If condition={title}>
+      {title &&
         <div className="progress_pills_status">
           <Title
-              dark={dark}
-              size={4}
-              tag="h4"
-              text={title}
+            dark={dark}
+            size={4}
+            tag="h4"
+            text={title}
           />
           <Body
-              color="light"
-              dark={dark}
-              text={value}
+            color="light"
+            dark={dark}
+            text={value}
           />
-        </div>
-      </If>
+        </div>}
       <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -1,18 +1,17 @@
-
 import React from 'react'
-import ProgressPills from '../_progress_pills.jsx'
+import ProgressPills from '../_progress_pills'
 
 const ProgressPillsDefault = (props) => {
-  return (
-    <div>
-      <ProgressPills
-          active={2}
-          aria={{ label: '2 out of 3 steps complete' }}
-          steps={3}
-          {...props}
-      />
-    </div>
-  )
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 3 steps complete' }}
+                steps={3}
+                {...props}
+            />
+        </>
+    )
 }
 
 export default ProgressPillsDefault

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -1,20 +1,19 @@
-
 import React from 'react'
-import ProgressPills from '../_progress_pills.jsx'
+import ProgressPills from '../_progress_pills'
 
 const ProgressPillsStatus = (props) => {
-  return (
-    <div>
-      <ProgressPills
-          active={2}
-          aria={{ label: '2 out of 3 steps complete' }}
-          steps={3}
-          title="Status:"
-          value="Orientation"
-          {...props}
-      />
-    </div>
-  )
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 3 steps complete' }}
+                steps={3}
+                title="Status:"
+                value="Orientation"
+                {...props}
+            />
+        </>
+    )
 }
 
 export default ProgressPillsStatus

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import ProgressPills from './_progress_pills'
+
+const testId = 'progressPills'
+const className = 'custom-class-name'
+const ariaLabel = '2 out of 3 steps complete'
+const title = 'Status:'
+const value = 'Orientation'
+
+const ProgressPillsDefault = () => {
+    return (
+        <ProgressPills
+            active={2}
+            aria={{ label: ariaLabel }}
+            className={className}
+            data={{ testid: testId }}
+            steps={3}
+            title={title}
+            value={value}
+        />
+    )
+}
+
+test('should pass data prop', () => {
+    render(<ProgressPillsDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<ProgressPillsDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<ProgressPillsDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', ariaLabel)
+})
+
+test('should render title', () => {
+    render(<ProgressPillsDefault />)
+    const kit = screen.getByText(title)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should render value', () => {
+    render(<ProgressPillsDefault />)
+    const kit = screen.getByText(value)
+    expect(kit).toBeInTheDocument()
+})

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.7.0"
-  VERSION = "12.7.1"
+  PREVIOUS_VERSION = "12.8.0"
+  VERSION = "12.8.0.pre.alpha.PLAY625phonenumberdark300"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.7.1
+  version: 12.8.0.pre.alpha.PLAY625phonenumberdark300
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-08 00:00:00.000000000 Z
+date: 2023-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1425,14 +1425,17 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
 - app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
-- app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
+- app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.html.erb
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx
@@ -1445,8 +1448,10 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.rb
-- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx
+- app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js
 - app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
+- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
+- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
@@ -1627,8 +1632,8 @@ files:
 - app/pb_kits/playbook/pb_popover/popover.html.erb
 - app/pb_kits/playbook/pb_popover/popover.rb
 - app/pb_kits/playbook/pb_popover/popover.test.js
-- app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
+- app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
@@ -1638,6 +1643,7 @@ files:
 - app/pb_kits/playbook/pb_progress_pills/docs/index.js
 - app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb
 - app/pb_kits/playbook/pb_progress_pills/progress_pills.rb
+- app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js
 - app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
 - app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_description.md
@@ -2437,7 +2443,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2448,12 +2454,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []