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

-rename-design-tokens
Telefonica · Sep 11, 2024 · 934f34e · 934f34e
2 parents c35341a + 1dd287d
commit 934f34e
Show file tree

Hide file tree

Showing 187 changed files with 1,682 additions and 1,589 deletions.
diff --git a/...onfig-npm-2.1.1-4cc790ac85-8f5d1e7189.zip → ...onfig-npm-2.2.0-d45d42ae4d-7e82d56454.zip b/...onfig-npm-2.1.1-4cc790ac85-8f5d1e7189.zip → ...onfig-npm-2.2.0-d45d42ae4d-7e82d56454.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,28 @@
+# [15.20.0](https://github.com/Telefonica/mistica-web/compare/v15.19.0...v15.20.0) (2024-09-06)
+
+
+### Features
+
+* **NavigationBreadcrumbs:** allow executing onNavigate when pressing a link ([#1233](https://github.com/Telefonica/mistica-web/issues/1233)) ([ec7ed8b](https://github.com/Telefonica/mistica-web/commit/ec7ed8b93d0b6892827263d35373896a8cf291b6))
+
+# [15.19.0](https://github.com/Telefonica/mistica-web/compare/v15.18.0...v15.19.0) (2024-09-03)
+
+
+### Bug Fixes
+
+* **Buttons:** avoid warnings related to change in order of react hooks ([#1229](https://github.com/Telefonica/mistica-web/issues/1229)) ([2dbc411](https://github.com/Telefonica/mistica-web/commit/2dbc411616f7276d832bb5007f41a37c9c93f69e))
+* **i18n:** revert text sizes improvement because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3))
+* **Logo:** fix webpackChunkName magic comments ([#1214](https://github.com/Telefonica/mistica-web/issues/1214)) ([3d1f098](https://github.com/Telefonica/mistica-web/commit/3d1f098c6cbaf179b29de666ba824f1ae63dea9e))
+* **Vivinho char:** vivinho char in headings being read as a separated heading ([#1209](https://github.com/Telefonica/mistica-web/issues/1209)) ([f0f5fb0](https://github.com/Telefonica/mistica-web/commit/f0f5fb05b99fc594479a19c3037cc9dfc7446bab))
+
+
+### Features
+
+* **Buttons:** refactor code and fix spacing bug in loading buttonLink ([#1212](https://github.com/Telefonica/mistica-web/issues/1212)) ([640e429](https://github.com/Telefonica/mistica-web/commit/640e429c8ab4493c5da1f39bad5fccf90eacc373))
+* **i18n:** improve texts sizes ([#1204](https://github.com/Telefonica/mistica-web/issues/1204)) ([0345e7c](https://github.com/Telefonica/mistica-web/commit/0345e7cefd06b911377278b5928409cbed23f921))
+* **Logo:** Refactor logo to improve bundle size and loading times ([#1210](https://github.com/Telefonica/mistica-web/issues/1210)) ([15b77cb](https://github.com/Telefonica/mistica-web/commit/15b77cb8ab932f68fb124d66887b8d49169b0095))
+* **NavigationBar, FunnelNavigationBar, MainNavigationBar:** add alternative variant ([#1200](https://github.com/Telefonica/mistica-web/issues/1200)) ([eef87ec](https://github.com/Telefonica/mistica-web/commit/eef87ecdd32053f80f349aaf1598d8e61251b6eb))
+
 # [15.18.0](https://github.com/Telefonica/mistica-web/compare/v15.17.0...v15.18.0) (2024-08-20)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.18.0",
+    "version": "15.20.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -80,7 +80,7 @@
         "@swc/core": "^1.3.95",
         "@swc/jest": "^0.2.29",
         "@telefonica/acceptance-testing": "5.0.0",
-        "@telefonica/eslint-config": "^2.1.1",
+        "@telefonica/eslint-config": "^2.2.0",
         "@telefonica/prettier-config": "^2.0.0",
         "@testing-library/dom": "^10.2.0",
         "@testing-library/jest-dom": "^6.4.6",

diff --git a/playroom/components/index.tsx b/playroom/components/index.tsx
@@ -123,11 +123,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         {showPlatformSelector && (
                             <ToggleIconButton
                                 checkedProps={{
-                                    Icon: IconAppleOn as React.FC<IconProps>,
+                                    Icon: IconAppleOn as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to android',
                                 }}
                                 uncheckedProps={{
-                                    Icon: IconAppleOff as React.FC<IconProps>,
+                                    Icon: IconAppleOff as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to iOS',
                                 }}
                                 checked={os === 'ios'}
@@ -136,11 +136,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         )}
                         <ToggleIconButton
                             checkedProps={{
-                                Icon: IconSun as React.FC<IconProps>,
+                                Icon: IconSun as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Switch to light mode',
                             }}
                             uncheckedProps={{
-                                Icon: IconMoon as React.FC<IconProps>,
+                                Icon: IconMoon as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Switch to dark mode',
                             }}
                             checked={colorScheme === alternativeColorScheme}
@@ -155,7 +155,7 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         <IconButton
                             bleedRight
                             aria-label="Edit in Playroom"
-                            Icon={IconCode as React.FC<IconProps>}
+                            Icon={IconCode as (props: IconProps) => JSX.Element}
                             onPress={onEditStoryPress}
                         />
                     </Inline>
@@ -178,11 +178,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         {showPlatformSelector && (
                             <ToggleIconButton
                                 checkedProps={{
-                                    Icon: IconAppleOn as React.FC<IconProps>,
+                                    Icon: IconAppleOn as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to android',
                                 }}
                                 uncheckedProps={{
-                                    Icon: IconAppleOff as React.FC<IconProps>,
+                                    Icon: IconAppleOff as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to iOS',
                                 }}
                                 checked={os === 'ios'}
@@ -191,11 +191,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         )}
                         <ToggleIconButton
                             checkedProps={{
-                                Icon: IconSun as React.FC<IconProps>,
+                                Icon: IconSun as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Change color scheme',
                             }}
                             uncheckedProps={{
-                                Icon: IconMoon as React.FC<IconProps>,
+                                Icon: IconMoon as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Change color scheme',
                             }}
                             checked={colorScheme === alternativeColorScheme}
@@ -210,7 +210,7 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         <IconButton
                             bleedRight
                             aria-label="Edit in Playroom"
-                            Icon={IconCode as React.FC<IconProps>}
+                            Icon={IconCode as (props: IconProps) => JSX.Element}
                             onPress={onEditStoryPress}
                         />
                     </Inline>

diff --git a/playroom/components/loader.tsx b/playroom/components/loader.tsx
@@ -3,13 +3,18 @@ import * as React from 'react';
 type Props = {
     load: string | (() => Promise<any>);
     render: (data: any) => React.ReactElement;
-    renderLoading?: () => React.ReactElement;
-    renderError?: () => React.ReactElement;
+    renderLoading?: () => React.ReactElement | null;
+    renderError?: () => React.ReactElement | null;
 };
 
 type LoaderState = 'loading' | 'error' | 'success';
 
-const Loader: React.FC<Props> = ({load, render, renderLoading = () => null, renderError = () => null}) => {
+const Loader = ({
+    load,
+    render,
+    renderLoading = () => null,
+    renderError = () => null,
+}: Props): JSX.Element | null => {
     const [loaderData, setLoaderData] = React.useState(null);
     const [loaderStatus, setLoaderStatus] = React.useState<LoaderState>('loading');
 

diff --git a/playroom/icons/icon-apple-off.tsx b/playroom/icons/icon-apple-off.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <g fill={color || skinVars.colors.neutralHigh} opacity="0.3">

diff --git a/playroom/icons/icon-apple-on.tsx b/playroom/icons/icon-apple-on.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <g fill={color || skinVars.colors.neutralHigh}>

diff --git a/playroom/icons/icon-code.tsx b/playroom/icons/icon-code.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconCode: React.FC<Props> = ({size = 24, color}) => {
+const IconCode = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path

diff --git a/playroom/icons/icon-moon.tsx b/playroom/icons/icon-moon.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconMoon: React.FC<Props> = ({size = 24, color}) => {
+const IconMoon = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path

diff --git a/playroom/icons/icon-sun.tsx b/playroom/icons/icon-sun.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path

diff --git a/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar-large.tsx b/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar-large.tsx
@@ -15,6 +15,7 @@ const NavigationBarTest = (): JSX.Element => (
             title,
             to: `/${title}`,
         }))}
+        logo={<span>LOGO</span>}
         right={
             <NavigationBarActionGroup>
                 <NavigationBarAction onPress={() => {}} aria-label="shopping cart with 2 items">

diff --git a/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx b/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx
@@ -14,6 +14,7 @@ const NavigationBarTest = (): JSX.Element => (
             title,
             to: `/${title}`,
         }))}
+        logo={<span>LOGO</span>}
         right={
             <NavigationBarActionGroup>
                 <NavigationBarAction onPress={() => {}} aria-label="shopping cart with 2 items">

diff --git a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
@@ -25,23 +25,23 @@ type Args = {
     itemsPerPageDesktopSmall: number;
     itemsPerPageDesktopMedium: number;
     itemsPerPageDesktopLarge: number;
-    withBullets: boolean;
+    bullets: boolean;
 };
 
 const ExampleCarousel = ({
     numItems,
-    withBullets,
+    bullets,
     cardsTitlePrefix,
     itemsPerPage,
 }: {
     numItems: number;
-    withBullets: boolean;
+    bullets: boolean;
     cardsTitlePrefix: number;
     itemsPerPage: {mobile: number; tablet: number; desktop: {small: number; medium: number; large: number}};
 }) => (
     <Carousel
         dataAttributes={{testid: 'carousel-story'}}
-        withBullets={withBullets}
+        withBullets={bullets}
         itemsPerPage={itemsPerPage}
         items={Array.from({length: numItems}, (_, idx) => (
             <MediaCard
@@ -63,7 +63,7 @@ export const Default: StoryComponent<Args> = ({
     itemsPerPageDesktopSmall,
     itemsPerPageDesktopMedium,
     itemsPerPageDesktopLarge,
-    withBullets,
+    bullets,
 }) => {
     const itemsPerPage = {
         mobile: itemsPerPageMobile,
@@ -87,7 +87,7 @@ export const Default: StoryComponent<Args> = ({
                         left={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={1}
                             />
@@ -100,15 +100,15 @@ export const Default: StoryComponent<Args> = ({
                         right={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={2}
                             />
                         }
                     ></GridLayout>
                     <ExampleCarousel
                         numItems={numItems}
-                        withBullets={withBullets}
+                        bullets={bullets}
                         itemsPerPage={itemsPerPage}
                         cardsTitlePrefix={3}
                     />
@@ -127,5 +127,5 @@ Default.args = {
     itemsPerPageDesktopSmall: 1,
     itemsPerPageDesktopMedium: 2,
     itemsPerPageDesktopLarge: 3,
-    withBullets: true,
+    bullets: true,
 };
diff --git a/src/__private_stories__/private-responsive-layout-scenarios-story.tsx b/src/__private_stories__/private-responsive-layout-scenarios-story.tsx
@@ -21,7 +21,7 @@ export default {
     parameters: {fullScreen: true},
 };
 
-const WithTitle: React.FC<{title: string; children: React.ReactNode}> = ({title, children}) => (
+const WithTitle = ({title, children}: {title: string; children: React.ReactNode}) => (
     <Stack space={24} dataAttributes={{testid: title}}>
         <Text5 as="div" textAlign="center">
             {title}

diff --git a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx
@@ -23,11 +23,11 @@ export default {
 };
 
 type Args = {
-    showLargeContent: boolean;
-    showInput: boolean;
+    largeContent: boolean;
+    input: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) => {
+export const Default: StoryComponent<Args> = ({largeContent, input}) => {
     const {isDesktopOrBigger} = useScreenSize();
     const [index, setIndex] = React.useState(0);
     const {dimensions} = useTheme();
@@ -71,8 +71,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
                         primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
                         extra={
                             <>
-                                {showInput ? <TextField name="text" label="Text" /> : undefined}
-                                {showLargeContent ? <Placeholder height={1000} /> : undefined}
+                                {input ? <TextField name="text" label="Text" /> : undefined}
+                                {largeContent ? <Placeholder height={1000} /> : undefined}
                             </>
                         }
                     />
@@ -83,8 +83,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
 };
 
 Default.args = {
-    showLargeContent: false,
-    showInput: false,
+    largeContent: false,
+    input: false,
 };
 
 Default.storyName = 'SuccessFeedbackScreen with Navigation Bar';
diff --git a/...creenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png b/...creenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png
diff --git a/...on-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png b/...on-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png
diff --git a/...utton-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png b/...utton-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png
diff --git a/...__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png b/...__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/boxed-screenshot-test.tsx b/src/__screenshot_tests__/boxed-screenshot-test.tsx
@@ -1,24 +1,21 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    inverseOutside | inverseInside
-    ${false}       | ${false}
-    ${false}       | ${true}
-    ${true}        | ${false}
-    ${true}        | ${true}
-`(
-    'Boxed inverseOutside($inverseOutside) inverseInside($inverseInside)',
-    async ({inverseOutside, inverseInside}) => {
-        await openStoryPage({
-            id: 'components-primitives-boxed--default',
-            device: 'MOBILE_IOS',
-            args: {
-                inverseInside,
-                inverseOutside,
-            },
-        });
+    overInverse | inverse
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Boxed inverseOutside($overInverse) inverseInside($inverse)', async ({overInverse, inverse}) => {
+    await openStoryPage({
+        id: 'components-primitives-boxed--default',
+        device: 'MOBILE_IOS',
+        args: {
+            overInverse,
+            inverse,
+        },
+    });
 
-        const image = await (await screen.findByTestId('boxed')).screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+    const image = await (await screen.findByTestId('boxed')).screenshot();
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__screenshot_tests__/button-group-screenshot-test.tsx b/src/__screenshot_tests__/button-group-screenshot-test.tsx
@@ -18,7 +18,7 @@ test.each(DEVICES)('ButtonGroup - Long text (%s)', async (device) => {
     const page = await openStoryPage({
         id: 'components-buttons-buttongroup--default',
         device,
-        args: {buttonPrimaryText: 'A very long action text in this button', showButtonLink: false},
+        args: {buttonPrimaryText: 'A very long action text in this button', buttonLink: false},
     });
 
     const image = await page.screenshot({fullPage: true});