@apify/ui-library 1.129.0 → 1.129.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.129.0",
+    "version": "1.129.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "87c4357f05dcc81e71f9d2c3c53bed7df0c8877d"
+    "gitHead": "1ecb31c5ffe6b2aeb11e068bde70a04a8da7acb3"
 }

package/src/components/card_container.stories.tsx

@@ -46,12 +46,12 @@ export const Default: Story = {
             />
             <CardContainer
                 {...args}
-                header={<>
+                header={
                     <div>
                         <CardContainer.Heading># Videos with this hashtag</CardContainer.Heading>
                         <code style={{ marginLeft: 8 }}>Required</code>
                     </div>
-                </>}
+                }
             />
             <CardContainer
                 {...args}
@@ -59,6 +59,9 @@ export const Default: Story = {
                     Completely custom header content
                 </>}
             />
+            <CardContainer {...args} header={null}>
+                Content without header
+            </CardContainer>
         </StoryWrapper>;
     },
 };

package/src/components/card_container.tsx

@@ -6,7 +6,7 @@ import type { ValueOf } from '@apify-packages/types';
 import { theme } from '../design_system/theme.js';
 import { Box, type BoxProps } from './box.js';
 
-const classNames = {
+export const cardContainerClassNames = {
     CONTENT: 'CardContainer-Content',
     HEADER: 'CardContainer-Header',
 };
@@ -25,7 +25,7 @@ const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}
     display: flex;
     flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
 
-    .${classNames.CONTENT} {
+    .${cardContainerClassNames.CONTENT} {
         /* Inner radius = outer radius - padding */
         border-radius: calc(${theme.radius.radius12} - ${theme.space.space2});
         background-color: ${theme.color.neutral.background};
@@ -34,7 +34,7 @@ const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}
         flex-grow: 1;
     }
 
-    .${classNames.HEADER} {
+    .${cardContainerClassNames.HEADER} {
         padding: ${theme.space.space4} ${theme.space.space8};
         display: flex;
         justify-content: space-between;
@@ -50,6 +50,7 @@ export type CardContainerProps = BoxProps & {
     /**
      * If string is passed, the correct styles are applied automatically.
      * In case of custom component, use `CardContainer.Heading` component to get the same styles.
+     * Pass `null` to render without a header section.
      */
     header: React.ReactNode,
 };
@@ -66,10 +67,12 @@ export const CardContainer = ({
     ...rest
 }: CardContainerProps) => (
     <Wrapper {...rest} $headerPlacement={headerPlacement}>
-        <div className={classNames.HEADER}>
-            {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}
-        </div>
-        <div className={classNames.CONTENT}>
+        {header != null && (
+            <div className={cardContainerClassNames.HEADER}>
+                {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}
+            </div>
+        )}
+        <div className={cardContainerClassNames.CONTENT}>
             {children}
         </div>
     </Wrapper>