fix: add class name and data test id on some components (#5581)

Author: matthprost

.changeset/silver-apes-strive.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+Add missing `className` and `data-testid` on some components

packages/plus/src/components/InfoTable/InfoTable.tsx

@@ -24,14 +24,23 @@ const StyledDl = styled('dl', {
 type InfoTableProps = {
   children: ReactNode
   width?: string
+  className?: string
+  'data-testid'?: string
 }
 
 /**
  * Use this component to display offers.
  * Create rows with `InfoTable.Row` and place cells within each row using `InfoTable.Cell`.
  */
-export const InfoTable = ({ children, width }: InfoTableProps) => (
-  <StyledDl width={width}>{children}</StyledDl>
+export const InfoTable = ({
+  children,
+  width,
+  className,
+  'data-testid': dataTestId,
+}: InfoTableProps) => (
+  <StyledDl className={className} data-testid={dataTestId} width={width}>
+    {children}
+  </StyledDl>
 )
 
 InfoTable.Row = InfoTableRow

packages/plus/src/components/Navigation/NavigationContent.tsx

@@ -96,6 +96,7 @@ export const NavigationContent = ({
   logo,
   onWidthResize,
   className,
+  'data-testid': dataTestId,
   id,
   onToggleExpand,
 }: NavigationProps) => {
@@ -202,7 +203,7 @@ export const NavigationContent = ({
   ])
 
   return (
-    <StyledNav className={className} id={id}>
+    <StyledNav className={className} data-testid={dataTestId} id={id}>
       <Container
         data-animation={shouldAnimate ? animation : undefined}
         data-expanded={expanded}

packages/plus/src/components/Navigation/types.ts

@@ -39,4 +39,5 @@ export type NavigationProps = {
    * This function will be called when the user toggle the expand/collapse button or with the slider.
    */
   onToggleExpand?: (expanded: boolean) => void
+  'data-testid'?: string
 }

packages/plus/src/components/OfferList/OfferList.tsx

@@ -14,7 +14,7 @@ const StyledList = styled(List)`
     width: ${({ theme }) => theme.sizing[700]};
     min-width:  ${({ theme }) => theme.sizing[700]};
     max-width:  ${({ theme }) => theme.sizing[700]};
-  } 
+  }
 `
 
 type OfferListProps = Omit<
@@ -30,6 +30,8 @@ type OfferListProps = Omit<
    * Pre-selected rows (using their offerName). Must be an array when `type = "checkbox"`.
    */
   selected?: string | string[]
+  ['data-testid']?: string
+  className?: string
 }
 
 export const OfferList = ({
@@ -41,6 +43,8 @@ export const OfferList = ({
   autoCollapse,
   selected,
   onChangeSelect,
+  className,
+  'data-testid': dataTestId,
 }: OfferListProps) => {
   const [radioSelectedRow, setRadioSelectedRow] = useState<string | undefined>(
     typeof selected === 'string' ? selected : undefined,
@@ -82,7 +86,9 @@ export const OfferList = ({
     >
       <StyledList
         autoCollapse={autoCollapse}
+        className={className}
         columns={computedColumns}
+        data-testid={dataTestId}
         expandable={false}
         selectable={false}
       >

packages/plus/src/components/OrderSummary/index.tsx

@@ -52,6 +52,8 @@ export const OrderSummary = ({
   onChangeUnitInput,
   totalPriceDescription,
   additionalInfo,
+  className,
+  'data-testid': dataTestId,
 }: OrderSummaryProps) => {
   const [timePeriodUnit, setTimePeriodUnit] = useState<TimeUnit>(unitUnitInput)
   const [timePeriodAmount, setTimePeriodAmount] = useState(valueUnitInput)
@@ -152,7 +154,11 @@ export const OrderSummary = ({
 
   return (
     <OrderSummaryContext.Provider value={valueContext}>
-      <Container justifyContent={hideDetails ? 'flex-start' : 'space-between'}>
+      <Container
+        className={className}
+        data-testId={dataTestId}
+        justifyContent={hideDetails ? 'flex-start' : 'space-between'}
+      >
         {header ? (
           <HeaderContainer
             data-hidedetails={hideDetails}

packages/plus/src/components/OrderSummary/types.ts

@@ -119,4 +119,6 @@ export type OrderSummaryProps = {
    */
   onChange?: (price: PriceType, totalPrice: PriceTypeSingle) => void
   hideDetails?: boolean
+  className?: string
+  ['data-testid']?: string
 } & PeriodProps