@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/rating.css.ts

@@ -1,128 +0,0 @@
-import {createVar, style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-
-const iconSize = createVar();
-const interactiveAreaSize = createVar();
-
-export const vars = {iconSize};
-
-// Space between each icon
-const iconSpacing = '16px';
-
-/**
- * In touchable devices, minimum interactive area is 48px.
- * In pointer devices, minimum interactive area is 24px.
- */
-const minInteractiveArea = {
-    pointer: '24px',
-    touchable: '48px',
-};
-
-// Minimum size of icon container so that interactive areas don't overlap
-const minContainerSize = {
-    pointer: `calc(${minInteractiveArea.pointer} - ${iconSpacing})`,
-    touchable: `calc(${minInteractiveArea.touchable} - ${iconSpacing})`,
-};
-
-export const IconWrapper = style([
-    sprinkles({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-    }),
-    {
-        // set width and height in order to ignore inline svg extra spacing
-        width: iconSize,
-        height: iconSize,
-
-        minWidth: minContainerSize.pointer,
-        minHeight: minContainerSize.pointer,
-        '@media': {
-            [mq.touchableOnly]: {
-                minWidth: minContainerSize.touchable,
-                minHeight: minContainerSize.touchable,
-            },
-        },
-    },
-]);
-
-export const halfIconContainer = sprinkles({
-    position: 'relative',
-});
-
-export const halfIconInactive = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        clipPath: 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)',
-        WebkitClipPath: 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)',
-    },
-]);
-
-export const halfIconActive = style([
-    sprinkles({
-        position: 'relative',
-    }),
-    {
-        clipPath: 'polygon(0 0, 50% 0, 50% 100%, 0 100%)',
-        WebkitClipPath: 'polygon(0 0, 50% 0, 50% 100%, 0 100%)',
-    },
-]);
-
-export const disabled = style({
-    opacity: 0.5,
-});
-
-export const firstIcon = style({});
-export const lastIcon = style({});
-
-export const touchable = style({
-    vars: {
-        [interactiveAreaSize]: minInteractiveArea.pointer,
-    },
-    '@media': {
-        [mq.touchableOnly]: {
-            vars: {
-                [interactiveAreaSize]: minInteractiveArea.touchable,
-            },
-        },
-    },
-
-    transition: 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-    position: 'relative',
-
-    '::after': {
-        content: '',
-        position: 'absolute',
-        /**
-         * min() is not supported in old browsers (https://caniuse.com/css-math-functions).
-         * We don't force the minimum touchable area in that case.
-         */
-        top: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        bottom: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        left: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        right: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-    },
-
-    selectors: {
-        [`&:not(${disabled}):active`]: {
-            transform: 'scale(1.2)',
-        },
-
-        // Add extra width on the left/right of interactive area so that we cover the space between icons
-        [`&:not(${firstIcon}):after`]: {
-            left: [
-                `calc(-1 * ${iconSpacing} / 2)`,
-                `min(calc(-1 * ${iconSpacing} / 2), calc((100% - ${interactiveAreaSize}) / 2))`,
-            ],
-        },
-        [`&:not(${lastIcon}):after`]: {
-            right: [
-                `calc(-1 * ${iconSpacing} / 2)`,
-                `min(calc(-1 * ${iconSpacing} / 2), calc((100% - ${interactiveAreaSize}) / 2))`,
-            ],
-        },
-    },
-});

package/src/rating.tsx

