@telefonica/mistica 17.0.0 → 17.2.0

package/src/credit-card-fields.tsx

@@ -18,6 +18,7 @@ type CreditCardFieldsProps = {
     cvvFieldName?: string;
     acceptedCards?: CardOptions;
     children?: void;
+    small?: boolean;
 };
 
 const CreditCardFields = ({
@@ -25,6 +26,7 @@ const CreditCardFields = ({
     expirationFieldName = 'ccExp',
     cvvFieldName = 'ccCvv',
     acceptedCards,
+    small,
 }: CreditCardFieldsProps): JSX.Element => {
     const {values} = useForm();
     const {texts, t} = useTheme();
@@ -36,17 +38,20 @@ const CreditCardFields = ({
                 acceptedCards={acceptedCards}
                 name={numberFieldName}
                 label={texts.formCreditCardNumberLabel || t(tokens.formCreditCardNumberLabel)}
+                small={small}
             />
             <DoubleField layout="60/40">
                 <CreditCardExpirationField
                     name={expirationFieldName}
                     label={texts.formCreditCardExpirationLabel || t(tokens.formCreditCardExpirationLabel)}
+                    small={small}
                 />
                 <CvvField
                     acceptedCards={acceptedCards}
                     name={cvvFieldName}
                     label={texts.formCreditCardCvvLabel || t(tokens.formCreditCardCvvLabel)}
                     maxLength={cvvLength}
+                    small={small}
                 />
             </DoubleField>
         </Stack>

package/src/date-field.css.ts

@@ -9,6 +9,6 @@ export const iconContainer = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    right: `calc(${fieldRightPadding}px + (${iconButtonSize} - ${iconSize.default}) / 2)`,
+    right: `calc(${fieldRightPadding} + (${iconButtonSize} - ${iconSize.default}) / 2)`,
     marginRight: -12,
 });

package/src/icon-button.css.ts

@@ -280,24 +280,24 @@ export const iconButtonTokens = styleVariants({
     'danger-transparent-default': {
         vars: {
             [background]: 'transparent',
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-brand': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-negative': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
             [iconColor]: skinVars.colors.error,
         },
     },
@@ -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}

package/src/list.css.ts

@@ -7,7 +7,7 @@ export const disabled = style({
     opacity: 0.5,
 });
 
-export const row = sprinkles({
+export const row = style({
     width: '100%',
 });
 
@@ -79,20 +79,31 @@ export const rowContent = style([
     },
 ]);
 
-export const rowContentPadding = sprinkles({
-    paddingX: 16,
+export const rowContentPadding = style({
+    paddingLeft: vars.spacing.boxedDefaultPadding.left,
+    paddingRight: vars.spacing.boxedDefaultPadding.right,
 });
 
-export const content = sprinkles({
+export const content = style([
+    sprinkles({
+        width: '100%',
+        paddingTop: 16,
+    }),
+    {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr',
+    },
+]);
+
+export const innerContent = style({
     display: 'flex',
-    width: '100%',
-    minHeight: 72,
-    paddingY: 16,
+    minHeight: 56,
+    paddingBottom: 16,
+    gridColumn: 2,
+    minWidth: 0,
 });
 
-export const assetContainer = sprinkles({
-    paddingRight: 16,
-});
+export const assetContainer = style([sprinkles({paddingRight: 16}), {gridColumn: 1, paddingBottom: 16}]);
 
 export const asset = sprinkles({
     display: 'flex',
@@ -121,19 +132,42 @@ export const badge = style([
     }),
 ]);
 
+export const rowDivider = style({
+    gridColumn: '2 / -1',
+    selectors: {
+        [`${row}:last-child &`]: {
+            display: 'none',
+        },
+    },
+});
+
+export const rowDividerDualAction = style({
+    paddingRight: vars.spacing.boxedDefaultPadding.right,
+    selectors: {
+        [`${row}:last-child &`]: {
+            display: 'none',
+        },
+    },
+});
+
 export const rightContent = style({display: 'flex', marginLeft: 16});
-export const rightRestrictedWidth = style({maxWidth: '40%'});
 
 export const detailRight = style({paddingLeft: 8});
 
 export const detail = style([center, {textAlign: 'right'}]);
 
-export const dualActionContainer = sprinkles({
+export const dualActionContainer = style({
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
     height: '100%',
 });
 
+export const dualActionBody = style({
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+});
+
 const dualActionBase = sprinkles({padding: 0, border: 'none', background: 'transparent'});
 
 export const dualActionLeft = style([
@@ -141,9 +175,10 @@ export const dualActionLeft = style([
     sprinkles({
         display: 'block',
         flexGrow: 1,
-        paddingX: 16,
     }),
     {
+        paddingLeft: vars.spacing.boxedDefaultPadding.left,
+        paddingRight: 16,
         selectors: {
             [`${boxed} &:active`]: {
                 // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
@@ -169,21 +204,16 @@ export const dualActionDivider = style([
     },
 ]);
 
-export const dualActionRight = style([
+const dualActionRightBase = style([
     dualActionBase,
-    sprinkles({
-        paddingX: 16,
-        display: 'flex',
-        alignItems: 'center',
-        flexGrow: 0,
-        width: 'auto',
-        height: '100%',
-    }),
-    {
-        lineHeight: 0,
-    },
+    sprinkles({display: 'flex', alignItems: 'center', flexGrow: 0, width: 'auto'}),
+    {paddingLeft: 16, paddingRight: vars.spacing.boxedDefaultPadding.right, lineHeight: 0},
 ]);
 
+export const dualActionRight = style([dualActionRightBase, sprinkles({height: '100%'})]);
+
+export const dualActionRightIconButton = style([dualActionRightBase, {paddingTop: 16, paddingBottom: 16}]);
+
 const ulVerticalGap = 8;
 const ulVerticalGapDesktop = 16;