@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/boxed.css.ts

@@ -1,132 +0,0 @@
-import {createVar, fallbackVar, style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-
-const width = createVar();
-const height = createVar();
-const minHeight = createVar();
-const maxWidth = createVar();
-const minWidth = createVar();
-const mobile = {
-    width: createVar(),
-    height: createVar(),
-    minHeight: createVar(),
-    maxWidth: createVar(),
-    minWidth: createVar(),
-};
-const tablet = {
-    width: createVar(),
-    height: createVar(),
-    minHeight: createVar(),
-    maxWidth: createVar(),
-    minWidth: createVar(),
-};
-const desktop = {
-    width: createVar(),
-    height: createVar(),
-    minHeight: createVar(),
-    maxWidth: createVar(),
-    minWidth: createVar(),
-};
-const background = createVar();
-const borderRadius = createVar();
-
-export const vars = {
-    width,
-    height,
-    minHeight,
-    maxWidth,
-    minWidth,
-    mobile,
-    tablet,
-    desktop,
-    background,
-    borderRadius,
-};
-
-export const boxed = style({
-    width,
-    height,
-    minHeight,
-    maxWidth,
-    minWidth,
-    background,
-    borderRadius,
-
-    '@media': {
-        [mq.mobile]: {
-            vars: {
-                [width]: mobile.width,
-                [height]: mobile.height,
-                [minHeight]: mobile.minHeight,
-                [maxWidth]: mobile.maxWidth,
-                [minWidth]: mobile.minWidth,
-            },
-        },
-        [mq.tablet]: {
-            vars: {
-                [width]: fallbackVar(tablet.width, mobile.width),
-                [height]: fallbackVar(tablet.height, mobile.height),
-                [minHeight]: fallbackVar(tablet.minHeight, mobile.minHeight),
-                [maxWidth]: fallbackVar(tablet.maxWidth, mobile.maxWidth),
-                [minWidth]: fallbackVar(tablet.minWidth, mobile.minWidth),
-            },
-        },
-        [mq.desktopOrBigger]: {
-            vars: {
-                [width]: desktop.width,
-                [height]: desktop.height,
-                [minHeight]: desktop.minHeight,
-                [maxWidth]: desktop.maxWidth,
-                [minWidth]: desktop.minWidth,
-            },
-        },
-    },
-});
-
-export const overflowHidden = sprinkles({overflow: 'hidden'});
-
-export const boxBorder = sprinkles({
-    border: 'regular',
-});
-
-export const desktopOnly = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            border: 'none',
-            borderRadius: 0,
-            background: 'initial',
-        },
-        [mq.mobile]: {
-            vars: {
-                [width]: fallbackVar(mobile.width, 'auto'),
-                [height]: fallbackVar(mobile.height, 'auto'),
-                [minHeight]: fallbackVar(mobile.minHeight, 'auto'),
-                [maxWidth]: fallbackVar(mobile.maxWidth, 'none'),
-                [minWidth]: fallbackVar(mobile.minWidth, 'auto'),
-            },
-        },
-        [mq.tablet]: {
-            vars: {
-                [width]: fallbackVar(tablet.width, mobile.width, 'auto'),
-                [height]: fallbackVar(tablet.height, mobile.height, 'auto'),
-                [minHeight]: fallbackVar(tablet.minHeight, mobile.minHeight, 'auto'),
-                [maxWidth]: fallbackVar(tablet.maxWidth, mobile.maxWidth, 'none'),
-                [minWidth]: fallbackVar(tablet.minWidth, mobile.minWidth, 'auto'),
-            },
-        },
-        [mq.desktopOrBigger]: {
-            vars: {
-                [width]: fallbackVar(desktop.width, 'auto'),
-                [height]: fallbackVar(desktop.height, 'auto'),
-                [minHeight]: fallbackVar(desktop.minHeight, 'auto'),
-                [maxWidth]: fallbackVar(desktop.maxWidth, 'none'),
-                [minWidth]: fallbackVar(desktop.minWidth, 'auto'),
-            },
-        },
-    },
-});
-
-export const noBorder = sprinkles({
-    border: 'none',
-});

