@telefonica/mistica 17.4.0 → 17.6.0

package/src/card-internal.css.ts

@@ -269,3 +269,39 @@ export const stretchedLink = style({
         cursor: 'pointer',
     },
 });
+
+const selectionOutlineWidth = 2;
+const selectionOutlineOffset = 2;
+
+export const selectionOutline = style({
+    selectors: {
+        '&::after': {
+            content: '',
+            position: 'absolute',
+            inset: -(selectionOutlineWidth + selectionOutlineOffset),
+            border: `${selectionOutlineWidth}px solid transparent`,
+            borderRadius: `calc(${skinVars.borderRadii.container} + 3px)`,
+            pointerEvents: 'none',
+        },
+    },
+});
+
+export const selectionOutlineColor = styleVariants({
+    default: {selectors: {'&::after': {borderColor: skinVars.colors.controlActivated}}},
+    alternative: {selectors: {'&::after': {borderColor: skinVars.colors.controlActivated}}},
+    brand: {selectors: {'&::after': {borderColor: skinVars.colors.controlActivatedBrand}}},
+    media: {selectors: {'&::after': {borderColor: skinVars.colors.controlActivated}}},
+    negative: {selectors: {'&::after': {borderColor: skinVars.colors.controlActivatedNegative}}},
+});
+
+export const selectionControl = style({borderRadius: skinVars.borderRadii.container});
+
+export const selectionControlContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    flexGrow: 1,
+    borderRadius: 'inherit',
+    outlineOffset: 0,
+});

package/src/card-internal.tsx

@@ -20,6 +20,9 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {applyCssVars} from './utils/css';
 import {InternalBoxed} from './boxed';
 import {BaseTouchable} from './touchable';
+import Checkbox from './checkbox';
+import Switch from './switch-component';
+import RadioButton, {useRadioContext} from './radio-button';
 import {AspectRatioContainer, aspectRatioToNumber} from './utils/aspect-ratio-support';
 import {vars as skinVars} from './skins/skin-contract.css';
 import {IconButton, ToggleIconButton} from './icon-button';
@@ -42,7 +45,98 @@ import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type {NonDeprecatedVariant, Variant} from './theme-variant-context';
 import type {VideoElement, VideoSource, AspectRatio as VideoAspectRatio} from './video';
 import type {AspectRatio as ImageAspectRatio} from './image';
-import type {PressHandler, TouchableElement} from './touchable';
+import type {PressHandler, TouchableElement, TouchableProps as BaseTouchableProps} from './touchable';
+
+type ControlProps = {
+    name?: string;
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+};
+
+export type CardSelectionProps = ExclusifyUnion<
+    {checkbox: ControlProps} | {switch: ControlProps} | {radioValue: string}
+>;
+
+export const useControlState = ({
+    value,
+    defaultValue,
+    onChange,
+}: {
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (isChecked: boolean) => void;
+} = {}): {isChecked: boolean; toggleChecked: () => void} => {
+    const isControlledByParent = value !== undefined;
+    const [isChecked, setIsChecked] = React.useState<boolean>(!!defaultValue);
+
+    const toggleChecked = () => {
+        if (!isControlledByParent) {
+            setIsChecked(!isChecked);
+        }
+        onChange?.(isControlledByParent ? !value : !isChecked);
+    };
+
+    return {isChecked: isControlledByParent ? !!value : isChecked, toggleChecked};
+};
+
+type CardControlProps = {
+    checkbox?: ControlProps;
+    switch?: ControlProps;
+    radioValue?: string;
+    checked: boolean;
+    onChange: () => void;
+};
+
+export const CardWithControl = ({
+    checkbox,
+    switch: switchProps,
+    radioValue,
+    checked,
+    onChange,
+    ...props
+}: BaseTouchableProps & CardSelectionProps & Pick<CardControlProps, 'checked' | 'onChange'>): JSX.Element => {
+    const id = React.useId();
+    const render = ({controlElement}: {controlElement: React.ReactElement}) => (
+        <>
+            {props.children}
+            <div className={styles.topActionsContainer} data-testid="cardSelector" aria-hidden>
+                {controlElement}
+            </div>
+        </>
+    );
+    const renderWithControl = (control: React.ReactNode) => (
+        <div className={classnames(styles.selectionControl, props.className)} style={props.style}>
+            {control}
+        </div>
+    );
+
+    if (switchProps || checkbox) {
+        const Control = switchProps ? Switch : Checkbox;
+        return renderWithControl(
+            <Control
+                className={styles.selectionControlContent}
+                name={switchProps?.name ?? checkbox?.name ?? id}
+                checked={checked}
+                onChange={onChange}
+                disabled={switchProps?.disabled ?? checkbox?.disabled}
+                aria-label={props['aria-label']}
+                aria-labelledby={props['aria-labelledby']}
+                render={render}
+            />
+        );
+    }
+    return renderWithControl(
+        <RadioButton
+            className={styles.selectionControlContent}
+            value={radioValue}
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-labelledby']}
+            render={render}
+        />
+    );
+};
 
 export type CardAspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto' | number;
 export type MediaAspectRatio = ImageAspectRatio | VideoAspectRatio | 'auto' | number;
