@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/tabs.tsx

@@ -0,0 +1,263 @@
+'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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,161 @@
+'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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,22 @@
+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.');
+    }
+});