@apify/ui-library 1.129.0 → 1.130.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.129.0",
+    "version": "1.130.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.31.0",
+        "@apify/ui-icons": "^1.32.0",
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.0.0",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "87c4357f05dcc81e71f9d2c3c53bed7df0c8877d"
+    "gitHead": "65136123362e410981952225035b672473abdf0e"
 }

package/src/components/avatar/actor_avatar.tsx

@@ -14,8 +14,8 @@ export const actorAvatarClassnames = {
     SVG: 'ActorAvatar-svg',
 };
 
-const StyledBoringAvatarMarble = styled(BoringAvatarMarble)`
-    border-radius: ${theme.radius.radius8};
+const StyledBoringAvatarMarble = styled(BoringAvatarMarble)<{ $borderRadius: string | number }>`
+    border-radius: ${({ $borderRadius }) => $borderRadius};
 
     text {
         ${theme.typography.shared.mobile.bodyMStrong}
@@ -44,6 +44,7 @@ interface ActorAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     url?: string | null;
     alt?: string;
     size: number;
+    borderRadius?: string | number;
 }
 
 export const ActorAvatarInner: FC<ActorAvatarProps> = ({
@@ -52,6 +53,7 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
     url,
     size,
     alt,
+    borderRadius = theme.radius.radius8,
     ...rest
 }) => {
     const [hasImageError, setHasImageError] = useState(false);
@@ -120,6 +122,7 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
             name={name}
             square={true}
             alt={altText}
+            $borderRadius={borderRadius}
         />
     );
 };

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>

package/src/components/store/store_actor_header.stories.tsx

@@ -38,10 +38,6 @@ const meta = {
             control: 'number',
             description: 'Size of the avatar in pixels',
         },
-        newStyle: {
-            control: 'boolean',
-            description: 'Uses new styling with larger gap and different typography',
-        },
     },
 } satisfies Meta<typeof StoreActorHeader>;
 
