@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/switch-component.tsx

@@ -0,0 +1,187 @@
+/*
+This file is named "switch-component.tsx" instead of "switch.tsx" to workaround
+this storybook bug:
+https://github.com/storybookjs/storybook/issues/11980
+*/
+
+'use client';
+import * as React from 'react';
+import {debounce} from './utils/helpers';
+import {SPACE} from './utils/keys';
+import {useControlProps} from './form-context';
+import {Text3} from './text';
+import Inline from './inline';
+import {useTheme} from './hooks';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as styles from './switch-component.css';
+import {useThemeVariant} from './theme-variant-context';
+
+import type {DataAttributes} from './utils/types';
+
+type RenderSwitch = (renderProps: {
+    controlElement: React.ReactElement;
+    labelId: string;
+    checked: boolean;
+    disabled: boolean;
+}) => React.ReactNode;
+
+type PropsRender = {
+    name: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    render: RenderSwitch;
+    children?: undefined;
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+    dataAttributes?: DataAttributes;
+};
+
+type PropsChildren = {
+    name: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    render?: undefined;
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+    dataAttributes?: DataAttributes;
+};
+
+const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
+    const {isIos, isDarkMode} = useTheme();
+    const themeVariant = useThemeVariant();
+    const reactId = React.useId();
+    const labelId = props['aria-labelledby'] || reactId;
+    const {defaultValue, value, onChange, focusableRef, disabled} = useControlProps({
+        name: props.name,
+        label: props['aria-label'],
+        value: props.checked,
+        defaultValue: props.defaultChecked,
+        onChange: props.onChange,
+        disabled: props.disabled,
+    });
+
+    const [checkedState, setCheckedState] = React.useState(!!defaultValue);
+    const isChecked = value ?? checkedState;
+
+    const notifyChange = React.useMemo(() => {
+        if (process.env.NODE_ENV === 'test') {
+            return (value: boolean) => onChange?.(value);
+        } else {
+            return debounce((value: boolean) => {
+                onChange?.(value);
+            }, 300);
+        }
+    }, [onChange]);
+
+    const handleChange = () => {
+        if (value !== undefined) {
+            onChange?.(!value);
+        } else {
+            setCheckedState(!checkedState);
+            notifyChange(!checkedState);
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === SPACE) {
+            event.preventDefault();
+            event.stopPropagation();
+            handleChange();
+        }
+    };
+
+    const barVariant = isIos
+        ? isChecked
+            ? 'checkedIos'
+            : isDarkMode
+              ? 'iosDark'
+              : 'ios'
+        : isChecked
+          ? 'checked'
+          : 'default';
+
+    const ballVariant = isIos ? (isChecked ? 'checkedIos' : 'ios') : isChecked ? 'checked' : 'default';
+
+    const switchEl = (
+        <div
+            className={
+                styles.checkboxVariants[
+                    isIos ? (disabled ? 'disabledIos' : 'ios') : disabled ? 'disabled' : 'default'
+                ]
+            }
+        >
+            <div className={styles.switchCheckboxContainerVariants[isIos ? 'ios' : 'default']}>
+                <div className={styles.switchCheckboxLabel}>
+                    <span
+                        className={
+                            themeVariant === 'brand' || themeVariant === 'media'
+                                ? styles.overBrandBarVariants[barVariant]
+                                : themeVariant === 'negative'
+                                  ? styles.overNegativeBarVariants[barVariant]
+                                  : styles.barVariants[barVariant]
+                        }
+                    />
+                    <span
+                        className={
+                            themeVariant === 'brand' || themeVariant === 'media'
+                                ? styles.overBrandBallVariants[ballVariant]
+                                : themeVariant === 'negative'
+                                  ? styles.overNegativeBallVariants[ballVariant]
+                                  : styles.ballVariants[ballVariant]
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        // When the switch is disabled, it shouldn't be focusable
+        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+        <span
+            role="switch"
+            aria-checked={value ?? checkedState}
+            onClick={(e) => {
+                e.stopPropagation();
+                if (!disabled) {
+                    handleChange();
+                }
+            }}
+            onKeyDown={disabled ? undefined : handleKeyDown}
+            tabIndex={disabled ? undefined : 0}
+            ref={focusableRef}
+            className={disabled ? styles.containerDisabled : styles.container}
+            aria-disabled={disabled}
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-label'] ? undefined : labelId}
+            {...getPrefixedDataAttributes(props.dataAttributes, 'Switch')}
+        >
+            {props.render ? (
+                <>
+                    {props.render({
+                        controlElement: switchEl,
+                        labelId,
+                        disabled: !!disabled,
+                        checked: value ?? checkedState,
+                    })}
+                </>
+            ) : (
+                <Inline space={16} alignItems="center" className={styles.interactiveArea}>
+                    {switchEl}
+                    {props.children && (
+                        <Text3 regular as="div" id={labelId}>
+                            <span className={disabled ? styles.disabled : ''}>{props.children}</span>
+                        </Text3>
+                    )}
+                </Inline>
+            )}
+        </span>
+    );
+};
+
+export default Switch;

