Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1990

-rename-design-tokens

playroom/snippets.tsx

@@ -220,7 +220,7 @@ const buttonSnippets: Array<Snippet> = [
         code: '<ButtonPrimary onPress={() => {}}><IconLockClosedRegular color="currentColor" />Action</ButtonPrimary>',
     },
     {
-        name: 'ButtonGroup (internal use)',
+        name: 'ButtonGroup',
         code: `
         <ButtonGroup
           primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}

src/__acceptance_tests__/__ssr_pages__/header.tsx

@@ -6,20 +6,14 @@ import {
     MainSectionHeader,
     ButtonPrimary,
     Stack,
+    Placeholder,
 } from '../../..';
 
 const HeaderTest = (): JSX.Element => (
     <Stack space={8}>
         <HeaderLayout
-            header={
-                <Header
-                    title="La última factura de diciembre ya esta disponible"
-                    preamount="Cuota mensual (IVA incluido)"
-                    amount="60,44 €"
-                    button={<ButtonPrimary href="asdf">Descargar factura</ButtonPrimary>}
-                    subtitle="Y esto es un subtitulo"
-                />
-            }
+            header={<Header title="La última factura de diciembre ya esta disponible" />}
+            extra={<Placeholder />}
         />
         <MainSectionHeaderLayout>
             <MainSectionHeader

src/__private_stories__/success-feedback-screen-with-navbar-story.tsx

@@ -39,7 +39,7 @@ export const Default: StoryComponent<Args> = ({largeContent, input}) => {
             {() => (
                 <>
                     <MainNavigationBar
-                        isInverse
+                        variant="inverse"
                         sections={['Start', 'Account', 'Explore', 'Support'].map((title, index) => ({
                             title,
                             onPress: () => {

src/__stories__/fixed-footer-layout-story.tsx

@@ -10,7 +10,7 @@ import {
     ResponsiveLayout,
     Box,
     Inline,
-    alert,
+    useDialog,
 } from '..';
 import {useCheckbox} from './helpers';
 
@@ -100,6 +100,7 @@ MoreComplexFooter.storyName = 'Fixed footer layout';
 MoreComplexFooter.parameters = {fullScreen: true};
 
 export const DialogOverFixedFooter: StoryComponent = () => {
+    const {alert} = useDialog();
     return (
         <ButtonFixedFooterLayout
             button={<ButtonPrimary onPress={() => alert({message: 'Message'})}>Open dialog</ButtonPrimary>}

src/__stories__/form-automatic-state-management-story.tsx

@@ -15,7 +15,7 @@ import {
     Switch,
     Checkbox,
     TextLink,
-    alert,
+    useDialog,
     RadioGroup,
     RadioButton,
     Text3,
@@ -39,6 +39,7 @@ const fruitOptions = fruitEntries.map(([text, value]) => ({text, value}));
 const countryOptions = countriesList.map((text, i) => ({text, value: '' + i}));
 
 export const Default: StoryComponent = () => {
+    const {alert} = useDialog();
     return (
         <Form
             initialValues={{

src/__stories__/menu-story.tsx

@@ -11,7 +11,7 @@ import {
     MenuItem,
     IconLightningRegular,
     MenuSection,
-    alert,
+    useDialog,
 } from '..';
 
 export default {
@@ -34,6 +34,7 @@ export const Default: StoryComponent<MenuArgs> = ({
     icon,
     checkbox,
 }) => {
+    const {alert} = useDialog();
     const [valuesState, setValuesState] = React.useState<ReadonlyArray<number>>([]);
 
     const setValues = (val: number) => {

src/__stories__/use-modal-state-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useModalState, Stack, Text2, alert} from '..';
+import {useModalState, Stack, Text2, useDialog} from '..';
 import {ButtonPrimary} from '../button';
 
 export default {
@@ -8,6 +8,7 @@ export default {
 
 export const UseModalState: StoryComponent = () => {
     const {isModalOpen} = useModalState();
+    const {alert} = useDialog();
     return (
         <div aria-hidden={isModalOpen}>
             <Stack space={32}>

src/accordion.tsx

@@ -45,8 +45,6 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
-    /** @deprecated Use onChange Accordion's onChange callback instead */
-    onToogle?: (value: boolean) => void;
 }
 
 const useAccordionState = ({

src/button-fixed-footer-layout.tsx

@@ -1,8 +1,6 @@
-'use client';
 import * as React from 'react';
 import FixedFooterLayout from './fixed-footer-layout';
 import ButtonLayout from './button-layout';
-import {useScreenSize} from './hooks';
 import {InternalResponsiveLayout} from './responsive-layout';
 import Box from './box';
 
@@ -12,8 +10,6 @@ import type {RendersNullableElement} from './utils/types';
 type Props = {
     isFooterVisible?: boolean;
     button?: NullableButtonElement;
-    /** @deprecated */
-    desktopButtonAlign?: 'left' | 'center';
     secondaryButton?: NullableButtonElement;
     link?: RendersNullableElement<typeof ButtonLink>;
     footerBgColor?: string;
@@ -28,12 +24,10 @@ const ButtonFixedFooterLayout = ({
     secondaryButton,
     link,
     children,
-    desktopButtonAlign,
     footerBgColor,
     containerBgColor,
     onChangeFooterHeight,
 }: Props): JSX.Element => {
-    const {isDesktopOrBigger} = useScreenSize();
     const hasButton = !!button || !!secondaryButton;
     return (
         <FixedFooterLayout
@@ -53,9 +47,7 @@ const ButtonFixedFooterLayout = ({
                         <ButtonLayout
                             primaryButton={button}
                             secondaryButton={secondaryButton}
-                            align={
-                                isDesktopOrBigger && desktopButtonAlign ? desktopButtonAlign : 'full-width'
-                            }
+                            align="full-width"
                             link={link}
                         />
                     </Box>

src/button-layout.css.ts

@@ -5,18 +5,6 @@ import {buttonPaddingX, borderSize} from './button.css';
 
 const buttonLayoutSpacing = 16;
 
-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'}),
     {

src/button-layout.tsx

@@ -1,61 +1,41 @@
 'use client';
 import * as React from 'react';
-import {ButtonPrimary, ButtonSecondary, ButtonDanger} from './button';
 import classnames from 'classnames';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './button-layout.css';
 
+import type {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink} from './button';
 import type {DataAttributes, RendersNullableElement} from './utils/types';
-import type {NullableButtonElement, ButtonLink} from './button';
-
-type MaybeButtonElement = NullableButtonElement | void | false;
 
 type ButtonLayoutProps = {
-    /** @deprecated Use primaryButton and secondaryButton props */
-    children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement];
     align?: 'center' | 'left' | 'right' | 'full-width';
     primaryButton?: RendersNullableElement<typeof ButtonPrimary | typeof ButtonDanger>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
-    /** @deprecated Use a wrapping Box if you need paddings */
-    withMargins?: boolean;
     dataAttributes?: DataAttributes;
 };
 
-const buttonsRange = [ButtonPrimary, ButtonDanger, ButtonSecondary];
-
 const ButtonLayout = ({
-    children,
     primaryButton,
     secondaryButton,
     align = 'full-width',
     link,
-    withMargins = false,
     dataAttributes,
 }: ButtonLayoutProps): JSX.Element => {
-    const sortedButtons = React.Children.toArray(children as any).sort((b1: any, b2: any) => {
-        const range1 = buttonsRange.indexOf(b1.type);
-        const range2 = buttonsRange.indexOf(b2.type);
-        return align === 'right' ? range2 - range1 : range1 - range2;
-    });
+    const numberOfButtons = (primaryButton ? 1 : 0) + (secondaryButton ? 1 : 0);
 
-    const numberOfButtons = children
-        ? sortedButtons.length
-        : (primaryButton ? 1 : 0) + (secondaryButton ? 1 : 0);
-
-    const buttons = children ? (
-        sortedButtons
-    ) : align === 'right' ? (
-        <>
-            {secondaryButton}
-            {primaryButton}
-        </>
-    ) : (
-        <>
-            {primaryButton}
-            {secondaryButton}
-        </>
-    );
+    const buttons =
+        align === 'right' ? (
+            <>
+                {secondaryButton}
+                {primaryButton}
+            </>
+        ) : (
+            <>
+                {primaryButton}
+                {secondaryButton}
+            </>
+        );
 
     const linkContainer = link ? (
         <div
@@ -66,7 +46,7 @@ const ButtonLayout = ({
         </div>
     ) : null;
 
-    const content = (
+    return (
         <div
             className={classnames(styles.container, styles.alignVariant[align], {
                 [styles.containerWithTwoButtons]: numberOfButtons > 1,
@@ -86,8 +66,6 @@ const ButtonLayout = ({
             )}
         </div>
     );
-
-    return withMargins ? <div className={styles.margins}>{content}</div> : content;
 };
 
 export default ButtonLayout;

src/card.tsx

@@ -1461,8 +1461,6 @@ export const DisplayDataCard = React.forwardRef<HTMLDivElement, DisplayDataCardP
 );
 
 interface PosterCardBaseProps {
-    /** @deprecated use aria-label */
-    ariaLabel?: string;
     'aria-label'?: string;
     aspectRatio?: AspectRatio | number;
     width?: number | string;
@@ -1521,8 +1519,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             width,
             height,
             aspectRatio = '7:10',
-            ariaLabel: deprecatedAriaLabel,
-            ['aria-label']: ariaLabelProp = deprecatedAriaLabel,
+            'aria-label': ariaLabelProp,
             actions,
             onClose,
             closeButtonLabel,

src/community/__stories__/blocks-story.tsx

@@ -9,6 +9,7 @@ import {
     ValueBlock,
 } from '../blocks';
 import imgExample from '../../__stories__/images/avatar.jpg';
+import {vars} from '../../skins/skin-contract.css';
 
 import type {TagType} from '../..';
 
@@ -146,8 +147,10 @@ export const BlockHighlightedValue: StoryComponent<HighlightedValueBlockArgs> =
                     headline={<Tag type={headlineType}>{headline}</Tag>}
                     title={title}
                     description={description}
-                    mainHeading={{value, text}}
-                    secondaryValue={secondaryValue}
+                    headings={[
+                        {value, text},
+                        {value: secondaryValue, valueColor: vars.colors.textSecondary},
+                    ]}
                 />
             </Box>
         </ResponsiveLayout>

src/community/blocks.tsx

@@ -143,49 +143,26 @@ interface Heading {
 
 interface HighlightedValueBlockProps {
     headline?: RendersNullableElement<typeof Tag>;
-
     headings?: ReadonlyArray<Heading>;
-
-    /** @deprecated Use headings instead */
-    mainHeading?: {
-        value: string;
-        text: string;
-    };
-
-    /** @deprecated Use headings instead */
-    secondHeading?: {
-        value: string;
-        text: string;
-    };
-
-    /** @deprecated Use headings instead */
-    secondaryValue?: string;
-
     title?: string;
     description?: ReadonlyArray<string> | string;
-    /** @deprecated Use headings instead */
-    valueColor?: string;
     'aria-label'?: string;
 }
 
 export const HighlightedValueBlock = ({
     headline,
     headings,
-    mainHeading,
-    secondHeading,
-    secondaryValue,
     title,
     description,
-    valueColor = vars.colors.textPrimary,
     'aria-label': ariaLabel,
 }: HighlightedValueBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
             {headline && <Box paddingBottom={24}>{headline}</Box>}
 
-            <Stack space={2}>
-                {headings &&
-                    headings.map((heading, index) => (
+            {headings && (
+                <Stack space={2}>
+                    {headings.map((heading, index) => (
                         <Inline key={index} space={8} alignItems="baseline">
                             <Text8 color={heading.valueColor ?? vars.colors.textPrimary}>
                                 {heading.value}
@@ -195,24 +172,8 @@ export const HighlightedValueBlock = ({
                             </Text2>
                         </Inline>
                     ))}
-                {mainHeading && (
-                    <Inline space={8} alignItems="baseline">
-                        <Text8 color={valueColor}>{mainHeading.value}</Text8>
-                        <Text2 regular color={vars.colors.textSecondary}>
-                            {mainHeading.text}
-                        </Text2>
-                    </Inline>
-                )}
-                {secondHeading && (
-                    <Inline space={8} alignItems="baseline">
-                        <Text8 color={valueColor}>{secondHeading.value}</Text8>
-                        <Text2 regular color={vars.colors.textSecondary}>
-                            {secondHeading.text}
-                        </Text2>
-                    </Inline>
-                )}
-                {secondaryValue && <Text8 color={vars.colors.textSecondary}>{secondaryValue}</Text8>}
-            </Stack>
+                </Stack>
+            )}
             {title || description ? (
                 <Box paddingTop={8}>
                     <BlockContent title={title} description={description} />