playbook_ui 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209 → 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -99,8 +99,8 @@ module Playbook
           # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
           cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
         else
-          # Default to 'text'
-          "text"
+          # Default to 'pointer'
+          "pointer"
         end
       end
 

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

@@ -165,13 +165,6 @@
     line-height: 16.5px;
     letter-spacing: normal;
   }
-
-  // Add focus indicator for multi-value pills
-  .pb_form_pill_or_badge_focused {
-    outline: $primary solid 2px;
-    outline-offset: -1px;
-  }
-
   &.inline {
     &:not(:hover) {
       .text_input {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -171,108 +171,4 @@ test('typeahead with defaultValue with focus behavior', async () => {
     expect(focusedOption).toBeInTheDocument()
     expect(focusedOption).toHaveTextContent('Red')
   })
-})
-
-test('typeahead with grouped options and defaultValue focus behavior', async () => {
-  const groupedOptions = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Purple", value: "#800080" }
-      ]
-    }
-  ]
-
-  render(
-    <Typeahead
-        data={{ testid: 'grouped-options-focus-test' }}
-        defaultValue={[{ label: "Pink", value: "#FFC0CB" }]}
-        options={groupedOptions}
-    />
-  )
-
-  const kit = screen.getByTestId('grouped-options-focus-test')
-  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
-  expect(inputDiv).toHaveTextContent("Pink")
-})
-
-test('multi-value pills have tabIndex for keyboard navigation', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'pill-tabindex-test' }}
-        defaultValue={[options[0], options[1]]}
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('pill-tabindex-test')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit')
-  
-  expect(pills.length).toBe(2)
-  
-  pills.forEach(pill => {
-    expect(pill).toHaveAttribute('tabIndex', '0')
-  })
-})
-
-test('multi-value pills show focus indicator when focused', async () => {
-  render(
-    <Typeahead
-        data={{ testid: 'pill-focus-indicator-test' }}
-        defaultValue={[options[0], options[1], options[2]]}
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('pill-focus-indicator-test')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit')
-  
-  expect(pills.length).toBe(3)
-  
-  const firstPill = pills[0]
-  firstPill.focus()
-  
-  expect(document.activeElement).toBe(firstPill)
-})
-
-test('multi-value badges have tabIndex and focus class when focused', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'badge-focus-test' }}
-        defaultValue={[options[0], options[1]]}
-        isMulti
-        multiKit="badge"
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('badge-focus-test')
-  const badges = kit.querySelectorAll('.pb_badge_kit_primary')
-  
-  expect(badges.length).toBe(2)
-
-  badges.forEach(badge => {
-    expect(badge).toHaveAttribute('tabIndex', '0')
-  })
-})
-
+})

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

@@ -144,18 +144,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   // Create a ref to access React Select instance
   const selectRef = useRef<any>(null)
 
