@telefonica/mistica 16.67.0 → 16.68.0

package/src/button.tsx

@@ -403,52 +403,66 @@ const BaseButton = React.forwardRef<
         props.buttonType === 'linkDanger' && isDarkMode && variant === 'brand'
             ? 'linkDangerDark'
             : props.buttonType;
+    const buttonVariantClassName =
+        variant === 'media'
+            ? styles.overMediaButtonVariants[finalType]
+            : variant === 'brand'
+              ? styles.overBrandButtonVariants[finalType]
+              : variant === 'negative'
+                ? styles.overNegativeButtonVariants[finalType]
+                : styles.buttonVariants[finalType];
+    const stateClassNames = {
+        [styles.small]: props.small,
+        [styles.isLoading]: showSpinner,
+    };
+    const content = renderButtonContent({
+        showSpinner,
+        shouldRenderSpinner,
+        setShouldRenderSpinner,
+        children: props.children,
+        loadingText,
+        small: props.small,
+        StartIcon: props.StartIcon,
+        EndIcon: props.EndIcon,
+        withChevron: showChevron,
+        platformOverrides,
+    });
+    const buttonStyle: React.CSSProperties = {
+        ...applyCssVars({
+            [styles.buttonVars.minWidth]: props.small ? minWidthProps.small : minWidthProps.default,
+        }),
+
+        /**
+         * Setting bleed classes with style to override the margin:0 set by the Touchable component.
+         * If we set it using className, it may not work depending on the order in which the styles are applied.
+         */
+        ...(props.bleedLeft
+            ? {
+                  marginLeft: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingLeft.small : styles.buttonPaddingLeft.default}))`,
+              }
+            : undefined),
+        ...(props.bleedRight
+            ? {
+                  marginRight: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingRight.small : styles.buttonPaddingRight.default}))`,
+              }
+            : undefined),
+        ...(props.bleedY
+            ? {
+                  marginTop: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
+                  marginBottom: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
+              }
+            : undefined),
+
+        cursor: props.fake ? 'pointer' : undefined,
+        ...props.style,
+    };
 
     const commonProps = {
         ref,
-        className: classnames(
-            variant === 'media'
-                ? styles.overMediaButtonVariants[finalType]
-                : variant === 'brand'
-                  ? styles.overBrandButtonVariants[finalType]
-                  : variant === 'negative'
-                    ? styles.overNegativeButtonVariants[finalType]
-                    : styles.buttonVariants[finalType],
-            props.className,
-            {
-                [styles.small]: props.small,
-                [styles.isLoading]: showSpinner,
-            }
-        ),
-        style: {
-            ...applyCssVars({
-                [styles.buttonVars.minWidth]: props.small ? minWidthProps.small : minWidthProps.default,
-            }),
-
-            /**
-             * Setting bleed classes with style to override the margin:0 set by the Touchable component.
-             * If we set it using className, it may not work depending on the order in which the styles are applied.
-             */
-            ...(props.bleedLeft
-                ? {
-                      marginLeft: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingLeft.small : styles.buttonPaddingLeft.default}))`,
-                  }
-                : undefined),
-            ...(props.bleedRight
-                ? {
-                      marginRight: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingRight.small : styles.buttonPaddingRight.default}))`,
-                  }
-                : undefined),
-            ...(props.bleedY
-                ? {
-                      marginTop: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
-                      marginBottom: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
-                  }
-                : undefined),
-
-            cursor: props.fake ? 'pointer' : undefined,
-            ...props.style,
-        },
+        className: props.small
+            ? classnames(styles.smallTouchableArea, stateClassNames)
+            : classnames(buttonVariantClassName, props.className, stateClassNames),
+        style: props.small ? {cursor: props.fake ? 'pointer' : undefined} : buttonStyle,
         trackingEvent: props.trackingEvent ?? (props.trackEvent ? createDefaultTrackingEvent() : undefined),
         dataAttributes: props.dataAttributes,
         'aria-label': props['aria-label'],
@@ -460,22 +474,26 @@ const BaseButton = React.forwardRef<
         'aria-description': props['aria-description'],
         'aria-describedby': props['aria-describedby'],
         tabIndex: props.tabIndex,
