@apify/ui-library 0.71.1-featcolortokens-178953.58 → 0.71.1-featcolortokens-178953.67

package/src/components/to_consolidate/card.tsx

@@ -0,0 +1,141 @@
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { BoxProps } from '../box.js';
+import { Box } from '../box.js';
+import { Text } from '../text/index.js';
+
+export const cardClassNames = {
+    WRAPPER: 'Card',
+    HEADER: 'Card-header',
+    CAPTION: 'Card-caption',
+    ACTIONS: 'Card-actions',
+    DESCRIPTION: 'Card-description',
+    CONTENT: 'Card-content',
+};
+
+interface TransientCardProps {
+    disabled?: boolean,
+    shadowless?: boolean,
+}
+
+interface RegularCardProps {
+    caption?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+export type StyledCardProps = WithTransientProps<TransientCardProps>;
+export type CardProps = TransientCardProps & RegularCardProps & BoxProps;
+
+export const StyledCardWrapper = styled(Box)<StyledCardProps>`
+    /* 👇 this is consoleStyle.partialStyle.card */
+    background-color: ${theme.color.neutral.cardBackground};
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius8};
+    box-shadow: var(--shadow-1);
+    padding: 2rem;
+    box-sizing: border-box;
+
+    /* Reset padding, it is dealt with within header and content styles */
+    padding: 0;
+    width: 100%;
+    font-size: 1.4rem;
+    position: relative;
+
+    & > .${cardClassNames.HEADER} {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center; /* so it aligns nicely with various content in corner, eg. button */
+        padding: ${theme.space.space16} ${theme.space.space16} ${theme.space.space8};
+        border-radius: ${theme.radius.radius8} ${theme.radius.radius8} 0 0;
+
+        .${cardClassNames.ACTIONS} {
+            margin-left: 2rem;
+
+            button {
+                font-size: 1.4rem;
+                line-height: 1.4rem;
+                font-weight: 500;
+            }
+        }
+    }
+
+    & > .${cardClassNames.DESCRIPTION} {
+        padding: 0rem ${theme.space.space16} ${theme.space.space16} ${theme.space.space16};
+        color: ${theme.color.neutral.textSubtle};
+    }
+
+    & > .${cardClassNames.CONTENT} {
+        position: relative;
+        display: block;
+        padding: ${theme.space.space16};
+        border-bottom-right-radius: ${theme.radius.radius8};
+        border-bottom-left-radius: ${theme.radius.radius8};
+    }
+
+    ${({ $shadowless }) => ($shadowless && css`
+        box-shadow: none;
+    `)}
+
+    ${({ $disabled }) => ($disabled && css`
+        .${cardClassNames.CONTENT} {
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0; bottom: 0; left: 0; right: 0; /* stretch full */
+                background: ${theme.color.neutral.backgroundSubtle} !important;
+                opacity: 0.4;
+                pointer-events: all;
+            }
+        }
+    `)}
+`;
+
+export const Card = forwardRef<HTMLElement, CardProps>(({
+    as,
+    className,
+    caption,
+    description,
+    actions,
+    children,
+    disabled,
+    shadowless,
+    ...rest
+}, ref) => {
+    return (
+        <StyledCardWrapper
+            $disabled={disabled}
+            $shadowless={shadowless}
+            forwardedAs={ as || 'section'}
+            className={clsx(cardClassNames.WRAPPER, className)}
+            data-test='card'
+            {...rest}
+            ref={ref}
+        >
+            {(!!caption || !!actions) && (
+                <header className={cardClassNames.HEADER} data-test='card-header'>
+                    {caption && (
+                        <Text
+                            as='div'
+                            size='big'
+                            weight='bold'
+                            className={cardClassNames.CAPTION}
+                            data-test='card-caption'
+                        >
+                            {caption}
+                        </Text>
+                    )}
+                    {actions && (<div className={cardClassNames.ACTIONS} data-test='card-actions'>{actions}</div>)}
+                </header>
+            )}
+            {description && (<div className={cardClassNames.DESCRIPTION} data-test='card-description'>{description}</div>)}
+            <div className={cardClassNames.CONTENT} data-test='card-content'>{children}</div>
+        </StyledCardWrapper>
+    );
+});

package/src/components/to_consolidate/index.ts

@@ -0,0 +1,4 @@
+export * from './card.js';
+export * from './pagination.js';
+export * from './markdown.js';
+export * from './tab_number_chip.js';