@apify/ui-library 1.138.0 → 1.138.1

package/src/components/banner.stories.tsx

@@ -49,9 +49,7 @@ export const Default: Story = {
         children: (
             <div>
                 <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Welcome to Apify</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
-                    Build reliable web scrapers. Fast.
-                </p>
+                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>Build reliable web scrapers. Fast.</p>
             </div>
         ),
     },
@@ -65,9 +63,7 @@ export const WithGradientBackground: Story = {
         useGradientBackground: true,
         children: (
             <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>
-                    Gradient Background Banner
-                </h2>
+                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Gradient Background Banner</h2>
                 <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
                     This banner uses the beautiful gradient background with colorful shapes.
                 </p>
@@ -102,9 +98,7 @@ export const WithCustomBackground: Story = {
         useGradientBackground: false,
         children: (
             <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>
-                    Custom Green Background
-                </h2>
+                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Green Background</h2>
                 <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
                     This banner has a custom green background color.
                 </p>
@@ -122,9 +116,7 @@ export const WithCustomBackgroundAndGradient: Story = {
         useGradientBackground: true,
         children: (
             <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>
-                    Blue Background with Gradient
-                </h2>
+                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Blue Background with Gradient</h2>
                 <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
                     Custom blue background with gradient overlay effects.
                 </p>
@@ -141,9 +133,7 @@ export const WithCustomWidth: Story = {
         width: '600px',
         children: (
             <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>
-                    Custom Width Banner
-                </h2>
+                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Width Banner</h2>
                 <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
                     This banner has a fixed width of 600px instead of 100%.
                 </p>
@@ -157,11 +147,7 @@ export const WithCustomWidth: Story = {
  */
 export const WithMinimalContent: Story = {
     args: {
-        children: (
-            <p style={{ margin: 0, color: 'white', textAlign: 'center' }}>
-                Simple announcement message
-            </p>
-        ),
+        children: <p style={{ margin: 0, color: 'white', textAlign: 'center' }}>Simple announcement message</p>,
     },
 };
 
@@ -176,8 +162,8 @@ export const WithRichContent: Story = {
                     🚀 New Feature Launch
                 </h1>
                 <p style={{ margin: 0, marginBottom: '16px', color: 'rgba(255, 255, 255, 0.9)' }}>
-                    We&apos;ve just released our most powerful web scraping tools yet.
-                    Experience faster, more reliable data extraction with our enhanced platform.
+                    We&apos;ve just released our most powerful web scraping tools yet. Experience faster, more reliable
+                    data extraction with our enhanced platform.
                 </p>
                 <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                     <button
@@ -220,9 +206,7 @@ export const WarningBanner: Story = {
             <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                 <span style={{ fontSize: '1.5rem' }}>⚠️</span>
                 <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>
-                        Maintenance Notice
-                    </h3>
+                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Maintenance Notice</h3>
                     <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
                         Scheduled maintenance will occur on Sunday, 12:00-14:00 UTC.
                     </p>
@@ -243,9 +227,7 @@ export const SuccessBanner: Story = {
             <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                 <span style={{ fontSize: '1.5rem' }}>✅</span>
                 <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>
-                        Migration Complete
-                    </h3>
+                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Migration Complete</h3>
                     <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
                         Your account has been successfully migrated to our new platform.
                     </p>

package/src/components/banner.tsx

@@ -51,26 +51,27 @@ const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="
 `;
 
 interface BannerProps {
-    background?: string,
-    useGradientBackground?: boolean,
-    width?: string,
-    className?: string,
-    children: React.ReactNode,
+    background?: string;
+    useGradientBackground?: boolean;
+    width?: string;
+    className?: string;
+    children: React.ReactNode;
 }
 
 const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
     return css`
-            background-color: ${background || theme.color.neutral.backgroundSubtle};
-            ${useGradientBackground && `
+        background-color: ${background || theme.color.neutral.backgroundSubtle};
+        ${useGradientBackground &&
+        `
             background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
             `}
-        `;
+    `;
 };
 
-const StyledBanner = styled.div<{ $background?: string, $useGradientBackground?: boolean, width?: string }>`
+const StyledBanner = styled.div<{ $background?: string; $useGradientBackground?: boolean; width?: string }>`
     width: ${(props) => props.width || '100%'};
     padding: ${theme.space.space40} ${theme.space.space80};
     border-radius: ${theme.radius.radius16};
@@ -84,11 +85,7 @@ export const Banner: React.FC<BannerProps> = ({
     children,
     ...otherProps
 }) => (
-    <StyledBanner
-        $background={background}
-        $useGradientBackground={useGradientBackground}
-        {...otherProps}
-    >
+    <StyledBanner $background={background} $useGradientBackground={useGradientBackground} {...otherProps}>
         {children}
     </StyledBanner>
 );

package/src/components/blog_article.tsx

@@ -17,7 +17,7 @@ const BlogArticleWrapper = styled.div`
 
     &:hover {
         .${classNames.READ_POST} {
-                color: ${theme.color.primary.action};
+            color: ${theme.color.primary.action};
         }
     }
 
@@ -57,9 +57,8 @@ const BlogArticleWrapper = styled.div`
             ${theme.typography.shared.desktop.titleM}
         }
 
-
         svg {
-            transition: margin-right .5s;
+            transition: margin-right 0.5s;
         }
 
         &:hover svg {
@@ -79,7 +78,10 @@ export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }: BlogAr
         <BlogArticleWrapper>
             <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
             <div className={classNames.TEXT}>{title}</div>
-            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRightIcon size="16" title="" titleId="" /></div>
+            <div className={classNames.READ_POST}>
+                {ctaTitle}
+                <ArrowRightIcon size="16" title="" titleId="" />
+            </div>
         </BlogArticleWrapper>
     );
 }

package/src/components/box.tsx

@@ -9,37 +9,37 @@ import type { WithTransientProps } from '../type_utils.js';
 type ExtendedSize = Size | 'none' | 'auto';
 
 export interface MarginSpacingProps {
-    m?: ExtendedSize,
-    mt?: ExtendedSize,
-    mb?: ExtendedSize,
-    ml?: ExtendedSize,
-    mr?: ExtendedSize,
-    mx?: ExtendedSize,
-    my?: ExtendedSize,
+    m?: ExtendedSize;
+    mt?: ExtendedSize;
+    mb?: ExtendedSize;
+    ml?: ExtendedSize;
+    mr?: ExtendedSize;
+    mx?: ExtendedSize;
+    my?: ExtendedSize;
 }
 
 export interface PaddingSpacingProps {
-    p?: ExtendedSize,
-    pt?: ExtendedSize,
-    pb?: ExtendedSize,
-    pl?: ExtendedSize,
-    pr?: ExtendedSize,
-    px?: ExtendedSize,
-    py?: ExtendedSize,
+    p?: ExtendedSize;
+    pt?: ExtendedSize;
+    pb?: ExtendedSize;
+    pl?: ExtendedSize;
+    pr?: ExtendedSize;
+    px?: ExtendedSize;
+    py?: ExtendedSize;
 }
 
 type SharedBoxProps = {
-    children?: React.ReactNode,
-    className?: string,
-    style?: React.CSSProperties
-    onClick?: (e: React.MouseEvent) => void,
-    id?: string,
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: string;
 };
 
 // This should be renamed - these props are global for any element not just Boxes
 export type RegularBoxProps = SharedBoxProps & { as?: React.ElementType };
 
-type OlBoxProps = SharedBoxProps & { as: 'ol', start?: number };
+type OlBoxProps = SharedBoxProps & { as: 'ol'; start?: number };
 
 /** Combines together RegularBoxProps and props for specific elements. */
 type AnyBoxProps = RegularBoxProps | OlBoxProps;
@@ -53,76 +53,77 @@ const getSizeValue = (token?: ExtendedSize) => {
 };
 
 const StyledBox = styled.div<WithTransientProps<MarginSpacingProps & PaddingSpacingProps>>`
-    ${({ $mt, $my, $m }) => ($mt || $my || $m) && css`
-        margin-top: ${getSizeValue($mt || $my || $m)};
-    `}
-
-    ${({ $mb, $my, $m }) => ($mb || $my || $m) && css`
-        margin-bottom: ${getSizeValue($mb || $my || $m)};
-    `}
-
-    ${({ $mr, $mx, $m }) => ($mr || $mx || $m) && css`
-        margin-right: ${getSizeValue($mr || $mx || $m)};
-    `}
-
-    ${({ $ml, $mx, $m }) => ($ml || $mx || $m) && css`
-        margin-left: ${getSizeValue($ml || $mx || $m)};
-    `}
-
-    ${({ $pt, $py, $p }) => ($pt || $py || $p) && css`
-        padding-top: ${getSizeValue($pt || $py || $p)};
-    `}
-
-    ${({ $pb, $py, $p }) => ($pb || $py || $p) && css`
-        padding-bottom: ${getSizeValue($pb || $py || $p)};
-    `}
-
-    ${({ $pr, $px, $p }) => ($pr || $px || $p) && css`
-        padding-right: ${getSizeValue($pr || $px || $p)};
-    `}
-
-    ${({ $pl, $px, $p }) => ($pl || $px || $p) && css`
-        padding-left: ${getSizeValue($pl || $px || $p)};
-    `}
+    ${({ $mt, $my, $m }) =>
+        ($mt || $my || $m) &&
+        css`
+            margin-top: ${getSizeValue($mt || $my || $m)};
+        `}
+
+    ${({ $mb, $my, $m }) =>
+        ($mb || $my || $m) &&
+        css`
+            margin-bottom: ${getSizeValue($mb || $my || $m)};
+        `}
+
+    ${({ $mr, $mx, $m }) =>
+        ($mr || $mx || $m) &&
+        css`
+            margin-right: ${getSizeValue($mr || $mx || $m)};
+        `}
+
+    ${({ $ml, $mx, $m }) =>
+        ($ml || $mx || $m) &&
+        css`
+            margin-left: ${getSizeValue($ml || $mx || $m)};
+        `}
+
+    ${({ $pt, $py, $p }) =>
+        ($pt || $py || $p) &&
+        css`
+            padding-top: ${getSizeValue($pt || $py || $p)};
+        `}
+
+    ${({ $pb, $py, $p }) =>
+        ($pb || $py || $p) &&
+        css`
+            padding-bottom: ${getSizeValue($pb || $py || $p)};
+        `}
+
+    ${({ $pr, $px, $p }) =>
+        ($pr || $px || $p) &&
+        css`
+            padding-right: ${getSizeValue($pr || $px || $p)};
+        `}
+
+    ${({ $pl, $px, $p }) =>
+        ($pl || $px || $p) &&
+        css`
+            padding-left: ${getSizeValue($pl || $px || $p)};
+        `}
 `;
 // This component should work as a base component for all low level components (Heading, Message, Card, ...) to make it easy to define spacing.
 // Right now, it's quite common to define some sort of spacing on these components already using css. Card = styled.div`margin-bottom: theme.space.space8`
 // We should get rid of it and define it using props for Box component Card = styled(Box).attrs({mb: 'space8'})
-export const Box = forwardRef<HTMLElement, BoxProps>(({
-    m,
-    mt,
-    mb,
-    ml,
-    mr,
-    mx,
-    my,
-    p,
-    pt,
-    pb,
-    pl,
-    pr,
-    px,
-    py,
-    as,
-    ...rest
-}: BoxProps, ref) => (
-    <StyledBox
-        $m={m}
-        $mt={mt}
-        $mb={mb}
-        $ml={ml}
-        $mr={mr}
-        $mx={mx}
-        $my={my}
-        $p={p}
-        $pt={pt}
-        $pb={pb}
-        $pl={pl}
-        $pr={pr}
-        $px={px}
-        $py={py}
-        as={as}
-        ref={ref}
-        {...rest}
-    />
-));
+export const Box = forwardRef<HTMLElement, BoxProps>(
+    ({ m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, as, ...rest }: BoxProps, ref) => (
+        <StyledBox
+            $m={m}
+            $mt={mt}
+            $mb={mb}
+            $ml={ml}
+            $mr={mr}
+            $mx={mx}
+            $my={my}
+            $p={p}
+            $pt={pt}
+            $pb={pb}
+            $pl={pl}
+            $pr={pr}
+            $px={px}
+            $py={py}
+            as={as}
+            ref={ref}
+            {...rest}
+        />
+    ),
+);

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -15,10 +15,7 @@ export default {
 
 export const Default: Story = {
     args: {
-        items: [
-            { label: 'All Actors', url: '/actors' },
-            { label: 'Generate leads' },
-        ],
+        items: [{ label: 'All Actors', url: '/actors' }, { label: 'Generate leads' }],
     },
 };
 
@@ -40,10 +37,7 @@ export const SingleItem: Story = {
 
 export const Hovered: Story = {
     args: {
-        items: [
-            { label: 'All Actors', url: '/actors' },
-            { label: 'Generate leads' },
-        ],
+        items: [{ label: 'All Actors', url: '/actors' }, { label: 'Generate leads' }],
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/components/breadcrumb/breadcrumb.tsx

@@ -57,9 +57,9 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) =>
                 <React.Fragment key={item.label}>
                     {index > 0 && (
                         <Text
-                            as='span'
-                            size='small'
-                            weight='medium'
+                            as="span"
+                            size="small"
+                            weight="medium"
                             color={theme.color.neutral.textSubtle}
                             className={breadcrumbClassNames.SEPARATOR}
                         >
@@ -69,11 +69,13 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) =>
                     <span className={clsx(breadcrumbClassNames.ITEM, isActive && breadcrumbClassNames.ITEM_ACTIVE)}>
                         {!isActive && item.url ? (
                             <StyledBreadcrumbLink to={item.url}>
-                                <Text as='span' size='small' weight='normal'>{item.label}</Text>
+                                <Text as="span" size="small" weight="normal">
+                                    {item.label}
+                                </Text>
                             </StyledBreadcrumbLink>
                         ) : (
                             <StyledBreadcrumbItemText
-                                size='small'
+                                size="small"
                                 weight={isActive ? 'bold' : 'normal'}
                                 color={isActive ? theme.color.neutral.text : theme.color.neutral.textSubtle}
                             >

package/src/components/button.stories.tsx

@@ -49,72 +49,76 @@ const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
     return (
         <Wrapper>
             <ButtonGrid>
-                <Button {...props} variant='primary'>Primary</Button>
-                <Button {...props} variant='secondary'>Secondary</Button>
-                <Button {...props} variant='tertiary'>Tertiary</Button>
-                <Button {...props} disabled>Disabled</Button>
-                <Button {...props} variant='tertiary' disabled>Tertiary Disabled</Button>
+                <Button {...props} variant="primary">
+                    Primary
+                </Button>
+                <Button {...props} variant="secondary">
+                    Secondary
+                </Button>
+                <Button {...props} variant="tertiary">
+                    Tertiary
+                </Button>
+                <Button {...props} disabled>
+                    Disabled
+                </Button>
+                <Button {...props} variant="tertiary" disabled>
+                    Tertiary Disabled
+                </Button>
             </ButtonGrid>
 
             <h6>With leading icon</h6>
             <ButtonGrid>
-                <Button {...props} LeftIcon={CrossIcon} variant='primary'>Primary</Button>
-                <Button {...props} LeftIcon={CrossIcon} variant='secondary'>Secondary</Button>
-                <Button {...props} LeftIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
-                <Button {...props} LeftIcon={CrossIcon} disabled>Disabled</Button>
-                <Button {...props} LeftIcon={CrossIcon} variant='tertiary' disabled>Tertiary Disabled</Button>
+                <Button {...props} LeftIcon={CrossIcon} variant="primary">
+                    Primary
+                </Button>
+                <Button {...props} LeftIcon={CrossIcon} variant="secondary">
+                    Secondary
+                </Button>
+                <Button {...props} LeftIcon={CrossIcon} variant="tertiary">
+                    Tertiary
+                </Button>
+                <Button {...props} LeftIcon={CrossIcon} disabled>
+                    Disabled
+                </Button>
+                <Button {...props} LeftIcon={CrossIcon} variant="tertiary" disabled>
+                    Tertiary Disabled
+                </Button>
             </ButtonGrid>
 
             <h6>With trailing icon</h6>
             <ButtonGrid>
-                <Button {...props} RightIcon={CrossIcon} variant='primary'>Primary</Button>
-                <Button {...props} RightIcon={CrossIcon} variant='secondary'>Secondary</Button>
-                <Button {...props} RightIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
-                <Button {...props} RightIcon={CrossIcon} disabled>Disabled</Button>
-                <Button {...props} RightIcon={CrossIcon} variant='tertiary' disabled>Tertiary Disabled</Button>
+                <Button {...props} RightIcon={CrossIcon} variant="primary">
+                    Primary
+                </Button>
+                <Button {...props} RightIcon={CrossIcon} variant="secondary">
+                    Secondary
+                </Button>
+                <Button {...props} RightIcon={CrossIcon} variant="tertiary">
+                    Tertiary
+                </Button>
+                <Button {...props} RightIcon={CrossIcon} disabled>
+                    Disabled
+                </Button>
+                <Button {...props} RightIcon={CrossIcon} variant="tertiary" disabled>
+                    Tertiary Disabled
+                </Button>
             </ButtonGrid>
 
             <h6>With both icons</h6>
             <ButtonGrid>
-                <Button
-                    {...props}
-                    RightIcon={CrossIcon}
-                    LeftIcon={CrossIcon}
-                    variant='primary'
-                >
+                <Button {...props} RightIcon={CrossIcon} LeftIcon={CrossIcon} variant="primary">
                     Primary test
                 </Button>
-                <Button
-                    {...props}
-                    RightIcon={CrossIcon}
-                    LeftIcon={CrossIcon}
-                    variant='secondary'
-                >
+                <Button {...props} RightIcon={CrossIcon} LeftIcon={CrossIcon} variant="secondary">
                     Secondary
                 </Button>
-                <Button
-                    {...props}
-                    RightIcon={CrossIcon}
-                    LeftIcon={CrossIcon}
-                    variant='tertiary'
-                >
+                <Button {...props} RightIcon={CrossIcon} LeftIcon={CrossIcon} variant="tertiary">
                     Tertiary
                 </Button>
-                <Button
-                    {...props}
-                    RightIcon={CrossIcon}
-                    LeftIcon={CrossIcon}
-                    disabled
-                >
+                <Button {...props} RightIcon={CrossIcon} LeftIcon={CrossIcon} disabled>
                     Disabled
                 </Button>
-                <Button
-                    {...props}
-                    RightIcon={CrossIcon}
-                    LeftIcon={CrossIcon}
-                    variant='tertiary'
-                    disabled
-                >
+                <Button {...props} RightIcon={CrossIcon} LeftIcon={CrossIcon} variant="tertiary" disabled>
                     Tertiary Disabled
                 </Button>
             </ButtonGrid>
@@ -127,35 +131,35 @@ export const Default = () => {
         <Wrapper>
             <h4>Primary</h4>
             <TwoColumns>
-                <ButtonSection color='default' size='extraLarge' />
-                <ButtonSection color='default' size='large' />
-                <ButtonSection color='default' size='medium' />
-                <ButtonSection color='default' size='small' />
-                <ButtonSection color='default' size='extraSmall' />
+                <ButtonSection color="default" size="extraLarge" />
+                <ButtonSection color="default" size="large" />
+                <ButtonSection color="default" size="medium" />
+                <ButtonSection color="default" size="small" />
+                <ButtonSection color="default" size="extraSmall" />
             </TwoColumns>
             <h4>Success</h4>
             <TwoColumns>
-                <ButtonSection color='success' size='extraLarge' />
-                <ButtonSection color='success' size='large' />
-                <ButtonSection color='success' size='medium' />
-                <ButtonSection color='success' size='small' />
-                <ButtonSection color='success' size='extraSmall' />
+                <ButtonSection color="success" size="extraLarge" />
+                <ButtonSection color="success" size="large" />
+                <ButtonSection color="success" size="medium" />
+                <ButtonSection color="success" size="small" />
+                <ButtonSection color="success" size="extraSmall" />
             </TwoColumns>
             <h4>Danger</h4>
             <TwoColumns>
-                <ButtonSection color='danger' size='extraLarge' />
-                <ButtonSection color='danger' size='large' />
-                <ButtonSection color='danger' size='medium' />
-                <ButtonSection color='danger' size='small' />
-                <ButtonSection color='danger' size='extraSmall' />
+                <ButtonSection color="danger" size="extraLarge" />
+                <ButtonSection color="danger" size="large" />
+                <ButtonSection color="danger" size="medium" />
+                <ButtonSection color="danger" size="small" />
+                <ButtonSection color="danger" size="extraSmall" />
             </TwoColumns>
             <h4>Primary Black - WIP</h4>
             <TwoColumns>
-                <ButtonSection color='primaryBlack' size='extraLarge' />
-                <ButtonSection color='primaryBlack' size='large' />
-                <ButtonSection color='primaryBlack' size='medium' />
-                <ButtonSection color='primaryBlack' size='small' />
-                <ButtonSection color='primaryBlack' size='extraSmall' />
+                <ButtonSection color="primaryBlack" size="extraLarge" />
+                <ButtonSection color="primaryBlack" size="large" />
+                <ButtonSection color="primaryBlack" size="medium" />
+                <ButtonSection color="primaryBlack" size="small" />
+                <ButtonSection color="primaryBlack" size="extraSmall" />
             </TwoColumns>
         </Wrapper>
     );