-  // Helper function to flatten grouped options if custom groups are used
-  const flattenOptions = (options: any[]): any[] => {
-    if (!options) return []
-    
-    return options.reduce((acc, option) => {
-      if (option.options && Array.isArray(option.options)) {
-        return [...acc, ...option.options]
-      }
-      return [...acc, option]
-    }, [])
-  }
-
   // Configure focus on selected option using React Select's API
   const handleMenuOpen = () => {
     setTimeout(() => {
@@ -171,18 +159,17 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
         const options = props.options
         if (options) {
-          // Flatten grouped options to find the matching option and find matching option
-          const flatOptions = flattenOptions(options)
-          
-          const targetOption = flatOptions.find((option: any) => {
+          // Find the index of the current value
+          const focusedIndex = options.findIndex((option: any) => {
             const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
             const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
             return optionValue === currentOptionValue
           })
           
-          if (targetOption) {
+          if (focusedIndex >= 0 && options[focusedIndex]) {
             // Use React Select's internal state to set focused option
             if (selectRef.current && selectRef.current.setState) {
+              const targetOption = options[focusedIndex]
               selectRef.current.setState({
                 focusedOption: targetOption,
                 focusedValue: null
@@ -192,12 +179,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
               setTimeout(() => {
                 if (selectRef.current && selectRef.current.menuListRef) {
                   const menuElement = selectRef.current.menuListRef
-                  // Find the focused option using React Select's class
-                  const focusedElement = menuElement.querySelector('.typeahead-kit-select__option--is-focused')
-                  
-                  if (focusedElement) {
-                    const optionTop = focusedElement.offsetTop
-                    const optionHeight = focusedElement.offsetHeight
+                  if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
+                    // Calculate the position of the selected option and scroll the menu container
+                    const optionElement = menuElement.children[focusedIndex] as HTMLElement
+                    const optionTop = optionElement.offsetTop
+                    const optionHeight = optionElement.offsetHeight
                     const menuHeight = menuElement.clientHeight
                     
                     // Set the menu's scrollTop to position the selected option in the middle

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

@@ -12,12 +12,11 @@ type Props = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
-  isFocused?: boolean,
 }
 
 
 const MultiValue = (props: Props) => {
-  const { removeProps, isFocused } = props
+  const { removeProps } = props
   const { imageUrl, label } = props.data
   const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
@@ -30,28 +29,6 @@ const MultiValue = (props: Props) => {
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
-  // Add className for focus state
-  const pillClassName = isFocused ? 'pb_form_pill_or_badge_focused' : ''
-
-  // Handle keyboard events on the pill itself to enable deletion when using tabIndex
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Backspace' || event.key === 'Delete') {
-      event.preventDefault()
-      event.stopPropagation()
-      // Trigger the remove action from react-select
-      if (removeProps && removeProps.onClick) {
-        removeProps.onClick(event as any)
-      }
-    }
-    // if arrow keys used, transfer focus to input so react-select can take over
-    else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      const selectInput = event.currentTarget.closest('.pb_typeahead_kit')?.querySelector('input')
-      if (selectInput instanceof HTMLInputElement) {
-        selectInput.focus()
-      }
-    }
-  }
-
   return (
     <components.MultiValueContainer
         className="text_input_multivalue_container"
@@ -59,11 +36,8 @@ const MultiValue = (props: Props) => {
     >
       {multiKit === 'badge' &&
         <Badge
-            className={pillClassName}
             closeProps={removeProps}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             removeIcon
-            tabIndex={0}
             text={label}
             variant="primary"
         />
@@ -72,15 +46,12 @@ const MultiValue = (props: Props) => {
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
             avatarUrl={imageUrl}
-            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
-            tabIndex={0}
             text=''
             truncate={truncate}
             wrapped={wrapped}
@@ -90,15 +61,12 @@ const MultiValue = (props: Props) => {
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
-            tabIndex={0}
             text={label}
             truncate={truncate}
             wrapped={wrapped}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

@@ -25,77 +25,11 @@
   ]
 %>
 
-<%
-  grouped_options = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-%>
-
-
 <%= pb_rails("typeahead", props: {
     default_options: [{ label: 'Gray', value: '#808080' }],
     id: "typeahead-default-value",
     options: options,
-    label: "Default Value with basic options",
-    name: :foo,
-    is_multi: false
-  })
-%>
-
-<%= pb_rails("typeahead", props: {
-    default_options:[{ label: "Pink", value: "#FFC0CB" }],
-    id: "typeahead-default-value-grouped-options",
-    options: grouped_options,
-    label: "Default Value with grouped options",
+    label: "Colors",
     name: :foo,
     is_multi: false
   })

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

@@ -27,76 +27,14 @@ const options = [
   { label: 'Coral', value: '#FF7F50' }
 ]
 
-const groupedOptions = [
-  {
-    label: "Warm Colors",
-    options: [
-      { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-
 const TypeaheadDefaultValue = (props) => {
   return (
-    <>
-      <Typeahead
-          defaultValue={options[10]}
-          label="Default Value with basic options"
-          options={options}
-          {...props}
-      />
-      <br />
-      <Typeahead
-          defaultValue={{ label: "Pink", value: "#FFC0CB" }}
-          label="Default Value with grouped options"
-          options={groupedOptions}
-          {...props}
-      />
-    </>
+    <Typeahead
+        defaultValue={options[10]}
+        label="Colors"
+        options={options}
+        {...props}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -1,7 +1,6 @@
 examples:
   rails:
     - typeahead_default: Default
-    - typeahead_custom_options: With Grouped Options
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
@@ -21,7 +20,6 @@ examples:
 
   react:
     - typeahead_default: Default
-    - typeahead_custom_options: With Grouped Options
     - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight

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

@@ -16,5 +16,4 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'

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

@@ -213,24 +213,10 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  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()
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
 }
 
 //reusable function for top, bottom, right and left props
@@ -450,11 +436,9 @@ 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") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = value.toString()
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -479,11 +463,9 @@ 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") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(displayEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

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

@@ -35,21 +35,3 @@ 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,21 +34,3 @@ 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,21 +35,3 @@ 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,21 +36,3 @@ 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,21 +62,3 @@ 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,21 +35,3 @@ 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`)
-})