@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/accordion.css.ts

@@ -0,0 +1,121 @@
+import {style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+
+export const itemContent = sprinkles({
+    width: '100%',
+    border: 'none',
+    background: 'transparent',
+    display: 'block',
+    height: '100%',
+    padding: 0,
+});
+
+export const boxed = style({});
+
+const boxedTouchableBorderRadiusStyles = {
+    [`${boxed} &:active`]: {
+        // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+        borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+    },
+    [`${boxed} &:hover`]: {
+        // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+        borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+    },
+    [`${boxed} &[aria-expanded="true"]`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+};
+
+export const touchableBackground = style({
+    transition: 'background-color 0.1s ease-in-out',
+    ':active': {
+        background: vars.colors.backgroundContainerPressed,
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: vars.colors.backgroundContainerHover,
+            },
+            ':active': {
+                background: vars.colors.backgroundContainerPressed,
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+    selectors: boxedTouchableBorderRadiusStyles,
+});
+
+export const touchableBackgroundOverBrand = style({
+    transition: 'background-color 0.1s ease-in-out',
+    ':active': {
+        background: vars.colors.backgroundContainerBrandPressed,
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: vars.colors.backgroundContainerBrandHover,
+            },
+            ':active': {
+                background: vars.colors.backgroundContainerBrandPressed,
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+    selectors: boxedTouchableBorderRadiusStyles,
+});
+
+export const rightContentContainer = style({
+    height: '100%',
+});
+
+export const chevronContainer = style({
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+});
+
+export const panelContainer = style({
+    display: 'grid',
+});
+
+export const panelTransitionClasses = {
+    enter: style({
+        gridTemplateRows: '0fr',
+    }),
+    enterActive: style({
+        gridTemplateRows: '1fr',
+        transition: 'grid-template-rows 0.4s',
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    }),
+    exit: style({
+        gridTemplateRows: '1fr',
+    }),
+    exitActive: style({
+        gridTemplateRows: '0fr',
+        transition: 'grid-template-rows 0.4s',
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    }),
+};
+
+export const panel = style({
+    overflow: 'hidden',
+});
+
+export const accordionItem = sprinkles({
+    width: '100%',
+});

package/src/accordion.tsx

@@ -0,0 +1,366 @@
+'use client';
+import * as React from 'react';
+import {Content as HeaderContent} from './list';
+import IconChevron from './icons/icon-chevron';
+import Box from './box';
+import * as styles from './accordion.css';
+import Stack from './stack';
+import {BaseTouchable} from './touchable';
+import classNames from 'classnames';
+import {vars as skinVars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import Divider from './divider';
+import {InternalBoxed} from './boxed';
+import {useThemeVariant} from './theme-variant-context';
+import {CSSTransition} from 'react-transition-group';
+import {isRunningAcceptanceTest} from './utils/platform';
+import Inline from './inline';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes, TrackingEvent} from './utils/types';
+import type {TouchableElement} from './touchable';
+
+const ACCORDION_TRANSITION_DURATION_IN_MS = 400;
+
+type AccordionContextType = {
+    index: ReadonlyArray<number>;
+    toggle: (item: number) => void;
+};
+
+const AccordionContext = React.createContext<AccordionContextType>({
+    index: [],
+    toggle: () => {},
+});
+
+const useAccordionContext = (): AccordionContextType => React.useContext(AccordionContext);
+
+interface AccordionItemContentProps {
+    children?: void;
+    title: string;
+    titleAs?: string;
+    subtitle?: string;
+    asset?: React.ReactNode;
+    content: React.ReactNode;
+    dataAttributes?: DataAttributes;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    role?: string;
+    detail?: string;
+    right?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+
+const useAccordionState = ({
+    value,
+    defaultValue,
+    onChange,
+    singleOpen,
+}: {
+    value?: number | ReadonlyArray<number>;
+    defaultValue?: number | ReadonlyArray<number>;
+    onChange?: (item: number, value: boolean) => void;
+    singleOpen?: boolean;
+}): [ReadonlyArray<number>, (value: number) => void] => {
+    const isControlledByParent = value !== undefined;
+
+    const getValueAsList = (value?: number | ReadonlyArray<number>) => {
+        return value === undefined ? [] : typeof value === 'number' ? [value] : value;
+    };
+
+    const [index, setIndex] = React.useState<ReadonlyArray<number>>(getValueAsList(defaultValue));
+
+    React.useEffect(() => {
+        if (index.length > 1 && singleOpen) {
+            const newIndex = [...index];
+            newIndex.splice(1);
+            setIndex(newIndex);
+        }
+    }, [singleOpen, index]);
+
+    const updateIndexOnToggle = (item: number, index?: ReadonlyArray<number>) => {
+        if (!index) {
+            return [item];
+        }
+
+        const valueIndex = index.indexOf(item);
+        let newIndex = [...index];
+        if (valueIndex === -1) {
+            if (singleOpen) {
+                newIndex = [item];
+            } else {
+                newIndex.push(item);
+            }
+        } else {
+            newIndex.splice(valueIndex, 1);
+        }
+
+        return newIndex;
+    };
+
+    const toggle = (item: number) => {
+        if (!isControlledByParent) {
+            setIndex(updateIndexOnToggle(item, index));
+        }
+        if (onChange) {
+            const currentItemValue = (isControlledByParent ? getValueAsList(value) : index).includes(item);
+            onChange(item, !currentItemValue);
+        }
+    };
+
+    if (isControlledByParent) {
+        return [getValueAsList(value), toggle];
+    }
+
+    return [index, toggle];
+};
+
+const getAccordionItemIndex = (element: Element | null) => {
+    const accordionAncestor = element?.closest('[data-accordion]');
+    if (!accordionAncestor) return undefined;
+
+    return Array.from(accordionAncestor.querySelectorAll('[data-accordion-item]'))
+        .filter((e) => e.closest('[data-accordion]') === accordionAncestor)
+        .findIndex((e) => e === element);
+};
+
+const getAssetText = (asset: React.ReactNode): string => {
+    if (!React.isValidElement(asset)) return '';
+
+    const props = asset.props as {alt?: unknown; 'aria-label'?: unknown};
+
+    if (typeof props.alt === 'string' && props.alt.trim()) {
+        return props.alt.trim();
+    }
+
+    if (typeof props['aria-label'] === 'string' && props['aria-label'].trim()) {
+        return props['aria-label'].trim();
+    }
+
+    return '';
+};
+
+const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
+    (
+        {
+            content,
+            dataAttributes,
+            trackingEvent,
+            right,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            ...props
+        },
+        ref
+    ) => {
+        const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
+        const itemRef = React.useRef<HTMLDivElement | null>(null);
+        const {index, toggle} = useAccordionContext();
+        const variant = useThemeVariant();
+        const labelId = React.useId();
+        const panelId = React.useId();
+
+        const assetText = getAssetText(props.asset);
+
+        const computedAriaLabel = ariaLabel ?? [props.title, assetText].filter(Boolean).join(' ');
+
+        const [itemIndex, setItemIndex] = React.useState<number>();
+        const isOpen = itemIndex !== undefined && index?.includes(itemIndex);
+
+        React.useEffect(() => {
+            setItemIndex(getAccordionItemIndex(itemRef.current));
+        }, []);
+
+        const iconColor = {
+            default: isOpen ? skinVars.colors.chevronIndicator : skinVars.colors.chevronIndicator,
+            alternative: isOpen ? skinVars.colors.chevronIndicator : skinVars.colors.chevronIndicator,
+            brand: skinVars.colors.textSecondaryBrand,
+            media: skinVars.colors.textSecondaryBrand,
+            negative: skinVars.colors.textSecondaryNegative,
+        }[variant];
+
+        return (
+            <div ref={itemRef} {...getPrefixedDataAttributes({...dataAttributes, 'accordion-item': true})}>
+                <BaseTouchable
+                    ref={ref}
+                    className={classNames(
+                        styles.itemContent,
+                        variant === 'brand' || variant === 'media' || variant === 'negative'
+                            ? styles.touchableBackgroundOverBrand
+                            : styles.touchableBackground
+                    )}
+                    onPress={() => {
+                        if (itemIndex !== undefined) toggle(itemIndex);
+                    }}
+                    trackingEvent={trackingEvent}
+                    aria-expanded={isOpen}
+                    aria-controls={panelId}
+                    aria-label={computedAriaLabel}
+                    aria-labelledby={ariaLabelledby}
+                >
+                    <Box paddingX={16}>
+                        <HeaderContent
+                            labelId={labelId}
+                            {...props}
+                            right={({centerY}) => (
+                                <Inline
+                                    space={4}
+                                    alignItems={centerY ? 'center' : undefined}
+                                    className={styles.rightContentContainer}
+                                >
+                                    {right}
+                                    <div className={styles.chevronContainer}>
+                                        <IconChevron
+                                            size={20}
+                                            transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
+                                            direction={isOpen ? 'up' : 'down'}
+                                            color={iconColor}
+                                        />
+                                    </div>
+                                </Inline>
+                            )}
+                        />
+                    </Box>
+                </BaseTouchable>
+                <CSSTransition
+                    in={isOpen}
+                    timeout={isRunningAcceptanceTest() ? 0 : ACCORDION_TRANSITION_DURATION_IN_MS}
+                    nodeRef={panelContainerRef}
+                    classNames={styles.panelTransitionClasses}
+                    mountOnEnter
+                    unmountOnExit
+                >
+                    <div className={styles.panelContainer} ref={panelContainerRef}>
+                        <div className={styles.panel} role="region" aria-labelledby={labelId} id={panelId}>
+                            <Box paddingX={16} paddingBottom={16}>
+                                {content}
+                            </Box>
+                        </div>
+                    </div>
+                </CSSTransition>
+            </div>
+        );
+    }
+);
+
+export const AccordionItem = React.forwardRef<TouchableElement, AccordionItemContentProps>(
+    ({dataAttributes, role, ...props}, ref) => (
+        <div role={role} className={styles.accordionItem}>
+            <AccordionItemContent
+                {...props}
+                ref={ref}
+                dataAttributes={{'component-name': 'AccordionItem', ...dataAttributes}}
+            />
+        </div>
+    )
+);
+
+type AccordionBaseProps = {
+    children: React.ReactNode;
+    dataAttributes?: DataAttributes;
+    onChange?: (index: number, value: boolean) => void;
+    role?: string;
+};
+
+type SingleOpenProps = {
+    singleOpen: true;
+    index?: number;
+    defaultIndex?: number;
+};
+
+type MultipleOpenProps = {
+    singleOpen?: false;
+    index?: number | ReadonlyArray<number>;
+    defaultIndex?: number | ReadonlyArray<number>;
+};
+
+type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
+
+export const Accordion = ({
+    children,
+    dataAttributes,
+    index,
+    defaultIndex,
+    onChange,
+    singleOpen,
+    role,
+}: AccordionProps): JSX.Element => {
+    const [indexList, toggle] = useAccordionState({
+        value: index,
+        defaultValue: defaultIndex,
+        onChange,
+        singleOpen,
+    });
+    const childrenContent = React.Children.toArray(children).filter(Boolean);
+    const lastIndex = childrenContent.length - 1;
+
+    return (
+        <AccordionContext.Provider value={{index: indexList, toggle}}>
+            <div
+                role={role}
+                {...getPrefixedDataAttributes({...dataAttributes, accordion: true}, 'Accordion')}
+            >
+                {childrenContent.map((child, index) => (
+                    <React.Fragment key={index}>
+                        {child}
+                        {index < lastIndex && (
+                            <Box paddingX={16}>
+                                <Divider />
+                            </Box>
+                        )}
+                    </React.Fragment>
+                ))}
+            </div>
+        </AccordionContext.Provider>
+    );
+};
+
+interface BoxedAccordionItemProps extends AccordionItemContentProps {
+    /**
+     * @deprecated Use `variant="brand"` instead.
+     */
+    isInverse?: boolean;
+    variant?: 'default' | 'brand';
+}
+
+export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
+    ({dataAttributes, isInverse, variant, ...props}, ref) => (
+        <InternalBoxed
+            overflow="visible"
+            className={styles.boxed}
+            variant={variant ?? (isInverse ? 'brand' : 'default')}
+            ref={ref}
+            dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
+        >
+            <AccordionItemContent {...props} />
+        </InternalBoxed>
+    )
+);
+
+export const BoxedAccordion = ({
+    children,
+    dataAttributes,
+    index,
+    defaultIndex,
+    onChange,
+    singleOpen,
+    role,
+}: AccordionProps): JSX.Element => {
+    const [indexList, toggle] = useAccordionState({
+        value: index,
+        defaultValue: defaultIndex,
+        onChange,
+        singleOpen,
+    });
+
+    return (
+        <AccordionContext.Provider value={{index: indexList, toggle}}>
+            <Stack
+                space={16}
+                role={role}
+                dataAttributes={{'component-name': 'BoxedAccordion', accordion: true, ...dataAttributes}}
+            >
+                {children}
+            </Stack>
+        </AccordionContext.Provider>
+    );
+};

package/src/align.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css';
+
+export const container = style({
+    display: 'grid',
+    width: '100%',
+    height: '100%',
+});

package/src/align.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as styles from './align.css';
+
+import type {DataAttributes} from './utils/types';
+
+type Props = {
+    x?: 'start' | 'center' | 'end';
+    y?: 'start' | 'center' | 'end';
+    width?: number | string;
+    height?: number | string;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+};
+
+const Align = ({x = 'start', y = 'start', width, height, children, dataAttributes}: Props): JSX.Element => {
+    return (
+        <div
+            {...getPrefixedDataAttributes(dataAttributes, 'Align')}
+            className={styles.container}
+            style={{
+                placeItems: `${y} ${x}`,
+                ...(width !== undefined ? {width} : {}),
+                ...(height !== undefined ? {height} : {}),
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Align;

package/src/autocomplete.css.ts

@@ -0,0 +1,62 @@
+import {style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars, vars as skinVars} from './skins/skin-contract.css';
+
+export const optionListContainerPadding = 8;
+
+export const autocompleteContainer = style([
+    sprinkles({
+        position: 'relative',
+    }),
+]);
+
+export const optionsList = style([
+    sprinkles({
+        position: 'absolute',
+        padding: optionListContainerPadding,
+        borderRadius: vars.borderRadii.popup,
+    }),
+    {
+        zIndex: 2,
+        left: 0,
+        right: 0,
+        boxShadow: '0px 2px 4px 0px #00000033',
+        marginTop: 0,
+        backgroundColor: vars.colors.backgroundContainer,
+        listStyle: 'none',
+    },
+]);
+
+export const optionBaseItem = style([
+    sprinkles({
+        paddingX: 8,
+        paddingY: 12,
+    }),
+    {
+        borderRadius: `calc(${skinVars.borderRadii.popup} - ${optionListContainerPadding / 2}px)`,
+        height: 48,
+        userSelect: 'none',
+        display: 'block',
+    },
+]);
+
+export const optionItem = style([
+    optionBaseItem,
+    sprinkles({
+        cursor: 'pointer',
+    }),
+    {
+        selectors: {
+            '&:hover': {
+                backgroundColor: vars.colors.backgroundContainerHover,
+            },
+            '&:active': {
+                backgroundColor: vars.colors.backgroundContainerPressed,
+            },
+        },
+    },
+]);
+
+export const optionItemSelected = style({
+    backgroundColor: vars.colors.backgroundContainerHover,
+});