@apify/ui-library 1.108.2 → 1.109.0

package/dist/src/components/card_container.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { ValueOf } from '@apify-packages/types';
+import { type BoxProps } from './box.js';
+declare const HEADER_PLACEMENT: {
+    readonly TOP: "TOP";
+    readonly BOTTOM: "BOTTOM";
+};
+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 declare const CardContainer: {
+    ({ children, header, headerPlacement, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+    Heading: import("styled-components").StyledComponent<"span", any, {}, never>;
+};
+export {};
+//# sourceMappingURL=card_container.d.ts.map

package/dist/src/components/card_container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card_container.d.ts","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAO9C,QAAA,MAAM,gBAAgB;;;CAGZ,CAAC;AA8BX,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG;IACxC,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;qDAKvB,kBAAkB;;CASpB,CAAC"}

package/dist/src/components/card_container.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { theme } from '../design_system/theme.js';
+import { Box } from './box.js';
+const classNames = {
+    CONTENT: 'CardContainer-Content',
+    HEADER: 'CardContainer-Header',
+};
+const HEADER_PLACEMENT = {
+    TOP: 'TOP',
+    BOTTOM: 'BOTTOM',
+};
+const Wrapper = styled(Box) `
+    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}`;
+/**
+ * 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 }) => (_jsxs(Wrapper, { ...rest, "$headerPlacement": headerPlacement, children: [_jsx("div", { className: classNames.HEADER, children: typeof header === 'string' ? _jsx(CardContainerHeading, { children: header }) : header }), _jsx("div", { className: classNames.CONTENT, children: children })] }));
+CardContainer.Heading = CardContainerHeading;
+//# sourceMappingURL=card_container.js.map

package/dist/src/components/card_container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card_container.js","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAiB,MAAM,UAAU,CAAC;AAE9C,MAAM,UAAU,GAAG;IACf,OAAO,EAAE,uBAAuB;IAChC,MAAM,EAAE,sBAAsB;CACjC,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACrB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACV,CAAC;AAEX,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsD;wBACzD,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;qBACvC,KAAK,CAAC,MAAM,CAAC,QAAQ;;eAE3B,KAAK,CAAC,KAAK,CAAC,MAAM;;;sBAGX,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC;;OAElH,UAAU,CAAC,OAAO;;8BAEK,KAAK,CAAC,MAAM,CAAC,QAAQ,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM;4BAC/C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;mBAEvC,KAAK,CAAC,KAAK,CAAC,OAAO;;;;OAI/B,UAAU,CAAC,MAAM;mBACL,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;CAK1D,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;AAYzF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,eAAe,GAAG,gBAAgB,CAAC,GAAG,EACtC,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,MAAC,OAAO,OAAK,IAAI,sBAAoB,eAAe,aAChD,cAAK,SAAS,EAAE,UAAU,CAAC,MAAM,YAC5B,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,oBAAoB,cAAE,MAAM,GAAwB,CAAC,CAAC,CAAC,MAAM,GAC1F,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,OAAO,YAC7B,QAAQ,GACP,IACA,CACb,CAAC;AAEF,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC"}

package/dist/src/components/card_container.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { type CardContainerProps } from './card_container.js';
+declare const _default: Meta<CardContainerProps>;
+export default _default;
+type Story = StoryObj<CardContainerProps>;
+/**
+ * Default color wheel gradient with standard settings
+ */
+export declare const Default: Story;
+//# sourceMappingURL=card_container.stories.d.ts.map

package/dist/src/components/card_container.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card_container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/card_container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;wBAYxE,IAAI,CAAC,kBAAkB,CAAC;AAT7B,wBAS8B;AAE9B,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAO1C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAC"}

package/dist/src/components/card_container.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { DragIndicatorIcon } from '@apify/ui-icons';
+import { CardContainer } 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'],
+        },
+    },
+};
+const StoryWrapper = styled.div `
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr 1fr;
+`;
+/**
+ * Default color wheel gradient with standard settings
+ */
+export const Default = {
+    args: {
+        children: 'This is the content',
+        header: 'Recently viewed',
+    },
+    render: (args) => {
+        return _jsxs(StoryWrapper, { children: [_jsx(CardContainer, { ...args }), _jsx(CardContainer, { ...args, headerPlacement: 'BOTTOM' }), _jsx(CardContainer, { ...args, header: _jsxs(_Fragment, { children: [_jsx(CardContainer.Heading, { children: "TEst" }), _jsx(IconButton, { Icon: DragIndicatorIcon })] }) }), _jsx(CardContainer, { ...args, header: _jsx(_Fragment, { children: _jsxs("div", { children: [_jsx(CardContainer.Heading, { children: "# Videos with this hashtag" }), _jsx("code", { style: { marginLeft: 8 }, children: "Required" })] }) }) }), _jsx(CardContainer, { ...args, header: _jsx(_Fragment, { children: "Completely custom header content" }) })] });
+    },
+};
+//# sourceMappingURL=card_container.stories.js.map

package/dist/src/components/card_container.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card_container.stories.js","sourceRoot":"","sources":["../../../src/components/card_container.stories.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,eAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACN,eAAe,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;SAC7B;KACJ;CACwB,CAAC;AAI9B,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI9B,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,iBAAiB;KAC5B;IACD,MAAM,EAAE,CAAC,IAAwB,EAAE,EAAE;QACjC,OAAO,MAAC,YAAY,eAChB,KAAC,aAAa,OAAK,IAAI,GAAI,EAC3B,KAAC,aAAa,OAAK,IAAI,EAAE,eAAe,EAAC,QAAQ,GAAE,EACnD,KAAC,aAAa,OACN,IAAI,EACR,MAAM,EAAE,8BACJ,KAAC,aAAa,CAAC,OAAO,uBAA6B,EACnD,KAAC,UAAU,IAAC,IAAI,EAAE,iBAAiB,GAAG,IACvC,GACL,EACF,KAAC,aAAa,OACN,IAAI,EACR,MAAM,EAAE,4BACJ,0BACI,KAAC,aAAa,CAAC,OAAO,6CAAmD,EACzE,eAAM,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,yBAAiB,IAC7C,GACP,GACL,EACF,KAAC,aAAa,OACN,IAAI,EACR,MAAM,EAAE,iEAEL,GACL,IACS,CAAC;IACpB,CAAC;CACJ,CAAC"}

package/dist/src/components/index.d.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';

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/src/components/index.js

@@ -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';

package/dist/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}