@@ -67,6 +161,7 @@ type ContainerProps = {
     type: CardType;
     size: CardSize;
     variant?: Variant;
+    selected?: boolean;
     width?: string | number;
     height?: string | number;
     /** Gradient overlay color for cover cards. If not set it uses the theme color */
@@ -198,7 +293,11 @@ type TouchableProps = {
 >;
 
 type TouchableCard<T> = T & TouchableProps;
-export type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
+export type CardInteractionProps<T> = ExclusifyUnion<
+    | (TouchableCard<T> & {selected?: boolean})
+    | (T & {selected?: boolean})
+    | (Omit<T, 'topActions' | 'onClose' | 'selected'> & CardSelectionProps)
+>;
 
 type PrivateContainerProps = {
     children?: React.ReactNode;
@@ -219,6 +318,7 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps & MediaProps &
             dataAttributes,
             backgroundColor,
             variant,
+            selected,
         },
         ref
     ): JSX.Element => {
@@ -249,6 +349,10 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps & MediaProps &
                 }}
             >
                 <div
+                    className={classnames({
+                        [styles.selectionOutline]: !!selected,
+                        [styles.selectionOutlineColor[normalizeVariant(variant || 'default')]]: !!selected,
+                    })}
                     style={{
                         display: 'flex',
                         flexDirection: 'column',
@@ -1189,7 +1293,7 @@ const TextContent = ({
     );
 };
 
-type CardTouchableProps = {
+type CardTouchableProps = CardControlProps & {
     children: React.ReactNode;
     isTouchable: boolean;
     touchableAriaLabel?: string;
@@ -1205,6 +1309,11 @@ type CardTouchableProps = {
 };
 
 const CardTouchable = ({
+    checkbox,
+    switch: switchProps,
+    radioValue,
+    checked,
+    onChange,
     children,
     isTouchable,
     touchableAriaLabel,
@@ -1239,6 +1348,29 @@ const CardTouchable = ({
         </div>
     );
 
+    if (checkbox || switchProps || radioValue !== undefined) {
+        return (
+            <CardWithControl
+                maybe
+                {...(checkbox
+                    ? {checkbox}
+                    : switchProps
+                      ? {switch: switchProps}
+                      : {radioValue: radioValue ?? ''})}
+                checked={checked}
+                onChange={onChange}
+                aria-label={touchableAriaLabel}
+                aria-labelledby={ariaLabeledByProp}
+                aria-description={ariaDescriptionProp}
+                aria-describedby={ariaDescribedByProp}
+                className={classnames(styles.touchable, styles.touchableContainer)}
+                style={contentRadiusStyle}
+            >
+                {content}
+            </CardWithControl>
+        );
+    }
+
     if (isTouchable && segregateTouchableContent) {
         return hasTouchableInContent ? (
             <div className={classnames(styles.touchable, styles.touchableContainer)}>{content}</div>
@@ -1287,7 +1419,7 @@ const replaceRgbaWithColor = (stringWithRgbaColors: string, newColor: string): s
     return stringWithRgbaColors.replace(RGBA_REGEX, (_, alpha) => applyAlpha(newColor, parseFloat(alpha)));
 };
 
-export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<CardProps>>(
+export const InternalCard = React.forwardRef<HTMLDivElement, CardInteractionProps<CardProps>>(
     (
         {
             type,
@@ -1341,17 +1473,32 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
             videoLoop,
             videoAutoPlay,
             videoDataAttributes,
+            selected,
+            checkbox,
+            switch: switchProps,
+            radioValue,
             segregateTouchableContent = false,
             touchableAriaLabel: touchableAriaLabelProp,
             ...touchableProps
         },
         ref
     ): JSX.Element => {
+        const {isChecked, toggleChecked} = useControlState(switchProps || checkbox);
+        const radioContext = useRadioContext();
+        const isSelectable = !!switchProps || !!checkbox || radioValue !== undefined;
+        const isSelected =
+            switchProps || checkbox
+                ? isChecked
+                : radioValue !== undefined
+                  ? radioContext.selectedValue === radioValue
+                  : selected;
         const {text: slotText, ref: slotRef} = useInnerText();
         const {text: headlineText, ref: headlineRef} = useInnerText();
         const touchableContentRef = React.useRef<TouchableElement>(null);
-        const isTouchable = !!(touchableProps.href || touchableProps.to || touchableProps.onPress);
+        const isTouchable =
+            isSelectable || !!(touchableProps.href || touchableProps.to || touchableProps.onPress);
         const hasTouchableInContent = !!(
+            !isSelectable &&
             segregateTouchableContent &&
             !touchableAriaLabelProp &&
             (title || pretitle || headline || subtitle || description)
@@ -1379,7 +1526,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
 
         const shouldShowVideo = hasMediaVideo || hasBackgroundVideo;
         const {video, videoAction} = useVideoWithControls({
-            src: shouldShowVideo ? videoSrc : undefined,
+            src: shouldShowVideo && !isSelectable ? videoSrc : undefined,
             poster: imageSrc,
             ref: videoRef,
             autoHeight:
@@ -1407,7 +1554,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
 
         const showButtonsInBody = !shouldShowFooter && hasButtons;
 
-        const topActionsLengthWithoutVideo = (topActions?.length || 0) + (onClose ? 1 : 0);
+        const topActionsLengthWithoutVideo = isSelectable ? 1 : (topActions?.length || 0) + (onClose ? 1 : 0);
         const topActionsLength = videoAction
             ? topActionsLengthWithoutVideo + 1
             : topActionsLengthWithoutVideo;
@@ -1474,6 +1621,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
                 dataAttributes={dataAttributes}
                 ref={ref}
                 variant={variant}
+                selected={isSelected}
                 width={width}
                 height={height}
                 aspectRatio={aspectRatio}
@@ -1515,13 +1663,18 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
                 )}
 
                 <CardTouchable
+                    checkbox={checkbox}
+                    switch={switchProps}
+                    radioValue={radioValue}
+                    checked={isChecked}
+                    onChange={toggleChecked}
                     isTouchable={isTouchable}
                     touchableAriaLabel={touchableAriaLabel}
                     ariaLabeledByProp={ariaLabeledByProp}
                     ariaDescriptionProp={ariaDescriptionProp}
                     ariaDescribedByProp={ariaDescribedByProp}
                     touchableProps={touchableProps}
-                    segregateTouchableContent={segregateTouchableContent}
+                    segregateTouchableContent={isSelectable ? false : segregateTouchableContent}
                     hasTouchableInContent={hasTouchableInContent}
                     overlayClassname={overlayStyle}
                     contentStyle={{
@@ -1558,7 +1711,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
                         />
                     )}
                     <div
-                        aria-hidden={isTouchable && !segregateTouchableContent}
+                        aria-hidden={isTouchable && !isSelectable && !segregateTouchableContent}
                         data-testid="body"
                         className={classnames(styles.touchable, {
                             [styles.containerPaddingTopVariants[size]]:

package/src/card-media.tsx

@@ -10,7 +10,7 @@ import type {
     CardActionButtonSecondary,
     CardAspectRatio,
     CardSize,
-    MaybeTouchableCard,
+    CardInteractionProps,
     MediaAspectRatio,
     SlotAlignment,
     TopActionsArray,
@@ -73,8 +73,8 @@ export type MediaCardProps = {
     footerDivider?: boolean;
 };
 
-export const MediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<MediaCardProps>>(
-    ({size = 'default', slot, topActions, buttonPrimary, dataAttributes, ...rest}, ref) => {
+export const MediaCard = React.forwardRef<HTMLDivElement, CardInteractionProps<MediaCardProps>>(
+    ({size = 'default', slot, buttonPrimary, dataAttributes, ...rest}, ref) => {
         return (
             <InternalCard
                 type="media"
@@ -85,7 +85,6 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Med
                     ...dataAttributes,
                 }}
                 slot={slot}
-                topActions={topActions}
                 buttonPrimary={buttonPrimary}
                 ref={ref}
                 {...rest}

package/src/card-naked.tsx

@@ -4,12 +4,12 @@ import {InternalCard} from './card-internal';
 import {useThemeVariant} from './theme-variant-context';
 
 import type {MediaCardProps} from './card-media';
-import type {MaybeTouchableCard} from './card-internal';
+import type {CardInteractionProps} from './card-internal';
 
 type NakedCardProps = Omit<MediaCardProps, 'footerBackgroundColor' | 'variant' | 'footerVariant'>;
 
-export const NakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<NakedCardProps>>(
-    ({size = 'default', slot, topActions, buttonPrimary, dataAttributes, ...rest}, ref) => {
+export const NakedCard = React.forwardRef<HTMLDivElement, CardInteractionProps<NakedCardProps>>(
+    ({size = 'default', slot, buttonPrimary, dataAttributes, ...rest}, ref) => {
         const variant = useThemeVariant();
         return (
             <InternalCard
@@ -21,7 +21,6 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Nak
                 type="naked"
                 size={size}
                 slot={slot}
-                topActions={topActions}
                 buttonPrimary={buttonPrimary}
                 ref={ref}
                 {...rest}

package/src/checkbox.tsx

@@ -86,6 +86,7 @@ type RenderProps = {
     'aria-label'?: string;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
+    className?: string;
 };
 
 type ChildrenProps = {
@@ -101,6 +102,7 @@ type ChildrenProps = {
     'aria-labelledby'?: string;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
+    className?: string;
 };
 
 const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((props, ref) => {
@@ -154,7 +156,10 @@ const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((
             }}
             tabIndex={disabled ? undefined : 0}
             ref={combineRefs(ref, focusableRef)}
-            className={disabled ? styles.checkboxContainerDisabled : styles.checkboxContainer}
+            className={classnames(
+                disabled ? styles.checkboxContainerDisabled : styles.checkboxContainer,
+                props.className
+            )}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
             aria-disabled={disabled}

package/src/community/__screenshot_tests__/ai-card-screenshot-test.tsx

@@ -0,0 +1,28 @@
+import {openStoryPage, screen} from '../../test-utils';
+
+const expectAiCardSnapshot = async () => {
+    const element = await screen.findByTestId('ai-card');
+    const image = await element.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+};
+
+test('AiCard static text', async () => {
+    await openStoryPage({
+        id: 'community-vivo-aicard--default',
+        device: 'MOBILE_IOS',
+        args: {text: 'Lorem ipsum '},
+    });
+
+    await expectAiCardSnapshot();
+});
+
+test('AiCard line break at chars', async () => {
+    await openStoryPage({
+        id: 'community-vivo-aicard--default',
+        device: 'MOBILE_IOS',
+        args: {text: 'Lorem ipsum ', lineBreakAtChars: 8},
+    });
+
+    await expectAiCardSnapshot();
+});

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

@@ -15,6 +15,7 @@ export default {
 };
 
 type Args = {
+    selected?: boolean;
     headlineType: TagType;
     headline: string;
     pretitle: string;
@@ -33,6 +34,7 @@ type Args = {
 };
 
 export const Default: StoryComponent<Args> = ({
+    selected,
     headlineType,
     headline,
     pretitle,
@@ -77,6 +79,7 @@ export const Default: StoryComponent<Args> = ({
 
     return (
         <AdvancedDataCard
+            selected={selected}
             dataAttributes={{testid: 'advanced-data-card'}}
             stackingGroup={
                 stackingGroup ? (
@@ -113,6 +116,7 @@ export const Default: StoryComponent<Args> = ({
 
 Default.storyName = 'Advanced Data Card';
 Default.args = {
+    selected: undefined,
     headlineType: 'promo',
     headline: 'headline',
     pretitle: 'pretitle',
@@ -130,6 +134,7 @@ Default.args = {
     noSlotDivider: false,
 };
 Default.argTypes = {
+    selected: {type: 'boolean', options: [undefined, true, false], control: {type: 'select'}},
     headlineType: {
         options: ['promo', 'active', 'inactive', 'success', 'warning', 'error', 'info'],
         control: {type: 'select'},

package/src/community/__type_tests__/advanced-data-card-type-test.tsx

@@ -38,3 +38,6 @@ import {AdvancedDataCard} from '../advanced-data-card';
 <AdvancedDataCard title="title" onPress={() => {}} to="/" />;
 // @ts-expect-error href and to can't be used together
 <AdvancedDataCard title="title" href="/" to="/" />;
+
+<AdvancedDataCard title="Selected" selected />;
+<AdvancedDataCard title="Unselected" selected={false} />;

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

@@ -1,4 +1,4 @@
-import {createVar, style, styleVariants} from '@vanilla-extract/css';
+import {createVar, style, styleVariants, globalStyle} 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';
@@ -269,3 +269,28 @@ export const flexColumn = style({
     display: 'flex',
     flexDirection: 'column',
 });
+
+export const selectionTouchable = style({
+    borderRadius: `calc(${skinVars.borderRadii.container} - 1px)`,
+});
+
+// Draw the focus ring inside Boxed to prevent its overflow from clipping the native outline.
+globalStyle(`${selectionTouchable} > div:focus-visible`, {outline: 'none'});
+globalStyle(`${selectionTouchable} > div:focus-visible::before`, {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    border: '1.5px solid',
+    borderColor: skinVars.colors.controlActivated,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+    zIndex: 2,
+});
+
+const switchWidth = {default: 42, ios: 51};
+const controlSpacing = 16;
+
+export const switchSpace = styleVariants({
+    default: {width: switchWidth.default + controlSpacing, flexShrink: 0},
+    ios: {width: switchWidth.ios + controlSpacing, flexShrink: 0},
+});