@telefonica/mistica 16.70.0 → 16.72.0

package/src/pagination.css.ts

@@ -0,0 +1,303 @@
+import {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';
+
+export const container = style([
+    sprinkles({
+        display: 'inline-flex',
+        alignItems: 'center',
+        columnGap: {
+            mobile: 4,
+            desktop: 8,
+        },
+        paddingY: 8,
+        paddingX: {
+            mobile: 0,
+            desktop: 16,
+        },
+        maxWidth: '100%',
+    }),
+    {
+        width: 'fit-content',
+        boxSizing: 'border-box',
+    },
+]);
+
+export const containerNavOnly = style({
+    gap: 16,
+});
+
+export const pageList = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        columnGap: {
+            mobile: 4,
+            desktop: 8,
+        },
+    }),
+    {
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+    },
+]);
+
+export const pageListDesktop = style({
+    display: 'none',
+
+    '@media': {
+        [mq.desktopOrBigger]: {
+            display: 'flex',
+        },
+    },
+});
+
+export const pageListMobile = style({
+    '@media': {
+        [mq.desktopOrBigger]: {
+            display: 'none',
+        },
+    },
+});
+
+export const pageListItem = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }),
+    {
+        minWidth: 48,
+        height: 48,
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                minWidth: 32,
+                height: 32,
+            },
+        },
+    },
+]);
+
+const interactiveArea = style([
+    {
+        position: 'relative',
+        padding: 0,
+        border: 0,
+        font: 'inherit',
+        background: 'transparent',
+        color: skinVars.colors.textPrimary,
+        borderRadius: skinVars.borderRadii.button,
+        WebkitTapHighlightColor: 'transparent',
+        boxSizing: 'border-box',
+
+        selectors: {
+            '&&': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+            },
+        },
+    },
+]);
+
+const pageElement = style([
+    interactiveArea,
+    {
+        selectors: {
+            '&&': {
+                width: 'auto',
+                minWidth: 48,
+                padding: '0 12px',
+            },
+        },
+
+        ':before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            width: 'max(32px, calc(100% - 16px))',
+            height: 32,
+            borderRadius: 16,
+            transform: 'translate(-50%, -50%) scale(0.8)',
+            opacity: 0,
+            transition: 'transform 0.2s ease-in-out, opacity 0.2s ease-in-out',
+        },
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                selectors: {
+                    '&&': {
+                        minWidth: 32,
+                        padding: '0 4px',
+                    },
+                },
+
+                ':before': {
+                    width: '100%',
+                },
+            },
+        },
+    },
+]);
+
+export const pageButton = style([
+    pageElement,
+    {
+        cursor: 'pointer',
+
+        selectors: {
+            '&:active:not(:disabled):before': {
+                opacity: 1,
+                transform: 'translate(-50%, -50%) scale(1)',
+                backgroundColor: skinVars.colors.brandLow,
+            },
+            '&:disabled': {
+                cursor: 'default',
+                opacity: 0.5,
+            },
+        },
+
+        '@media': {
+            [mq.supportsHover]: {
+                selectors: {
+                    '&:hover:not(:disabled):before': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1.06)',
+                        backgroundColor: skinVars.colors.neutralLow,
+                    },
+                    '&:active:not(:disabled):before': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1)',
+                        backgroundColor: skinVars.colors.brandLow,
+                    },
+                },
+            },
+            [mq.touchableOnly]: {
+                ':before': {
+                    transition: 'none',
+                },
+            },
+        },
+    },
+]);
+
+export const pageButtonVariants = styleVariants({
+    default: {},
+    brand: {
+        color: skinVars.colors.textButtonSecondaryBrand,
+        selectors: {
+            '&:active:not(:disabled)': {
+                color: skinVars.colors.textBrand,
+            },
+            '&:active:not(:disabled):before': {
+                backgroundColor: skinVars.colors.brandLow,
+            },
+        },
+        '@media': {
+            [mq.supportsHover]: {
+                selectors: {
+                    '&:hover:not(:disabled):before': {
+                        backgroundColor: skinVars.colors.backgroundContainerBrandHover,
+                    },
+                    '&:active:not(:disabled)': {
+                        color: skinVars.colors.textBrand,
+                    },
+                    '&:active:not(:disabled):before': {
+                        backgroundColor: skinVars.colors.brandLow,
+                    },
+                },
+            },
+        },
+    },
+    negative: {
+        color: skinVars.colors.textButtonSecondaryNegative,
+        selectors: {
+            '&:active:not(:disabled)': {
+                color: skinVars.colors.textButtonPrimaryNegative,
+            },
+            '&:active:not(:disabled):before': {
+                backgroundColor: skinVars.colors.buttonPrimaryBackgroundNegative,
+            },
+        },
+        '@media': {
+            [mq.supportsHover]: {
+                selectors: {
+                    '&:hover:not(:disabled):before': {
+                        backgroundColor: skinVars.colors.backgroundContainerBrandHover,
+                    },
+                    '&:active:not(:disabled)': {
+                        color: skinVars.colors.textButtonPrimaryNegative,
+                    },
+                    '&:active:not(:disabled):before': {
+                        backgroundColor: skinVars.colors.buttonPrimaryBackgroundNegative,
+                    },
+                },
+            },
+        },
+    },
+    alternative: {},
+    media: {},
+});
+
+export const currentPage = style([
+    pageElement,
+    {
+        cursor: 'default',
+        color: skinVars.colors.textActivated,
+
+        ':before': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%) scale(1)',
+            backgroundColor: skinVars.colors.brandLow,
+        },
+    },
+]);
+
+export const currentPageVariants = styleVariants({
+    default: {},
+    brand: {
+        color: skinVars.colors.textBrand,
+        ':before': {
+            backgroundColor: skinVars.colors.brandLow,
+        },
+    },
+    negative: {
+        color: skinVars.colors.textButtonPrimaryNegative,
+        ':before': {
+            backgroundColor: skinVars.colors.buttonPrimaryBackgroundNegative,
+        },
+    },
+    alternative: {},
+    media: {},
+});
+
+export const pageContent = style({
+    position: 'relative',
+    zIndex: 1,
+});
+
+export const navigationButtonLinkVariants = styleVariants({
+    default: {},
+    brand: {
+        selectors: {
+            '&&': {
+                color: skinVars.colors.textButtonSecondaryBrand,
+            },
+        },
+    },
+    negative: {
+        selectors: {
+            '&&': {
+                color: skinVars.colors.textButtonSecondaryNegative,
+            },
+        },
+    },
+    alternative: {},
+    media: {},
+});

