playbook_ui 12.7.1 → 12.8.0.pre.alpha.PLAY645typescriptprogresstep297

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d163824bfc8bd3c476dba23afdaf149ff693c576f3770ab1bcf23637ef32642
-  data.tar.gz: 272fb5d4927e1a8d4a910f705bc3df87c5d5a7d51faa401b0b26820dfe76180b
+  metadata.gz: 283def9e075a0980a2b2087d7e5e97b8c423077dede9ac0a233c92578235289e
+  data.tar.gz: 1e29b357dfb18242784e2603cda7b99faceb8894c7706fef39229dcb0bd4d701
 SHA512:
-  metadata.gz: 57e8eb9c7d6f7af39f4dee6e573576107107294c40635a14982027bef2acb2c292a440e3f3a0f7719aff2c5618aa2cb77f20fc5d0338bc1ccdec0603292ccfe5
-  data.tar.gz: 4ea238e7ebbb4461f48446ab78d95e012dfb48b49339268fc9aefb97bc75ce9c6cb72bb9b080885e90500616739d2ac10ade7e5bb6faa696a18aa9ba8fc344c9
+  metadata.gz: b631d82e34a76b54112e9e5967d79eff4d1d755122c8d6463118473eb98be618c19d83da7f62d8e6cbfe8b01c8a75d417a89af96ac8836246d8ab29f18961c5d
+  data.tar.gz: dfc3653b07313fdb9304a8ef3b914caded472bfcf5de3347a1d556874056029b88d8fbdb096f75a8ac973a359cfb48fc4b87c6c6c724a05dc533e02b14f00903

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_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/app/pb_kits/playbook/pb_progress_step/{_progress_step.jsx → _progress_step.tsx}

@@ -1,15 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ProgressStepProps = {
+  aria?: { [key: string]: string },
   className?: string,
-  data?: string,
+  data?: { [key: string]: string },
   id?: string,
-  children?: array<React.ReactChild>,
+  children?: React.ReactChild[] | React.ReactChild,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   showIcon?: boolean,
@@ -17,16 +16,21 @@ type ProgressStepProps = {
   color?: string,
 }
 
-const ProgressStep = (props: ProgressStepProps) => {
+const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
   const {
+    aria = {},
     className,
     children,
     color,
+    data = {},
     orientation = 'horizontal',
     icon = false,
     showIcon = false,
     variant,
   } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
@@ -37,7 +41,11 @@ const ProgressStep = (props: ProgressStepProps) => {
   )
 
   return (
-    <ul className={classnames(progressStepCss, globalProps(props), className)}>
+    <ul
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(progressStepCss, globalProps(props), className)}
+    >
       {children}
     </ul>
   )

data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.jsx → _progress_step_item.tsx}

@@ -1,29 +1,35 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
 type ProgressStepItemProps = {
   className?: string,
+  data?: { [key: string]: string },
   status?: "complete" | "active" | "inactive" | "hidden",
-  children?: React.Node,
+  children?: React.ReactChild[] | React.ReactChild,
   icon?: string,
 }
 
-const ProgressStepItem = ({
-  className,
-  status = 'inactive',
-  children,
-  icon = 'check',
-}: ProgressStepItemProps) => {
+const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
+  const {
+    className,
+    data = {},
+    status = 'inactive',
+    children,
+    icon = 'check',
+  } = props
+
   const progressStepItem = buildCss('pb_progress_step_item', status)
+  const dataProps = buildDataProps(data)
 
   return (
-    <li className={classnames(progressStepItem, className)}>
+    <li 
+        {...dataProps}
+        className={classnames(progressStepItem, className)}
+    >
       <div className="box">
         <div className="circle">
           <Icon icon={icon} />
@@ -33,4 +39,5 @@ const ProgressStepItem = ({
     </li>
   )
 }
+
 export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
 
 const ProgressStepDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
+import ProgressStep from '../_progress_step.tsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
+import ProgressStep from '../_progress_step.tsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
 
 const ProgressStepVertical = (props) => (
   <div>

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import ProgressStep from './_progress_step.tsx'
+import ProgressStepItem from './_progress_step_item.tsx'
+
+const testId = 'progressStepId'
+const step1Id = 'step1Id'
+const step2Id = 'step2Id'
+const step3Id = 'step3Id'
+
+const ProgressStepTest = () => {
+  return (
+      <>
+        <ProgressStep
+            aria={{ label: testId }}
+            className={'custom-class'}
+            data={{ testid: testId }} 
+        >
+          <ProgressStepItem 
+              data={{ testid: step1Id }} 
+              status="complete"
+          >
+              {'Step 1'}
+          </ProgressStepItem>
+          <ProgressStepItem 
+              data={{ testid: step2Id }} 
+              status="active"
+          >
+              {'Step 2'}
+          </ProgressStepItem>
+          <ProgressStepItem 
+              data={{ testid: step3Id }} 
+              status="inactive"
+          >
+              {'Step 3'}
+          </ProgressStepItem>
+        </ProgressStep>
+      </>
+  )
+}
+
+test('should render custom class and data', () => {
+  render(<ProgressStepTest/>)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('custom-class')
+})
+
+test('should render aria-label', () => {
+  render(<ProgressStepTest />)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render the horizontal variant', () => {
+  render(<ProgressStepTest />)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
+})
+
+test('should render the vertical variant', () => {
+  render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            orientation="vertical"
+        >
+          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_vertical')
+})
+
+test('should render the tracker variant', () => {
+  render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
+})
+
+
+test('should render the children elements', () => {
+  render(<ProgressStepTest />)
+
+  const step1Kit = screen.getByTestId(step1Id)
+  const step2Kit = screen.getByTestId(step2Id)
+  const step3Kit = screen.getByTestId(step3Id)
+  
+  expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
+  expect(step2Kit).toHaveClass('pb_progress_step_item_active')
+  expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
+})

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.PLAY645typescriptprogresstep297"
 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.PLAY645typescriptprogresstep297
 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
@@ -1660,9 +1666,9 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
-- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
 - app/pb_kits/playbook/pb_progress_step/_progress_step.scss
-- app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
+- app/pb_kits/playbook/pb_progress_step/_progress_step.tsx
+- app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
 - app/pb_kits/playbook/pb_progress_step/docs/_description.md
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
@@ -1677,6 +1683,7 @@ files:
 - app/pb_kits/playbook/pb_progress_step/docs/index.js
 - app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step.rb
+- app/pb_kits/playbook/pb_progress_step/progress_step.test.js
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
 - app/pb_kits/playbook/pb_radio/_radio.scss
@@ -2437,7 +2444,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2448,12 +2455,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: []