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

-fix-icon-asset-naming-convention

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)
 
 

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",

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>

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');
 

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">

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}>

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

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

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

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}

src/__stories__/button-layout-story.tsx

@@ -12,7 +12,7 @@ type Props = {
     align?: 'center' | 'left' | 'right' | 'full-width';
 };
 
-const Template: React.FC<Props> = ({align = 'full-width'}) => (
+const Template = ({align = 'full-width'}: Props) => (
     <StorySection title={`ButtonLayout (align = ${align})`}>
         <Stack space={16}>
             <Title1 as="h2">One button</Title1>

src/__stories__/button-story.tsx

@@ -76,7 +76,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-const ButtonBackgroundContainer: React.FC<Props> = ({inverse, children}) => (
+const ButtonBackgroundContainer = ({inverse, children}: Props) => (
     <ResponsiveLayout fullWidth dataAttributes={{testid: 'content'}} isInverse={inverse}>
         <Box padding={16}>{children}</Box>
     </ResponsiveLayout>

src/__stories__/chip-story.tsx

@@ -32,7 +32,7 @@ type Props = {
     dataAttributes: DataAttributes;
 };
 
-const ChipBackgroundContainer: React.FC<Props> = ({inverse, dataAttributes, children}) => (
+const ChipBackgroundContainer = ({inverse, dataAttributes, children}: Props) => (
     <ResponsiveLayout isInverse={inverse} fullWidth>
         <Box padding={16} width="fit-content" dataAttributes={dataAttributes}>
             <div

src/__stories__/fixed-to-top-story.tsx

@@ -7,7 +7,7 @@ export default {
 
 type Props = {background: string; height: number; top: number};
 
-const FixedDiv: React.FC<Props> = ({background, height, top}) => (
+const FixedDiv = ({background, height, top}: Props) => (
     <div style={{position: 'fixed', top, height, width: 300, background}}>
         top: {top}, height: {height}
     </div>

src/__stories__/form-error-handler-story.tsx

@@ -7,7 +7,7 @@ export default {
 
 type CardProps = {show: boolean; children: React.ReactNode; onPress: any};
 
-const Card: React.FC<CardProps> = ({show, children, onPress}) => {
+const Card = ({show, children, onPress}: CardProps) => {
     return (
         <>
             <Touchable onPress={onPress} style={{background: 'lightgray', padding: 8}}>
@@ -18,7 +18,7 @@ const Card: React.FC<CardProps> = ({show, children, onPress}) => {
     );
 };
 
-const Cards: React.FC<any> = ({activeCard, setActiveCard}) => {
+const Cards = ({activeCard, setActiveCard}: any) => {
     const {formErrors} = useForm();
 
     return (

src/__stories__/helpers.tsx

@@ -7,7 +7,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-export const StorySection: React.FC<Props> = ({title, children}) => {
+export const StorySection = ({title, children}: Props): JSX.Element => {
     const isInverse = useIsInverseVariant();
     return (
         <div style={{marginBottom: 32}}>

src/__stories__/story.d.ts

@@ -1,4 +1,4 @@
-declare type StoryComponent<T = {children?: ReactNode}> = React.FC<T> & {
+declare type StoryComponent<T = {children?: ReactNode}> = {(props: T): JSX.Element} & {
     storyName?: string;
     decorators?: Array<any>;
     parameters?: {[name: string]: any};

src/__stories__/text-link-story.tsx

@@ -27,7 +27,7 @@ interface TextStyleWrapperProps {
     children: React.ReactNode;
 }
 
-const TextStyleWrapper: React.FC<TextStyleWrapperProps> = ({children, textStyle}) => {
+const TextStyleWrapper = ({children, textStyle}: TextStyleWrapperProps) => {
     if (textStyle === 'Text1') {
         return <Text1 regular>{children}</Text1>;
     }

src/__tests__/navigation-breadcrumbs-test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import NavigationBreadcrumbs from '../navigation-breadcrumbs';
+import userEvent from '@testing-library/user-event';
+
+test('Breadcrumbs onNavigate is called when pressing a link', async () => {
+    const navigateSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <NavigationBreadcrumbs
+                title="Title"
+                breadcrumbs={[
+                    {title: 'breadcrumb 1', url: '#', onNavigate: () => navigateSpy('breadcrumb 1')},
+                    {title: 'breadcrumb 2', url: '#', onNavigate: () => navigateSpy('breadcrumb 2')},
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    const firstLink = await screen.findByRole('link', {name: 'breadcrumb 1'});
+    const secondLink = await screen.findByRole('link', {name: 'breadcrumb 2'});
+
+    await userEvent.click(firstLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 1');
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(secondLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 2');
+    expect(navigateSpy).toHaveBeenCalledTimes(2);
+});

src/__tests__/popover-test.tsx

@@ -6,7 +6,7 @@ import {makeTheme} from './test-utils';
 
 type Props = Omit<React.ComponentProps<typeof Popover>, 'description' | 'target'>;
 
-const TestPopover: React.FC<Props> = ({children, ...props}) => (
+const TestPopover = ({children, ...props}: Props) => (
     <ThemeContextProvider theme={makeTheme()}>
         <Popover {...props} description="Content" target={<span>Press me!</span>} />
     </ThemeContextProvider>

src/__tests__/snackbar-test.tsx

@@ -190,7 +190,7 @@ test('nativeMessage should be called once, even if the component re-renders', as
     const onCloseMock = jest.fn();
     const nativeMessageMock = jest.spyOn(bridge, 'nativeMessage').mockResolvedValue();
 
-    const ComponentWithSnackbar: React.FC<{onClose: () => unknown}> = ({onClose}) => {
+    const ComponentWithSnackbar = ({onClose}: {onClose: () => unknown}) => {
         const [count, setCount] = React.useState(0);
         return (
             <>

src/__tests__/tooltip-test.tsx

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 
 type Props = Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'target'>;
 
-const TestTooltip: React.FC<Props> = (props) => (
+const TestTooltip = (props: Props) => (
     <ThemeContextProvider theme={makeTheme()}>
         <Tooltip
             {...props}

src/accordion.tsx

@@ -230,15 +230,15 @@ type MultipleOpenProps = {
 
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
 
-export const Accordion: React.FC<AccordionProps> = ({
+export const Accordion = ({
     children,
     dataAttributes,
     index,
     defaultIndex,
     onChange,
     singleOpen,
     role,
-}) => {
+}: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
         defaultValue: defaultIndex,
@@ -285,15 +285,15 @@ export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordio
     )
 );
 
-export const BoxedAccordion: React.FC<AccordionProps> = ({
+export const BoxedAccordion = ({
     children,
     dataAttributes,
     index,
     defaultIndex,
     onChange,
     singleOpen,
     role,
-}) => {
+}: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
         defaultValue: defaultIndex,

src/avatar.tsx

@@ -33,7 +33,7 @@ type AvatarProps = {
     initials?: string;
     textColor?: string;
     backgroundColor?: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     badge?: boolean | number;
     'aria-label'?: string;
     dataAttributes?: DataAttributes;

src/badge.tsx

@@ -26,7 +26,7 @@ type Props = {
  *   <IconButton aria-label="Shopping Cart with 2 items" Icon={IconShoppingCartFilled}/>
  * </Badge>
  */
-const Badge: React.FC<Props> = ({children, value, right, top, dataAttributes}) => {
+const Badge = ({children, value, right, top, dataAttributes}: Props): JSX.Element | null => {
     const isInverse = useIsInverseVariant();
     const {textPresets} = useTheme();
     if (children && value === 0) {