playbook_ui 15.4.0 → 15.5.0.pre.alpha.draggablefix12557

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

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepColor = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        color="info"
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepColor

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md

@@ -0,0 +1,3 @@
+The `color` prop can also be used to set color for the tracker variant. Options for color are `primary` and `info` with default being set to `primary`.
+
+**NOTE**: The `color` prop is only available with the `tracker` variant.

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

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepCustomIcon = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem 
+          icon="exclamation-triangle"
+          status="active" 
+      >
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepCustomIcon

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md

@@ -0,0 +1 @@
+Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -39,7 +39,10 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 3
+  <% end %>
+    <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 4
   <% end %>
 <% end %>

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

@@ -6,7 +6,6 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
-        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -19,12 +18,24 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
+
+    <ProgressStep 
+        icon
+        {...props}
+    >
+      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+    </ProgressStep>
   </div>
 )
 

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

@@ -0,0 +1,3 @@
+The default Progress Step kit sets orientation to horizontal and can be used with completed, active, and inactive steps as shown here.
+
+`icon` is a boolean prop that can also be set to true to render icons within the steps indicator. `icon` is false by default.

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

@@ -0,0 +1,3 @@
+The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant. 
+
+This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,13 +25,7 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
-<br>
-<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
+    Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

@@ -0,0 +1 @@
+`orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.

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

@@ -3,6 +3,7 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -10,4 +11,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
+  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

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

@@ -2,3 +2,5 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
+export { default as ProgressStepColor } from './_progress_step_color.jsx'
+export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

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

@@ -107,3 +107,44 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
+
+test('should render info color', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            color="info"
+            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_info')
+})
+
+test('should render custom icon', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem icon="exclamation-triangle" 
+              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')
+  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
+  expect(icon).toBeDefined()
+})

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

@@ -1,6 +1,8 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
+import Radio from "../_radio"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import { Button, Body, Select } from "playbook-ui"
+import Select from "../_select"
+import Body from "../../pb_body/_body"
+import Button from "../../pb_button/_button"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -119,21 +119,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
-                    } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-right');
+                            cell.classList.remove('sticky-left-shadow');
+                        } else {
+                            cell.classList.remove('with-border-right');
+                            cell.classList.add('sticky-left-shadow');
+                        }
+                    });
+                }
             });
         };
 
@@ -170,21 +171,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-left');
+                            cell.classList.remove('sticky-right-shadow');
+                        } else {
+                            cell.classList.remove('with-border-left');
+                            cell.classList.add('sticky-right-shadow');
+                        }
+                    });
+                }
             });
         };
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../_tooltip'
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipSizing = (props) => {
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -161,6 +161,10 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
+  .pb_badge_kit_primary {
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,6 +62,7 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
+            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { Typeahead, Title } from 'playbook-ui'
+import Typeahead from '../_typeahead'
+import Title from '../../pb_title/_title'
 import { useForm } from 'react-hook-form'
 
 const languages = [

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserFontOptions = (props) => {
   return (

data/app/pb_kits/playbook/utilities/_truncate.scss

@@ -11,6 +11,8 @@ $truncate-styles: (
   display: -webkit-box;
   -webkit-line-clamp: $number;
   -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
 
 @each $class, $number in $truncate-styles {

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -213,10 +213,24 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  return keys.map((size: Sizes) => {
-    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
-    return `${classPrefix}_${size}_${propValue}`
-  }).join(" ")
+  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+  let classResult = ''
+  
+  // Handle default value separately (generates base class without size prefix)
+  if (prop.default !== undefined) {
+    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
+    classResult += `${classPrefix}_${defaultValue} `
+  }
+  
+  // Handle responsive sizes (generates classes with size prefix)
+  keys.forEach((key) => {
+    if (screenSizeValues.includes(key)) {
+      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
+      classResult += `${classPrefix}_${key}_${propValue} `
+    }
+  })
+  
+  return classResult.trim()
 }
 
 //reusable function for top, bottom, right and left props
@@ -436,9 +450,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
-            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -463,9 +479,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          Object.entries(displayEntry[1]).forEach((displayObj) => {
-            css += `display_${displayObj[0]}_${displayObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(displayEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_content_space_around`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_content_xs_center`)
+  expect(kit).toHaveClass(`align_content_sm_space_around`)
+  expect(kit).toHaveClass(`align_content_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -34,3 +34,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_items_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_items_xs_center`)
+  expect(kit).toHaveClass(`align_items_sm_end`)
+  expect(kit).toHaveClass(`align_items_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_self_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_self_xs_center`)
+  expect(kit).toHaveClass(`align_self_sm_end`)
+  expect(kit).toHaveClass(`align_self_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -36,3 +36,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`display_none`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`display_xs_block`)
+  expect(kit).toHaveClass(`display_sm_none`)
+  expect(kit).toHaveClass(`display_md_block`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -62,3 +62,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_3`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_xs_1`)
+  expect(kit).toHaveClass(`flex_sm_3`)
+  expect(kit).toHaveClass(`flex_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexDirection={{ default: "column", xs: "row", sm: "column", md: "row" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_direction_column`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_direction_xs_row`)
+  expect(kit).toHaveClass(`flex_direction_sm_column`)
+  expect(kit).toHaveClass(`flex_direction_md_row`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexGrow={{ default: 1, xs: 0, sm: 1, md: 0 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_grow_1`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_grow_xs_0`)
+  expect(kit).toHaveClass(`flex_grow_sm_1`)
+  expect(kit).toHaveClass(`flex_grow_md_0`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexShrink={{ default: 0, xs: 1, sm: 0, md: 1 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_shrink_0`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_shrink_xs_1`)
+  expect(kit).toHaveClass(`flex_shrink_sm_0`)
+  expect(kit).toHaveClass(`flex_shrink_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexWrap={{ default: "wrap", xs: "nowrap", sm: "wrap", md: "nowrap" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_wrap_wrap`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_wrap_xs_nowrap`)
+  expect(kit).toHaveClass(`flex_wrap_sm_wrap`)
+  expect(kit).toHaveClass(`flex_wrap_md_nowrap`)
+})