@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/boxed.css.ts

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

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

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

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

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

@@ -0,0 +1,162 @@
+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})`,
+                        },
+                    },
+                },
+            },
+        }),
+    ],
+});