package/src/boxed.tsx

@@ -1,153 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {ThemeVariant, normalizeVariant, useThemeVariant} from './theme-variant-context';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './boxed.css';
-import {applyCssVars} from './utils/css';
-
-import type {Variant} from './theme-variant-context';
-import type {ByBreakpoint, DataAttributes} from './utils/types';
-
-type Props = {
-    children: React.ReactNode;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
-    variant?: Variant;
-    className?: string;
-    role?: string;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    width?: ByBreakpoint<number | string>;
-    maxWidth?: ByBreakpoint<number | string>;
-    minWidth?: ByBreakpoint<number | string>;
-    height?: ByBreakpoint<number | string>;
-    minHeight?: ByBreakpoint<number | string>;
-};
-
-type InternalProps = {
-    borderRadius?: typeof vars.borderRadii.container | string;
-    border?: string;
-    desktopOnly?: boolean;
-    background?: string;
-    overflow?: 'hidden' | 'visible';
-};
-
-const getBorderStyle = (internalVariant: Variant, externalVariant: Variant) => {
-    if (
-        internalVariant === 'default' &&
-        (externalVariant === 'default' || externalVariant === 'alternative')
-    ) {
-        return styles.boxBorder;
-    }
-    return styles.noBorder;
-};
-
-const normalizeDimension = (value: number | string | undefined) => {
-    if (typeof value === 'number') {
-        return `${value}px`;
-    }
-    return value ?? 'initial';
-};
-
-const calcCssVars = (
-    varName: 'width' | 'height' | 'minHeight' | 'maxWidth' | 'minWidth',
-    value: ByBreakpoint<string | number> | undefined
-) => {
-    if (typeof value === 'number' || typeof value === 'string' || typeof value === 'undefined') {
-        return {
-            [styles.vars[varName]]: normalizeDimension(value),
-        };
-    }
-    const vars = {
-        [styles.vars.mobile[varName]]: normalizeDimension(value.mobile),
-        [styles.vars.desktop[varName]]: normalizeDimension(value.desktop),
-    };
-    if (value.tablet) {
-        vars[styles.vars.tablet[varName]] = normalizeDimension(value.tablet);
-    }
-    return vars;
-};
-
-export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalProps>(
-    (
-        {
-            children,
-            isInverse = false,
-            className,
-            role,
-            dataAttributes,
-            'aria-label': ariaLabel,
-            'aria-labelledby': ariaLabelledby,
-            width,
-            maxWidth,
-            minWidth,
-            height,
-            minHeight,
-            borderRadius = vars.borderRadii.container,
-            background,
-            desktopOnly,
-            variant,
-            overflow,
-            border,
-        },
-        ref
-    ) => {
-        const externalVariant = normalizeVariant(useThemeVariant());
-        const internalVariant = normalizeVariant(variant ?? (isInverse ? 'brand' : 'default'));
-
-        return (
-            <div
-                ref={ref}
-                style={{
-                    ...applyCssVars({
-                        ...calcCssVars('width', width),
-                        ...calcCssVars('maxWidth', maxWidth),
-                        ...calcCssVars('minWidth', minWidth),
-                        ...calcCssVars('height', height),
-                        ...calcCssVars('minHeight', minHeight),
-                        [styles.vars.background]:
-                            background ??
-                            {
-                                default: vars.colors.backgroundContainer,
-                                brand:
-                                    externalVariant === 'brand' ||
-                                    externalVariant === 'negative' ||
-                                    externalVariant === 'media'
-                                        ? vars.colors.backgroundContainerBrandOverBrand
-                                        : vars.colors.backgroundContainerBrand,
-                                negative: vars.colors.backgroundContainerNegative,
-                                alternative: vars.colors.backgroundContainerAlternative,
-                                media: vars.colors.backgroundContainer,
-                            }[internalVariant],
-                        [styles.vars.borderRadius]: borderRadius,
-                    }),
-                    background,
-                    border,
-                }}
-                className={classnames(
-                    className,
-                    styles.boxed,
-                    getBorderStyle(internalVariant, externalVariant),
-                    {
-                        [styles.desktopOnly]: desktopOnly,
-                        [styles.overflowHidden]: overflow !== 'visible',
-                    }
-                )}
-                role={role}
-                aria-label={ariaLabel}
-                aria-labelledby={ariaLabelledby}
-                {...getPrefixedDataAttributes(dataAttributes)}
-            >
-                <ThemeVariant variant={internalVariant}>{children}</ThemeVariant>
-            </div>
-        );
-    }
-);
-
-export const Boxed = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-    return <InternalBoxed {...props} ref={ref} />;
-});