package/src/pagination.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import * as React from 'react';
+import classnames from 'classnames';
+import * as styles from './pagination.css';
+import {Text3} from './text';
+import Touchable from './touchable';
+import {ButtonLink} from './button';
+import {IconButton} from './icon-button';
+import {useTheme} from './hooks';
+import {useThemeVariant} from './theme-variant-context';
+import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
+import IconChevronRightRegular from './generated/mistica-icons/icon-chevron-right-regular';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as tokens from './text-tokens';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes} from './utils/types';
+import type {NonDeprecatedVariant} from './theme-variant-context';
+
+export type PaginationProps = {
+    totalPages: number;
+    currentPage?: number;
+    defaultPage?: number;
+    onChange?: (page: number) => void;
+
+    hideNavigationControls?: boolean;
+    hidePageList?: boolean;
+
+    surroundingPageCount?: number;
+
+    navLeftLabel?: string;
+    navRightLabel?: string;
+
+    mode?: 'default' | 'iconOnly';
+    disabled?: boolean;
+
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+};
+
+type PageItem = {type: 'page'; page: number; current: boolean};
+type EllipsisItem = {type: 'ellipsis'};
+type PaginationItem = ExclusifyUnion<PageItem | EllipsisItem>;
+
+const DEFAULT_SURROUNDING_PAGE_COUNT = 1;
+const FIRST_PAGE = 1;
+
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
+export const getPaginationItems = ({
+    totalPages,
+    currentPage,
+    surroundingPageCount = DEFAULT_SURROUNDING_PAGE_COUNT,
+    includeBoundaryPages = true,
+}: {
+    totalPages: number;
+    currentPage: number;
+    surroundingPageCount?: number;
+    includeBoundaryPages?: boolean;
+}): Array<PaginationItem> => {
+    if (totalPages <= 1) {
+        return [];
+    }
+
+    const activePage = clamp(currentPage, FIRST_PAGE, totalPages);
+    const surroundingCount = clamp(Math.floor(surroundingPageCount), 0, totalPages);
+    const dynamicPageCount = 2 * surroundingCount + 1;
+
+    if (totalPages <= dynamicPageCount) {
+        return Array.from({length: totalPages}, (_, index) => {
+            const page = index + FIRST_PAGE;
+            return {type: 'page', page, current: page === activePage};
+        });
+    }
+
+    const lastPage = totalPages;
+    const createPageItem = (page: number): PaginationItem => ({
+        type: 'page',
+        page,
+        current: page === activePage,
+    });
+    const createPageRange = (start: number, end: number): Array<PaginationItem> =>
+        Array.from({length: Math.max(0, end - start + 1)}, (_, index) => createPageItem(start + index));
+
+    if (!includeBoundaryPages) {
+        const rangeStart = Math.max(
+            Math.min(activePage - surroundingCount, lastPage - dynamicPageCount),
+            FIRST_PAGE + 1
+        );
+        const rangeEnd = rangeStart + dynamicPageCount - 1;
+        const items: Array<PaginationItem> = [];
+
+        if (rangeStart > FIRST_PAGE + 1) {
+            items.push({type: 'ellipsis'});
+        } else {
+            items.push(createPageItem(FIRST_PAGE));
+        }
+
+        items.push(...createPageRange(rangeStart, rangeEnd));
+
+        if (rangeEnd < lastPage - 1) {
+            items.push({type: 'ellipsis'});
+        } else if (rangeEnd < lastPage) {
+            items.push(createPageItem(lastPage));
+        }
+
+        return items;
+    }
+
+    const rangeStart = Math.max(
+        Math.min(activePage - surroundingCount, lastPage - dynamicPageCount - 1),
+        FIRST_PAGE + 2
+    );
+    const rangeEnd = Math.min(
+        Math.max(activePage + surroundingCount, FIRST_PAGE + dynamicPageCount + 1),
+        lastPage - 2
+    );
+
+    const items: Array<PaginationItem> = [createPageItem(FIRST_PAGE)];
+
+    if (rangeStart > FIRST_PAGE + 2) {
+        items.push({type: 'ellipsis'});
+    } else {
+        items.push(createPageItem(FIRST_PAGE + 1));
+    }
+
+    items.push(...createPageRange(rangeStart, rangeEnd));
+
+    if (rangeEnd < lastPage - 2) {
+        items.push({type: 'ellipsis'});
+    } else {
+        items.push(createPageItem(lastPage - 1));
+    }
+
+    items.push(createPageItem(lastPage));
+
+    return items;
+};
+
+const PaginationLabel = ({children}: {children: React.ReactNode}): JSX.Element => {
+    return (
+        <Text3 as="span" medium color="currentColor" wordBreak={false}>
+            {children}
+        </Text3>
+    );
+};
+
+const getEllipsisColor = (variant: NonDeprecatedVariant): string => {
+    switch (variant) {
+        case 'brand':
+            return skinVars.colors.textButtonSecondaryBrand;
+        case 'negative':
+            return skinVars.colors.textButtonSecondaryNegative;
+        default:
+            return skinVars.colors.textSecondary;
+    }
+};
+
+type PageListProps = {
+    items: Array<PaginationItem>;
+    disabled?: boolean;
+    className?: string;
+    onPageClick: (page: number) => void;
+};
+
+const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const variant = useThemeVariant();
+    const goToPageLabel = (page: number) =>
+        t(texts.paginationGoToPage || tokens.paginationGoToPage, String(page));
+    const currentPageLabel = (page: number) =>
+        t(texts.paginationCurrentPage || tokens.paginationCurrentPage, String(page));
+
+    return (
+        <ol className={classnames(styles.pageList, className)}>
+            {items.map((item, index) => {
+                if (item.type === 'ellipsis') {
+                    return (
+                        <li key={`ellipsis-${index}`} className={styles.pageListItem} aria-hidden="true">
+                            <Text3 as="span" medium color={getEllipsisColor(variant)} wordBreak={false}>
+                                ...
+                            </Text3>
+                        </li>
+                    );
+                }
+
+                if (item.current) {
+                    return (
+                        <li key={item.page} className={styles.pageListItem}>
+                            <Touchable
+                                className={classnames(
+                                    styles.currentPage,
+                                    styles.currentPageVariants[variant]
+                                )}
+                                onPress={() => {}}
+                                aria-current="page"
+                                aria-disabled
+                                aria-label={currentPageLabel(item.page)}
+                            >
+                                <span className={styles.pageContent}>
+                                    <PaginationLabel>{item.page}</PaginationLabel>
+                                </span>
+                            </Touchable>
+                        </li>
+                    );
+                }
+
+                return (
+                    <li key={item.page} className={styles.pageListItem}>
+                        <Touchable
+                            className={classnames(styles.pageButton, styles.pageButtonVariants[variant])}
+                            disabled={disabled}
+                            aria-label={goToPageLabel(item.page)}
+                            onPress={() => onPageClick(item.page)}
+                        >
+                            <span className={styles.pageContent}>
+                                <PaginationLabel>{item.page}</PaginationLabel>
+                            </span>
+                        </Touchable>
+                    </li>
+                );
+            })}
+        </ol>
+    );
+};
+
+export const Pagination = ({
+    totalPages,
+    currentPage,
+    defaultPage = 1,
+    onChange,
+    hideNavigationControls = false,
+    hidePageList = false,
+    surroundingPageCount,
+    navLeftLabel,
+    navRightLabel,
+    mode = 'default',
+    disabled = false,
+    dataAttributes,
+    'aria-label': ariaLabel,
+}: PaginationProps): JSX.Element | null => {
+    const isControlled = currentPage !== undefined;
+    const [internalPage, setInternalPage] = React.useState(defaultPage);
+    const {texts, t} = useTheme();
+    const variant = useThemeVariant();
+
+    if (totalPages <= 1 || (hideNavigationControls && hidePageList)) {
+        return null;
+    }
+
+    const activePage = clamp(isControlled ? currentPage : internalPage, FIRST_PAGE, totalPages);
+
+    const sectionLabel = t(
+        texts.paginationSection || tokens.paginationSection,
+        String(activePage),
+        String(totalPages)
+    );
+    const resolvedAriaLabel = ariaLabel ? `${sectionLabel}, ${ariaLabel}` : sectionLabel;
+    const resolvedPrevLabel = navLeftLabel || texts.paginationPrevPage || t(tokens.paginationPrevPage);
+    const resolvedNextLabel = navRightLabel || texts.paginationNextPage || t(tokens.paginationNextPage);
+    const resolvedPrevAriaLabel =
+        navLeftLabel || texts.paginationPrevPageAriaLabel || t(tokens.paginationPrevPageAriaLabel);
+    const resolvedNextAriaLabel =
+        navRightLabel || texts.paginationNextPageAriaLabel || t(tokens.paginationNextPageAriaLabel);
+
+    const goToPage = (page: number) => {
+        const nextPage = clamp(page, FIRST_PAGE, totalPages);
+
+        if (disabled || nextPage === activePage) {
+            return;
+        }
+
+        if (!isControlled) {
+            setInternalPage(nextPage);
+        }
+
+        onChange?.(nextPage);
+    };
+
+    const isPrevDisabled = activePage <= 1;
+    const isNextDisabled = activePage >= totalPages;
+    const desktopItems = getPaginationItems({
+        totalPages,
+        currentPage: activePage,
+        surroundingPageCount,
+        includeBoundaryPages: true,
+    });
+    const mobileItems = getPaginationItems({
+        totalPages,
+        currentPage: activePage,
+        surroundingPageCount,
+        includeBoundaryPages: false,
+    });
+
+    return (
+        <nav
+            aria-label={resolvedAriaLabel}
+            className={classnames(styles.container, {
+                [styles.containerNavOnly]: hidePageList,
+            })}
+            {...getPrefixedDataAttributes({testid: 'Pagination', ...dataAttributes})}
+        >
+            {!hideNavigationControls &&
+                (mode === 'iconOnly' ? (
+                    <IconButton
+                        small
+                        Icon={IconChevronLeftRegular}
+                        type="brand"
+                        backgroundType="transparent"
+                        disabled={disabled || isPrevDisabled}
+                        aria-label={resolvedPrevAriaLabel}
+                        onPress={() => goToPage(activePage - 1)}
+                        bleedLeft
+                    />
+                ) : (
+                    <ButtonLink
+                        small
+                        className={styles.navigationButtonLinkVariants[variant]}
+                        disabled={disabled || isPrevDisabled}
+                        aria-label={resolvedPrevAriaLabel}
+                        onPress={() => goToPage(activePage - 1)}
+                        bleedLeft
+                        StartIcon={IconChevronLeftRegular}
+                    >
+                        {resolvedPrevLabel}
+                    </ButtonLink>
+                ))}
+
+            {!hidePageList && (
+                <>
+                    <PageList
+                        items={desktopItems}
+                        disabled={disabled}
+                        className={styles.pageListDesktop}
+                        onPageClick={goToPage}
+                    />
+                    <PageList
+                        items={mobileItems}
+                        disabled={disabled}
+                        className={styles.pageListMobile}
+                        onPageClick={goToPage}
+                    />
+                </>
+            )}
+            {!hideNavigationControls &&
+                (mode === 'iconOnly' ? (
+                    <IconButton
+                        small
+                        Icon={IconChevronRightRegular}
+                        type="brand"
+                        backgroundType="transparent"
+                        disabled={disabled || isNextDisabled}
+                        aria-label={resolvedNextAriaLabel}
+                        onPress={() => goToPage(activePage + 1)}
+                        bleedRight
+                    />
+                ) : (
+                    <ButtonLink
+                        small
+                        className={styles.navigationButtonLinkVariants[variant]}
+                        disabled={disabled || isNextDisabled}
+                        aria-label={resolvedNextAriaLabel}
+                        onPress={() => goToPage(activePage + 1)}
+                        bleedRight
+                        EndIcon={IconChevronRightRegular}
+                    >
+                        {resolvedNextLabel}
+                    </ButtonLink>
+                ))}
+        </nav>
+    );
+};
+
+export default Pagination;

package/src/password-field.tsx

@@ -118,7 +118,7 @@ const PasswordField = ({
             }}
             autoComplete={autoComplete}
             endIcon={<PasswordAdornment focus={focus} isVisible={isVisible} setVisibility={setIsVisible} />}
-            dataAttributes={{'component-name': 'PasswordField', testid: 'PasswordField', ...dataAttributes}}
+            dataAttributes={{testid: 'PasswordField', ...dataAttributes}}
         />
     );
 };

package/src/phone-number-field-lite.tsx

@@ -257,7 +257,7 @@ const PhoneNumberFieldLite = ({
             type="phone"
             inputProps={{prefix: rest.prefix}}
             inputComponent={PhoneInput}
-            dataAttributes={{'component-name': 'PhoneNumberFieldLite', ...dataAttributes}}
+            dataAttributes={{testid: 'PhoneNumberFieldLite', ...dataAttributes}}
         />
     );
 };

package/src/phone-number-field.tsx

@@ -160,7 +160,6 @@ const PhoneNumberField = ({
             inputProps={{prefix: rest.prefix}}
             inputComponent={PhoneInput}
             dataAttributes={{
-                'component-name': 'PhoneNumberField',
                 testid: 'PhoneNumberField',
                 ...dataAttributes,
             }}