Container query feature branch

CHANGELOG.md

@@ -14,6 +14,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `Heading` component to add `line-height` styles for mobile.
 - Updates the `Breadcrumbs` component to make link text screen readable on mobile breakpoints.
 - Updates the `MultiSelect` component to adjust the text and size styles for the search input field.
+- Updates the `Card`, `FeaturedContent`, and `SearchBar` components to use container queries.
 
 ## 3.5.2 (January 16, 2025)
 

src/components/Card/Card.tsx

@@ -105,7 +105,7 @@ function CardImage(
   });
 
   return (
-    <Box __css={styles}>
+    <Box __css={styles} data-image>
       <Image
         alt={alt}
         aspectRatio={aspectRatio}
@@ -266,6 +266,7 @@ export const Card: ChakraComponent<
         isCentered,
         layout,
         mainActionLink,
+        imageSize: imageProps.size,
       });
 
       React.Children.map(
@@ -320,46 +321,45 @@ export const Card: ChakraComponent<
       );
 
       return (
-        <CardWrapper
-          id={id}
-          className={className}
-          mainActionLink={mainActionLink}
-          ref={ref}
-          styles={{
-            ...styles.base,
-            ...customColors,
-          }}
-          {...rest}
-        >
-          {hasImage && (
-            <CardImage
-              alt={imageProps.alt}
-              aspectRatio={finalImageAspectRatio}
-              caption={imageProps.caption}
-              component={imageProps.component}
-              credit={imageProps.credit}
-              fallbackSrc={imageProps.fallbackSrc}
-              id={imageProps.id}
-              isAtEnd={imageProps.isAtEnd}
-              isLazy={imageProps.isLazy}
-              onError={imageProps.onError}
-              layout={layout}
-              size={imageProps.size}
-              src={imageProps.src ? imageProps.src : undefined}
-            />
-          )}
-          <Box className="card-body" __css={styles.body}>
-            {cardContents}
-          </Box>
-          {cardRightContents.length ? (
-            <Box
-              className="card-right"
-              __css={{ ...styles.body, ...styles.actions }}
-            >
-              {cardRightContents}
+        <Box __css={styles.base} ref={ref}>
+          <CardWrapper
+            id={id}
+            className={className}
+            mainActionLink={mainActionLink}
+            styles={{
+              ...styles.wrapper,
+              ...customColors,
+            }}
+            data-wrapper
+            {...rest}
+          >
+            {hasImage && (
+              <CardImage
+                alt={imageProps.alt}
+                aspectRatio={finalImageAspectRatio}
+                caption={imageProps.caption}
+                component={imageProps.component}
+                credit={imageProps.credit}
+                fallbackSrc={imageProps.fallbackSrc}
+                id={imageProps.id}
+                isAtEnd={imageProps.isAtEnd}
+                isLazy={imageProps.isLazy}
+                onError={imageProps.onError}
+                layout={layout}
+                size={imageProps.size}
+                src={imageProps.src ? imageProps.src : undefined}
+              />
+            )}
+            <Box __css={styles.body} data-body>
+              {cardContents}
             </Box>
-          ) : null}
-        </CardWrapper>
+            {cardRightContents.length ? (
+              <Box __css={{ ...styles.body, ...styles.actions }} data-actions>
+                {cardRightContents}
+              </Box>
+            ) : null}
+          </CardWrapper>
+        </Box>
       );
     }
   )