package/src/button-fixed-footer-layout.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import FixedFooterLayout from './fixed-footer-layout';
-import ButtonLayout from './button-layout';
-import {InternalResponsiveLayout} from './responsive-layout';
-import Box from './box';
-
-import type {ButtonLink, NullableButtonElement} from './button';
-import type {RendersNullableElement} from './utils/types';
-
-type Props = {
-    isFooterVisible?: boolean;
-    button?: NullableButtonElement;
-    secondaryButton?: NullableButtonElement;
-    link?: RendersNullableElement<typeof ButtonLink>;
-    footerBgColor?: string;
-    containerBgColor?: string;
-    children: React.ReactNode;
-    onChangeFooterHeight?: (heightInPx: number) => void;
-};
-
-const ButtonFixedFooterLayout = ({
-    isFooterVisible = true,
-    button,
-    secondaryButton,
-    link,
-    children,
-    footerBgColor,
-    containerBgColor,
-    onChangeFooterHeight,
-}: Props): JSX.Element => {
-    const hasButton = !!button || !!secondaryButton;
-    return (
-        <FixedFooterLayout
-            onChangeFooterHeight={onChangeFooterHeight}
-            isFooterVisible={hasButton && isFooterVisible}
-            footerBgColor={footerBgColor}
-            containerBgColor={containerBgColor}
-            footer={
-                <InternalResponsiveLayout shouldExpandWhenNested="desktop">
-                    <Box
-                        paddingY={{
-                            mobile: 16,
-                            tablet: 32,
-                            desktop: 0,
-                        }}
-                    >
-                        <ButtonLayout
-                            primaryButton={button}
-                            secondaryButton={secondaryButton}
-                            align="full-width"
-                            link={link}
-                        />
-                    </Box>
-                </InternalResponsiveLayout>
-            }
-        >
-            {children}
-        </FixedFooterLayout>
-    );
-};
-
-export default ButtonFixedFooterLayout;

package/src/button-group.css.ts