@@ -1,351 +0,0 @@
-'use client';
-import * as React from 'react';
-import Inline from './inline';
-import {vars} from './skins/skin-contract.css';
-import {useThemeVariant} from './theme-variant-context';
-import * as styles from './rating.css';
-import classNames from 'classnames';
-import {applyCssVars} from './utils/css';
-import {isTouchableDevice} from './utils/environment';
-import RadioButton, {RadioGroup} from './radio-button';
-import {isEqual} from './utils/helpers';
-import IconStarFilled from './generated/mistica-icons/icon-star-filled';
-import IconStarRegular from './generated/mistica-icons/icon-star-regular';
-import IconFaceSadFilled from './generated/mistica-icons/icon-face-sad-filled';
-import IconFaceSadRegular from './generated/mistica-icons/icon-face-sad-regular';
-import IconFaceSlightlySadFilled from './generated/mistica-icons/icon-face-slightly-sad-filled';
-import IconFaceSlightlySadRegular from './generated/mistica-icons/icon-face-slightly-sad-regular';
-import IconFaceNeutralFilled from './generated/mistica-icons/icon-face-neutral-filled';
-import IconFaceNeutralRegular from './generated/mistica-icons/icon-face-neutral-regular';
-import IconFaceHappyFilled from './generated/mistica-icons/icon-face-happy-filled';
-import IconFaceHappyRegular from './generated/mistica-icons/icon-face-happy-regular';
-import IconFaceSuperHappyFilled from './generated/mistica-icons/icon-face-super-happy-filled';
-import IconFaceSuperHappyRegular from './generated/mistica-icons/icon-face-super-happy-regular';
-import {useTheme} from './hooks';
-import * as tokens from './text-tokens';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes, IconProps} from './utils/types';
-
-type RatingIconProps = {
-    ActiveIcon: (props: IconProps) => JSX.Element;
-    InactiveIcon: (props: IconProps) => JSX.Element;
-    color: string;
-};
-
-const DEFAULT_RATING_SIZE = 32;
-const DEFAULT_INFO_RATING_SIZE = 16;
-const DEFAULT_RATING_ICON_COUNT = 5;
-
-const DEFAULT_RATING_ICON: RatingIconProps = {
-    ActiveIcon: IconStarFilled,
-    InactiveIcon: IconStarRegular,
-    color: vars.colors.controlActivated,
-};
-
-const DEFAULT_INFO_RATING_ICON: RatingIconProps = {
-    ActiveIcon: IconStarFilled,
-    InactiveIcon: IconStarRegular,
-    color: vars.colors.warning,
-};
-
-const DEFAULT_QUALITATIVE_ICONS: Array<RatingIconProps> = [
-    {
-        ActiveIcon: IconFaceSadFilled,
-        InactiveIcon: IconFaceSadRegular,
-        color: vars.colors.errorHigh,
-    },
-    {
-        ActiveIcon: IconFaceSlightlySadFilled,
-        InactiveIcon: IconFaceSlightlySadRegular,
-        color: vars.colors.error,
-    },
-    {
-        ActiveIcon: IconFaceNeutralFilled,
-        InactiveIcon: IconFaceNeutralRegular,
-        color: vars.colors.warning,
-    },
-    {
-        ActiveIcon: IconFaceHappyFilled,
-        InactiveIcon: IconFaceHappyRegular,
-        color: vars.colors.success,
-    },
-    {
-        ActiveIcon: IconFaceSuperHappyFilled,
-        InactiveIcon: IconFaceSuperHappyRegular,
-        color: vars.colors.successHigh,
-    },
-];
-
-interface BaseRatingProps {
-    size?: number;
-    dataAttributes?: DataAttributes;
-    valueLabels?: Array<string>;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-}
-
-interface QuantitativeRatingProps extends BaseRatingProps {
-    type?: 'quantitative';
-    icon?: RatingIconProps;
-    count?: number;
-}
-
-interface QualitativeRatingProps extends BaseRatingProps {
-    type: 'qualitative';
-    icons?: Array<RatingIconProps>;
-}
-
-type RatingProps = ExclusifyUnion<QualitativeRatingProps | QuantitativeRatingProps> & {
-    value?: number;
-    defaultValue?: number;
-    onChangeValue?: (value: number) => void;
-    disabled?: boolean;
-};
-
-type InfoRatingProps = Omit<QuantitativeRatingProps, 'type' | 'valueLabels'> & {
-    value?: number;
-    withHalfValue?: boolean;
-};
-
-type InternalRatingProps = ExclusifyUnion<RatingProps | InfoRatingProps> & {
-    role: 'radiogroup' | 'img';
-};
-
-const useRatingState = ({
-    value,
-    defaultValue,
-    iconsCount,
-    onChangeValue,
-}: {
-    value?: number;
-    defaultValue?: number;
-    iconsCount: number;
-    onChangeValue?: (value: number) => void;
-}): [number, (value: number) => void] => {
-    const isControlledByParent = value !== undefined;
-
-    const getValueInRange = React.useCallback(
-        (value?: number) => {
-            return value === undefined ? 0 : Math.max(0, Math.min(iconsCount, value));
-        },
-        [iconsCount]
-    );
-
-    const [currentValue, setCurrentValue] = React.useState<number>(getValueInRange(defaultValue));
-
-    const updateValue = (newValue: number) => {
-        if (!isControlledByParent) {
-            setCurrentValue(newValue);
-        }
-        onChangeValue?.(newValue);
-    };
-
-    return [isControlledByParent ? getValueInRange(value) : currentValue, updateValue];
-};
-
-const InternalRating = ({
-    icons = DEFAULT_QUALITATIVE_ICONS,
-    count = DEFAULT_RATING_ICON_COUNT,
-    icon = DEFAULT_RATING_ICON,
-    size = DEFAULT_RATING_SIZE,
-    type = 'quantitative',
-    dataAttributes,
-    onChangeValue,
-    defaultValue,
-    value,
-    disabled,
-    role,
-    valueLabels,
-    withHalfValue,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-}: InternalRatingProps) => {
-    const {texts, t} = useTheme();
-
-    const defaultQualitativeLabels = [
-        texts.ratingVeryBadLabel || t(tokens.ratingVeryBadLabel),
-        texts.ratingBadLabel || t(tokens.ratingBadLabel),
-        texts.ratingRegularLabel || t(tokens.ratingRegularLabel),
-        texts.ratingGoodLabel || t(tokens.ratingGoodLabel),
-        texts.ratingVeryGoodLabel || t(tokens.ratingVeryGoodLabel),
-    ];
-
-    const defaultQuantitativeLabels = Array.from({length: count}, (_, index) =>
-        t(texts.ratingQuantitativeLabel || tokens.ratingQuantitativeLabel, index + 1, count)
-    );
-
-    const iconList = type === 'qualitative' ? icons : Array.from({length: count}, () => icon);
-    const labelList =
-        valueLabels ??
-        (type === 'qualitative' && isEqual(iconList, DEFAULT_QUALITATIVE_ICONS)
-            ? defaultQualitativeLabels
-            : defaultQuantitativeLabels);
-
-    const isInteractive = role === 'radiogroup';
-
-    const iconSpacing = isInteractive ? 16 : size <= 16 ? 2 : size <= 24 ? 4 : 8;
-    const variant = useThemeVariant();
-    const [hoveredIndex, setHoveredIndex] = React.useState<number | undefined>(undefined);
-    const isTouchable = isTouchableDevice();
-
-    const [currentValue, setCurrentValue] = useRatingState({
-        value,
-        defaultValue,
-        iconsCount: iconList.length,
-        onChangeValue,
-    });
-
-    const getIconType = (index: number) => {
-        if (hoveredIndex !== undefined && !disabled) {
-            return (type === 'qualitative' && index === hoveredIndex) ||
-                (type === 'quantitative' && index <= hoveredIndex)
-                ? 'active'
-                : 'inactive';
-        }
-        if (type === 'qualitative') {
-            return index === currentValue ? 'active' : 'inactive';
-        }
-
-        if (isInteractive) {
-            return index <= currentValue ? 'active' : 'inactive';
-        }
-
-        // Round the value to the closest integer (.5 is rounded down)
-        if (!withHalfValue) {
-            return index - 0.5 < currentValue ? 'active' : 'inactive';
-        }
-
-        // Fractional part of the value is in range [0.25, 0.75)
-        if (index - 0.75 <= currentValue && currentValue < index - 0.25) {
-            return 'half';
-        }
-
-        if (index - 0.25 <= currentValue) {
-            return 'active';
-        }
-
-        return 'inactive';
-    };
-
-    const getIconElement = (icon: RatingIconProps, index: number) => {
-        const activeColor =
-            variant === 'brand'
-                ? vars.colors.controlActivatedBrand
-                : variant === 'negative'
-                  ? vars.colors.controlActivatedNegative
-                  : iconList[index].color;
-        const inactiveColor =
-            variant === 'brand'
-                ? vars.colors.controlInverse
-                : variant === 'negative'
-                  ? vars.colors.controlNegative
-                  : isInteractive
-                    ? vars.colors.control
-                    : iconList[0].color;
-
-        switch (getIconType(index + 1)) {
-            case 'active':
-                return <icon.ActiveIcon size={size} color={activeColor} key={index} />;
-
-            case 'inactive':
-                return <icon.InactiveIcon size={size} color={inactiveColor} key={index} />;
-
-            case 'half':
-            default:
-                return (
-                    <div className={styles.halfIconContainer} key={index}>
-                        <div className={styles.halfIconInactive}>
-                            <icon.InactiveIcon size={size} color={inactiveColor} />
-                        </div>
-                        <div className={styles.halfIconActive}>
-                            <icon.ActiveIcon size={size} color={activeColor} />
-                        </div>
-                    </div>
-                );
-        }
-    };
-
-    const renderIcon = (icon: RatingIconProps, index: number) => {
-        const iconElement = getIconElement(icon, index);
-
-        return !isInteractive ? (
-            iconElement
-        ) : (
-            <RadioButton
-                key={index}
-                aria-label={labelList[index]}
-                value={labelList[index]}
-                render={({labelId, disabled}) => (
-                    <div
-                        id={labelId}
-                        onMouseEnter={() => {
-                            if (!isTouchable) {
-                                setHoveredIndex(index + 1);
-                            }
-                        }}
-                        onMouseLeave={() => {
-                            if (!isTouchable) {
-                                setHoveredIndex(undefined);
-                            }
-                        }}
-                        style={applyCssVars({
-                            [styles.vars.iconSize]: `${size}px`,
-                        })}
-                        className={classNames(styles.touchable, {
-                            [styles.disabled]: disabled,
-                            [styles.firstIcon]: index === 0,
-                            [styles.lastIcon]: index === iconList.length - 1,
-                        })}
-                    >
-                        <div className={styles.IconWrapper}>{iconElement}</div>
-                    </div>
-                )}
-            />
-        );
-    };
-
-    return role === 'img' ? (
-        <Inline
-            space={iconSpacing}
-            dataAttributes={dataAttributes}
-            role={role}
-            aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : `${currentValue} de ${count}`)}
-            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
-        >
-            {iconList.map(renderIcon)}
-        </Inline>
-    ) : (
-        <RadioGroup
-            name="info-rating"
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
-            disabled={disabled}
-            onChange={(label) => {
-                setCurrentValue(labelList.findIndex((value) => value === label) + 1);
-            }}
-            value={labelList[currentValue - 1]}
-            dataAttributes={dataAttributes}
-        >
-            <Inline space={iconSpacing}>{iconList.map(renderIcon)}</Inline>
-        </RadioGroup>
-    );
-};
-
-export const Rating = ({dataAttributes, ...props}: RatingProps): JSX.Element => (
-    <InternalRating
-        role="radiogroup"
-        dataAttributes={{'component-name': 'Rating', ...dataAttributes}}
-        {...props}
-    />
-);
-
-export const InfoRating = ({dataAttributes, icon, size, ...props}: InfoRatingProps): JSX.Element => (
-    <InternalRating
-        size={size ?? DEFAULT_INFO_RATING_SIZE}
-        icon={icon ?? DEFAULT_INFO_RATING_ICON}
-        role="img"
-        dataAttributes={{'component-name': 'InfoRating', ...dataAttributes}}
-        {...props}
-    />
-);

