Merge branch 'test-mistica-release' of github.com:Telefonica/mistica-…

…web into test-mistica-release

src/button-group.css.ts

@@ -1,11 +1,13 @@
-import {createVar, style} from '@vanilla-extract/css';
+import {style} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
 import * as mq from './media-queries.css';
+import * as buttonStyles from './button.css';
 
 const buttonLayoutSpacing = '16px';
-const buttonLinkPadding = createVar();
-
-export const vars = {buttonLinkPadding};
+const buttonLinkPadding = {
+    default: `calc(${buttonStyles.buttonPaddingX.default} + ${buttonStyles.borderSize})`,
+    small: `calc(${buttonStyles.buttonPaddingX.small} + ${buttonStyles.borderSize})`,
+};
 
 export const inline = style([
     sprinkles({display: 'inline-flex', alignItems: 'center', flexDirection: 'row'}),
@@ -40,7 +42,31 @@ export const centerInDesktop = style({
 
 export const container = style({
     marginTop: `-${buttonLayoutSpacing}`,
-    marginLeft: `calc(-1 * ${buttonLayoutSpacing})`,
+    marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPadding.default}))`,
+
+    selectors: {
+        [`&:has(${buttonStyles.smallLink})`]: {
+            marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPadding.small}))`,
+        },
+    },
+});
+
+export const containerWithSmallLink = style({
+    marginTop: `-${buttonLayoutSpacing}`,
+    marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPadding.small}))`,
+});
+
+export const buttons = style({
+    marginLeft: buttonLinkPadding.default,
+    selectors: {
+        [`${container}:has(${buttonStyles.smallLink}) &`]: {
+            marginLeft: buttonLinkPadding.small,
+        },
+    },
+});
+
+export const buttonsWithSmallLink = style({
+    marginLeft: buttonLinkPadding.small,
 });
 
 export const buttonChild = style({

src/button-group.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './button-group.css';
 import * as buttonStyles from './button.css';
+import {useIsomorphicLayoutEffect} from './hooks';
 
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type {ByBreakpoint, DataAttributes, RendersNullableElement} from './utils/types';
@@ -23,9 +24,19 @@ const ButtonGroup = ({
     align = 'left',
     dataAttributes,
 }: ButtonGroupProps): JSX.Element | null => {
+    const linkContainerRef = React.useRef<HTMLDivElement>(null);
+    const [hasSmallLink, setHasSmallLink] = React.useState(false);
+
+    // In modern browsers we rely on CSS has() selector in order to add bleed to the ButtonLink.
+    // In old browsers, we use this effect as a polyfill (https://caniuse.com/css-has)
+    useIsomorphicLayoutEffect(() => {
+        if (linkContainerRef.current?.getElementsByClassName(buttonStyles.smallLink)?.length) {
+            setHasSmallLink(true);
+        }
+    }, []);
+
     const anyAction = !!primaryButton || !!secondaryButton || !!link;
     const bothButtons = !!primaryButton && !!secondaryButton;
-    const noButtons = !primaryButton && !secondaryButton;
 
     const alignByBreakpoint =
         typeof align === 'string'
@@ -42,24 +53,32 @@ const ButtonGroup = ({
 
     return anyAction ? (
         <div
-            className={classNames(styles.inline, styles.container, {
-                [styles.centerInDesktop]: alignByBreakpoint.desktop === 'center',
-                [styles.centerInTablet]: alignByBreakpoint.tablet === 'center',
-                [styles.centerInMobile]: alignByBreakpoint.mobile === 'center',
-            })}
+            className={classNames(
+                styles.inline,
+                hasSmallLink ? styles.containerWithSmallLink : styles.container,
+                {
+                    [styles.centerInDesktop]: alignByBreakpoint.desktop === 'center',
+                    [styles.centerInTablet]: alignByBreakpoint.tablet === 'center',
+                    [styles.centerInMobile]: alignByBreakpoint.mobile === 'center',
+                }
+            )}
             {...getPrefixedDataAttributes(dataAttributes, 'ButtonGroup')}
         >
             {(primaryButton || secondaryButton) && (
-                <div className={classNames(styles.inline)}>
+                <div
+                    className={classNames(
+                        styles.inline,
+                        hasSmallLink ? styles.buttonsWithSmallLink : styles.buttons
+                    )}
+                >
                     {primaryButton && <div className={styles.buttonChild}>{primaryButton}</div>}
                     {secondaryButton && <div className={styles.buttonChild}>{secondaryButton}</div>}
                 </div>
             )}
             {link && (
                 <div
-                    className={classNames(styles.buttonChild, {
-                        [buttonStyles.forceLinkBleedLeft]: noButtons || bothButtons,
-                    })}
+                    ref={linkContainerRef}
+                    className={styles.buttonChild}
                     style={{width: bothButtons ? '100%' : 'auto'}}
                 >
                     {link}

src/button-layout.css.ts

@@ -4,6 +4,22 @@ import * as mq from './media-queries.css';
 import * as buttonStyles from './button.css';
 
 const buttonLayoutSpacing = '16px';
+const buttonLinkPadding = {
+    default: `calc(${buttonStyles.buttonPaddingX.default} + ${buttonStyles.borderSize})`,
+    small: `calc(${buttonStyles.buttonPaddingX.small} + ${buttonStyles.borderSize})`,
+};
+
+export const margins = style({
+    margin: '16px 0',
+    padding: '0 16px',
+
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            padding: 0,
+            margin: 16,
+        },
+    },
+});
 
 export const container = style([
     sprinkles({display: 'flex', alignItems: 'center'}),
@@ -75,7 +91,80 @@ export const link = style([
 
 export const linkInNewLine = styleVariants({
     center: [linkBase],
-    left: [linkBase, buttonStyles.forceLinkBleedLeft],
-    right: [linkBase, buttonStyles.forceLinkBleedRight],
-    'full-width': [linkBase, buttonStyles.forceLinkBleedLeftOnlyDesktop],
+    left: [
+        linkBase,
+        style({
+            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.default})`,
+            selectors: {
+                [`&:has(${buttonStyles.smallLink})`]: {
+                    marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+                },
+            },
+        }),
+    ],
+    right: [
+        linkBase,
+        style({
+            marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.default})`,
+            selectors: {
+                [`&:has(${buttonStyles.smallLink})`]: {
+                    marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+                },
+            },
+        }),
+    ],
+    'full-width': [
+        linkBase,
+        style({
+            selectors: {
+                // in desktop, full-width is equivalent to left
+                [`${alignVariant['full-width']} &`]: {
+                    '@media': {
+                        [mq.desktopOrBigger]: {
+                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.default})`,
+                        },
+                    },
+                },
+
+                [`${alignVariant['full-width']}:has(${buttonStyles.smallLink}) &`]: {
+                    '@media': {
+                        [mq.desktopOrBigger]: {
+                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+                        },
+                    },
+                },
+            },
+        }),
+    ],
+});
+
+export const smallLinkInNewLine = styleVariants({
+    center: [linkBase],
+    left: [
+        linkBase,
+        style({
+            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+        }),
+    ],
+    right: [
+        linkBase,
+        style({
+            marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+        }),
+    ],
+    'full-width': [
+        linkBase,
+        style({
+            selectors: {
+                // in desktop, full-width is equivalent to left
+                [`${alignVariant['full-width']} &`]: {
+                    '@media': {
+                        [mq.desktopOrBigger]: {
+                            marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding.small})`,
+                        },
+                    },
+                },
+            },
+        }),
+    ],
 });

src/button-layout.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import classnames from 'classnames';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './button-layout.css';
+import * as buttonStyles from './button.css';
+import {useIsomorphicLayoutEffect} from './hooks';
 
 import type {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink} from './button';
 import type {DataAttributes, RendersNullableElement} from './utils/types';
@@ -22,6 +24,17 @@ const ButtonLayout = ({
     link,
     dataAttributes,
 }: ButtonLayoutProps): JSX.Element => {
+    const linkContainerRef = React.useRef<HTMLDivElement>(null);
+    const [hasSmallLink, setHasSmallLink] = React.useState(false);
+
+    // In modern browsers we rely on CSS has() selector in order to add bleed to the ButtonLink.
+    // In old browsers, we use this effect as a polyfill (https://caniuse.com/css-has)
+    useIsomorphicLayoutEffect(() => {
+        if (linkContainerRef.current?.getElementsByClassName(buttonStyles.smallLink)?.length) {
+            setHasSmallLink(true);
+        }
+    }, []);
+
     const numberOfButtons = (primaryButton ? 1 : 0) + (secondaryButton ? 1 : 0);
 
     const buttons =
@@ -39,7 +52,14 @@ const ButtonLayout = ({
 
     const linkContainer = link ? (
         <div
-            className={classnames(numberOfButtons !== 1 ? styles.linkInNewLine[align] : styles.link)}
+            ref={linkContainerRef}
+            className={classnames(
+                numberOfButtons !== 1
+                    ? hasSmallLink
+                        ? styles.smallLinkInNewLine[align]
+                        : styles.linkInNewLine[align]
+                    : styles.link
+            )}
             data-link="true"
         >
             {link}

src/button.css.ts

@@ -76,6 +76,7 @@ const button = style([
 ]);
 
 export const small = style({});
+export const smallLink = style({});
 
 export const loadingFiller = style([
     sprinkles({
@@ -144,43 +145,6 @@ globalStyle(`${textContent} svg`, {
     display: 'block',
 });
 
-// These classes are used to force the bleed conditionally in ButtonGroup and ButtonLayout components
-export const forceLinkBleedLeft = style({});
-export const forceLinkBleedRight = style({});
-export const forceLinkBleedLeftOnlyDesktop = style({});
-
-globalStyle(`${forceLinkBleedLeft} button, ${forceLinkBleedLeft} a`, {
-    marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
-});
-
-globalStyle(`${forceLinkBleedLeft} button.${small}, ${forceLinkBleedLeft} a.${small}`, {
-    marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
-});
-
-globalStyle(`${forceLinkBleedRight} button, ${forceLinkBleedRight} a`, {
-    marginRight: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
-});
-
-globalStyle(`${forceLinkBleedRight} button.${small}, ${forceLinkBleedRight} a.${small}`, {
-    marginRight: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
-});
-
-globalStyle(`${forceLinkBleedLeftOnlyDesktop} button, ${forceLinkBleedLeftOnlyDesktop} a`, {
-    '@media': {
-        [mq.desktopOrBigger]: {
-            marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
-        },
-    },
-});
-
-globalStyle(`${forceLinkBleedLeftOnlyDesktop} button.${small}, ${forceLinkBleedLeftOnlyDesktop} a.${small}`, {
-    '@media': {
-        [mq.desktopOrBigger]: {
-            marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
-        },
-    },
-});
-
 const lightPrimary: ComplexStyleRule = [
     button,
     sprinkles({

src/button.tsx

@@ -510,10 +510,11 @@ export const ButtonLink = React.forwardRef<
     ButtonLinkProps & {
         withChevron?: boolean;
     }
->(({dataAttributes, ...props}, ref) => {
+>(({dataAttributes, className, ...props}, ref) => {
     return (
         <BaseButton
             dataAttributes={{'component-name': 'ButtonLink', ...dataAttributes}}
+            className={classnames(className, {[styles.smallLink]: props.small})}
             {...props}
             ref={ref}
             buttonType="link"
@@ -522,13 +523,11 @@ export const ButtonLink = React.forwardRef<
 });
 
 export const ButtonLinkDanger = React.forwardRef<TouchableElement, ButtonLinkProps>(
-    ({dataAttributes, ...props}, ref) => {
+    ({dataAttributes, className, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{
-                    'component-name': 'ButtonLinkDanger',
-                    ...dataAttributes,
-                }}
+                dataAttributes={{'component-name': 'ButtonLinkDanger', ...dataAttributes}}
+                className={classnames(className, {[styles.smallLink]: props.small})}
                 {...props}
                 withChevron={false}
                 ref={ref}