@@ -75,51 +71,108 @@ export const WithLongNames: Story = {
 export const Variants: Story = {
     render: () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-            <div>
-                <h4>Basic</h4>
-                <StoreActorHeader
-                    name="web-scraper"
-                    title="Web Scraper"
-                    username="apify"
-                />
-            </div>
-            <div>
-                <h4>With Picture</h4>
-                <StoreActorHeader
-                    name="web-scraper"
-                    title="Web Scraper"
-                    username="apify"
-                    pictureUrl="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
-                />
-            </div>
-            <div>
-                <h4>With Rising Star Badge</h4>
-                <StoreActorHeader
-                    name="instagram-scraper"
-                    title="Instagram Scraper"
-                    username="apify"
-                    hasRisingStarBadge={true}
-                />
-            </div>
-            <div>
-                <h4>Under Maintenance</h4>
-                <StoreActorHeader
-                    name="amazon-scraper"
-                    title="Amazon Product Scraper"
-                    username="junglee"
-                    isUnderMaintenance={true}
-                />
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', alignItems: 'start' }}>
+                <span />
+                <h4 style={{ margin: 0 }}>Compact</h4>
             </div>
-            <div>
-                <h4>All Features Combined</h4>
-                <StoreActorHeader
-                    name="twitter-scraper"
-                    title="Twitter Scraper"
-                    username="vdrmota"
-                    pictureUrl="https://apify.com/img/actors/twitter-scraper.png"
-                    hasRisingStarBadge={true}
-                    isUnderMaintenance={true}
-                />
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', alignItems: 'center' }}>
+                <div>
+                    <h4>Basic</h4>
+                    <StoreActorHeader
+                        name="web-scraper"
+                        title="Web Scraper"
+                        username="apify"
+                    />
+                </div>
+                <div>
+                    <h4>Basic</h4>
+                    <StoreActorHeader
+                        compact
+                        name="web-scraper"
+                        title="Web Scraper"
+                        username="apify"
+                    />
+                </div>
+                <div>
+                    <h4>With Picture</h4>
+                    <StoreActorHeader
+                        name="web-scraper"
+                        title="Web Scraper"
+                        username="apify"
+                        pictureUrl="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                    />
+                </div>
+                <div>
+                    <h4>With Picture</h4>
+                    <StoreActorHeader
+                        compact
+                        name="web-scraper"
+                        title="Web Scraper"
+                        username="apify"
+                        pictureUrl="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                    />
+                </div>
+                <div>
+                    <h4>With Rising Star Badge</h4>
+                    <StoreActorHeader
+                        name="instagram-scraper"
+                        title="Instagram Scraper"
+                        username="apify"
+                        hasRisingStarBadge={true}
+                    />
+                </div>
+                <div>
+                    <h4>With Rising Star Badge</h4>
+                    <StoreActorHeader
+                        compact
+                        name="instagram-scraper"
+                        title="Instagram Scraper"
+                        username="apify"
+                        hasRisingStarBadge={true}
+                    />
+                </div>
+                <div>
+                    <h4>Under Maintenance</h4>
+                    <StoreActorHeader
+                        name="amazon-scraper"
+                        title="Amazon Product Scraper"
+                        username="junglee"
+                        isUnderMaintenance={true}
+                    />
+                </div>
+                <div>
+                    <h4>Under Maintenance</h4>
+                    <StoreActorHeader
+                        compact
+                        name="amazon-scraper"
+                        title="Amazon Product Scraper"
+                        username="junglee"
+                        isUnderMaintenance={true}
+                    />
+                </div>
+                <div>
+                    <h4>All Features Combined</h4>
+                    <StoreActorHeader
+                        name="twitter-scraper"
+                        title="Twitter Scraper"
+                        username="vdrmota"
+                        pictureUrl="https://apify.com/img/actors/twitter-scraper.png"
+                        hasRisingStarBadge={true}
+                        isUnderMaintenance={true}
+                    />
+                </div>
+                <div>
+                    <h4>All Features Combined</h4>
+                    <StoreActorHeader
+                        compact
+                        name="twitter-scraper"
+                        title="Twitter Scraper"
+                        username="vdrmota"
+                        pictureUrl="https://apify.com/img/actors/twitter-scraper.png"
+                        hasRisingStarBadge={true}
+                        isUnderMaintenance={true}
+                    />
+                </div>
             </div>
         </div>
     ),

package/src/components/store/store_actor_header.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { StarEmptyIcon, WarningTriangleIcon } from '@apify/ui-icons';
 
-import { Badge, Box, type BoxProps, Heading, Text } from '../../components/index.js';
+import { Badge, Box, type BoxProps, Text } from '../../components/index.js';
 import { theme } from '../../design_system/theme.js';
 import { ActorAvatar, actorAvatarClassnames } from '../avatar/actor_avatar.js';
 
@@ -12,10 +12,10 @@ const storeActorHeaderClassNames = {
     badge: 'ActorStoreItem-badge',
 };
 
-const StyledStoreActorHeader = styled(Box)<{ $newStyle?: boolean }>`
+const StyledStoreActorHeader = styled(Box)<{ $compact: boolean}>`
     display: flex;
-    gap: ${({ $newStyle }) => ($newStyle ? theme.space.space12 : theme.space.space8)};
-    align-items: center;
+    gap: ${({ $compact }) => ($compact ? theme.space.space4 : theme.space.space12)};
+    align-items: ${({ $compact }) => ($compact ? 'flex-start' : 'center')};
 
     .${actorAvatarClassnames.BASE} {
         border: 1px solid ${theme.color.neutral.border};
@@ -78,7 +78,7 @@ export type StoreActorHeaderProps = {
     isUnderMaintenance?: boolean,
     hasRisingStarBadge?: boolean,
     avatarSize?: number,
-    newStyle?: boolean,
+    compact?: boolean;
 }
 
 export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
@@ -89,18 +89,19 @@ export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
     isUnderMaintenance = false,
     hasRisingStarBadge = false,
     avatarSize = 40,
-    newStyle = false,
+    compact = false,
     ...rest
 }) => {
     return (
-        <StyledStoreActorHeader data-test="actor-store-item-header" $newStyle={newStyle} {...rest}>
+        <StyledStoreActorHeader data-test="actor-store-item-header" $compact={compact} {...rest}>
             <ActorAvatarWrapper>
                 <ActorAvatar
-                    size={avatarSize}
+                    size={compact ? 20 : avatarSize}
                     url={pictureUrl}
                     name={title}
+                    borderRadius={compact ? theme.radius.radius4 : theme.radius.radius8}
                 />
-                {hasRisingStarBadge && <StyledCompactBadge
+                {!compact && hasRisingStarBadge && <StyledCompactBadge
                     variant='primary_blue'
                     size='small'
                     LeadingIcon={StarEmptyIcon}
@@ -109,17 +110,12 @@ export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
             </ActorAvatarWrapper>
             <ActorTitleWrapper>
                 <div className={storeActorHeaderClassNames.title}>
-                    { newStyle
-                        ? <Text as='h3' weight='bold' color={theme.color.neutral.text}>{title}</Text>
-                        : <Heading as='h3' type="titleS" color={theme.color.neutral.text}>
-                            {title}
-                        </Heading>}
-
+                    <Text as='h3' weight={compact ? 'medium' : 'bold'} color={theme.color.neutral.text}>{title}</Text>
                     {isUnderMaintenance && (<WarningTriangleIcon size="12" color={theme.color.warning.icon} />)}
                 </div>
                 <Text
                     size="small"
-                    weight={newStyle ? 'medium' : 'normal'}
+                    weight='medium'
                     type="code"
                     color={theme.color.neutral.textSubtle}
                     className={storeActorHeaderClassNames.slug}