@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/table.tsx

@@ -0,0 +1,398 @@
+import * as React from 'react';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as styles from './table.css';
+import {vars} from './skins/skin-contract.css';
+import {Text1, Text2} from './text';
+import {InternalBoxed} from './boxed';
+import classNames from 'classnames';
+import Box from './box';
+import {applyCssVars} from './utils/css';
+import Inline from './inline';
+import {IconButton, ToggleIconButton} from './icon-button';
+import {iconContainerSize, iconSize} from './icon-button.css';
+import {TableActionsHeader} from './table-actions-header';
+import TableCellText from './table-cell-text';
+
+import type {CardAction} from './card-internal';
+import type {DataAttributes} from './utils/types';
+
+const TOP_ACTIONS_PADDING = {
+    default: '8px',
+    boxed: '16px',
+};
+
+const BORDER_SIZE = '1px';
+
+type TextAlign = 'left' | 'right' | 'center';
+type VerticalAlign = 'top' | 'middle';
+
+type TableProps = {
+    heading?: Array<React.ReactNode>;
+    content?: Array<
+        | Array<React.ReactNode>
+        | {cells: Array<React.ReactNode>; actions: ReadonlyArray<CardAction | React.ReactElement>}
+    >;
+    boxed?: boolean;
+    emptyCase?: React.ReactNode;
+    /**
+     * In mobile, the table will be scrollable horizontally by default. Alternatively, you can set it to 'collapse-rows', which will
+     * render every row as a card
+     */
+    responsive?: 'scroll' | 'collapse-rows';
+    columnTextAlign?: Array<TextAlign> | TextAlign;
+    rowVerticalAlign?: VerticalAlign;
+    columnWidth?: Array<number | string>;
+    /**
+     * By default, the table expands to all the available width, if you want the table to have the minimum width to fit the rows content, set fullWidth to false.
+     * It's ignored in mobile
+     */
+    fullWidth?: boolean;
+    /**
+     * Limits the height of the table and the content will have vertical scroll.
+     * It's ignored in mobile when responsive move is 'collapse-rows'
+     */
+    maxHeight?: number | string;
+    /**
+     * When rendering the table inside a responsive layout, you can enable this prop to make the table scrollable over the layout paddings
+     */
+    scrollOverResponsiveLayout?: boolean;
+    /**
+     * Used to hide headers from UI. Screen readers will still recognize them when reading an element from the table.
+     */
+    hideHeaders?: boolean | 'desktop' | 'mobile';
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+    rowHeaderIndex?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+
+const CellActionIconButton = (props: CardAction) => {
+    // We render IconButton if Icon prop was passed. Otherwise, ToggleIconButton will be used
+    return props.Icon ? (
+        <IconButton
+            {...props}
+            aria-label={props.label}
+            small
+            type="neutral"
+            backgroundType="transparent"
+            bleedY
+        />
+    ) : (
+        <ToggleIconButton
+            {...props}
+            checkedProps={{
+                ...props.checkedProps,
+                'aria-label': props.checkedProps.label,
+                type: 'brand',
+                backgroundType: 'solid',
+            }}
+            uncheckedProps={{
+                ...props.uncheckedProps,
+                'aria-label': props.uncheckedProps.label,
+                type: 'neutral',
+                backgroundType: 'transparent',
+            }}
+            small
+            bleedY
+        />
+    );
+};
+
+const defaultTextAlign = 'left';
+export const Table = React.forwardRef(
+    (
+        {
+            dataAttributes,
+            heading = [],
+            content = [],
+            boxed,
+            responsive,
+            fullWidth = true,
+            maxHeight,
+            emptyCase,
+            columnTextAlign = defaultTextAlign,
+            rowVerticalAlign = 'middle',
+            columnWidth,
+            hideHeaders,
+            scrollOverResponsiveLayout,
+            rowHeaderIndex,
+            ...otherProps
+        }: TableProps,
+        ref: React.Ref<HTMLDivElement>
+    ) => {
+        const getColumnTextAlign = (column: number) => {
+            if (Array.isArray(columnTextAlign)) {
+                return columnTextAlign[column] ?? defaultTextAlign;
+            }
+            return columnTextAlign;
+        };
+
+        const collapsedRowsMode = responsive === 'collapse-rows';
+        const hideHeadersInMobile = hideHeaders === true || hideHeaders === 'mobile';
+        const hideHeadersInDesktop = hideHeaders === true || hideHeaders === 'desktop';
+
+        const hasActionsColumn = content.some((row) => !Array.isArray(row) && row.actions.length > 0);
+
+        const table = (
+            <table
+                className={classNames(styles.table, {
+                    [styles.boxed]: boxed,
+                    [styles.collapsedRowsInMobile]: collapsedRowsMode,
+                    [styles.fullWidth]: fullWidth,
+                    [styles.hiddenHeadersInDesktop]: hideHeadersInDesktop,
+                    [styles.hiddenHeadersInMobile]: hideHeadersInMobile || collapsedRowsMode,
+                })}
+                aria-label={otherProps['aria-label']}
+                aria-labelledby={otherProps['aria-labelledby']}
+                aria-describedby={otherProps['aria-describedby']}
+            >
+                {heading.length > 0 && (
+                    <thead>
+                        <Text1
+                            as="tr"
+                            medium
+                            transform="uppercase"
+                            color={vars.colors.textSecondary}
+                            wordBreak={false}
+                        >
+                            {heading.map((header, idx) => (
+                                <th
+                                    scope="col"
+                                    key={idx}
+                                    className={classNames(
+                                        styles.cellTextAlign[getColumnTextAlign(idx)],
+                                        styles.verticalAlign[rowVerticalAlign],
+                                        {
+                                            [styles.rowFirstItem]: idx === 0,
+                                            [styles.rowLastItem]:
+                                                idx === heading.length - 1 && !hasActionsColumn,
+                                        }
+                                    )}
+                                    style={{minWidth: columnWidth?.[idx], width: columnWidth?.[idx]}}
+                                >
+                                    {header}
+                                </th>
+                            ))}
+                            {hasActionsColumn && <TableActionsHeader />}
+                        </Text1>
+                    </thead>
+                )}
+                <tbody>
+                    {content.length > 0 ? (
+                        content.map((row, rowIdx) => {
+                            const rowCells = !Array.isArray(row) ? row.cells : row;
+                            const rowActionsList = !Array.isArray(row) ? row.actions ?? [] : [];
+
+                            const actions = (
+                                <Inline space={16}>
+                                    {rowActionsList.map((action, index) => {
+                                        if ('Icon' in action || 'checkedProps' in action) {
+                                            // action is a CellAction object
+                                            return <CellActionIconButton key={index} {...action} />;
+                                        }
+                                        // action is a React.ReactElement
+                                        return <React.Fragment key={index}>{action}</React.Fragment>;
+                                    })}
+                                </Inline>
+                            );
+
+                            // buttons + inline space
+                            const actionsElementWidth = rowActionsList.length
+                                ? `calc(${iconContainerSize.small} * ${rowActionsList.length} + 16px * ${
+                                      rowActionsList.length - 1
+                                  })`
+                                : '0px';
+
+                            return (
+                                // Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
+                                <tr key={rowIdx} style={{position: 'relative'}}>
+                                    {rowCells.map((cell, idx) => {
+                                        const isCollapsedRowsLastItem =
+                                            rowHeaderIndex === rowCells.length - 1
+                                                ? idx === rowCells.length - 2 || rowCells.length === 1
+                                                : idx === rowCells.length - 1;
+
+                                        const CellComponent = idx === rowHeaderIndex ? 'th' : 'td';
+
+                                        return (
+                                            <CellComponent
+                                                key={idx}
+                                                className={classNames(
+                                                    styles.verticalAlign[rowVerticalAlign],
+                                                    {
+                                                        [styles.rowFirstItem]: idx === 0,
+                                                        [styles.rowLastItem]:
+                                                            idx === rowCells.length - 1 && !hasActionsColumn,
+                                                        [styles.rowLastCollapsedItem]:
+                                                            isCollapsedRowsLastItem && collapsedRowsMode,
+                                                        [styles.collapsedRowHeaderItem]:
+                                                            idx === rowHeaderIndex && collapsedRowsMode,
+                                                    }
+                                                )}
+                                                style={{
+                                                    // add space between top actions and content
+                                                    marginRight:
+                                                        collapsedRowsMode && rowActionsList.length
+                                                            ? `calc(${actionsElementWidth} + 8px)`
+                                                            : undefined,
+                                                }}
+                                                scope={idx === rowHeaderIndex ? 'row' : undefined}
+                                            >
+                                                {/**
+                                                 * In collapsedRowsMode, we render the row heading text before every cell content, except for the first cell
+                                                 * of every row, which is rendered with a medium weight font, as it's the row title.
+                                                 * */}
+                                                {idx !== rowHeaderIndex &&
+                                                    collapsedRowsMode &&
+                                                    heading[idx] &&
+                                                    !hideHeadersInMobile && (
+                                                        // this is aria-hidden because screen readers already read the column heading from the th
+                                                        <div className={styles.mobileCellHeading} aria-hidden>
+                                                            <Text1 medium color={vars.colors.textSecondary}>
+                                                                {heading[idx]}
+                                                            </Text1>
+                                                        </div>
+                                                    )}
+
+                                                <TableCellText
+                                                    isCollapsedRowTitle={
+                                                        idx === rowHeaderIndex && collapsedRowsMode
+                                                    }
+                                                >
+                                                    <div
+                                                        className={classNames(
+                                                            styles.cellTextAlign[getColumnTextAlign(idx)],
+                                                            {
+                                                                [styles.collapsedRowTitle]:
+                                                                    idx === rowHeaderIndex &&
+                                                                    collapsedRowsMode,
+                                                            }
+                                                        )}
+                                                    >
+                                                        {cell}
+                                                    </div>
+                                                </TableCellText>
+                                            </CellComponent>
+                                        );
+                                    })}
+
+                                    {rowActionsList.length > 0 ? (
+                                        <td
+                                            className={classNames(
+                                                styles.verticalAlign[rowVerticalAlign],
+                                                styles.actionsTableCell,
+                                                styles.rowLastItem,
+                                                {
+                                                    [styles.rowFirstItem]: rowCells.length === 0,
+                                                }
+                                            )}
+                                            align="right"
+                                            // add cell's left padding
+                                            style={{width: `calc(${actionsElementWidth} + 12px)`}}
+                                        >
+                                            {actions}
+                                        </td>
+                                    ) : (
+                                        hasActionsColumn && <td className={styles.actionsTableCell} />
+                                    )}
+
+                                    {/**
+                                     * mistica.css styles are usually not loaded for unit tests in projects that use Mistica.
+                                     * The row's top actions are hidden by using display: none, but if mistica.css is not used,
+                                     * the buttons will be rendered twice. This can cause issues when using functions like
+                                     * queryBy/findBy, because of finding multiple buttons with the same name.
+                                     * In order to avoid this issue, we don't render the copy of actions in test environment.
+                                     */}
+                                    {process.env.NODE_ENV !== 'test' &&
+                                        collapsedRowsMode &&
+                                        rowActionsList.length > 0 && (
+                                            <td
+                                                className={styles.topActions}
+                                                style={{
+                                                    position: 'absolute',
+                                                    top: `calc(${
+                                                        boxed
+                                                            ? TOP_ACTIONS_PADDING.boxed
+                                                            : TOP_ACTIONS_PADDING.default
+                                                    } - ${BORDER_SIZE} + (${iconContainerSize.small} - ${
+                                                        iconSize.small
+                                                    }) / 2)`,
+                                                    right: boxed
+                                                        ? `calc(${TOP_ACTIONS_PADDING.boxed} - ${BORDER_SIZE})`
+                                                        : 0,
+                                                    width: actionsElementWidth,
+                                                }}
+                                            >
+                                                {actions}
+                                            </td>
+                                        )}
+                                </tr>
+                            );
+                        })
+                    ) : (
+                        <tr>
+                            <td
+                                colSpan={heading.length}
+                                className={classNames({[styles.rowLastCollapsedItem]: collapsedRowsMode})}
+                            >
+                                {typeof emptyCase === 'string' ? (
+                                    <Box paddingY={56}>
+                                        <Text2 regular textAlign="center" as="div">
+                                            {emptyCase}
+                                        </Text2>
+                                    </Box>
+                                ) : (
+                                    emptyCase
+                                )}
+                            </td>
+                        </tr>
+                    )}
+                </tbody>
+            </table>
+        );
+
+        const getScrollContainerStyles = (overResponsiveLayout = false) => {
+            return {
+                className: classNames(styles.scrollContainer, {
+                    [styles.scrollOverResponsiveLayout]: overResponsiveLayout,
+                    [styles.collapsedRowsInMobile]: collapsedRowsMode,
+                    [styles.fullWidth]: fullWidth,
+                }),
+                style: applyCssVars({
+                    [styles.vars.maxHeight]:
+                        typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight ?? 'auto',
+                }),
+            };
+        };
+
+        if (boxed) {
+            return (
+                <InternalBoxed
+                    desktopOnly={collapsedRowsMode}
+                    width="fit-content"
+                    maxWidth="100%"
+                    minWidth={{
+                        desktop: fullWidth ? '100%' : 'auto',
+                        mobile: collapsedRowsMode ? '100%' : fullWidth ? '100%' : 'auto',
+                    }}
+                    ref={ref}
+                    dataAttributes={{'component-name': 'Table', ...dataAttributes}}
+                >
+                    <div {...getScrollContainerStyles()}>{table}</div>
+                </InternalBoxed>
+            );
+        }
+
+        return (
+            <div
+                ref={ref}
+                {...getPrefixedDataAttributes(dataAttributes, 'Table')}
+                {...getScrollContainerStyles(scrollOverResponsiveLayout)}
+            >
+                {table}
+            </div>
+        );
+    }
+);

package/src/tabs.css.ts

@@ -0,0 +1,212 @@
+import {createVar, style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as mq from './media-queries.css';
+import {pxToRem} from './utils/css';
+
+const TAB_MAX_WIDTH = 284;
+const TAB_HEIGHT = 56;
+
+const borderColor = createVar();
+
+export const vars = {
+    borderColor,
+};
+
+export const outerBorder = style({
+    borderBottom: `1px solid ${vars.borderColor}`,
+});
+
+export const outer = style([
+    sprinkles({
+        minHeight: TAB_HEIGHT,
+        width: '100%',
+        position: 'relative',
+    }),
+    {
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                display: 'flex',
+            },
+        },
+    },
+]);
+export const inner = style({
+    position: 'relative',
+    width: '100%',
+    // if tabs don't fit horizontally they can be scrolled
+    overflowX: 'scroll',
+
+    // hide scrollbar
+    scrollbarWidth: 'none', // Firefox
+    '::-webkit-scrollbar': {
+        display: 'none', // Chrome/Safari
+    },
+});
+export const tabsContainer = sprinkles({
+    minHeight: TAB_HEIGHT,
+    width: '100%',
+    display: 'flex',
+});
+
+const baseTab = style([
+    sprinkles({
+        display: 'inline-flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingX: 16,
+        minWidth: 80,
+        minHeight: TAB_HEIGHT,
+        background: 'transparent',
+    }),
+    {
+        outlineOffset: -8,
+        textAlign: 'center',
+        verticalAlign: 'baseline',
+        borderBottom: '2px solid transparent',
+        borderTop: 'initial',
+        borderRight: 'initial',
+        borderLeft: 'initial',
+        maxWidth: TAB_MAX_WIDTH,
+        '@media': {
+            [mq.desktopOrBigger]: {
+                padding: `16px 32px`,
+            },
+        },
+    },
+]);
+
+export const tabVariants = styleVariants({
+    default: [baseTab],
+    fullWidth: [
+        baseTab,
+        {
+            '@media': {
+                [mq.tabletOrSmaller]: {
+                    flex: '1 1 0px',
+                },
+            },
+        },
+    ],
+});
+
+const focusOutlineStyles = {
+    // the revert important! is needed to bypass the styles applied by TabFocus component
+    outline: 'revert !important',
+    outlineOffset: -8,
+};
+
+export const tabHover = styleVariants({
+    default: [
+        style({
+            ':focus-visible': {
+                ...focusOutlineStyles,
+                color: skinVars.colors.textPrimary,
+            },
+            '@media': {
+                [mq.supportsHover]: {
+                    ':hover': {
+                        color: skinVars.colors.textPrimary,
+                    },
+                },
+            },
+        }),
+    ],
+    brand: [
+        style({
+            ':focus-visible': {
+                ...focusOutlineStyles,
+                color: skinVars.colors.textPrimaryBrand,
+            },
+            '@media': {
+                [mq.supportsHover]: {
+                    ':hover': {
+                        color: skinVars.colors.textPrimaryBrand,
+                    },
+                },
+            },
+        }),
+    ],
+    negative: [
+        style({
+            ':focus-visible': {
+                ...focusOutlineStyles,
+                color: skinVars.colors.textPrimaryNegative,
+            },
+            '@media': {
+                [mq.supportsHover]: {
+                    ':hover': {
+                        color: skinVars.colors.textPrimaryNegative,
+                    },
+                },
+            },
+        }),
+    ],
+});
+
+export const tabSelectionVariants = styleVariants({
+    noSelected: [
+        sprinkles({
+            color: skinVars.colors.textSecondary,
+        }),
+    ],
+    noSelectedBrand: [
+        sprinkles({
+            color: skinVars.colors.textSecondaryBrand,
+        }),
+    ],
+    noSelectedNegative: [
+        sprinkles({
+            color: skinVars.colors.textSecondaryNegative,
+        }),
+    ],
+    selected: [
+        style({
+            borderBottom: `2px solid ${skinVars.colors.controlActivated}`,
+            color: skinVars.colors.textPrimary,
+        }),
+    ],
+    selectedBrand: [
+        style({
+            borderBottom: `2px solid ${skinVars.colors.controlActivatedBrand}`,
+            color: skinVars.colors.textPrimaryBrand,
+        }),
+    ],
+    selectedNegative: [
+        style({
+            borderBottom: `2px solid ${skinVars.colors.controlActivatedNegative}`,
+            color: skinVars.colors.textPrimaryNegative,
+        }),
+    ],
+    selectedAnimating: [
+        style({
+            borderBottom: '2px solid transparent',
+            color: skinVars.colors.textPrimary,
+        }),
+    ],
+    selectedAnimatingBrand: [
+        style({
+            borderBottom: '2px solid transparent',
+            color: skinVars.colors.textPrimaryBrand,
+        }),
+    ],
+    selectedAnimatingNegative: [
+        style({
+            borderBottom: '2px solid transparent',
+            color: skinVars.colors.textPrimaryNegative,
+        }),
+    ],
+});
+
+export const icon = style({
+    height: pxToRem(24),
+    width: pxToRem(24),
+});
+export const animatedLine = sprinkles({
+    display: 'none', // will be overriden by inline styles in animateLine function
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    height: 2,
+});