playbook_ui 15.3.0.pre.alpha.PLAY2407daterangeinlineshowcurrentyear12138 → 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209

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

@@ -55,7 +55,6 @@ const formatToGlobalCountryName = (countryName: string) => {
 
 const formatAllCountries = () => {
   const countryData = intlTelInput.getCountryData()
-
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
@@ -110,18 +109,54 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
+  const [formSubmitted, setFormSubmitted] = useState(false)
+  const [hasStartedValidating, setHasStartedValidating] = useState(false)
+
+  // Only sync initial error from props, not continuous updates
+  // Once validation starts, internal validation takes over
+  useEffect(() => {
+    if (props.error && !hasStartedValidating) {
+      setError(props.error)
+      // If there's an initial error from props, mark as submitted so it shows
+      if (props.error) {
+        setFormSubmitted(true)
+      }
+    }
+  }, [props.error, hasStartedValidating])
+
+  // Function to update validation state on the wrapper element
+  // Only applies when input is required
+  const updateValidationState = (hasError: boolean) => {
+    if (wrapperRef.current && required) {
+      if (hasError) {
+        wrapperRef.current.setAttribute('data-pb-phone-validation-error', 'true')
+      } else {
+        wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
+      }
+    }
+  }
+
+  // Determine which error to display
+  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    const hasError = (error ?? '').length > 0
+    if (hasError) {
       onValidate(false)
     } else {
       onValidate(true)
     }
+
+    // Update validation state whenever error changes
+    updateValidationState(hasError)
   }, [error, onValidate])
 
   const unformatNumber = (formattedNumber: any) => {
@@ -137,6 +172,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooLongNumber = (itiInit: any) => {
     if (!itiInit) return
+
     if (itiInit.getValidationError() === ValidationError.TooLong) {
       return showFormattedError('too long')
     } else {
@@ -146,13 +182,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
-
     // If field is empty, don't show "too short" error
     if (!inputValue || inputValue.trim() === '') {
       setError('')
       return false
     }
-
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -172,7 +206,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateUnhandledError = (itiInit: any) => {
-    if (!itiInit) return
+    if (!required || !itiInit) return
     if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
       if (inputValue.length === 1) {
         return showFormattedError('too short')
@@ -184,7 +218,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       }
     }
   }
-
   const validateMissingAreaCode = (itiInit: any) => {
     if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
@@ -201,8 +234,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }
 
+  // Validation for required empty fields
   const validateRequiredField = () => {
-    if (!inputValue || inputValue.trim() === '') {
+    if (required && (!inputValue || inputValue.trim() === '')) {
       setError('Missing phone number')
       return true
     }
@@ -210,14 +244,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    // If field is empty, show error message
+    // Signal validation has started, so prop errors won't override internal validation
+    if (!hasStartedValidating) {
+      setHasStartedValidating(true)
+    }
+
+    // If field is empty, only show required field error if applicable
     if (!inputValue || inputValue.trim() === '') {
       if (validateRequiredField()) return
+      // Clear any existing errors if field is empty and not required
+      if (!required) {
+        setError('')
+      }
       return
     }
 
-    if (!hasTyped && !error) return
+     if (!hasTyped && !error) return
 
+    // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -227,6 +271,29 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
+  // Add listener for form validation to track when validation should be shown
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const phoneNumberContainer = target.closest('.pb_phone_number_input')
+
+      if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
+          // Trigger validation when form is submitted
+          validateErrors()
+        }
+      }
+    }
+
+    document.addEventListener('invalid', handleInvalid, true)
+
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name, inputValue])
+
   /*
     useImperativeHandle exposes the kit's input element to a parent component via a ref.
     See the Playbook docs for use cases.
@@ -238,6 +305,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        setFormSubmitted(false)
+        setHasStartedValidating(false)
+        // Only clear validation state if field was required
+        if (required) {
+          updateValidationState(false)
+        }
       },
       inputNode() {
         return inputRef.current
@@ -247,6 +320,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         // Run validation and return error message or true
         const isEmpty = !inputValue || inputValue.trim() === ''
 
+        if (required && isEmpty) {
+          setError('Missing phone number')
+          setFormSubmitted(true)
+          return 'Missing phone number'
+        }
+
         if (isEmpty) {
           // Show missing phone number error
           const errorMessage = 'Missing phone number'
@@ -266,6 +345,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           const countryName = itiRef.current.getSelectedCountryData().name
           const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
           setError(errorMessage)
+          setFormSubmitted(true)
           setHasTyped(true)
           return errorMessage
         }
@@ -275,6 +355,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           const countryName = itiRef.current.getSelectedCountryData().name
           const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
           setError(errorMessage)
+          setFormSubmitted(true)
           setHasTyped(true)
           return errorMessage
         }
@@ -295,7 +376,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
             errorMessage = `Invalid ${countryName} phone number`
           }
 
+          // Set the error state so the validation attribute gets added
           setError(errorMessage)
+          setFormSubmitted(true)
           setHasTyped(true)
 
           return errorMessage
@@ -314,11 +397,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
-
     setInputValue(evt.target.value)
 
+    // Reset form submitted state when user types
+    if (formSubmitted) {
+      setFormSubmitted(false)
+    }
+
     let phoneNumberData
 
+    // Handle formatAsYouType with input event
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
@@ -329,12 +417,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
+
+    // Trigger validation after onChange for React Hook Form
+    // This ensures validation state is up-to-date
+    setTimeout(() => validateErrors(), 0)
   }
 
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
-
   // If an initial country is not specified, the "globe" icon will show
   // Always set a country
   const fallbackCountry =
@@ -375,9 +466,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-      // Handle formatAsYouType with input event
-      if (formatAsYouType) {
-        inputRef.current.addEventListener("input", (evt: Event) => {
+    // Handle formatAsYouType with input event
+    if (formatAsYouType) {
+      inputRef.current.addEventListener("input", (evt: Event) => {
           const target = evt.target as HTMLInputElement
           const formattedValue = target.value
 
@@ -396,13 +487,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       }
     }
   }, [])
-
   let textInputProps: {[key: string]: any} = {
     className: dropDownIsOpen ? 'dropdown_open' : '',
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error,
+    error: hasTyped ? error : props.error || displayError,
     type: 'tel',
     id,
     label,
@@ -412,7 +502,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     value: inputValue
   }
 
-  let wrapperProps: Record<string, unknown> = { className: classes }
+  let wrapperProps: Record<string, unknown> = {
+    className: classes,
+    ref: wrapperRef
+  }
 
   if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
   if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}

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`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.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 }}
+        justifyContent={{ default: "spaceBetween", xs: "start", sm: "spaceBetween", md: "start" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`justify_content_space_between`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`justify_content_xs_start`)
+  expect(kit).toHaveClass(`justify_content_sm_space_between`)
+  expect(kit).toHaveClass(`justify_content_md_start`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.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 }}
+        justifySelf={{ default: "end", xs: "start", sm: "end", md: "center" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`justify_self_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`justify_self_xs_start`)
+  expect(kit).toHaveClass(`justify_self_sm_end`)
+  expect(kit).toHaveClass(`justify_self_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/order.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 }}
+        order={{ 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_order_3`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_order_xs_1`)
+  expect(kit).toHaveClass(`flex_order_sm_3`)
+  expect(kit).toHaveClass(`flex_order_md_1`)
+})