@telefonica/mistica 17.5.0 → 17.6.0

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

@@ -10,17 +10,19 @@ 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 Touchable from '../touchable';
 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 {TopActions, useControlState, CardWithControl} from '../card-internal';
+import {useRadioContext} from '../radio-button';
+import * as cardStyles from '../card-internal.css';
 
-import type {CardAction} from '../card-internal';
+import type {CardSelectionProps, CardAction} from '../card-internal';
 import type {PressHandler} from '../touchable';
 import type {ExclusifyUnion} from '../utils/utility-types';
 import type StackingGroup from '../stacking-group';
@@ -55,7 +57,11 @@ type TouchableProps = {
       }
 >;
 type TouchableCard<T> = T & TouchableProps;
-type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
+type CardInteractionProps<T> = ExclusifyUnion<
+    | (TouchableCard<T> & {selected?: boolean})
+    | (T & {selected?: boolean})
+    | (Omit<T, 'actions' | 'onClose'> & CardSelectionProps)
+>;
 
 type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
@@ -265,7 +271,7 @@ type AllowedSlot =
     | typeof SimpleBlock
     | typeof ValueBlock;
 
-type AdvancedDataCardProps = MaybeTouchableCard<{
+type AdvancedDataCardProps = CardInteractionProps<{
     stackingGroup?: RendersNullableElement<typeof StackingGroup>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
@@ -295,6 +301,10 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
 export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCardProps>(
     (
         {
+            selected,
+            checkbox,
+            switch: switchProps,
+            radioValue,
             stackingGroup,
             headline,
             pretitle,
@@ -326,14 +336,24 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         },
         ref
     ) => {
-        const isTouchable = !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
-
+        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 {isIos} = useTheme();
+        const isTouchable =
+            isSelectable || !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
         const footerProps = {button, footerImage, footerText, footerTextLinesMax, buttonLink};
 
         const hasFooter = !!button || !!footerImage || !!footerText || !!buttonLink;
         const hasSlots = !!slot?.length;
 
-        const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
+        const topActionsCount = isSelectable ? 1 : (actions?.length || 0) + (onClose ? 1 : 0);
 
         const {text: headlineText, ref: headlineRef} = useInnerText();
         const {text: slotText, ref: slotRef} = useInnerText();
@@ -347,79 +367,109 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                 .filter(Boolean)
                 .join(' ');
 
+        const content = (
+            <>
+                {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
+
+                <div
+                    className={classNames(
+                        styles.cardContentStyle,
+                        !hasFooter && !hasSlots ? styles.minHeight : ''
+                    )}
+                    aria-hidden={isTouchable && !isSelectable}
+                >
+                    <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={classNames(
+                                        styles.topActionsWithoutIcon,
+                                        switchProps && styles.switchSpace[isIos ? 'ios' : 'default']
+                                    )}
+                                />
+                            )}
+                        </Inline>
+                    </Box>
+                </div>
+                <div style={{flexGrow: 1}} />
+                {hasSlots && (
+                    <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable && !isSelectable}>
+                        {slot.map((item, index) => {
+                            return (
+                                <div key={index}>
+                                    <div className={styles.paddingX}>{item}</div>
+
+                                    {index + 1 !== slot.length && (
+                                        <Box paddingY={slotDividerPadding}>
+                                            {!noSlotDivider && <Divider />}
+                                        </Box>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </>
+        );
+
         return (
             <section
-                className={styles.container}
+                className={classNames(
+                    styles.container,
+                    isSelected && cardStyles.selectionOutline,
+                    isSelected && cardStyles.selectionOutlineColor.default
+                )}
                 {...getPrefixedDataAttributes({testid: 'AdvancedDataCard', ...dataAttributes})}
                 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 && !hasSlots ? styles.minHeight : ''
-                            )}
-                            aria-hidden={isTouchable}
+                    {isSelectable ? (
+                        <CardWithControl
+                            maybe
+                            {...(checkbox
+                                ? {checkbox}
+                                : switchProps
+                                  ? {switch: switchProps}
+                                  : {radioValue: radioValue ?? ''})}
+                            checked={isChecked}
+                            onChange={toggleChecked}
+                            aria-label={ariaLabel}
+                            className={classNames(styles.touchable, styles.selectionTouchable)}
                         >
-                            <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}} />
-                        {hasSlots && (
-                            <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable}>
-                                {slot.map((item, index) => {
-                                    return (
-                                        <div key={index}>
-                                            <div className={styles.paddingX}>{item}</div>
-
-                                            {index + 1 !== slot.length && (
-                                                <Box paddingY={slotDividerPadding}>
-                                                    {!noSlotDivider && <Divider />}
-                                                </Box>
-                                            )}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        )}
-                    </Touchable>
+                            {content}
+                        </CardWithControl>
+                    ) : (
+                        <Touchable
+                            maybe
+                            {...touchableProps}
+                            aria-label={isTouchable ? ariaLabel : undefined}
+                            className={styles.touchable}
+                        >
+                            {content}
+                        </Touchable>
+                    )}
                     {hasFooter && <CardFooter {...footerProps} />}
                 </Boxed>
                 <TopActions actions={actions} onClose={onClose} />

package/src/community/ai-card.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import {BaseTouchable} from '../touchable';
-import {Text3} from '../text';
+import {Text2} from '../text';
 import {vars} from '../skins/skin-contract.css';
 import {useIsInViewport} from '../hooks';
 import {isClientSide} from '../utils/environment';
@@ -201,7 +201,7 @@ const AiCard = ({
                 </span>
             )}
             <div ref={textLineRef} className={styles.textLine} aria-hidden="true" style={textLineStyle}>
-                <Text3 regular color={vars.colors.textPrimary} as="span">
+                <Text2 regular color={vars.colors.textPrimary} as="span">
                     <span className={styles.textWrapper}>
                         <span className={styles.ghost}>
                             {text}
@@ -222,7 +222,7 @@ const AiCard = ({
                             )}
                         </span>
                     </span>
-                </Text3>
+                </Text2>
             </div>
         </BaseTouchable>
     );

package/src/index.tsx

@@ -972,6 +972,9 @@ export {default as IconDisturbRegular} from './generated/mistica-icons/icon-dist
 export {default as IconDnaFilled} from './generated/mistica-icons/icon-dna-filled';
 export {default as IconDnaLight} from './generated/mistica-icons/icon-dna-light';
 export {default as IconDnaRegular} from './generated/mistica-icons/icon-dna-regular';
+export {default as IconDocumentInformationFilled} from './generated/mistica-icons/icon-document-information-filled';
+export {default as IconDocumentInformationLight} from './generated/mistica-icons/icon-document-information-light';
+export {default as IconDocumentInformationRegular} from './generated/mistica-icons/icon-document-information-regular';
 export {default as IconDocumentOtherFilled} from './generated/mistica-icons/icon-document-other-filled';
 export {default as IconDocumentOtherLight} from './generated/mistica-icons/icon-document-other-light';
 export {default as IconDocumentOtherRegular} from './generated/mistica-icons/icon-document-other-regular';
@@ -1393,6 +1396,9 @@ export {default as IconInternetPendriveFilled} from './generated/mistica-icons/i
 export {default as IconInternetPendriveLight} from './generated/mistica-icons/icon-internet-pendrive-light';
 export {default as IconInternetPendriveRegular} from './generated/mistica-icons/icon-internet-pendrive-regular';
 export {default as IconInternetRegular} from './generated/mistica-icons/icon-internet-regular';
+export {default as IconInternetRoamingFilled} from './generated/mistica-icons/icon-internet-roaming-filled';
+export {default as IconInternetRoamingLight} from './generated/mistica-icons/icon-internet-roaming-light';
+export {default as IconInternetRoamingRegular} from './generated/mistica-icons/icon-internet-roaming-regular';
 export {default as IconIntranetFilled} from './generated/mistica-icons/icon-intranet-filled';
 export {default as IconIntranetLight} from './generated/mistica-icons/icon-intranet-light';
 export {default as IconIntranetRegular} from './generated/mistica-icons/icon-intranet-regular';
@@ -1585,6 +1591,9 @@ export {default as IconMobileDeviceRegular} from './generated/mistica-icons/icon
 export {default as IconMobileEuroFilled} from './generated/mistica-icons/icon-mobile-euro-filled';
 export {default as IconMobileEuroLight} from './generated/mistica-icons/icon-mobile-euro-light';
 export {default as IconMobileEuroRegular} from './generated/mistica-icons/icon-mobile-euro-regular';
+export {default as IconMobileInformationFilled} from './generated/mistica-icons/icon-mobile-information-filled';
+export {default as IconMobileInformationLight} from './generated/mistica-icons/icon-mobile-information-light';
+export {default as IconMobileInformationRegular} from './generated/mistica-icons/icon-mobile-information-regular';
 export {default as IconMobilePauseFilled} from './generated/mistica-icons/icon-mobile-pause-filled';
 export {default as IconMobilePauseLight} from './generated/mistica-icons/icon-mobile-pause-light';
 export {default as IconMobilePauseRegular} from './generated/mistica-icons/icon-mobile-pause-regular';
@@ -1967,6 +1976,9 @@ export {default as IconSdFilled} from './generated/mistica-icons/icon-sd-filled'
 export {default as IconSdLight} from './generated/mistica-icons/icon-sd-light';
 export {default as IconSdRegular} from './generated/mistica-icons/icon-sd-regular';
 export {default as IconSeaLight} from './generated/mistica-icons/icon-sea-light';
+export {default as IconSearchAiFilled} from './generated/mistica-icons/icon-search-ai-filled';
+export {default as IconSearchAiLight} from './generated/mistica-icons/icon-search-ai-light';
+export {default as IconSearchAiRegular} from './generated/mistica-icons/icon-search-ai-regular';
 export {default as IconSearchCloudFilled} from './generated/mistica-icons/icon-search-cloud-filled';
 export {default as IconSearchCloudLight} from './generated/mistica-icons/icon-search-cloud-light';
 export {default as IconSearchCloudRegular} from './generated/mistica-icons/icon-search-cloud-regular';

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.5.0' as string;
+export const PACKAGE_VERSION = '17.6.0' as string;

package/src/radio-button.tsx

@@ -44,6 +44,7 @@ type PropsRender = {
     }) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -54,6 +55,7 @@ type PropsChildren = {
     children?: React.ReactNode;
     render?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -62,6 +64,7 @@ const RadioButton = ({
     value,
     id,
     dataAttributes,
+    className,
     'aria-labelledby': ariaLabelledby,
     'aria-label': ariaLabel,
     ...rest
@@ -171,7 +174,10 @@ const RadioButton = ({
                 }
             }}
             onKeyDown={disabled ? undefined : handleKeyDown}
-            className={disabled ? styles.radioButtonContainerDisabled : styles.radioButton}
+            className={classnames(
+                disabled ? styles.radioButtonContainerDisabled : styles.radioButton,
+                className
+            )}
             {...getPrefixedDataAttributes({testid: 'RadioButton', ...dataAttributes})}
         >
             {rest.render ? (

package/src/switch-component.tsx

@@ -6,6 +6,7 @@ https://github.com/storybookjs/storybook/issues/11980
 
 'use client';
 import * as React from 'react';
+import classnames from 'classnames';
 import {debounce} from './utils/helpers';
 import {SPACE} from './utils/keys';
 import {useControlProps} from './form-context';
@@ -36,6 +37,7 @@ type PropsRender = {
     'aria-labelledby'?: string;
     'aria-label'?: string;
     dataAttributes?: DataAttributes;
+    className?: string;
 };
 
 type PropsChildren = {
@@ -49,6 +51,7 @@ type PropsChildren = {
     'aria-labelledby'?: string;
     'aria-label'?: string;
     dataAttributes?: DataAttributes;
+    className?: string;
 };
 
 const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
@@ -155,15 +158,16 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
             onKeyDown={disabled ? undefined : handleKeyDown}
             tabIndex={disabled ? undefined : 0}
             ref={focusableRef}
-            className={
+            className={classnames(
                 props.render
                     ? disabled
                         ? styles.containerDisabledFullWidth
                         : styles.containerFullWidth
                     : disabled
                       ? styles.containerDisabled
-                      : styles.container
-            }
+                      : styles.container,
+                props.className
+            )}
             aria-disabled={disabled}
             aria-label={props['aria-label']}
             aria-labelledby={props['aria-label'] ? undefined : labelId}