@apify/ui-library 1.108.1 → 1.109.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.108.1",
+    "version": "1.109.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.22.0",
+        "@apify/ui-icons": "^1.23.0",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "39263c7a39b7c688eb638919589e40cdbd3f1c04"
+    "gitHead": "a53c82a8136684f79742ff9360f27494a8944d61"
 }

package/src/components/card_container.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { DragIndicatorIcon } from '@apify/ui-icons';
+
+import { CardContainer, type CardContainerProps } from './card_container.js';
+import { IconButton } from './icon_button.js';
+
+export default {
+    title: 'UI-Library/CardContainer',
+    component: CardContainer,
+    argTypes: {
+        headerPlacement: {
+            control: { type: 'select' },
+            options: ['TOP', 'BOTTOM'],
+        },
+    },
+} as Meta<CardContainerProps>;
+
+type Story = StoryObj<CardContainerProps>;
+
+const StoryWrapper = styled.div`
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr 1fr;
+`;
+/**
+ * Default color wheel gradient with standard settings
+ */
+export const Default: Story = {
+    args: {
+        children: 'This is the content',
+        header: 'Recently viewed',
+    },
+    render: (args: CardContainerProps) => {
+        return <StoryWrapper>
+            <CardContainer {...args} />
+            <CardContainer {...args} headerPlacement='BOTTOM'/>
+            <CardContainer
+                {...args}
+                header={<>
+                    <CardContainer.Heading>TEst</CardContainer.Heading>
+                    <IconButton Icon={DragIndicatorIcon}/>
+                </>}
+            />
+            <CardContainer
+                {...args}
+                header={<>
+                    <div>
+                        <CardContainer.Heading># Videos with this hashtag</CardContainer.Heading>
+                        <code style={{ marginLeft: 8 }}>Required</code>
+                    </div>
+                </>}
+            />
+            <CardContainer
+                {...args}
+                header={<>
+                    Completely custom header content
+                </>}
+            />
+        </StoryWrapper>;
+    },
+};

package/src/components/card_container.tsx

@@ -0,0 +1,78 @@
+import type React from 'react';
+import styled from 'styled-components';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme.js';
+import { Box, type BoxProps } from './box.js';
+
+const classNames = {
+    CONTENT: 'CardContainer-Content',
+    HEADER: 'CardContainer-Header',
+};
+
+const HEADER_PLACEMENT = {
+    TOP: 'TOP',
+    BOTTOM: 'BOTTOM',
+} as const;
+
+const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}>`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border-radius: ${theme.radius.radius12};
+
+    padding: ${theme.space.space2};
+
+    display: flex;
+    flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
+
+    .${classNames.CONTENT} {
+        /* Inner radius = outer radius - padding */
+        border-radius: calc(${theme.radius.radius12} - ${theme.space.space2});
+        background-color: ${theme.color.neutral.background};
+
+        padding: ${theme.space.space16};
+        flex-grow: 1;
+    }
+    
+    .${classNames.HEADER} {
+        padding: ${theme.space.space4} ${theme.space.space8};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+`;
+
+const CardContainerHeading = styled.span`${theme.typography.shared.desktop.bodyMMedium}`;
+
+export type CardContainerProps = BoxProps & {
+    /** The header can be placed on the bottom of the card or on the top. */
+    headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>,
+    /**
+     * If string is passed, the correct styles are applied automatically.
+     * In case of custom component, use `CardContainer.Heading` component to get the same styles.
+     */
+    header: React.ReactNode,
+};
+
+/**
+ * CardContainer visually wraps it's children and shows a simple header.
+ *
+ * The header can be customized.
+ */
+export const CardContainer = ({
+    children,
+    header,
+    headerPlacement = HEADER_PLACEMENT.TOP,
+    ...rest
+}: CardContainerProps) => (
+    <Wrapper {...rest} $headerPlacement={headerPlacement}>
+        <div className={classNames.HEADER}>
+            {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}
+        </div>
+        <div className={classNames.CONTENT}>
+            {children}
+        </div>
+    </Wrapper>
+);
+
+CardContainer.Heading = CardContainerHeading;

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './text/index.js';
 export * from './box.js';
+export * from './card_container.js';
 export * from './message.js';
 export * from './floating/index.js';
 export * from './button.js';