-        children: renderButtonContent({
-            showSpinner,
-            shouldRenderSpinner,
-            setShouldRenderSpinner,
-            children: props.children,
-            loadingText,
-            small: props.small,
-            StartIcon: props.StartIcon,
-            EndIcon: props.EndIcon,
-            withChevron: showChevron,
-            platformOverrides,
-        }),
+        children: props.small ? (
+            <div className={classnames(buttonVariantClassName, styles.smallTouchableVisual)}>{content}</div>
+        ) : (
+            content
+        ),
         disabled: props.disabled || showSpinner || isFormSending,
         role: props.role,
     };
 
+    const containerClassName = classnames(styles.smallTouchableContainer, props.className);
+
+    const wrapInContainer = (touchable: React.ReactNode) =>
+        props.small ? (
+            <div className={containerClassName} style={buttonStyle}>
+                {touchable}
+            </div>
+        ) : (
+            touchable
+        );
+
     if (process.env.NODE_ENV !== 'production') {
         if (props.to === '' || props.href === '') {
             throw Error('to or href props are empty strings');
@@ -483,16 +501,18 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.fake) {
-        return <BaseTouchable maybe {...commonProps} />;
+        return wrapInContainer(<BaseTouchable maybe {...commonProps} />);
     }
 
     if (props.submit) {
         // using empty onPress handler so it gets rendered as a button
-        return <BaseTouchable type="submit" formId={formId} onPress={() => {}} {...commonProps} />;
+        return wrapInContainer(
+            <BaseTouchable type="submit" formId={formId} onPress={() => {}} {...commonProps} />
+        );
     }
 
     if (props.onPress) {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 onPress={(e) => {
@@ -507,7 +527,7 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.to || props.to === '') {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 to={props.to}
@@ -519,7 +539,7 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.href || props.href === '') {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 href={props.href}

package/src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx

@@ -12,7 +12,7 @@ test.each`
     ${'button and link'} | ${true}
 `('Advanced Data Card actions: $actions - footerImage: $footerImage', async ({actions, footerImage}) => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {actions, footerImage},
     });
@@ -30,7 +30,7 @@ test.each`
     ${3}
 `('Advanced Data Card extras: $extra', async ({extra}) => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {extra},
     });
@@ -43,7 +43,7 @@ test.each`
 
 test('Advanced Data Card extras: 3 no divider', async () => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {extra: 3, noExtraDivider: true},
     });
@@ -56,7 +56,7 @@ test('Advanced Data Card extras: 3 no divider', async () => {
 
 test('Advanced Data Card inside Carousel', async () => {
     await openStoryPage({
-        id: 'community-advanceddatacards-in-carousel--default',
+        id: 'community-vivo-advanceddatacards-in-carousel--default',
         device: 'DESKTOP',
     });
 
@@ -68,7 +68,7 @@ test('Advanced Data Card inside Carousel', async () => {
 
 test('Advanced Data Card without stackingGroup, with top actions and too long title', async () => {
     const page = await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {
             stackingGroup: false,

package/src/community/__screenshot_tests__/blocks-screenshot-test.tsx

@@ -1,7 +1,7 @@
 import {openStoryPage, screen} from '../../test-utils';
 
 test('Blocks Highlighted Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-highlighted-value', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-highlighted-value', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('highlighted-value-block');
 
@@ -11,7 +11,7 @@ test('Blocks Highlighted Value Block', async () => {
 });
 
 test('Blocks Information Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-information', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-information', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('information-block');
 
@@ -25,7 +25,7 @@ test.each`
     ${false}      | ${true}
 `('Blocks Progress Block', async ({stackingGroup}) => {
     await openStoryPage({
-        id: 'community-blocks--block-progress',
+        id: 'community-vivo-blocks--block-progress',
         device: 'MOBILE_IOS',
         args: {stackingGroup},
     });
@@ -39,7 +39,7 @@ test.each`
 
 test('Blocks Row Block', async () => {
     await openStoryPage({
-        id: 'community-blocks--block-row',
+        id: 'community-vivo-blocks--block-row',
         device: 'MOBILE_IOS',
         args: {description: 'This is a very long description to verify text alignment'},
     });
@@ -52,7 +52,7 @@ test('Blocks Row Block', async () => {
 });
 
 test('Blocks Simple Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-simple', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-simple', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('simple-block');
 
@@ -62,7 +62,7 @@ test('Blocks Simple Block', async () => {
 });
 
 test('Blocks Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-value', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-value', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('value-block');
 

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

@@ -5,7 +5,7 @@ import {Carousel} from '../../carousel';
 import Tag from '../../tag';
 
 export default {
-    title: 'Community/AdvancedDataCards in Carousel',
+    title: 'Community/Vivo/AdvancedDataCards in Carousel',
 };
 
 type Args = {href: boolean};

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

@@ -11,7 +11,7 @@ import type {HeadingType} from '../../utils/types';
 import type {TagType} from '../../tag';
 
 export default {
-    title: 'Community/AdvancedDataCard',
+    title: 'Community/Vivo/AdvancedDataCard',
 };
 
 type Args = {

package/src/community/__stories__/ai-card-story.tsx

@@ -6,7 +6,7 @@ import IconArtificialIntelligenceFilled from '../../generated/mistica-icons/icon
 import {vars} from '../../skins/skin-contract.css';
 
 export default {
-    title: 'Community/AiCard',
+    title: 'Community/Vivo/AiCard',
     parameters: {fullScreen: true},
 };
 

package/src/community/__stories__/blocks-story.tsx

@@ -14,7 +14,7 @@ import {vars} from '../../skins/skin-contract.css';
 import type {TagType} from '../..';
 
 export default {
-    title: 'Community/Blocks',
+    title: 'Community/Vivo/Blocks',
     parameters: {
         fullScreen: true,
     },

package/src/community/skins/cyber-skin.tsx

@@ -109,9 +109,9 @@ export const getCyberSkin = (): Skin => {
             backgroundDropZoneMediaHover: applyAlpha(palette.brand80, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.brand80, 0.4),
             skeletonWave: palette.grey100,
-            borderLow: palette.grey100,
-            border: palette.grey300,
-            borderHigh: palette.grey500,
+            borderLow: palette.grey15,
+            border: palette.grey100,
+            borderHigh: palette.grey400,
             borderSelected: palette.brand,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
@@ -481,7 +481,7 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
-            textActivated: palette.brand30,
+            textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,
             inputBorder: palette.grey400,
             inputBorderInverse: palette.grey400,
@@ -501,10 +501,10 @@ export const getCyberSkin = (): Skin => {
             controlActivatedBrand: palette.darkModeBrand,
             controlError: palette.red30,
             chevronIndicator: palette.grey400,
-            barTrack: palette.brandDark,
-            barTrackInverse: palette.brandDark,
-            barTrackNegative: palette.brandDark,
-            barTrackBrand: palette.brandDark,
+            barTrack: palette.grey800,
+            barTrackInverse: palette.grey800,
+            barTrackNegative: palette.grey800,
+            barTrackBrand: palette.grey800,
             loadingBar: palette.darkModeBrand,
             loadingBarBackground: palette.grey500,
             toggleAndroidInactive: palette.grey100,

package/src/focus-trap.tsx

@@ -6,10 +6,18 @@ type Props = {
     className?: string;
     disabled?: boolean;
     group?: string;
+    returnFocus?: React.ComponentProps<typeof ReactFocusLock>['returnFocus'];
 };
 
-const FocusTrap = ({children, disabled, className, group}: Props): JSX.Element => (
-    <ReactFocusLock noFocusGuards disabled={disabled} className={className} group={group}>
+// TODO https://github.com/Telefonica/mistica-web/issues/1589 unify focus-restoration logic with consumers that restore focus manually (e.g. Drawer's useRestoreFocus)
+const FocusTrap = ({children, disabled, className, group, returnFocus = true}: Props): JSX.Element => (
+    <ReactFocusLock
+        noFocusGuards
+        disabled={disabled}
+        className={className}
+        group={group}
+        returnFocus={returnFocus}
+    >
         {children}
     </ReactFocusLock>
 );

package/src/menu.tsx

@@ -153,7 +153,6 @@ export const MenuItem = ({
                 onChange={() => {
                     if (isMenuOpen && itemIndex !== null) {
                         onPress?.(itemIndex);
-                        closeMenu();
                     }
                 }}
                 disabled={disabled}

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 = '16.67.0' as string;
+export const PACKAGE_VERSION = '16.68.0' as string;

package/src/community/__stories__/example-component-story.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import ExampleComponent from '../example-component';
-
-export default {
-    title: 'Community/ExampleComponent',
-    parameters: {
-        fullScreen: true,
-    },
-};
-
-export const Default: StoryComponent = () => {
-    return <ExampleComponent>Example story</ExampleComponent>;
-};
-
-Default.storyName = 'ExampleComponent';