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

package/src/components/text/heading_shared.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 HeadingSharedType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+
+interface HeadingSharedTransientProps {
+    type?: HeadingSharedType,
+}
+
+type StyledHeadingSharedProps = WithTransientProps<HeadingSharedTransientProps>;
+export type HeadingSharedProps = HeadingSharedTransientProps & TextBaseProps;
+
+const HEADING_SHARED_DEFAULT_ELEMENTS: { [Type in HeadingSharedType]: string } = {
+    titleXs: 'h6',
+    titleS: 'h5',
+    titleM: 'h4',
+    titleL: 'h3',
+    titleXl: 'h2',
+    title2xl: 'h1',
+    title3xl: 'h1',
+};
+
+const StyledHeadingShared = styled(TextBaseComponent)<StyledHeadingSharedProps>`
+    ${(props) => `
+        ${theme.typography.shared.mobile[props.$type || 'titleL']}
+
+        @media (${theme.device.tablet}) {
+            ${theme.typography.shared.tablet[props.$type || 'titleL']}
+        }
+
+        @media (${theme.device.desktop}) {
+            ${theme.typography.shared.desktop[props.$type || 'titleL']}
+        }
+    `}
+`;
+
+export const HeadingShared: React.FC<HeadingSharedProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingShared
+            $type={type}
+            forwardedAs={as || HEADING_SHARED_DEFAULT_ELEMENTS[type || 'titleL']}
+            m='none'
+            {...rest}
+        />
+    );
+};

package/src/components/text/index.ts

@@ -0,0 +1,19 @@
+import { HeadingShared } from './heading_shared.js';
+import type { SharedTextProps } from './text_shared.js';
+import { SHARED_TEXT_TYPES, TextShared } from './text_shared.js';
+
+export * from './text_base.js';
+export * from './text_content.js';
+export * from './text_marketing.js';
+export * from './heading_content.js';
+export * from './heading_marketing.js';
+
+export {
+    TextShared as Text, // Shared typography is the default
+    HeadingShared as Heading, // Shared typography is the default
+    SHARED_TEXT_TYPES,
+};
+
+export type {
+    SharedTextProps,
+};

package/src/components/text/text_base.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import type { WithTransientProps } from '../../type_utils.js';
+import type { BoxProps } from '../box.js';
+import { Box } from '../box.js';
+
+export interface TransientTextBaseProps {
+    italic?: boolean
+    uppercase?: boolean
+    align?: 'left' | 'right' | 'center'
+    color?: string,
+}
+
+export type StyledTextBaseProps = WithTransientProps<TransientTextBaseProps>;
+export type TextBaseProps = TransientTextBaseProps & BoxProps;
+
+const StyledText = styled(Box)<StyledTextBaseProps>`
+    ${(props) => props.$italic && css`
+        font-style: italic;
+    `}
+
+    ${(props) => props.$uppercase && css`
+        text-transform: uppercase;
+    `}
+
+    ${(props) => props.$align && css`
+        text-align: ${props.$align};
+    `}
+
+    ${(props) => props.$color && css`
+        color: ${props.$color};
+    `}
+`;
+
+export const TextBaseComponent: React.FC<TextBaseProps> = ({
+    italic,
+    align,
+    color,
+    uppercase,
+    as,
+    ...rest
+}) => (
+    <StyledText
+        $italic={italic}
+        $align={align}
+        $color={color}
+        $uppercase={uppercase}
+        forwardedAs={as}
+        {...rest}
+    />
+);

package/src/components/text/text_content.tsx

