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

package/src/components/to_consolidate/card.tsx

@@ -1,141 +0,0 @@
-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

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