package/src/tab-focus.tsx

@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import {TAB} from './utils/keys';
+import {fieldFocusRing} from './text-field-components.css';
+
+const TAB_NAVIGATION_CLASS = 'mistica-tab-navigation';
+
+const css = `
+    body:not(.${TAB_NAVIGATION_CLASS}) *:focus,
+    body:not(.${TAB_NAVIGATION_CLASS}) *:active,
+    body:not(.${TAB_NAVIGATION_CLASS}) .${fieldFocusRing} {
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+`;
+
+type Props = {
+    children: React.ReactNode;
+    disabled: boolean;
+};
+
+let isMounted = false;
+
+const TabFocus = ({children, disabled}: Props): JSX.Element => {
+    React.useEffect(() => {
+        if (disabled) {
+            return;
+        }
+
+        if (isMounted) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('Multiple TabFocus instances');
+            }
+            return;
+        }
+
+        isMounted = true;
+
+        const handleKeyboardEvent = (e: KeyboardEvent) => {
+            if (e.key === TAB) {
+                document.body.classList.add(TAB_NAVIGATION_CLASS);
+            } else {
+                document.body.classList.remove(TAB_NAVIGATION_CLASS);
+            }
+        };
+
+        const handleMouseEvent = () => {
+            document.body.classList.remove(TAB_NAVIGATION_CLASS);
+        };
+
+        window.addEventListener('keydown', handleKeyboardEvent);
+        window.addEventListener('mouseup', handleMouseEvent);
+        return () => {
+            isMounted = false;
+            window.removeEventListener('keydown', handleKeyboardEvent);
+            window.removeEventListener('mouseup', handleMouseEvent);
+        };
+    }, [disabled]);
+
+    return (
+        <>
+            {!disabled && <style>{css}</style>}
+            {children}
+        </>
+    );
+};
+
+export default TabFocus;

package/src/table-actions-header.tsx

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+import * as styles from './table.css';
+import ScreenReaderOnly from './screen-reader-only';
+import {useTheme} from './hooks';
+import * as tokens from './text-tokens';
+
+export const TableActionsHeader = (): React.ReactElement => {
+    const {texts, t} = useTheme();
+
+    return (
+        <th>
+            <ScreenReaderOnly>
+                {/** TODO: review text and translations (https://jira.tid.es/browse/PRODUCTDSN-2491) */}
+                <div className={styles.actionsHeaderText}>
+                    {texts.tableActionsHeaderLabel || t(tokens.tableActionsHeaderLabel)}
+                </div>
+            </ScreenReaderOnly>
+        </th>
+    );
+};

package/src/table-cell-text.tsx

