@telefonica/mistica 17.0.0 → 17.1.0

package/src/boxed.tsx

@@ -6,8 +6,10 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './boxed.css';
 import {applyCssVars} from './utils/css';
+import {useTheme} from './hooks';
 
 import type {Variant} from './theme-variant-context';
+import type {ComponentPropertiesConfig} from './skins/types';
 import type {ByBreakpoint, DataAttributes} from './utils/types';
 
 type Props = {
@@ -34,10 +36,15 @@ type InternalProps = {
     overflow?: 'hidden' | 'visible';
 };
 
-const getBorderStyle = (internalVariant: Variant, externalVariant: Variant) => {
+const getBorderStyle = (
+    internalVariant: Variant,
+    externalVariant: Variant,
+    showBoxedBorder: ComponentPropertiesConfig['showBoxedBorder']
+) => {
     if (
         internalVariant === 'default' &&
-        (externalVariant === 'default' || externalVariant === 'alternative')
+        (externalVariant === 'default' || externalVariant === 'alternative') &&
+        showBoxedBorder[externalVariant]
     ) {
         return styles.boxBorder;
     }
@@ -95,6 +102,7 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
     ) => {
         const externalVariant = normalizeVariant(useThemeVariant());
         const internalVariant = normalizeVariant(variant ?? 'default');
+        const {componentProperties} = useTheme();
 
         return (
             <div
@@ -128,7 +136,7 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
                 className={classnames(
                     className,
                     styles.boxed,
-                    getBorderStyle(internalVariant, externalVariant),
+                    getBorderStyle(internalVariant, externalVariant, componentProperties.showBoxedBorder),
                     {
                         [styles.desktopOnly]: desktopOnly,
                         [styles.overflowHidden]: overflow !== 'visible',

package/src/button.css.ts

@@ -454,6 +454,42 @@ const dangerLinkOverNegativeDark: ComplexStyleRule = [
     interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed}}),
 ];
 
+const neutralLink: ComplexStyleRule = [
+    button,
+    sprinkles({
+        color: vars.colors.textLinkNeutral,
+        background: 'transparent',
+    }),
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkNeutralBackgroundPressed}}),
+];
+
+const neutralLinkOverBrand: ComplexStyleRule = [
+    button,
+    sprinkles({
+        color: vars.colors.textLinkNeutralBrand,
+        background: vars.colors.buttonLinkNeutralBackgroundBrand,
+    }),
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkNeutralBackgroundBrandPressed}}),
+];
+
+const neutralLinkOverNegative: ComplexStyleRule = [
+    button,
+    sprinkles({
+        color: vars.colors.textLinkNeutralNegative,
+        background: vars.colors.buttonLinkNeutralBackgroundNegative,
+    }),
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkNeutralBackgroundNegativePressed}}),
+];
+
+const neutralLinkMedia: ComplexStyleRule = [
+    button,
+    sprinkles({
+        color: vars.colors.textLinkNeutralMedia,
+        background: vars.colors.buttonLinkNeutralBackgroundMedia,
+    }),
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkNeutralBackgroundMediaPressed}}),
+];
+
 export const buttonVariants = styleVariants({
     primary: lightPrimary,
     secondary: lightSecondary,
@@ -461,6 +497,7 @@ export const buttonVariants = styleVariants({
     link: defaultLink,
     linkDanger: dangerLink,
     linkDangerDark: dangerLink,
+    linkNeutral: neutralLink,
 });
 
 export const overBrandButtonVariants = styleVariants({
@@ -470,6 +507,7 @@ export const overBrandButtonVariants = styleVariants({
     link: defaultLinkOverBrand,
     linkDanger: dangerLinkOverBrand,
     linkDangerDark: dangerLinkOverBrandDark,
+    linkNeutral: neutralLinkOverBrand,
 });
 
 export const overNegativeButtonVariants = styleVariants({
@@ -479,6 +517,7 @@ export const overNegativeButtonVariants = styleVariants({
     link: defaultLinkOverNegative,
     linkDanger: dangerLinkOverNegative,
     linkDangerDark: dangerLinkOverNegativeDark,
+    linkNeutral: neutralLinkOverNegative,
 });
 
 export const overMediaButtonVariants = styleVariants({
@@ -488,4 +527,5 @@ export const overMediaButtonVariants = styleVariants({
     link: defaultLinkMedia,
     linkDanger: dangerLinkMedia,
     linkDangerDark: dangerLinkMedia,
+    linkNeutral: neutralLinkMedia,
 });

package/src/button.tsx

@@ -269,7 +269,7 @@ const renderButtonContent = ({
     );
 };
 
-type ButtonType = 'primary' | 'secondary' | 'danger' | 'link' | 'linkDanger';
+type ButtonType = 'primary' | 'secondary' | 'danger' | 'link' | 'linkDanger' | 'linkNeutral';
 
 interface CommonProps {
     children: React.ReactNode;
@@ -324,12 +324,15 @@ type ButtonProps = ExclusifyUnion<
     FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps
 >;
 
+export type ButtonLinkType = 'default' | 'danger' | 'neutral';
+
 type ButtonLinkProps = ExclusifyUnion<
     FakeButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps
 > & {
     bleedLeft?: boolean;
     bleedRight?: boolean;
     bleedY?: boolean;
+    type?: ButtonLinkType;
 };
 
 const BaseButton = React.forwardRef<
@@ -377,6 +380,10 @@ const BaseButton = React.forwardRef<
                 component_type = 'danger_link';
                 action = eventActions.linkTapped;
                 break;
+            case 'linkNeutral':
+                component_type = 'neutral_link';
+                action = eventActions.linkTapped;
+                break;
             default:
                 component_type = `${props.buttonType}_button`;
                 action = `${props.buttonType}_button_tapped`;
@@ -563,22 +570,25 @@ export const ButtonLink = React.forwardRef<
     ButtonLinkProps & {
         withChevron?: boolean;
     }
->(({dataAttributes, className, ...props}, ref) => {
+>(({dataAttributes, className, type = 'default', ...props}, ref) => {
+    const buttonType = type === 'danger' ? 'linkDanger' : type === 'neutral' ? 'linkNeutral' : 'link';
+
     return (
         <BaseButton
             dataAttributes={{testid: 'ButtonLink', ...dataAttributes}}
             className={classnames(className, {[styles.smallLink]: props.small})}
             {...props}
             ref={ref}
-            buttonType="link"
+            buttonType={buttonType}
         />
     );
 });
 
+/** @deprecated Use ButtonLink with type="danger" instead. */
 export const ButtonLinkDanger = React.forwardRef<TouchableElement, ButtonLinkProps>(
     ({dataAttributes, className, ...props}, ref) => {
         return (
-            <BaseButton
+            <ButtonLink
                 dataAttributes={{
                     testid: 'ButtonLinkDanger',
                     ...dataAttributes,
@@ -587,7 +597,7 @@ export const ButtonLinkDanger = React.forwardRef<TouchableElement, ButtonLinkPro
                 {...props}
                 withChevron={false}
                 ref={ref}
-                buttonType="linkDanger"
+                type="danger"
             />
         );
     }

package/src/callout.tsx

@@ -5,7 +5,7 @@ import Inline from './inline';
 import Box from './box';
 import {useTheme} from './hooks';
 import {ThemeVariant, normalizeVariant, useThemeVariant} from './theme-variant-context';
-import {Text2, Text3} from './text';
+import {Text1, Text2, Text3} from './text';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import {IconButton} from './icon-button';
 import classNames from 'classnames';
@@ -30,6 +30,7 @@ type Props = {
         | string;
     titleAs?: HeadingType;
     description: string;
+    small?: boolean;
     onClose?: () => void;
     closeButtonLabel?: string;
     asset?: React.ReactElement;
@@ -46,6 +47,7 @@ const Callout = ({
     title,
     titleAs = 'h2',
     description,
+    small = false,
     asset,
     onClose,
     closeButtonLabel,
@@ -68,6 +70,9 @@ const Callout = ({
 
     const normalizedVariant = normalizeVariant(variant);
 
+    const TitleComponent = small ? Text2 : Text3;
+    const DescriptionComponent = small ? Text1 : Text2;
+
     return (
         <section
             className={classNames(
@@ -91,22 +96,22 @@ const Callout = ({
                     <Stack space={16}>
                         <Inline fullWidth alignItems="flex-start" space="between">
                             <Stack space={4}>
-                                <Text3
+                                <TitleComponent
                                     as={titleElementType}
                                     regular
                                     dataAttributes={{testid: 'title'}}
                                     aria-label={titleAriaLabel}
                                 >
                                     {titleText}
-                                </Text3>
-                                <Text2
+                                </TitleComponent>
+                                <DescriptionComponent
                                     as="p"
                                     regular
                                     color={vars.colors.textSecondary}
                                     dataAttributes={{testid: 'description'}}
                                 >
                                     {description}
-                                </Text2>
+                                </DescriptionComponent>
                             </Stack>
                             {onClose && (
                                 // Create empty div in order to fill space that iconButton occupies.

package/src/card-cover.tsx

@@ -30,6 +30,7 @@ type CoverCardProps = {
     width?: number | string;
     height?: number | string;
     asset?: React.ReactElement;
+    imageAlt?: string;
     imageSrc?: string;
     imageSrcSet?: string;
     videoSrc?: VideoSource;

package/src/card-internal.tsx

@@ -337,6 +337,7 @@ export type BackgroundImageOrVideoProps = {
     video?: React.ReactNode;
     src?: string;
     srcSet?: string;
+    alt?: string;
     backgroundVariant: Variant;
 };
 
@@ -344,6 +345,7 @@ const BackgroundImageOrVideo = ({
     video,
     src,
     srcSet,
+    alt,
     backgroundVariant,
 }: BackgroundImageOrVideoProps): JSX.Element => {
     return (
@@ -365,7 +367,7 @@ const BackgroundImageOrVideo = ({
                         height="100%"
                         src={src || ''}
                         srcSet={srcSet}
-                        alt=""
+                        alt={alt}
                     />
                 )}
             </div>
@@ -1482,6 +1484,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
                         video={video}
                         src={imageSrc}
                         srcSet={imageSrcSet}
+                        alt={imageAlt}
                         backgroundVariant={backgroundVariant}
                     />
                 )}

package/src/chip.css.ts

@@ -172,7 +172,7 @@ export const interactiveChipOverlay = style([
 
 export const icon = style([
     sprinkles({paddingRight: 4}),
-    {color: vars.colors.neutralMedium, paddingRight: 4},
+    {color: vars.colors.neutralMedium, paddingRight: 4, display: 'flex'},
 ]);
 export const iconNavigation = style([
     sprinkles({paddingRight: 4}),
@@ -186,7 +186,7 @@ export const iconNavigationOverBrand = style([
 
 export const iconActive = style([
     sprinkles({paddingRight: 4}),
-    {color: vars.colors.controlActivated, paddingRight: 4},
+    {color: vars.colors.controlActivated, paddingRight: 4, display: 'flex'},
 ]);
 
 export const leftPadding = styleVariants({

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

@@ -98,6 +98,15 @@ export const getCyberSkin = (): Skin => {
             backgroundSkeletonBrand: palette.brand70,
             navigationBarBackground: palette.brand,
             backgroundAlternative: palette.brand10,
+            backgroundSelected: applyAlpha(palette.brand, 0.15),
+            backgroundSelectedHover: applyAlpha(palette.brand, 0.2),
+            backgroundSelectedPressed: applyAlpha(palette.brand, 0.25),
+            backgroundSelectedBrand: palette.brand10,
+            backgroundSelectedBrandHover: palette.brand15,
+            backgroundSelectedBrandPressed: palette.brand15,
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.1),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.12),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.15),
             backgroundBrandTop: palette.brand,
             backgroundBrandBottom: palette.brand,
             backgroundDropZoneHover: applyAlpha(palette.brand70, 0.05),
@@ -132,6 +141,13 @@ export const getCyberSkin = (): Skin => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: palette.brand10,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.12),
             buttonPrimaryBackground: palette.black,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -195,6 +211,11 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red50,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.brand30,
+            textLinkNeutral: palette.black,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
+            textLinkNeutralAlternative: palette.grey500,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.brand70,
             textBrand: palette.brand70,
             inputBorder: palette.grey400,
@@ -1112,6 +1133,17 @@ export const getCyberSkin = (): Skin => {
                     desktop: 40,
                 },
             },
+            boxedDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16,
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16,
+                },
+            },
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;

package/src/icon-button.css.ts

@@ -353,7 +353,7 @@ export const iconContainerSize = {
     small: `calc(${iconSize.small} + 12px)`,
 };
 
-const bleedArea = {
+export const bleedArea = {
     default: `calc((${iconContainerSize.default} - ${iconSize.default}) / 2)`,
     small: `calc((${iconContainerSize.small} - ${iconSize.small}) / 2)`,
 };

package/src/index.tsx

@@ -10,6 +10,7 @@ export {default as FadeIn} from './fade-in';
 
 export {AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion} from './accordion';
 export {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger} from './button';
+export type {ButtonLinkType} from './button';
 export {default as ButtonGroup} from './button-group';
 export {default as ButtonLayout} from './button-layout';
 export {default as Counter} from './counter';
@@ -630,13 +631,22 @@ export {default as IconCareLight} from './generated/mistica-icons/icon-care-ligh
 export {default as IconCareMobileFilled} from './generated/mistica-icons/icon-care-mobile-filled';
 export {default as IconCareMobileLight} from './generated/mistica-icons/icon-care-mobile-light';
 export {default as IconCareMobileRegular} from './generated/mistica-icons/icon-care-mobile-regular';
+export {default as IconCareMoneyFilled} from './generated/mistica-icons/icon-care-money-filled';
+export {default as IconCareMoneyLight} from './generated/mistica-icons/icon-care-money-light';
+export {default as IconCareMoneyRegular} from './generated/mistica-icons/icon-care-money-regular';
 export {default as IconCarePetFilled} from './generated/mistica-icons/icon-care-pet-filled';
 export {default as IconCarePetLight} from './generated/mistica-icons/icon-care-pet-light';
 export {default as IconCarePetRegular} from './generated/mistica-icons/icon-care-pet-regular';
 export {default as IconCareRegular} from './generated/mistica-icons/icon-care-regular';
+export {default as IconCareSearchMoneyFilled} from './generated/mistica-icons/icon-care-search-money-filled';
+export {default as IconCareSearchMoneyLight} from './generated/mistica-icons/icon-care-search-money-light';
+export {default as IconCareSearchMoneyRegular} from './generated/mistica-icons/icon-care-search-money-regular';
 export {default as IconCareShieldFilled} from './generated/mistica-icons/icon-care-shield-filled';
 export {default as IconCareShieldLight} from './generated/mistica-icons/icon-care-shield-light';
 export {default as IconCareShieldRegular} from './generated/mistica-icons/icon-care-shield-regular';
+export {default as IconCareShoppingFilled} from './generated/mistica-icons/icon-care-shopping-filled';
+export {default as IconCareShoppingLight} from './generated/mistica-icons/icon-care-shopping-light';
+export {default as IconCareShoppingRegular} from './generated/mistica-icons/icon-care-shopping-regular';
 export {default as IconCareWinFilled} from './generated/mistica-icons/icon-care-win-filled';
 export {default as IconCareWinLight} from './generated/mistica-icons/icon-care-win-light';
 export {default as IconCareWinRegular} from './generated/mistica-icons/icon-care-win-regular';
@@ -1775,6 +1785,9 @@ export {default as IconPinOffFilled} from './generated/mistica-icons/icon-pin-of
 export {default as IconPinOffLight} from './generated/mistica-icons/icon-pin-off-light';
 export {default as IconPinOffRegular} from './generated/mistica-icons/icon-pin-off-regular';
 export {default as IconPinRegular} from './generated/mistica-icons/icon-pin-regular';
+export {default as IconPixFilled} from './generated/mistica-icons/icon-pix-filled';
+export {default as IconPixLight} from './generated/mistica-icons/icon-pix-light';
+export {default as IconPixRegular} from './generated/mistica-icons/icon-pix-regular';
 export {default as IconPlaneFilled} from './generated/mistica-icons/icon-plane-filled';
 export {default as IconPlaneLight} from './generated/mistica-icons/icon-plane-light';
 export {default as IconPlaneRegular} from './generated/mistica-icons/icon-plane-regular';
@@ -2300,6 +2313,9 @@ export {default as IconUnlinkRegular} from './generated/mistica-icons/icon-unlin
 export {default as IconUserAccountFilled} from './generated/mistica-icons/icon-user-account-filled';
 export {default as IconUserAccountLight} from './generated/mistica-icons/icon-user-account-light';
 export {default as IconUserAccountRegular} from './generated/mistica-icons/icon-user-account-regular';
+export {default as IconUserScanFilled} from './generated/mistica-icons/icon-user-scan-filled';
+export {default as IconUserScanLight} from './generated/mistica-icons/icon-user-scan-light';
+export {default as IconUserScanRegular} from './generated/mistica-icons/icon-user-scan-regular';
 export {default as IconUserSupportFilled} from './generated/mistica-icons/icon-user-support-filled';
 export {default as IconUserSupportLight} from './generated/mistica-icons/icon-user-support-light';
 export {default as IconUserSupportRegular} from './generated/mistica-icons/icon-user-support-regular';

package/src/inline.css.ts

@@ -11,6 +11,9 @@ const verticalSpaceMobile = createVar();
 const verticalSpaceTablet = createVar();
 const verticalSpaceDesktop = createVar();
 
+const childAlignItems = createVar();
+const childDisplay = createVar();
+
 export const vars = {
     space,
     spaceMobile,
@@ -20,6 +23,8 @@ export const vars = {
     verticalSpaceMobile,
     verticalSpaceTablet,
     verticalSpaceDesktop,
+    childAlignItems,
+    childDisplay,
 };
 
 export const marginInline = style({
@@ -81,10 +86,12 @@ export const fullWidth = style({
 export const wrap = style({
     display: 'inline-flex',
     flexWrap: 'wrap',
+    verticalAlign: 'bottom',
 });
 
 export const noFullWidth = style({
     display: ['inline-flex', 'inline-grid'],
+    verticalAlign: 'bottom',
 });
 
 export const stringSpace = style({
@@ -122,6 +129,10 @@ globalStyle(`${inline} > div`, {
             padding: 0, // restore
             // negative gap is not supported in flexbox, so we use negative margins instead
             margin: `0 0 0 calc(min(${space}, 0px))`,
+            // Propagate alignItems to wrapper divs so icon SVGs (inline elements) are
+            // correctly centered within each wrapper, not just the wrappers themselves.
+            display: fallbackVar(childDisplay, 'block'),
+            alignItems: fallbackVar(childAlignItems, 'stretch'),
         },
     },
 });

package/src/inline.tsx

@@ -22,7 +22,8 @@ const calcSpaceValue = (space: NumericSpace | FlexSpace) => {
 
 const calcInlineVars = (
     space: FlexSpace | ByBreakpoint<NumericSpace>,
-    verticalSpace?: ByBreakpoint<NumericSpace>
+    verticalSpace?: ByBreakpoint<NumericSpace>,
+    alignItems?: Props['alignItems']
 ) => {
     const calcSpaceVars = (
         space: FlexSpace | ByBreakpoint<NumericSpace>,
@@ -50,21 +51,28 @@ const calcInlineVars = (
         desktop: styles.vars.spaceDesktop,
     });
 
-    if (verticalSpace) {
-        const verticalSpaceVars = calcSpaceVars(verticalSpace, {
-            default: styles.vars.verticalSpace,
-            mobile: styles.vars.verticalSpaceMobile,
-            tablet: styles.vars.verticalSpaceTablet,
-            desktop: styles.vars.verticalSpaceDesktop,
-        });
+    const verticalSpaceVars = verticalSpace
+        ? calcSpaceVars(verticalSpace, {
+              default: styles.vars.verticalSpace,
+              mobile: styles.vars.verticalSpaceMobile,
+              tablet: styles.vars.verticalSpaceTablet,
+              desktop: styles.vars.verticalSpaceDesktop,
+          })
+        : {};
 
-        return {
-            ...spaceVars,
-            ...verticalSpaceVars,
-        };
-    }
+    const alignItemsVars =
+        alignItems !== undefined && alignItems !== 'stretch'
+            ? {
+                  [styles.vars.childDisplay]: 'flex',
+                  [styles.vars.childAlignItems]: alignItems,
+              }
+            : {};
 
-    return spaceVars;
+    return {
+        ...spaceVars,
+        ...verticalSpaceVars,
+        ...alignItemsVars,
+    };
 };
 
 type Props = {
@@ -131,7 +139,10 @@ const Inline = ({
                     : styles.marginInline,
                 shouldExpand && styles.expand
             )}
-            style={{...applyCssVars(calcInlineVars(space, verticalSpace)), alignItems}}
+            style={{
+                ...applyCssVars(calcInlineVars(space, verticalSpace, alignItems)),
+                alignItems,
+            }}
             role={role}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}