@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/tabs.tsx

@@ -1,263 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {BaseTouchable} from './touchable';
-import ResponsiveLayout from './responsive-layout';
-import {useElementDimensions, useTheme} from './hooks';
-import {Text} from './text';
-import {isRunningAcceptanceTest} from './utils/platform';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './tabs.css';
-import Inline from './inline';
-import {useThemeVariant} from './theme-variant-context';
-import {vars} from './skins/skin-contract.css';
-import {LEFT, RIGHT} from './utils/keys';
-import {applyCssVars} from './utils/css';
-
-import type {DataAttributes, IconProps, TrackingEvent} from './utils/types';
-
-const LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
-
-const getTabVariant = (numberOfTabs: number): keyof typeof styles.tabVariants => {
-    switch (numberOfTabs) {
-        case 1:
-        case 2:
-        case 3:
-            return 'fullWidth';
-        default:
-            return 'default';
-    }
-};
-
-export type TabsProps = {
-    selectedIndex: number;
-    onChange: (selectedIndex: number) => void;
-    tabs: ReadonlyArray<{
-        readonly text: string;
-        readonly trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-        readonly Icon?: (props: IconProps) => JSX.Element;
-        readonly 'aria-controls'?: string;
-        readonly id?: string;
-    }>;
-    children?: void;
-    dataAttributes?: DataAttributes;
-    selectedTabRef?: React.RefCallback<HTMLDivElement> | React.Ref<HTMLDivElement>;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    renderPanel?: (config: {
-        selectedIndex: number;
-        panelProps: {
-            id: string;
-            role: string;
-            tabIndex: number;
-            'aria-labelledby': string;
-        };
-    }) => React.ReactNode;
-};
-
-const Tabs = ({
-    selectedIndex,
-    onChange,
-    tabs,
-    dataAttributes,
-    selectedTabRef,
-    renderPanel,
-    ...otherProps
-}: TabsProps): JSX.Element => {
-    const {textPresets} = useTheme();
-    const id = React.useId();
-    const {ref} = useElementDimensions();
-    const animatedLineRef = React.useRef<HTMLDivElement>(null);
-    const scrollableContainerRef = React.useRef<HTMLDivElement>(null);
-    const [isAnimating, setIsAnimating] = React.useState(false);
-    const externalVariant = useThemeVariant();
-
-    const getTabId = (index: number) => {
-        return tabs[index].id ?? `${id}-tab-${index}`;
-    };
-
-    const getPanelId = (index: number) => {
-        return tabs[index]['aria-controls'] ?? (renderPanel ? `${id}-tabpanel-${index}` : undefined);
-    };
-
-    const animateLine = (fromIndex: number, toIndex: number) => {
-        const tabFrom = document.getElementById(getTabId(fromIndex));
-        const tabTo = document.getElementById(getTabId(toIndex));
-        const line = animatedLineRef.current;
-        const scrollable = scrollableContainerRef.current;
-        if (tabFrom && tabTo && line && scrollable) {
-            setIsAnimating(true);
-            // set initial line styles
-            line.style.display = 'block';
-            line.style.width = `${tabFrom.offsetWidth}px`;
-            line.style.transform = `translate(${tabFrom.offsetLeft - scrollable.scrollLeft}px, 0)`;
-            Promise.resolve().then(() => {
-                // set final line styles
-                line.style.transition = `transform ${LINE_ANIMATION_DURATION_MS}ms, width ${LINE_ANIMATION_DURATION_MS}ms`;
-                line.style.width = `${tabTo.offsetWidth}px`;
-                line.style.transform = `translate(${tabTo.offsetLeft - scrollable.scrollLeft}px, 0)`;
-            });
-            setTimeout(() => {
-                // hide line
-                line.style.transition = '';
-                line.style.display = 'none';
-                setIsAnimating(false);
-            }, LINE_ANIMATION_DURATION_MS);
-        }
-    };
-
-    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-        const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role="tab"]'));
-        const focusedTab = document.activeElement as HTMLElement;
-        const focusedIndex = tabs.indexOf(focusedTab);
-        if (focusedIndex === -1) {
-            return;
-        }
-
-        if (event.key === RIGHT) {
-            event.preventDefault();
-            const nextTab = focusedIndex < tabs.length - 1 ? tabs[focusedIndex + 1] : tabs[0];
-            nextTab?.focus();
-        } else if (event.key === LEFT) {
-            event.preventDefault();
-            const prevTab = focusedIndex > 0 ? tabs[focusedIndex - 1] : tabs[tabs.length - 1];
-            prevTab?.focus();
-        }
-    }, []);
-
-    return (
-        <>
-            {/* This eslint rule doesn't support aria-description and it's complaining about it */}
-            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
-            <div
-                id={id}
-                role="tablist"
-                ref={ref}
-                className={styles.outerBorder}
-                style={{
-                    ...applyCssVars({
-                        [styles.vars.borderColor]: {
-                            default: vars.colors.divider,
-                            alternative: vars.colors.divider,
-                            brand: vars.colors.dividerInverse,
-                            media: vars.colors.dividerInverse,
-                            negative: vars.colors.dividerNegative,
-                        }[externalVariant],
-                    }),
-                }}
-                {...getPrefixedDataAttributes(dataAttributes, 'Tabs')}
-                aria-label={otherProps['aria-label']}
-                aria-labelledby={otherProps['aria-labelledby']}
-                aria-description={otherProps['aria-description']}
-                aria-describedby={otherProps['aria-describedby']}
-            >
-                <ResponsiveLayout fullWidth>
-                    <div className={styles.outer}>
-                        <div ref={scrollableContainerRef} className={styles.inner}>
-                            <div className={styles.tabsContainer} onKeyDown={handleKeyDown}>
-                                {tabs.map(({text, trackingEvent, Icon}, index) => {
-                                    const isSelected = index === selectedIndex;
-                                    return (
-                                        <BaseTouchable
-                                            id={getTabId(index)}
-                                            tabIndex={isSelected ? undefined : -1}
-                                            ref={isSelected ? selectedTabRef : undefined}
-                                            dataAttributes={{'component-name': 'Tab'}}
-                                            key={index}
-                                            className={classnames(
-                                                styles.tabVariants[getTabVariant(tabs.length)],
-                                                isSelected
-                                                    ? isAnimating
-                                                        ? externalVariant === 'brand'
-                                                            ? styles.tabSelectionVariants
-                                                                  .selectedAnimatingBrand
-                                                            : externalVariant === 'negative'
-                                                              ? styles.tabSelectionVariants
-                                                                    .selectedAnimatingNegative
-                                                              : styles.tabSelectionVariants.selectedAnimating
-                                                        : externalVariant === 'brand'
-                                                          ? styles.tabSelectionVariants.selectedBrand
-                                                          : externalVariant === 'negative'
-                                                            ? styles.tabSelectionVariants.selectedNegative
-                                                            : styles.tabSelectionVariants.selected
-                                                    : externalVariant === 'brand'
-                                                      ? styles.tabSelectionVariants.noSelectedBrand
-                                                      : externalVariant === 'negative'
-                                                        ? styles.tabSelectionVariants.noSelectedNegative
-                                                        : styles.tabSelectionVariants.noSelected,
-                                                externalVariant === 'brand'
-                                                    ? styles.tabHover.brand
-                                                    : externalVariant === 'negative'
-                                                      ? styles.tabHover.negative
-                                                      : styles.tabHover.default
-                                            )}
-                                            onPress={() => {
-                                                if (!isAnimating && selectedIndex !== index) {
-                                                    onChange(index);
-                                                    animateLine(selectedIndex, index);
-                                                }
-                                            }}
-                                            trackingEvent={trackingEvent}
-                                            role="tab"
-                                            aria-controls={getPanelId(index)}
-                                            aria-selected={isSelected ? 'true' : 'false'}
-                                        >
-                                            <Inline space={!!Icon && !!text ? 8 : 0} alignItems="center">
-                                                {Icon && (
-                                                    <div className={styles.icon}>
-                                                        <Icon size="100%" color="currentColor" />
-                                                    </div>
-                                                )}
-                                                <Text
-                                                    as="div"
-                                                    desktopSize={textPresets.tabsLabel.size.desktop}
-                                                    mobileSize={textPresets.tabsLabel.size.mobile}
-                                                    desktopLineHeight={
-                                                        textPresets.tabsLabel.lineHeight.desktop
-                                                    }
-                                                    mobileLineHeight={textPresets.tabsLabel.lineHeight.mobile}
-                                                    weight={textPresets.tabsLabel.weight}
-                                                    color="inherit"
-                                                    wordBreak={false}
-                                                    textAlign="center"
-                                                    hyphens="auto"
-                                                >
-                                                    {text}
-                                                </Text>
-                                            </Inline>
-                                        </BaseTouchable>
-                                    );
-                                })}
-                            </div>
-                        </div>
-                        <div
-                            ref={animatedLineRef}
-                            className={styles.animatedLine}
-                            style={{
-                                background:
-                                    externalVariant === 'brand'
-                                        ? vars.colors.controlActivatedBrand
-                                        : externalVariant === 'negative'
-                                          ? vars.colors.controlActivatedNegative
-                                          : vars.colors.controlActivated,
-                            }}
-                        />
-                    </div>
-                </ResponsiveLayout>
-            </div>
-            {renderPanel?.({
-                selectedIndex,
-                panelProps: {
-                    role: 'tabpanel',
-                    tabIndex: 0,
-                    id: getPanelId(selectedIndex) as string,
-                    'aria-labelledby': `${id}-tab-${selectedIndex}`,
-                },
-            })}
-        </>
-    );
-};
-
-export default Tabs;

