@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/community/advanced-data-card.css.ts

@@ -1,271 +0,0 @@
-import {createVar, style, styleVariants} from '@vanilla-extract/css';
-import {sprinkles} from '../sprinkles.css';
-import * as mq from '../media-queries.css';
-import {vars as skinVars} from '../skins/skin-contract.css';
-import {applyAlpha} from '../utils/color';
-import {iconContainerSize} from '../icon-button.css';
-
-const horizontalPadding = 24;
-
-export const container = sprinkles({
-    position: 'relative',
-    height: '100%',
-});
-
-export const paddingX = style([
-    sprinkles({
-        paddingX: 16,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                paddingLeft: horizontalPadding,
-                paddingRight: horizontalPadding,
-            },
-        },
-    },
-]);
-
-export const actions = style([
-    paddingX,
-    sprinkles({
-        display: 'flex',
-        justifyContent: 'space-between',
-        paddingBottom: 24,
-    }),
-    {
-        flexWrap: 'wrap',
-        '@media': {
-            [mq.tabletOrBigger]: {
-                marginTop: 8,
-            },
-        },
-    },
-]);
-
-export const touchable = style({
-    display: 'flex',
-    flex: 1,
-    position: 'relative',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-});
-
-export const touchableCardHoverOverlay = style({
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    position: 'absolute',
-    backgroundColor: 'transparent',
-    transition: 'background-color 0.1s ease-in-out',
-    selectors: {
-        [`${touchable}:active &`]: {
-            backgroundColor: skinVars.colors.backgroundContainerPressed,
-        },
-    },
-    '@media': {
-        [mq.supportsHover]: {
-            selectors: {
-                [`${touchable}:hover &`]: {
-                    backgroundColor: skinVars.colors.backgroundContainerHover,
-                },
-                [`${touchable}:active &`]: {
-                    backgroundColor: skinVars.colors.backgroundContainerPressed,
-                },
-            },
-        },
-        [mq.touchableOnly]: {
-            transition: 'none',
-        },
-    },
-});
-
-export const cardContentStyle = style([
-    paddingX,
-    sprinkles({
-        paddingTop: 8,
-        paddingBottom: 24,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                paddingTop: 32,
-                paddingBottom: 32,
-            },
-        },
-    },
-]);
-
-export const extra = style([sprinkles({paddingTop: 16, paddingBottom: 24, width: '100%'}), {zIndex: -1}]);
-
-export const MIN_HEIGHT = 216;
-export const minHeight = style({minHeight: MIN_HEIGHT});
-
-export const dataCard = style([
-    {
-        isolation: 'isolate', // This avoids problems with some screenshot tests in webapp
-    },
-    sprinkles({
-        position: 'relative',
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-    }),
-]);
-
-const cardActionBase = sprinkles({
-    width: 32,
-    height: 32,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '50%',
-});
-
-export const cardActionIconButton = sprinkles({
-    display: 'flex',
-    width: 48,
-    height: 48,
-    alignItems: 'center',
-    justifyContent: 'center',
-});
-
-export const cardAction = style([
-    cardActionBase,
-    {
-        background: skinVars.colors.backgroundContainer,
-        transition: 'background-color 0.1s ease-in-out',
-        '@media': {
-            [mq.supportsHover]: {
-                ':hover': {
-                    background: skinVars.colors.backgroundAlternative,
-                },
-            },
-            [mq.touchableOnly]: {
-                transition: 'none',
-            },
-        },
-    },
-]);
-
-export const cardActionInverse = style([
-    cardActionBase,
-    {
-        background: applyAlpha(skinVars.rawColors.backgroundContainer, 0.7),
-        transition: 'background-color 0.1s ease-in-out',
-        '@media': {
-            [mq.supportsHover]: {
-                ':hover': {
-                    background: applyAlpha(skinVars.rawColors.backgroundContainer, 0.9),
-                },
-            },
-            [mq.touchableOnly]: {
-                transition: 'none',
-            },
-        },
-    },
-]);
-
-export const divider = style({
-    marginLeft: -horizontalPadding,
-    marginRight: -horizontalPadding,
-});
-
-export const footerText = sprinkles({
-    display: 'flex',
-    flex: 1,
-    alignItems: 'center',
-    minHeight: 40,
-});
-
-export const actionsVariants = styleVariants({
-    default: [
-        {
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-    ],
-    mobile: [
-        {
-            '@media': {
-                [mq.mobile]: {
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                },
-            },
-        },
-    ],
-});
-
-export const marginRightAuto = style({
-    marginTop: 8,
-    '@media': {
-        [mq.mobile]: {
-            marginRight: 'auto',
-        },
-    },
-});
-
-export const withPaddingTop = sprinkles({
-    paddingTop: 16,
-});
-
-export const button = style({
-    display: 'flex',
-    marginTop: 8,
-});
-
-export const buttonMobile = style([
-    button,
-    {
-        '@media': {
-            [mq.mobile]: {
-                marginTop: 16,
-            },
-        },
-    },
-]);
-
-export const footerImage = sprinkles({alignItems: 'center', display: 'flex', paddingRight: 16});
-
-export const footerDirection = style([
-    sprinkles({
-        display: 'flex',
-        flexDirection: 'row',
-    }),
-    {flexWrap: 'wrap'},
-]);
-
-export const adjustButtonLink = style({
-    position: 'relative',
-    marginLeft: -12,
-    marginRight: -12,
-});
-
-export const marginRightButton = style({
-    marginRight: 16,
-});
-
-const topActionsCount = createVar();
-
-export const vars = {topActionsCount};
-
-export const topActionsWithoutIcon = style({
-    /** Move the div to match the card border, ignoring content's padding. We add one extra pixel because of border's width */
-    marginRight: -17,
-    marginTop: -1,
-    width: `calc((${iconContainerSize.small} + 16px) * ${topActionsCount})`,
-
-    '@media': {
-        [mq.desktopOrBigger]: {
-            marginRight: -25,
-            marginTop: -25,
-        },
-    },
-});
-
-export const flexColumn = style({
-    display: 'flex',
-    flexDirection: 'column',
-});

package/src/community/advanced-data-card.tsx

@@ -1,431 +0,0 @@
-// https://www.figma.com/file/35iS2dwoogulJZPgFGKmCX/Explora%C3%A7%C3%A3o-Data-Card-%2F-Slots?type=design&node-id=443-32508&mode=design&t=wwoi2TRLVsjwGYAb-0
-
-'use client';
-import * as React from 'react';
-import {Boxed} from '../boxed';
-import Stack from '../stack';
-import * as styles from './advanced-data-card.css';
-import * as mediaStyles from '../image.css';
-import Divider from '../divider';
-import {Text2, Text, useTextPresetSizes} from '../text';
-import {vars} from '../skins/skin-contract.css';
-import Box from '../box';
-import Touchable from '../touchable';
-import classNames from 'classnames';
-import {useInnerText, useTheme} from '../hooks';
-import {getPrefixedDataAttributes} from '../utils/dom';
-import Inline from '../inline';
-import {applyCssVars} from '../utils/css';
-import Tag from '../tag';
-import {isBiggerHeading} from '../utils/headings';
-import {TopActions} from '../card-internal';
-
-import type {CardAction} from '../card-internal';
-import type {PressHandler} from '../touchable';
-import type {ExclusifyUnion} from '../utils/utility-types';
-import type StackingGroup from '../stacking-group';
-import type Image from '../image';
-import type {ButtonPrimary, ButtonLink} from '../button';
-import type {DataAttributes, HeadingType, TrackingEvent} from '../utils/types';
-import type {RendersNullableElement} from '../utils/renders-element';
-import type {
-    HighlightedValueBlock,
-    InformationBlock,
-    ProgressBlock,
-    RowBlock,
-    SimpleBlock,
-    ValueBlock,
-} from './blocks';
-
-type TouchableProps = {
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    role?: string;
-} & ExclusifyUnion<
-    | {
-          href: string | undefined;
-          newTab?: boolean;
-      }
-    | {
-          to: string | undefined;
-          newTab?: boolean;
-          fullPageOnWebView?: boolean;
-      }
-    | {
-          onPress: PressHandler | undefined;
-      }
->;
-type TouchableCard<T> = T & TouchableProps;
-type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
-
-type CardContentProps = {
-    headline?: string | RendersNullableElement<typeof Tag>;
-    headlineRef?: (instance: HTMLElement | null) => void;
-    pretitle?: string;
-    pretitleAs?: HeadingType;
-    pretitleLinesMax?: number;
-    title?: string;
-    titleAs: HeadingType;
-    titleLinesMax?: number;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string;
-    descriptionLinesMax?: number;
-};
-
-const CardContent = ({
-    headline,
-    headlineRef,
-    pretitle,
-    pretitleAs,
-    pretitleLinesMax,
-    title,
-    titleAs,
-    titleLinesMax,
-    subtitle,
-    subtitleLinesMax,
-    description,
-    descriptionLinesMax,
-}: CardContentProps) => {
-    const {textPresets} = useTheme();
-    const text4Sizes = useTextPresetSizes('text4');
-
-    return (
-        /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */
-        <div className={styles.flexColumn}>
-            {isBiggerHeading(titleAs, pretitleAs) ? (
-                <>
-                    {title && (
-                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
-                            <Text
-                                {...text4Sizes}
-                                truncate={titleLinesMax}
-                                weight={textPresets.cardTitle.weight}
-                                as={titleAs}
-                                hyphens="auto"
-                            >
-                                {title}
-                            </Text>
-                        </div>
-                    )}
-                    {headline && (
-                        <div
-                            ref={headlineRef}
-                            style={{
-                                order: -2,
-                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
-                            }}
-                        >
-                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
-                        </div>
-                    )}
-                    {pretitle && (
-                        <div style={{order: -1, paddingBottom: title || subtitle || description ? 4 : 0}}>
-                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
-                                {pretitle}
-                            </Text2>
-                        </div>
-                    )}
-                </>
-            ) : (
-                <>
-                    {pretitle && (
-                        <div style={{paddingBottom: title || subtitle || description ? 4 : 0}}>
-                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
-                                {pretitle}
-                            </Text2>
-                        </div>
-                    )}
-                    {headline && (
-                        <div
-                            ref={headlineRef}
-                            style={{
-                                order: -1,
-                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
-                            }}
-                        >
-                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
-                        </div>
-                    )}
-                    {title && (
-                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
-                            <Text
-                                {...text4Sizes}
-                                truncate={titleLinesMax}
-                                weight={textPresets.cardTitle.weight}
-                                as={titleAs}
-                                hyphens="auto"
-                            >
-                                {title}
-                            </Text>
-                        </div>
-                    )}
-                </>
-            )}
-            {subtitle && (
-                <div style={{paddingBottom: description ? 4 : 0}}>
-                    <Text2 truncate={subtitleLinesMax} as="div" regular hyphens="auto">
-                        {subtitle}
-                    </Text2>
-                </div>
-            )}
-            {description && (
-                <Text2
-                    truncate={descriptionLinesMax}
-                    as="div"
-                    regular
-                    color={vars.colors.textSecondary}
-                    hyphens="auto"
-                >
-                    {description}
-                </Text2>
-            )}
-        </div>
-    );
-};
-
-type CardFooterProps = {
-    button?: RendersNullableElement<typeof ButtonPrimary>;
-    footerImage?: RendersNullableElement<typeof Image>;
-    footerText?: string;
-    footerTextLinesMax?: number;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-};
-
-const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, buttonLink}: CardFooterProps) => {
-    const hasButton = !!button;
-    const hasFooterImage = !!footerImage;
-    const hasFooterText = !!footerText;
-    const hasButtonLink = !!buttonLink;
-    const hasAllItens = hasButton && (hasFooterImage || hasFooterText) && hasButtonLink;
-
-    const maxWidth = hasButtonLink && !hasAllItens ? '178px' : '';
-
-    return (
-        <>
-            <div className={styles.divider}>
-                <Divider />
-            </div>
-
-            <div
-                className={classNames(
-                    styles.actions,
-                    styles.actionsVariants[hasAllItens ? 'mobile' : 'default']
-                )}
-            >
-                {hasButton && (
-                    <div className={classNames(styles.marginRightButton, styles.buttonMobile)}>{button}</div>
-                )}
-                <div
-                    className={classNames(
-                        styles.footerDirection,
-                        hasAllItens ? styles.marginRightAuto : styles.withPaddingTop
-                    )}
-                >
-                    {hasFooterImage && (
-                        <div className={styles.footerImage}>
-                            <div
-                                style={applyCssVars({
-                                    [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-                                })}
-                            >
-                                {footerImage}
-                            </div>
-                        </div>
-                    )}
-
-                    {hasFooterText && (
-                        <div style={{maxWidth}} className={styles.footerText}>
-                            <Text2 truncate={footerTextLinesMax} regular>
-                                {footerText}
-                            </Text2>
-                        </div>
-                    )}
-                </div>
-                {hasButtonLink && (
-                    <div
-                        className={classNames(
-                            styles.adjustButtonLink,
-                            hasAllItens ? styles.button : styles.buttonMobile
-                        )}
-                    >
-                        {buttonLink}
-                    </div>
-                )}
-            </div>
-        </>
-    );
-};
-
-type AllowedExtra =
-    | typeof StackingGroup
-    | typeof HighlightedValueBlock
-    | typeof InformationBlock
-    | typeof ProgressBlock
-    | typeof RowBlock
-    | typeof SimpleBlock
-    | typeof ValueBlock;
-
-type AdvancedDataCardProps = MaybeTouchableCard<{
-    stackingGroup?: RendersNullableElement<typeof StackingGroup>;
-    headline?: RendersNullableElement<typeof Tag>;
-    pretitle?: string;
-    pretitleLinesMax?: number;
-    pretitleAs?: HeadingType;
-    title?: string;
-    titleLinesMax?: number;
-    titleAs?: HeadingType;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string;
-    descriptionLinesMax?: number;
-    extra?: ReadonlyArray<RendersNullableElement<AllowedExtra>>;
-    extraDividerPadding?: 8 | 16 | 24;
-    noExtraDivider?: boolean;
-    button?: RendersNullableElement<typeof ButtonPrimary>;
-    footerImage?: RendersNullableElement<typeof Image>;
-    footerText?: string;
-    footerTextLinesMax?: number;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-    dataAttributes?: DataAttributes;
-    actions?: ReadonlyArray<CardAction | React.ReactElement>;
-    'aria-label'?: string;
-    onClose?: () => void;
-}>;
-
-export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCardProps>(
-    (
-        {
-            stackingGroup,
-            headline,
-            pretitle,
-            pretitleAs,
-            pretitleLinesMax,
-            title,
-            titleAs = 'h3',
-            titleLinesMax,
-            subtitle,
-            subtitleLinesMax,
-            description,
-            descriptionLinesMax,
-
-            extra,
-            extraDividerPadding = 24,
-            noExtraDivider = false,
-
-            button,
-            footerImage,
-            footerText,
-            footerTextLinesMax,
-            buttonLink,
-
-            dataAttributes,
-            actions,
-            'aria-label': ariaLabelProp,
-            onClose,
-            ...touchableProps
-        },
-        ref
-    ) => {
-        const isTouchable = !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
-
-        const footerProps = {button, footerImage, footerText, footerTextLinesMax, buttonLink};
-
-        const hasFooter = !!button || !!footerImage || !!footerText || !!buttonLink;
-        const hasExtras = !!extra?.length;
-
-        const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
-
-        const {text: headlineText, ref: headlineRef} = useInnerText();
-        const {text: extraText, ref: extraRef} = useInnerText();
-
-        const ariaLabel =
-            ariaLabelProp ||
-            (isBiggerHeading(titleAs, pretitleAs)
-                ? [title, headlineText, pretitle, subtitle, description, extraText]
-                : [pretitle, headlineText, title, subtitle, description, extraText]
-            )
-                .filter(Boolean)
-                .join(' ');
-
-        return (
-            <section
-                className={styles.container}
-                {...getPrefixedDataAttributes(dataAttributes, 'AdvancedDataCard')}
-                ref={ref}
-                aria-label={isTouchable ? undefined : ariaLabel}
-            >
-                <Boxed className={styles.dataCard} width="100%" height="100%" minHeight={styles.MIN_HEIGHT}>
-                    <Touchable
-                        maybe
-                        {...touchableProps}
-                        aria-label={isTouchable ? ariaLabel : undefined}
-                        className={styles.touchable}
-                    >
-                        {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
-
-                        <div
-                            className={classNames(
-                                styles.cardContentStyle,
-                                !hasFooter && !hasExtras ? styles.minHeight : ''
-                            )}
-                            aria-hidden={isTouchable}
-                        >
-                            <Box paddingTop={8}>
-                                <Inline space={0}>
-                                    <Stack space={8}>
-                                        {stackingGroup}
-                                        <CardContent
-                                            headline={headline}
-                                            headlineRef={headlineRef}
-                                            pretitle={pretitle}
-                                            pretitleAs={pretitleAs}
-                                            pretitleLinesMax={pretitleLinesMax}
-                                            title={title}
-                                            titleAs={titleAs}
-                                            titleLinesMax={titleLinesMax}
-                                            subtitle={subtitle}
-                                            subtitleLinesMax={subtitleLinesMax}
-                                            description={description}
-                                            descriptionLinesMax={descriptionLinesMax}
-                                        />
-                                    </Stack>
-                                    {/** Hack to avoid content from rendering on top of the top action buttons */}
-                                    {!stackingGroup && (
-                                        <div
-                                            style={applyCssVars({
-                                                [styles.vars.topActionsCount]: String(topActionsCount),
-                                            })}
-                                            className={styles.topActionsWithoutIcon}
-                                        />
-                                    )}
-                                </Inline>
-                            </Box>
-                        </div>
-                        <div style={{flexGrow: 1}} />
-                        {hasExtras && (
-                            <div className={styles.extra} ref={extraRef} aria-hidden={isTouchable}>
-                                {extra.map((item, index) => {
-                                    return (
-                                        <div key={index}>
-                                            <div className={styles.paddingX}>{item}</div>
-
-                                            {index + 1 !== extra.length && (
-                                                <Box paddingY={extraDividerPadding}>
-                                                    {!noExtraDivider && <Divider />}
-                                                </Box>
-                                            )}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        )}
-                    </Touchable>
-                    {hasFooter && <CardFooter {...footerProps} />}
-                </Boxed>
-                <TopActions actions={actions} onClose={onClose} />
-            </section>
-        );
-    }
-);
-
-export default AdvancedDataCard;