@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/empty-state.tsx

@@ -1,141 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {useThemeVariant} from './theme-variant-context';
-import {ButtonPrimary} from './button';
-import {useTheme} from './hooks';
-import Stack from './stack';
-import {Text3, Text6} from './text';
-import ButtonGroup from './button-group';
-import * as styles from './empty-state.css';
-import {vars} from './skins/skin-contract.css';
-import {AspectRatioContainer} from './utils/aspect-ratio-support';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {applyCssVars} from './utils/css';
-
-import type {ButtonSecondary, ButtonLink} from './button';
-import type {ButtonGroupProps} from './button-group';
-import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';
-
-interface BaseProps {
-    title: string;
-    titleAs?: HeadingType;
-    button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-    description?: string;
-    children?: void;
-    'aria-label'?: string;
-    // "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
-    dataAttributes?: DataAttributes;
-}
-
-interface ImageProps extends BaseProps {
-    imageUrl: string;
-
-    largeImageUrl?: undefined;
-    asset?: undefined;
-}
-
-interface LargeImageProps extends BaseProps {
-    largeImageUrl: string;
-
-    imageUrl?: undefined;
-    asset?: undefined;
-}
-
-interface IconProps extends BaseProps {
-    asset: React.ReactElement;
-
-    imageUrl?: undefined;
-    largeImageUrl?: undefined;
-}
-
-type Props = IconProps | ImageProps | LargeImageProps;
-
-const EmptyState = ({
-    title,
-    titleAs = 'h1',
-    description,
-    button,
-    buttonLink,
-    largeImageUrl,
-    imageUrl,
-    asset,
-    'aria-label': ariaLabel,
-    dataAttributes,
-}: Props): JSX.Element => {
-    const {isDarkMode} = useTheme();
-    const externalVariant = useThemeVariant();
-    const isOverBrand =
-        externalVariant === 'brand' || externalVariant === 'media' || externalVariant === 'negative';
-
-    const image = imageUrl ? (
-        <img data-testid="image" className={styles.smallImage} alt="" src={imageUrl} />
-    ) : undefined;
-
-    const buttons: ButtonGroupProps = {
-        ...(button?.type === ButtonPrimary ? {primaryButton: button} : {secondaryButton: button}),
-        link: buttonLink,
-    };
-
-    return (
-        <div
-            className={classnames(styles.container, isOverBrand ? styles.borderOverBrand : styles.border)}
-            style={applyCssVars({
-                [styles.vars.backgroundColor]:
-                    isOverBrand && !isDarkMode ? 'transparent' : vars.colors.backgroundContainer,
-            })}
-            aria-label={ariaLabel}
-            role="region"
-            {...getPrefixedDataAttributes(dataAttributes, 'EmptyState')}
-        >
-            <div style={{flex: 1}}>
-                <Stack
-                    space={24}
-                    className={
-                        largeImageUrl ? styles.contentVariants.largeImage : styles.contentVariants.default
-                    }
-                >
-                    {image ??
-                        (asset && (
-                            <div data-testid="asset" className={styles.assetContainer}>
-                                {asset}
-                            </div>
-                        ))}
-                    <Stack space={16}>
-                        <Text6 as={titleAs} dataAttributes={{testid: 'title'}}>
-                            {title}
-                        </Text6>
-                        <Text3
-                            regular
-                            as="p"
-                            color={vars.colors.textSecondary}
-                            dataAttributes={{testid: 'description'}}
-                        >
-                            {description}
-                        </Text3>
-                    </Stack>
-                    <ButtonGroup {...buttons} />
-                </Stack>
-            </div>
-            <div style={{flex: 1, position: 'relative'}}>
-                {largeImageUrl && (
-                    <AspectRatioContainer
-                        aspectRatio={16 / 9}
-                        className={styles.largeImageContainer}
-                        height="100%"
-                        width="100%"
-                    >
-                        <div
-                            data-testid="image"
-                            className={styles.largeImage}
-                            style={{backgroundImage: `url(${largeImageUrl})`}}
-                        />
-                    </AspectRatioContainer>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default EmptyState;

package/src/fade-in.css.ts

@@ -1,12 +0,0 @@
-import {style, keyframes} from '@vanilla-extract/css';
-
-const fadeIn = keyframes({
-    '0%': {opacity: 0},
-    '100%': {opacity: 1},
-});
-
-export const wrapper = style({
-    animationName: fadeIn,
-    animationTimingFunction: 'ease',
-    animationFillMode: 'both',
-});

package/src/fade-in.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import * as styles from './fade-in.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes} from './utils/types';
-
-const defaultDuration = '0.3s';
-
-type Props = {
-    children?: React.ReactNode;
-    className?: string;
-    delay?: string;
-    duration?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const FadeIn = ({
-    children,
-    className = '',
-    duration = defaultDuration,
-    delay = '0',
-    dataAttributes,
-}: Props): JSX.Element => {
-    return (
-        <div
-            {...getPrefixedDataAttributes(dataAttributes, 'FadeIn')}
-            className={`${styles.wrapper} ${className}`}
-            style={{
-                animationDelay: delay,
-                WebkitAnimationDelay: delay,
-                animationDuration: duration,
-                WebkitAnimationDuration: duration,
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-export default FadeIn;

package/src/feedback.css.ts

@@ -1,119 +0,0 @@
-import {keyframes, style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {sprinkles} from './sprinkles.css';
-import {vars} from './skins/skin-contract.css';
-
-export const desktopContainer = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            display: 'flex',
-            justifyContent: 'space-between',
-        },
-    },
-});
-
-export const desktopContent = style({
-    paddingRight: 0,
-    paddingLeft: 0,
-    paddingBlock: 0,
-    '@media': {
-        [mq.desktopOrBigger]: {
-            width: '50%',
-            paddingRight: vars.spacing.feedbackScreenPadding.right,
-            paddingLeft: vars.spacing.feedbackScreenPadding.left,
-            paddingBottom: vars.spacing.feedbackScreenPadding.bottom,
-        },
-    },
-});
-
-export const desktopImage = style({
-    '@media': {[mq.tabletOrSmaller]: {display: 'none'}},
-});
-
-export const container = style([
-    sprinkles({
-        display: 'flex',
-        height: '100%',
-        width: '100%',
-        flexDirection: 'column',
-    }),
-    {
-        margin: 'auto',
-    },
-]);
-
-export const innerContainer = style({
-    textAlign: 'left',
-    paddingTop: vars.spacing.feedbackScreenPadding.top,
-    paddingBottom: 16,
-    zIndex: 1, // needed to support hack for o2-classic
-    position: 'relative', // needed to support hack for o2-classic
-    display: 'flex',
-    flexDirection: 'column',
-});
-
-export const innerContainerWithButtons = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            paddingBottom: 32,
-        },
-    },
-});
-
-export const assetContainer = sprinkles({
-    width: 48,
-    height: 48,
-});
-
-const textAppearAnimation = keyframes({
-    from: {
-        opacity: 0,
-        transform: 'translateY(24px)',
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateY(0)',
-    },
-});
-
-const textAppearAnimationDesktop = keyframes({
-    from: {
-        opacity: 0,
-        transform: 'translateY(40px)',
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateY(0)',
-    },
-});
-
-const feedbackTextAppear = style({
-    animation: `${textAppearAnimation} 1s cubic-bezier(0.215, 0.61, 0.355, 1)`,
-    animationFillMode: 'both',
-    '@media': {
-        [mq.desktopOrBigger]: {
-            animationName: textAppearAnimationDesktop,
-        },
-    },
-});
-
-export const feedbackTextAppearFast = style([feedbackTextAppear, {animationDelay: '0.6s'}]);
-export const feedbackTextAppearMedium = style([feedbackTextAppear, {animationDelay: '0.8s'}]);
-export const feedbackTextAppearSlow = style([feedbackTextAppear, {animationDelay: '1s'}]);
-
-export const feedbackData = style({
-    maxWidth: 496,
-    overflowWrap: 'break-word',
-});
-
-export const backgroundBrand = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            background: vars.colors.backgroundBrand,
-        },
-    },
-});
-
-export const successFeedbackContainer = style({
-    paddingTop: vars.spacing.feedbackScreenPadding.top,
-});