@@ -0,0 +1,35 @@
+'use client';
+import * as React from 'react';
+import Text from './text';
+import {useTheme} from './hooks';
+
+type Props = {
+    children: React.ReactNode;
+    isCollapsedRowTitle?: boolean;
+};
+
+const TableCellText = ({children, isCollapsedRowTitle}: Props): JSX.Element => {
+    const {textPresets} = useTheme();
+    return (
+        <Text
+            desktopSize={textPresets.text2.size.desktop}
+            desktopLineHeight={textPresets.text2.lineHeight.desktop}
+            // Use Text4 size/lineHeight for row's title when collapsed-row mode is used
+            {...(isCollapsedRowTitle
+                ? {
+                      mobileSize: textPresets.text4.size.mobile,
+                      mobileLineHeight: textPresets.text4.lineHeight.mobile,
+                  }
+                : {
+                      mobileSize: textPresets.text2.size.mobile,
+                      mobileLineHeight: textPresets.text2.lineHeight.mobile,
+                  })}
+            as="div"
+            wordBreak={false}
+        >
+            {children}
+        </Text>
+    );
+};
+
+export default TableCellText;

package/src/table.css.ts

@@ -0,0 +1,297 @@
+import {createVar, fallbackVar, globalStyle, style, styleVariants} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import {vars as responsiveLayoutVars} from './responsive-layout.css';
+
+const responsiveLayoutSideMargin = fallbackVar(responsiveLayoutVars.sideMargin, '0px');
+
+const maxHeight = createVar();
+
+export const vars = {maxHeight};
+
+export const table = style({
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    position: 'relative',
+});
+
+export const fullWidth = style({minWidth: '100%'});
+
+// In mobile, we have 2 rendering modes: horizontal scroll, or collapsed rows. In collapsed rows mode, every row is rendered as a card
+export const collapsedRowsInMobile = style({});
+
+export const hiddenHeadersInMobile = style({});
+export const hiddenHeadersInDesktop = style({});
+
+const BOXED_PADDING_Y_DESKTOP = 8;
+
+export const boxed = style({
+    padding: '0 16px',
+    paddingBottom: BOXED_PADDING_Y_DESKTOP,
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            paddingBottom: 0,
+            selectors: {
+                [`${collapsedRowsInMobile}&`]: {
+                    padding: 0,
+                },
+            },
+        },
+    },
+});
+
+const baseTextAlign = style({
+    selectors: {
+        [`${collapsedRowsInMobile} &`]: {
+            '@media': {
+                [mq.tabletOrSmaller]: {
+                    textAlign: 'initial',
+                },
+            },
+        },
+    },
+});
+
+export const cellTextAlign = styleVariants({
+    left: [baseTextAlign, {textAlign: 'left'}],
+    right: [baseTextAlign, {textAlign: 'right'}],
+    center: [baseTextAlign, {textAlign: 'center'}],
+});
+
+export const scrollContainer = style({
+    overflowY: 'auto',
+    maxHeight,
+    maxWidth: '100%',
+    width: 'fit-content',
+
+    selectors: {
+        [`${collapsedRowsInMobile}&`]: {
+            '@media': {
+                [mq.tabletOrSmaller]: {
+                    minWidth: '100%', // always render the table fullWidth in mobile
+                    // revert styles
+                    overflow: 'visible',
+                    maxHeight: 'none',
+                    maxWidth: 'none',
+                    width: 'auto',
+                },
+            },
+        },
+    },
+});
+
+export const scrollOverResponsiveLayout = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            display: 'flex',
+            boxSizing: 'content-box', // because we need the padding to be included in the width (we need width: fit-content + paddings)
+            margin: `0 calc(${responsiveLayoutSideMargin} * -1)`,
+            padding: `0 ${responsiveLayoutSideMargin}`,
+        },
+    },
+});
+
+export const verticalAlign = styleVariants({
+    top: {verticalAlign: 'top'},
+    middle: {verticalAlign: 'middle'},
+});
+
+export const actionsHeaderText = style({
+    position: 'absolute',
+    top: -9999,
+    left: -9999,
+});
+
+export const actionsTableCell = style({});
+export const topActions = style({});
+
+// we can only apply sticky head to boxed tables, because non-boxed tables don't have a background
+globalStyle(`${boxed} thead`, {
+    position: 'sticky',
+    top: 0,
+    background: skinVars.colors.backgroundContainer,
+    // render on top of the table rows
+    zIndex: 1,
+});
+
+const ROW_MIN_HEIGHT = 56;
+
+globalStyle(`${table} th, ${table} td`, {
+    borderBottom: `1px solid ${skinVars.colors.divider}`,
+    padding: '16px 12px',
+    height: ROW_MIN_HEIGHT, // height behaves like a min-height in table layout
+});
+
+globalStyle(`${boxed} thead th`, {
+    '@media': {
+        [mq.desktopOrBigger]: {
+            paddingTop: 16 + BOXED_PADDING_Y_DESKTOP,
+        },
+    },
+});
+
+globalStyle(`${table} tbody tr:last-child td, ${table} tbody tr:last-child th`, {
+    borderBottom: 'none',
+});
+
+globalStyle(
+    `${collapsedRowsInMobile}, ${collapsedRowsInMobile} thead, ${collapsedRowsInMobile} tbody, ${collapsedRowsInMobile} th, ${collapsedRowsInMobile} td, ${collapsedRowsInMobile} tr`,
+    {
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                display: 'block',
+            },
+        },
+    }
+);
+
+globalStyle(`${collapsedRowsInMobile} tr`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            // Using flexbox so we can move the row's header to the top of the row
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+});
+
+export const collapsedRowHeaderItem = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            order: -1,
+        },
+    },
+});
+
+export const mobileCellHeading = style({
+    paddingBottom: 4,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            display: 'none',
+        },
+    },
+});
+
+export const collapsedRowTitle = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            fontWeight: skinVars.textPresets.cardTitle.weight,
+            paddingBottom: 8,
+        },
+    },
+});
+
+globalStyle(`${collapsedRowsInMobile} tbody td, ${collapsedRowsInMobile} tbody th`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            verticalAlign: 'initial',
+            border: 'none',
+            height: 'auto', // reset min-height
+            padding: '0 0 8px 0',
+        },
+        [mq.desktopOrBigger]: {
+            marginRight: 0, // remove right space occupied by actions
+        },
+    },
+});
+
+globalStyle(`${table} tbody th`, {
+    // Weight in th is bold if not specified, and we don't want this in the table's body
+    fontWeight: 'inherit',
+});
+
+export const rowFirstItem = style({});
+export const rowLastItem = style({});
+export const rowLastCollapsedItem = style({});
+
+globalStyle(`${table} ${rowFirstItem}`, {
+    paddingLeft: 0,
+});
+
+globalStyle(`${table} ${rowLastItem}`, {
+    paddingRight: 0,
+});
+
+globalStyle(`${collapsedRowsInMobile} ${rowLastCollapsedItem}`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            paddingBottom: 0,
+        },
+    },
+});
+
+globalStyle(`${collapsedRowsInMobile} tbody tr`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            padding: '16px 0',
+        },
+    },
+});
+
+globalStyle(`${collapsedRowsInMobile} tbody tr:not(:last-child)`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            borderBottom: `1px solid ${skinVars.colors.divider}`,
+        },
+    },
+});
+
+globalStyle(`${collapsedRowsInMobile}${boxed} tbody tr`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            border: `1px solid ${skinVars.colors.border}`,
+            background: skinVars.colors.backgroundContainer,
+            borderRadius: skinVars.borderRadii.container,
+            padding: '24px 16px',
+            marginBottom: 16,
+        },
+    },
+});
+
+globalStyle(`${collapsedRowsInMobile}${boxed} tbody tr:last-child`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            marginBottom: 0,
+        },
+    },
+});
+
+// Hide headers from UI. Dont use display: none for screen readers
+globalStyle(`${hiddenHeadersInDesktop} thead tr`, {
+    '@media': {
+        [mq.desktopOrBigger]: {
+            position: 'absolute',
+            top: -9999,
+            left: -9999,
+        },
+    },
+});
+
+globalStyle(`${hiddenHeadersInMobile} thead tr`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            position: 'absolute',
+            top: -9999,
+            left: -9999,
+        },
+    },
+});
+
+// In collapse-rows mode, we don't render actions as a table cell in mobile
+globalStyle(`${collapsedRowsInMobile} ${actionsTableCell}`, {
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            display: 'none',
+        },
+    },
+});
+
+// In collapse-rows mode, we don't render top actions in desktop
+globalStyle(`${collapsedRowsInMobile} ${topActions}`, {
+    display: 'none',
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            display: 'block',
+        },
+    },
+});