@@ -0,0 +1,104 @@
+import { forwardRef } 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 type { TextBaseProps } from './text_base.js';
+import { TextBaseComponent } from './text_base.js';
+
+export type ContentTextType = 'paragraph' | 'snippet';
+export type ContentTextWeight = 'normal' | 'bold';
+
+export interface TransientContentTextProps {
+    type?: ContentTextType,
+    weight?: ContentTextWeight,
+}
+
+type StyledContentTextProps = WithTransientProps<TransientContentTextProps>;
+export type ContentTextProps = TransientContentTextProps & TextBaseProps;
+
+type TextContentVariants = {
+    [Type in ContentTextType]: {
+        [Weight in ContentTextWeight]: FlattenSimpleInterpolation;
+    };
+};
+
+const TEXT_SHARED_VARIANTS_CSS: TextContentVariants = {
+    paragraph: {
+        normal: css`
+            ${theme.typography.content.mobile.paragraph}
+
+            @media (min-width: ${theme.layout.tablet}) {
+                ${theme.typography.content.tablet.paragraph}
+            }
+
+            @media (min-width: ${theme.layout.desktop}) {
+                ${theme.typography.content.desktop.paragraph}
+            }
+        `,
+        bold: css`
+            ${theme.typography.content.mobile.paragraphStrong}
+
+            @media (min-width: ${theme.layout.tablet}) {
+                ${theme.typography.content.tablet.paragraphStrong}
+            }
+
+            @media (min-width: ${theme.layout.desktop}) {
+                ${theme.typography.content.desktop.paragraphStrong}
+            }
+        `,
+    },
+    snippet: {
+        normal: css`
+            ${theme.typography.content.mobile.snippet}
+
+            @media (min-width: ${theme.layout.tablet}) {
+                ${theme.typography.content.tablet.snippet}
+            }
+
+            @media (min-width: ${theme.layout.desktop}) {
+                ${theme.typography.content.desktop.snippet}
+            }
+        `,
+        bold: css`
+            ${theme.typography.content.mobile.snippetStrong}
+
+            @media (min-width: ${theme.layout.tablet}) {
+                ${theme.typography.content.tablet.snippetStrong}
+            }
+
+            @media (min-width: ${theme.layout.desktop}) {
+                ${theme.typography.content.desktop.snippetStrong}
+            }
+        `,
+    },
+};
+
+const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
+    ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'paragraph'][props.$weight || 'normal']}
+`;
+
+export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(({
+    type,
+    weight,
+    as,
+    ...rest
+}, ref) => {
+    return (
+        <StyledTextContent
+            $type={type}
+            $weight={weight}
+            forwardedAs={as || 'p'}
+            ref={ref}
+            // We have global CSS file that defines margins for p and h to some 'normalized' value
+            // But at the same time we want to have default margin set to 0 for Text and Headings
+            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+            // Until then we have to set default 0 margin here
+            m='none'
+            {...rest}
+        />
+    );
+});
+
+TextContent.displayName = 'TextContent';

package/src/components/text/text_marketing.tsx

@@ -0,0 +1,152 @@
+import { forwardRef } 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 type { TextBaseProps } from './text_base.js';
+import { TextBaseComponent } from './text_base.js';
+
+export type MarketingTextSize = 'large' | 'regular' | 'small' | 'extraSmall';
+export type MarketingTextWeight = 'normal' | 'bold';
+
+export interface TransientMarketingTextProps {
+    size?: MarketingTextSize,
+    weight?: MarketingTextWeight,
+}
+
+type StyledMarketingTextProps = WithTransientProps<TransientMarketingTextProps>;
+export type MarketingTextProps = TransientMarketingTextProps & TextBaseProps;
+
+type TextMarketingVariants = {
+    [Size in MarketingTextSize]: {
+        [Weight in MarketingTextWeight]: FlattenSimpleInterpolation;
+    };
+};
+
+const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
+    large: {
+        normal: css`
+            ${theme.typography.marketing.mobile.bodyL}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyL}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyL}
+            }
+        `,
+        bold: css`
+            ${theme.typography.marketing.mobile.bodyLStrong}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyLStrong}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyLStrong}
+            }
+        `,
+    },
+    regular: {
+        normal: css`
+            ${theme.typography.marketing.mobile.bodyM}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyM}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyM}
+            }
+        `,
+        bold: css`
+            ${theme.typography.marketing.mobile.bodyMStrong}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyMStrong}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyMStrong}
+            }
+        `,
+    },
+    small: {
+        normal: css`
+            ${theme.typography.marketing.mobile.bodyS}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyS}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyS}
+            }
+        `,
+        bold: css`
+            ${theme.typography.marketing.mobile.bodySStrong}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodySStrong}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodySStrong}
+            }
+        `,
+    },
+    extraSmall: {
+        normal: css`
+            ${theme.typography.marketing.mobile.bodyXs}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyXs}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyXs}
+            }
+        `,
+        bold: css`
+            ${theme.typography.marketing.mobile.bodyXsStrong}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyXsStrong}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyXsStrong}
+            }
+        `,
+    },
+};
+
+const StyledTextMarketing = styled(TextBaseComponent)<StyledMarketingTextProps>`
+    ${(props) => TEXT_MARKETING_VARIANTS_CSS[props.$size || 'regular'][props.$weight || 'normal']}
+`;
+
+export const TextMarketing = forwardRef<HTMLElement | undefined, MarketingTextProps>(({
+    weight,
+    size,
+    as,
+    ...rest
+}, ref) => {
+    return (
+        <StyledTextMarketing
+            $weight={weight}
+            $size={size}
+            forwardedAs={as || 'p'}
+            ref={ref}
+            // We have global CSS file that defines margins for p and h to some 'normalized' value
+            // But at the same time we want to have default margin set to 0 for Text and Headings
+            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+            // Until then we have to set default 0 margin here
+            m='none'
+            {...rest}
+        />
+    );
+});
+
+TextMarketing.displayName = 'TextMarketing';

package/src/components/text/text_shared.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } 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';
+
+export const SHARED_TEXT_TYPES = ['body', 'code'] as const;
+export type SharedTextType = typeof SHARED_TEXT_TYPES[number];
+
+export type SharedTextSize = 'regular' | 'small' | 'big';
+export type SharedTextWeight = 'normal' | 'medium' | 'bold';
+
+export interface TransientSharedTextProps {
+    type?: SharedTextType,
+    size?: SharedTextSize,
+    weight?: SharedTextWeight,
+}
+
+type StyledSharedTextProps = WithTransientProps<TransientSharedTextProps>;
+export type SharedTextProps = TransientSharedTextProps & TextBaseProps;
+
+type TextSharedVariants = {
+    [Type in SharedTextType]: {
+        [Size in SharedTextSize]: {
+            [Weight in SharedTextWeight]: string;
+        };
+    };
+};
+
+const TEXT_SHARED_VARIANTS_CSS: TextSharedVariants = {
+    body: {
+        regular: {
+            normal: theme.typography.shared.tablet.bodyM,
+            medium: theme.typography.shared.tablet.bodyMMedium,
+            bold: theme.typography.shared.tablet.bodyMStrong,
+        },
+        small: {
+            normal: theme.typography.shared.tablet.bodyS,
+            medium: theme.typography.shared.tablet.bodySMedium,
+            bold: theme.typography.shared.tablet.bodySStrong,
+        },
+        big: {
+            normal: theme.typography.shared.tablet.bodyL,
+            medium: theme.typography.shared.tablet.bodyLMedium,
+            bold: theme.typography.shared.tablet.bodyLStrong,
+        },
+    },
+    code: {
+        regular: {
+            normal: theme.typography.shared.tablet.codeM,
+            medium: theme.typography.shared.tablet.codeMMedium,
+            bold: theme.typography.shared.tablet.codeMStrong,
+        },
+        small: {
+            normal: theme.typography.shared.tablet.codeS,
+            medium: theme.typography.shared.tablet.codeSMedium,
+            bold: theme.typography.shared.tablet.codeSStrong,
+        },
+        big: {
+            normal: theme.typography.shared.tablet.codeL,
+            medium: theme.typography.shared.tablet.codeLMedium,
+            bold: theme.typography.shared.tablet.codeLStrong,
+        },
+    },
+};
+
+const StyledTextShared = styled(TextBaseComponent)<StyledSharedTextProps>`
+    ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'body'][props.$size || 'regular'][props.$weight || 'normal']}
+`;
+
+export const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
+    type,
+    size,
+    weight,
+    as,
+    ...rest
+}, ref) => {
+    return (
+        <StyledTextShared
+            $type={type}
+            $size={size}
+            $weight={weight}
+            forwardedAs={as || 'p'}
+            ref={ref}
+            // We have global CSS file that defines margins for p and h to some 'normalized' value
+            // But at the same time we want to have default margin set to 0 for Text and Headings
+            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+            // Until then we have to set default 0 margin here
+            m='none'
+            {...rest}
+        />
+    );
+});

package/src/components/tile/horizontal_tile.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type {
+    TileSharedProps,
+    TileSizesType,
+} from './shared.js';
+import {
+    TILE_SIZES,
+    tileStyle,
+} from './shared.js';
+
+interface HorizontalTileProps extends TileSharedProps {
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+
+interface StyledTileWrapperProps {
+    $hasIcon?: boolean;
+    $size?: TileSizesType;
+}
+
+const WrapperClasses = {
+    TILE_CONTENT: 'Tile-Content',
+};
+
+const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
+    ${tileStyle}
+    padding: ${({ $size }) => ($size === TILE_SIZES.SMALL ? theme.space.space16 : theme.space.space24)};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    cursor: pointer;
+    transition: box-shadow ${theme.transition.smoothEaseOut},
+        background-color ${theme.transition.smoothEaseOut},
+        border-color ${theme.transition.smoothEaseOut};
+
+    &:hover {
+        box-shadow: ${theme.shadow.shadow1};
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    &:active,
+    &:focus {
+        border-color: ${theme.color.primary.action};
+    }
+
+    ${({ $hasIcon }) => $hasIcon && `gap: ${theme.space.space8};`}
+
+    .${WrapperClasses.TILE_CONTENT} {
+        flex-grow: 1;
+    }
+`;
+
+export const HorizontalTile: React.FC<HorizontalTileProps> = ({
+    content,
+    icon,
+    action,
+    size = TILE_SIZES.SMALL,
+    onClick,
+    ...otherProps
+}) => {
+    return (
+        <StyledTileWrapper
+            $hasIcon={!!icon}
+            $size={size}
+            onClick={onClick}
+            {...otherProps}
+        >
+            <div>{icon}</div>
+            <div className={WrapperClasses.TILE_CONTENT}>{content}</div>
+            <div>{action}</div>
+        </StyledTileWrapper>
+    );
+};