package/src/responsive-layout.css.ts

@@ -1,162 +0,0 @@
-import {createVar, fallbackVar, style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {sprinkles} from './sprinkles.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-
-export const MOBILE_SIDE_MARGIN = 16;
-export const TABLET_SIDE_MARGIN = 32;
-export const SMALL_DESKTOP_SIDE_MARGIN = 48;
-export const LARGE_DESKTOP_SIDE_MARGIN = 64;
-export const EXTRA_LARGE_DESKTOP_MAX_WIDTH = 1704;
-
-const marginValue = {
-    extraLargeDesktop: `calc((100vw - ${EXTRA_LARGE_DESKTOP_MAX_WIDTH}px) / 2)`,
-    largeDesktop: `${LARGE_DESKTOP_SIDE_MARGIN}px`,
-    desktop: `${SMALL_DESKTOP_SIDE_MARGIN}px`,
-    tablet: `${TABLET_SIDE_MARGIN}px`,
-    mobile: `${MOBILE_SIDE_MARGIN}px`,
-};
-
-const currentMargin = createVar();
-const sideMargin = createVar();
-export const vars = {sideMargin};
-
-export const resetContainerMobile = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            width: 'auto',
-            margin: `0 calc(-1 * ${fallbackVar(sideMargin, '0px')})`,
-        },
-    },
-});
-
-export const resetContainerDesktop = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            width: 'auto',
-            margin: `0 calc(-1 * ${fallbackVar(sideMargin, '0px')})`,
-        },
-    },
-});
-
-export const resetMobile = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            vars: {
-                [sideMargin]: '0px',
-            },
-        },
-    },
-});
-
-export const resetDesktop = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            vars: {
-                [sideMargin]: '0px',
-            },
-        },
-    },
-});
-
-export const responsiveLayoutContainer = style({
-    width: `calc(100% + 2 * ${fallbackVar(sideMargin, '0px')})`,
-    margin: `0 calc(-1 * ${fallbackVar(sideMargin, '0px')})`,
-    vars: {
-        [currentMargin]: '0px',
-    },
-});
-
-export const desktopContainer = style({
-    '@media': {
-        [mq.extraLargeDesktop]: {
-            vars: {
-                [currentMargin]: marginValue.extraLargeDesktop,
-            },
-        },
-        [mq.largeDesktop]: {
-            vars: {
-                [currentMargin]: marginValue.largeDesktop,
-            },
-        },
-        [mq.desktop]: {
-            vars: {
-                [currentMargin]: marginValue.desktop,
-            },
-        },
-    },
-});
-
-export const forcedMarginDesktopContainer = style({
-    '@media': {
-        [mq.extraLargeDesktop]: {
-            vars: {
-                [currentMargin]: `calc(${marginValue.extraLargeDesktop} + ${fallbackVar(sideMargin, '0px')})`,
-            },
-        },
-        [mq.largeDesktop]: {
-            vars: {
-                [currentMargin]: `calc(${marginValue.largeDesktop} + ${fallbackVar(sideMargin, '0px')})`,
-            },
-        },
-        [mq.desktop]: {
-            vars: {
-                [currentMargin]: `calc(${marginValue.desktop} + ${fallbackVar(sideMargin, '0px')})`,
-            },
-        },
-    },
-});
-
-export const mobileContainer = style({
-    '@media': {
-        [mq.tablet]: {
-            vars: {
-                [currentMargin]: marginValue.tablet,
-            },
-        },
-        [mq.mobile]: {
-            vars: {
-                [currentMargin]: marginValue.mobile,
-            },
-        },
-    },
-});
-
-export const forcedMarginMobileContainer = style({
-    '@media': {
-        [mq.tablet]: {
-            vars: {
-                [currentMargin]: `calc(${marginValue.tablet} + ${fallbackVar(sideMargin, '0px')})`,
-            },
-        },
-        [mq.mobile]: {
-            vars: {
-                [currentMargin]: `calc(${marginValue.mobile} + ${fallbackVar(sideMargin, '0px')})`,
-            },
-        },
-    },
-});
-
-export const backgroundVariant = {
-    brand: sprinkles({background: skinVars.colors.backgroundBrand}),
-    negative: sprinkles({background: skinVars.colors.backgroundNegative}),
-    media: sprinkles({background: 'transparent'}),
-    alternative: sprinkles({background: skinVars.colors.backgroundAlternative}),
-};
-
-export const responsiveLayout = style({
-    paddingLeft: 'env(safe-area-inset-left)',
-    paddingRight: 'env(safe-area-inset-right)',
-    margin: `0 ${currentMargin}`,
-    vars: {
-        [sideMargin]: currentMargin,
-    },
-});
-
-export const fullWidth = style([
-    sprinkles({width: '100%'}),
-    {
-        paddingLeft: 'env(safe-area-inset-left)',
-        paddingRight: 'env(safe-area-inset-right)',
-    },
-]);