@apify/ui-library 0.71.1-featcolortokens-178953.63 → 0.71.1-featcolortokens-178953.70

package/src/components/tabs/tab.tsx

@@ -0,0 +1,217 @@
+import clsx from 'clsx';
+import { createPath } from 'history';
+import React from 'react';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import type { IconComponent } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { BadgeSize } from '../badge.js';
+import { Badge } from '../badge.js';
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import type { RegularLinkProps } from '../link.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
+
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+
+export type TabVariant = 'default' | 'boxed' | 'buttoned';
+
+export type TabData = SharedTabProps & {
+    id: string;
+    title: string;
+    Icon?: IconComponent;
+    chip?: number | string;
+    rollout?: 'alpha' | 'beta';
+    disabled?: boolean;
+};
+
+export type TabProps = TabData & {
+    variant?: TabVariant;
+    active?: boolean;
+    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+};
+
+const tabVariantTextSize = {
+    default: 'regular',
+    boxed: 'regular',
+    buttoned: 'small',
+} satisfies Record<TabVariant, SharedTextSize>;
+
+const tabVariantBadgeSize = {
+    default: 'small',
+    boxed: 'small',
+    buttoned: 'extra_small',
+} satisfies Record<TabVariant, BadgeSize>;
+
+const tabVariantStyle = {
+    default: css`
+        height: 3.6rem;
+        padding: 0 ${theme.space.space8};
+        color: ${theme.color.neutral.textSubtle};
+
+        &:hover {
+            color: ${theme.color.primaryBlack.actionHover}
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                bottom: -${theme.space.space4};
+                right: 0;
+                left: 0;
+                height: 2px;
+                background-color: ${theme.color.primaryBlack.action};
+                border-radius: ${theme.radius.radiusFull};
+                content: '';
+                display: block;
+                pointer-events: none;
+                position: absolute;
+            }
+
+            &.disabled::after {
+                background-color: ${theme.color.neutral.textDisabled};
+            }
+        }
+    `,
+    boxed: css`
+        height: 3.6rem;
+        border: 1px solid transparent;
+        border-top-right-radius: ${theme.radius.radius6};
+        border-top-left-radius: ${theme.radius.radius6};
+        padding: 0 ${theme.space.space12};
+        color: ${theme.color.neutral.textMuted};
+
+        &::after {
+            inset: ${theme.space.space4};
+            background-color: transparent;
+            border-radius: ${theme.radius.radius6};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            transition: background-color ${theme.transition.fastEaseOut};
+            z-index: -1;
+        }
+
+        &:hover {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                background-color: ${theme.color.neutral.hover};
+            }
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+            border-color: ${theme.color.neutral.border};
+            border-bottom-color: ${theme.color.neutral.background};
+
+            &::after {
+                background-color: transparent;
+            }
+        }
+    `,
+    buttoned: css`
+        height: 3.2rem;
+        margin: 0 ${theme.space.space4};
+        padding: 0 ${theme.space.space8};
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: ${theme.radius.radius8};
+        color: ${theme.color.neutral.textMuted};
+
+        &:hover {
+            background-color: ${theme.color.neutral.hover};
+            color: ${theme.color.neutral.text};
+        }
+
+        &.active {
+            background-color: transparent;
+            border-color: ${theme.color.neutral.border};
+            color: ${theme.color.neutral.text};
+        }
+    `,
+} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
+
+type TabWrapperProps = WithTransientProps<Required<Pick<TabProps, 'variant'>>> & {
+    role?: React.AriaRole;
+};
+
+export const TAB_CLASSNAMES = {
+    ICON: 'Tab-icon',
+    TITLE: 'Tab-title',
+    BADGE: 'Tab-badge',
+};
+
+const TabWrapper = styled(Link)<TabWrapperProps>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.space.space4};
+    flex-shrink: 0;
+    cursor: pointer;
+    position: relative;
+    transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
+    z-index: 1;
+
+    
+    ${({ $variant }) => tabVariantStyle[$variant]};
+
+    &.disabled {
+        color: ${theme.color.neutral.textDisabled};
+        pointer-events: none;
+    }
+
+    .${TAB_CLASSNAMES.ICON} {
+        color: inherit;
+        flex-shrink: 0;
+        transition: color ${theme.transition.fastEaseOut};
+    }
+
+    .${TAB_CLASSNAMES.TITLE} {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .${TAB_CLASSNAMES.BADGE} {
+        flex-shrink: 0;
+        text-transform: uppercase;
+    }
+`;
+
+export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }: TabProps) => {
+    const href = typeof (to) === 'string' ? to : createPath(to);
+
+    return (
+        <TabWrapper
+            {...props}
+            id={id}
+            to={to}
+            role="tab"
+            data-test="tab"
+            data-test-url={href}
+            className={clsx(className, { active, disabled })}
+            onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
+            $variant={variant}
+        >
+            {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
+            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.ICON} weight="bold" as="div">{title}</Text>
+            {chip && (
+                <Badge
+                    size={tabVariantBadgeSize[variant]}
+                    variant={active ? 'primary_black' : 'neutral_subtle'}
+                    className={TAB_CLASSNAMES.ICON}
+                >
+                    {chip}
+                </Badge>
+            )}
+            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className={TAB_CLASSNAMES.ICON}>{rollout}</Badge>}
+        </TabWrapper>
+    );
+};

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import { useResizeObserverSsr } from '../../utils/resize_observer.js';
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import { Box } from '../box.js';
+import type { TabData, TabVariant } from './tab.js';
+import { Tab } from './tab.js';
+
+type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+type TabsProps = SharedTabsProps & {
+    variant?: TabVariant;
+    tabs: TabData[];
+    activeTab?: string;
+    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+};
+
+const tabsVariantStyle = {
+    default: css`
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.separatorSubtle};
+            border-radius: ${theme.radius.radiusFull};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    boxed: css`
+        align-items: flex-end;
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.border};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    buttoned: css`
+        align-items: center;
+    `,
+} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
+
+type TabsWrapperProps = WithTransientProps<Required<Pick<TabsProps, 'variant'>>> & {
+    role?: React.AriaRole;
+};
+
+const TabsWrapper = styled(Box)<TabsWrapperProps>`
+    height: 4rem;
+    display: flex;
+    position: relative;
+
+    [role='tabpanel'] {
+        min-width: 0;
+        display: flex;
+        flex-grow: 1;
+        overflow-x: auto;
+        ${({ $variant }) => tabsVariantStyle[$variant]};
+
+        /* Scrollbar */
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        
+        &::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+        }
+    }
+
+    & > [role="cell"] {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 0;
+        margin-left: auto;
+        opacity: 0;
+        transition: opacity ${theme.transition.fastEaseOut};
+        z-index: 2;
+
+        &[aria-hidden="false"] {
+            opacity: 1;
+        }
+
+        &::after {
+            height: 100%;
+            width: ${theme.space.space32};
+            content: ' ';
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &:first-of-type {
+            left: 0;
+            
+            &::after {
+                left: 0;
+                background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        &:last-of-type {
+            right: 0;
+            
+            &::after {
+                right: 0;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
+            }
+        }
+    }
+`;
+
+type TabOverflowState = {
+    right: boolean;
+    left: boolean;
+}
+
+const isTabsOverflowing = (node: HTMLDivElement): TabOverflowState => {
+    if (node.scrollWidth > node.clientWidth) {
+        return {
+            right: node.clientWidth + node.scrollLeft < node.scrollWidth,
+            left: node.scrollLeft > 0,
+        };
+    }
+
+    return {
+        right: false,
+        left: false,
+    };
+};
+
+export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props }: TabsProps) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [overflowState, setOveflowState] = useState<TabOverflowState>();
+
+    useResizeObserverSsr(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)));
+    const scrollHandler = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
+        setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
+    }, []);
+
+    return <TabsWrapper {...props} role="tablist" data-test="tabs-wrapper" $variant={variant}>
+        <div role="cell" aria-hidden={!overflowState?.left} />
+        <div ref={ref} role="tabpanel" onScroll={scrollHandler}>
+            {tabs.map((tab) => (
+                <Tab
+                    {...tab}
+                    key={tab.id}
+                    variant={variant}
+                    active={tab.id === activeTab}
+                    onSelect={onSelect}
+                />
+            ))}
+        </div>
+        <div role="cell" aria-hidden={!overflowState?.right} />
+    </TabsWrapper>;
+};

package/src/components/tag.tsx

@@ -0,0 +1,196 @@
+import React, { type ForwardedRef, forwardRef } from 'react';
+import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import type { RegularButtonProps } from './button.js';
+import { Link, type RegularLinkProps } from './link.js';
+import { Text } from './text/index.js';
+import { type SharedTextSize, type SharedTextType } from './text/text_shared.js';
+
+type TagSize = SharedTextSize;
+export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];
+
+const TAG_ICON_SIZES = {
+    big: '20',
+    regular: '16',
+    small: '12',
+} satisfies Record<TagSize, IconSize>;
+
+export const TAG_VARIANTS = ['primary', 'secondary', 'subtle', 'accent', 'success', 'warning', 'error'] as const;
+type TagVariant = typeof TAG_VARIANTS[number];
+
+type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type TagNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: RegularButtonProps;
+    };
+}
+
+type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
+export type TagProps<T extends TagNodeType> = SharedTagProps & ({
+    as?: T;
+    size?: TagSize;
+    type?: SharedTextType;
+    variant?: TagVariant;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+} & Omit<TagNodePropsMap[T]['props'], 'size'>);
+
+const tagSizeStyle = {
+    big: css`
+        height: 4rem;
+        padding: ${theme.space.space8} ${theme.space.space12};
+        border-radius: ${theme.radius.radius12};
+    `,
+    regular: css`
+        height: 2.8rem;
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius8};
+    `,
+    small: css`
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+
+        &:has(> svg:last-child:nth-child(1)) {
+            padding: ${theme.space.space2} ${theme.space.space4};
+        }
+    `,
+} satisfies Record<TagSize, FlattenSimpleInterpolation>;
+
+const tagVariantStyle = {
+    primary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+    secondary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+    subtle: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: ${theme.color.neutral.backgroundSubtle};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+    accent: css`
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.background};
+
+        &:hover {
+            background: ${theme.color.primary.backgroundHover};
+        }
+    `,
+    success: css`
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
+
+        &:hover {
+            background: ${theme.color.success.backgroundHover};
+        }
+    `,
+    warning: css`
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
+
+        &:hover {
+            background: ${theme.color.warning.backgroundHover};
+        }
+    `,
+    error: css`
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
+
+        &:hover {
+            background: ${theme.color.danger.backgroundHover};
+        }
+    `,
+} satisfies Record<TagVariant, FlattenSimpleInterpolation>;
+
+type StyledTagProps = WithTransientProps<
+    Required<Pick<TagProps<TagNodeType>, 'size' | 'variant'>>
+>;
+
+const StyledTag = styled(Box)<StyledTagProps>`
+    ${({ $size }) => tagSizeStyle[$size]};
+    ${({ $variant }) => tagVariantStyle[$variant]};
+
+    /* Static styles */
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+    transition: background ${theme.transition.fastEaseOut};
+`;
+
+/**
+ * Component for displaying inherenly interactive chip descendant
+ */
+function TagWrapper<T extends TagNodeType>({
+    as,
+    size = 'small',
+    type = 'body',
+    variant = 'primary',
+    LeadingIcon,
+    TrailingIcon,
+    children,
+    ...props
+}: TagProps<T>,
+ref: ForwardedRef<TagNodePropsMap[T]['element']>,
+) {
+    const component: React.ElementType = (as === 'a' ? Link : as ?? 'button');
+
+    return (
+        <StyledTag
+            as={component}
+            ref={ref}
+            $variant={variant}
+            $size={size}
+            {...props}
+        >
+            {LeadingIcon && <LeadingIcon size={TAG_ICON_SIZES[size]} />}
+            {children && (<Text size={size} type={type} weight="medium">{children}</Text>)}
+            {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
+        </StyledTag>
+    );
+}
+TagWrapper.displayName = 'Tag';
+
+// `forwardRef` can't handle generic types, should be fixable with React 19
+export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
+    // eslint-disable-next-line no-use-before-define -- see comment above 👆
+    props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
+) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { TextBaseProps } from './text_base.js';
+import { TextBaseComponent } from './text_base.js';
+
+type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+
+interface HeadingContentTransientProps {
+    type?: HeadingContentType,
+}
+
+const getContentHeadingStyles = (headingType: HeadingContentType) => css`
+    ${theme.typography.content.mobile[headingType]}
+
+    @media (min-width: ${theme.layout.tablet}) {
+        ${theme.typography.content.tablet[headingType]}
+    }
+
+    @media (min-width: ${theme.layout.desktop}) {
+        ${theme.typography.content.desktop[headingType]}
+    }
+`;
+
+type StyledHeadingContentProps = WithTransientProps<HeadingContentTransientProps>;
+export type HeadingContentProps = HeadingContentTransientProps & TextBaseProps;
+
+const HEADING_CONTENT_DEFAULT_ELEMENTS = {
+    heading1: 'h1',
+    heading2: 'h2',
+    heading3: 'h3',
+    heading4: 'h4',
+    heading5: 'h5',
+    heading6: 'h6',
+} as const;
+
+const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps>`
+    ${(props) => getContentHeadingStyles(props.$type || 'heading1')}
+`;
+
+export const HeadingContent: React.FC<HeadingContentProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingContent
+            $type={type}
+            forwardedAs={as || HEADING_CONTENT_DEFAULT_ELEMENTS[type || 'heading1']}
+            m='none'
+            {...rest}
+        />
+    );
+};

package/src/components/text/heading_marketing.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { TextBaseProps } from './text_base.js';
+import { TextBaseComponent } from './text_base.js';
+
+type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+
+interface HeadingMarketingTransientProps {
+    type?: HeadingMarketingType,
+}
+
+type StyledHeadingMarketingProps = WithTransientProps<HeadingMarketingTransientProps>;
+export type HeadingMarketingProps = HeadingMarketingTransientProps & TextBaseProps;
+
+const HEADING_MARKETING_DEFAULT_ELEMENTS: { [Type in HeadingMarketingType]: string } = {
+    titleXs: 'h6',
+    titleS: 'h5',
+    titleM: 'h4',
+    titleL: 'h3',
+    titleXl: 'h2',
+    title2xl: 'h1',
+    title3xl: 'h1',
+};
+
+const StyledHeadingMarketing = styled(TextBaseComponent)<StyledHeadingMarketingProps>`
+    ${(props) => `
+        ${theme.typography.marketing.mobile[props.$type || 'titleL']}
+
+         @media (${theme.device.tablet}) {
+            ${theme.typography.marketing.tablet[props.$type || 'titleL']}
+        }
+
+        @media (${theme.device.desktop}) {
+            ${theme.typography.marketing.desktop[props.$type || 'titleL']}
+        }
+    `}
+`;
+
+export const HeadingMarketing: React.FC<HeadingMarketingProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingMarketing
+            $type={type}
+            forwardedAs={as || HEADING_MARKETING_DEFAULT_ELEMENTS[type || 'titleL']}
+            m='none'
+            {...rest}
+        />
+    );
+};