package/src/components/tile/index.ts

@@ -0,0 +1,2 @@
+export * from './horizontal_tile.js';
+export * from './vertical_tile.js';

package/src/components/tile/shared.ts

@@ -0,0 +1,27 @@
+import { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const TILE_SIZES = {
+    SMALL: 'S',
+    LARGE: 'L',
+};
+
+export type TileSizesType = typeof TILE_SIZES[keyof typeof TILE_SIZES];
+
+export const tileStyle = css`
+    background-color: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+`;
+
+export type TileSharedProps = {
+    content: React.ReactNode,
+    size?: TileSizesType,
+    isClickable?: boolean,
+    onClick?: () => void,
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    as?: React.ElementType;
+};

package/src/components/tile/vertical_tile.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type {
+    TileSharedProps,
+    TileSizesType,
+} from './shared.js';
+import {
+    TILE_SIZES,
+    tileStyle,
+} from './shared.js';
+
+interface VerticalTileProps extends TileSharedProps {
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+
+interface StyledTileWrapperProps {
+    $size?: TileSizesType;
+}
+
+const WrapperClasses = {
+    TILE_CONTENT: 'Tile-Content',
+};
+
+const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
+    ${tileStyle}
+    padding: ${({ $size }) => ($size === TILE_SIZES.SMALL ? theme.space.space16 : theme.space.space24)};
+    width: 100%;
+    cursor: pointer;
+    transition: box-shadow ${theme.transition.smoothEaseOut},
+        background-color ${theme.transition.smoothEaseOut},
+        border-color ${theme.transition.smoothEaseOut};
+
+    &:hover {
+        box-shadow: ${theme.shadow.shadow1};
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    &:active,
+    &:focus {
+        border-color: ${theme.color.primary.action};
+    }
+`;
+
+export const VerticalTile: React.FC<VerticalTileProps> = ({
+    content,
+    size = TILE_SIZES.LARGE,
+    onClick,
+    ...otherProps
+}) => {
+    return (
+        <StyledTileWrapper $size={size} onClick={onClick} {...otherProps}>
+            <div className={WrapperClasses.TILE_CONTENT}>{content}</div>
+        </StyledTileWrapper>
+    );
+};