@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/empty-state.tsx

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

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

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

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