@@ -1,75 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import * as buttonStyles from './button.css';
-
-const buttonLayoutSpacing = '16px';
-const buttonLinkPaddingLeft = {
-    default: `calc(${buttonStyles.buttonPaddingLeft.default} + ${buttonStyles.borderSize})`,
-    small: `calc(${buttonStyles.buttonPaddingLeft.small} + ${buttonStyles.borderSize})`,
-};
-
-export const inline = style([
-    sprinkles({display: 'inline-flex', alignItems: 'center', flexDirection: 'row'}),
-    {
-        flexWrap: 'wrap',
-    },
-]);
-
-export const centerInMobile = style({
-    '@media': {
-        [mq.mobile]: {
-            justifyContent: 'center',
-        },
-    },
-});
-
-export const centerInTablet = style({
-    '@media': {
-        [mq.tablet]: {
-            justifyContent: 'center',
-        },
-    },
-});
-
-export const centerInDesktop = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            justifyContent: 'center',
-        },
-    },
-});
-
-export const container = style({
-    marginTop: `-${buttonLayoutSpacing}`,
-    marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPaddingLeft.default}))`,
-
-    selectors: {
-        [`&:has(${buttonStyles.smallLink})`]: {
-            marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPaddingLeft.small}))`,
-        },
-    },
-});
-
-export const containerWithSmallLink = style({
-    marginTop: `-${buttonLayoutSpacing}`,
-    marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPaddingLeft.small}))`,
-});
-
-export const buttons = style({
-    marginLeft: buttonLinkPaddingLeft.default,
-    selectors: {
-        [`${container}:has(${buttonStyles.smallLink}) &`]: {
-            marginLeft: buttonLinkPaddingLeft.small,
-        },
-    },
-});
-
-export const buttonsWithSmallLink = style({
-    marginLeft: buttonLinkPaddingLeft.small,
-});
-
-export const buttonChild = style({
-    marginTop: buttonLayoutSpacing,
-    marginLeft: buttonLayoutSpacing,
-});

package/src/button-group.tsx

@@ -1,91 +0,0 @@
-'use client';
-import * as React from 'react';
-import classNames from 'classnames';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './button-group.css';
-import * as buttonStyles from './button.css';
-import {useIsomorphicLayoutEffect} from './hooks';
-
-import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
-import type {ByBreakpoint, DataAttributes, RendersNullableElement} from './utils/types';
-
-export interface ButtonGroupProps {
-    primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
-    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
-    link?: RendersNullableElement<typeof ButtonLink>;
-    dataAttributes?: DataAttributes;
-    align?: ByBreakpoint<'center' | 'left'>;
-}
-
-const ButtonGroup = ({
-    primaryButton,
-    secondaryButton,
-    link,
-    align = 'left',
-    dataAttributes,
-}: ButtonGroupProps): JSX.Element | null => {
-    const linkContainerRef = React.useRef<HTMLDivElement>(null);
-    const [hasSmallLink, setHasSmallLink] = React.useState(false);
-
-    // In modern browsers we rely on CSS has() selector in order to add bleed to the ButtonLink.
-    // In old browsers, we use this effect as a polyfill (https://caniuse.com/css-has)
-    useIsomorphicLayoutEffect(() => {
-        if (linkContainerRef.current?.getElementsByClassName(buttonStyles.smallLink)?.length) {
-            setHasSmallLink(true);
-        }
-    }, []);
-
-    const anyAction = !!primaryButton || !!secondaryButton || !!link;
-    const bothButtons = !!primaryButton && !!secondaryButton;
-
-    const alignByBreakpoint =
-        typeof align === 'string'
-            ? {
-                  mobile: align,
-                  tablet: align,
-                  desktop: align,
-              }
-            : {
-                  mobile: align.mobile ?? 'left',
-                  tablet: align.tablet ?? align.mobile ?? 'left',
-                  desktop: align.desktop ?? 'left',
-              };
-
-    return anyAction ? (
-        <div
-            className={classNames(
-                styles.inline,
-                hasSmallLink ? styles.containerWithSmallLink : styles.container,
-                {
-                    [styles.centerInDesktop]: alignByBreakpoint.desktop === 'center',
-                    [styles.centerInTablet]: alignByBreakpoint.tablet === 'center',
-                    [styles.centerInMobile]: alignByBreakpoint.mobile === 'center',
-                }
-            )}
-            {...getPrefixedDataAttributes(dataAttributes, 'ButtonGroup')}
-        >
-            {(primaryButton || secondaryButton) && (
-                <div
-                    className={classNames(
-                        styles.inline,
-                        hasSmallLink ? styles.buttonsWithSmallLink : styles.buttons
-                    )}
-                >
-                    {primaryButton && <div className={styles.buttonChild}>{primaryButton}</div>}
-                    {secondaryButton && <div className={styles.buttonChild}>{secondaryButton}</div>}
-                </div>
-            )}
-            {link && (
-                <div
-                    ref={linkContainerRef}
-                    className={styles.buttonChild}
-                    style={{width: bothButtons ? '100%' : 'auto'}}
-                >
-                    {link}
-                </div>
-            )}
-        </div>
-    ) : null;
-};
-
-export default ButtonGroup;

package/src/button-layout.css.ts

@@ -1,162 +0,0 @@
-import {style, globalStyle, styleVariants} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import * as buttonStyles from './button.css';
-
-const buttonLayoutSpacing = '16px';
-const buttonLinkPaddingLeft = {
-    default: `calc(${buttonStyles.buttonPaddingLeft.default} + ${buttonStyles.borderSize})`,
-    small: `calc(${buttonStyles.buttonPaddingLeft.small} + ${buttonStyles.borderSize})`,
-};
-const buttonLinkPaddingRight = {
-    default: `calc(${buttonStyles.buttonPaddingRight.default} + ${buttonStyles.borderSize})`,
-    small: `calc(${buttonStyles.buttonPaddingRight.small} + ${buttonStyles.borderSize})`,
-};
-
-export const container = style([
-    sprinkles({display: 'flex', alignItems: 'center'}),
-    {
-        margin: `calc(-1 * ${buttonLayoutSpacing} / 2)`, // compensates the buttons margin
-        flexWrap: 'wrap',
-
-        ':empty': {
-            margin: 0,
-        },
-    },
-]);
-
-export const containerWithTwoButtons = style({});
-
-export const alignVariant = styleVariants({
-    // the empty {} is needed because we need vanilla-extract to generate a class for every variant so we
-    // can use them in the globalStyle rules below. For some reason, vanilla-extract doesn't generate new
-    // classes if we only use sprinkles in the variant definition.
-    right: [{}, sprinkles({justifyContent: 'flex-end'})],
-    left: [{}, sprinkles({justifyContent: 'flex-start'})],
-    center: [{}, sprinkles({justifyContent: 'center'})],
-    'full-width': [
-        sprinkles({justifyContent: 'center'}),
-        {
-            '@media': {
-                [mq.desktopOrBigger]: {
-                    justifyContent: 'flex-start',
-                },
-            },
-        },
-    ],
-});
-
-const linkBase = style([
-    sprinkles({display: 'flex', width: '100%'}),
-    {
-        margin: `calc(${buttonLayoutSpacing} / 2)`,
-        justifyContent: 'inherit',
-    },
-]);
-
-globalStyle(`${container} > *:not(${linkBase})`, {
-    margin: `calc(${buttonLayoutSpacing} / 2)`,
-});
-
-globalStyle(`${containerWithTwoButtons} > *:not(${linkBase})`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            minWidth: `calc(50% - ${buttonLayoutSpacing})`,
-        },
-    },
-});
-
-globalStyle(`${alignVariant['full-width']} > *:not(${linkBase})`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            width: '100%',
-        },
-    },
-});
-
-export const link = style([
-    linkBase,
-    {
-        width: 'auto',
-    },
-]);
-
-export const linkInNewLine = styleVariants({
-    center: [linkBase],
-    left: [
-        linkBase,
-        style({
-            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.default})`,
-            selectors: {
-                [`&:has(${buttonStyles.smallLink})`]: {
-                    marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.small})`,
-                },
-            },
-        }),
-    ],
-    right: [
-        linkBase,
-        style({
-            marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingRight.default})`,
-            selectors: {
-                [`&:has(${buttonStyles.smallLink})`]: {
-                    marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingRight.small})`,
-                },
-            },
-        }),
-    ],
-    'full-width': [
-        linkBase,
-        style({
-            selectors: {
-                // in desktop, full-width is equivalent to left
-                [`${alignVariant['full-width']} &`]: {
-                    '@media': {
-                        [mq.desktopOrBigger]: {
-                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.default})`,
-                        },
-                    },
-                },
-
-                [`${alignVariant['full-width']}:has(${buttonStyles.smallLink}) &`]: {
-                    '@media': {
-                        [mq.desktopOrBigger]: {
-                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.small})`,
-                        },
-                    },
-                },
-            },
-        }),
-    ],
-});
-
-export const smallLinkInNewLine = styleVariants({
-    center: [linkBase],
-    left: [
-        linkBase,
-        style({
-            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.small})`,
-        }),
-    ],
-    right: [
-        linkBase,
-        style({
-            marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingRight.small})`,
-        }),
-    ],
-    'full-width': [
-        linkBase,
-        style({
-            selectors: {
-                // in desktop, full-width is equivalent to left
-                [`${alignVariant['full-width']} &`]: {
-                    '@media': {
-                        [mq.desktopOrBigger]: {
-                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPaddingLeft.small})`,
-                        },
-                    },
-                },
-            },
-        }),
-    ],
-});