package/src/tag.css.ts

@@ -1,42 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-const tagCommon = style([
-    sprinkles({
-        display: 'inline-flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }),
-    {
-        verticalAlign: 'middle',
-        borderRadius: vars.borderRadii.tag,
-    },
-]);
-
-export const tag = style([
-    tagCommon,
-    sprinkles({
-        minWidth: 56,
-    }),
-    {
-        paddingBottom: vars.spacing.tagPadding.bottom,
-        paddingTop: vars.spacing.tagPadding.top,
-    },
-]);
-
-export const smallTag = style([
-    tagCommon,
-    sprinkles({
-        minWidth: 40,
-        paddingY: 2,
-    }),
-    {
-        minHeight: 22,
-    },
-]);
-
-export const icon = sprinkles({display: 'block'});
-
-export const badge = sprinkles({display: 'inline-flex', paddingLeft: 4});

package/src/tag.tsx

@@ -1,161 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Box from './box';
-import {Text} from './text';
-import {ThemeVariant, useThemeVariant} from './theme-variant-context';
-import {pxToRem} from './utils/css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './tag.css';
-import {vars} from './skins/skin-contract.css';
-import classNames from 'classnames';
-import {useTheme} from './hooks';
-import Badge from './badge';
-
-import type {DataAttributes, IconProps} from './utils/types';
-
-export type TagType = 'promo' | 'info' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
-
-export type TagProps = {
-    // not using "TagType" and repeating the union to make these props playroom autocomplete friendly
-    type?: 'promo' | 'info' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
-    children: string;
-    Icon?: (props: IconProps) => JSX.Element;
-    dataAttributes?: DataAttributes;
-    badge?: boolean | number;
-    backgroundColor?: string;
-    textColor?: string;
-    small?: boolean;
-};
-
-const {colors} = vars;
-
-const Tag = ({
-    Icon,
-    children,
-    dataAttributes,
-    type = 'promo',
-    badge,
-    backgroundColor: customBackgroundColor,
-    textColor: customTextColor,
-    small = false,
-}: TagProps): JSX.Element | null => {
-    const {textPresets} = useTheme();
-    const themeVariant = useThemeVariant();
-    const isOverBrand = themeVariant === 'brand' || themeVariant === 'media';
-    const badgeValue = badge === true ? undefined : badge || 0;
-
-    if (!children) {
-        return null;
-    }
-
-    const tagTypeToColors = {
-        // [textColor, inverseTextColor, backgroundColor, backgroundColorInverse]
-        promo: [
-            colors.tagTextPromo,
-            colors.tagTextPromoBrand,
-            colors.tagBackgroundPromo,
-            colors.tagBackgroundPromoBrand,
-        ],
-        info: [
-            colors.tagTextInfo,
-            colors.tagTextInfoBrand,
-            colors.tagBackgroundInfo,
-            colors.tagBackgroundInfoBrand,
-        ],
-        active: [
-            colors.tagTextActive,
-            colors.tagTextActiveBrand,
-            colors.tagBackgroundActive,
-            colors.tagBackgroundActiveBrand,
-        ],
-        inactive: [
-            colors.tagTextInactive,
-            colors.tagTextInactiveBrand,
-            // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            themeVariant === 'alternative' ? colors.neutralLowAlternative : colors.tagBackgroundInactive,
-            colors.tagBackgroundInactiveBrand,
-        ],
-        success: [
-            colors.tagTextSuccess,
-            colors.tagTextSuccessBrand,
-            colors.tagBackgroundSuccess,
-            colors.tagBackgroundSuccessBrand,
-        ],
-        warning: [
-            colors.tagTextWarning,
-            colors.tagTextWarningBrand,
-            colors.tagBackgroundWarning,
-            colors.tagBackgroundWarningBrand,
-        ],
-        error: [
-            colors.tagTextError,
-            colors.tagTextErrorBrand,
-            colors.tagBackgroundError,
-            colors.tagBackgroundErrorBrand,
-        ],
-    } as const;
-
-    const [defaultTextColor, inverseTextColor, defaultBackgroundColor, backgroundColorInverse] =
-        tagTypeToColors[type];
-
-    const textColor = customTextColor || (isOverBrand ? inverseTextColor : defaultTextColor);
-    const backgroundColor =
-        customBackgroundColor || (isOverBrand ? backgroundColorInverse : defaultBackgroundColor);
-
-    const hasNumericBadge = typeof badge === 'number' && badge !== 0;
-    const hasNonNumericBadge = badge === true;
-    const hasBadge = hasNumericBadge || hasNonNumericBadge;
-
-    const calcPaddings = () => {
-        if (small) {
-            return {
-                paddingLeft: Icon ? 4 : 8,
-                paddingRight: hasNumericBadge ? 2 : hasNonNumericBadge ? 4 : 8,
-            };
-        } else {
-            return {
-                paddingLeft: Icon ? 8 : 12,
-                paddingRight: hasBadge ? 8 : 12,
-            };
-        }
-    };
-
-    const {paddingLeft, paddingRight} = calcPaddings();
-
-    return (
-        <span
-            {...getPrefixedDataAttributes(dataAttributes, 'Tag')}
-            className={classNames(small ? styles.smallTag : styles.tag)}
-            style={{
-                paddingLeft,
-                paddingRight,
-                background: backgroundColor,
-            }}
-        >
-            {Icon && (
-                <Box paddingRight={4}>
-                    <Icon color={textColor} size={pxToRem(16)} className={styles.icon} />
-                </Box>
-            )}
-            <ThemeVariant isInverse={false}>
-                <Text
-                    color={textColor}
-                    size={small ? 12 : 14}
-                    lineHeight={small ? 16 : 20}
-                    weight={textPresets.indicator.weight}
-                    truncate
-                >
-                    {children}
-                </Text>
-                {badgeValue !== 0 && (
-                    <div className={styles.badge}>
-                        <Badge value={badgeValue} />
-                    </div>
-                )}
-            </ThemeVariant>
-        </span>
-    );
-};
-
-export default Tag;

package/src/test-utils/environment/setup-ssr.tsx

@@ -1,10 +0,0 @@
-import puppeteerSetup from 'jest-environment-puppeteer/setup';
-import {compileSsrClient} from '../ssr';
-
-export default async (jestConfig: any = {}): Promise<void> => {
-    console.log();
-    console.log('Building SSR client bundles...');
-    await compileSsrClient({build: process.env.NO_BUILD !== 'true'});
-
-    await puppeteerSetup(jestConfig);
-};

package/src/test-utils/fail-test-on-console-error.tsx

@@ -1,22 +0,0 @@
-let errorOrWarnCalled = false;
-const originalConsoleError = console.error;
-const originalConsoleWarn = console.warn;
-
-beforeEach(() => {
-    jest.spyOn(global.console, 'error').mockImplementation((...args) => {
-        errorOrWarnCalled = true;
-        originalConsoleError(...args);
-    });
-
-    jest.spyOn(global.console, 'warn').mockImplementation((...args) => {
-        errorOrWarnCalled = true;
-        originalConsoleWarn(...args);
-    });
-});
-
-afterEach(() => {
-    if (errorOrWarnCalled) {
-        errorOrWarnCalled = false;
-        throw new Error('Console warnings and errors are not allowed in tests.');
-    }
-});