@telefonica/mistica 16.67.0 → 16.69.0

package/src/button.tsx

@@ -403,52 +403,66 @@ const BaseButton = React.forwardRef<
         props.buttonType === 'linkDanger' && isDarkMode && variant === 'brand'
             ? 'linkDangerDark'
             : props.buttonType;
+    const buttonVariantClassName =
+        variant === 'media'
+            ? styles.overMediaButtonVariants[finalType]
+            : variant === 'brand'
+              ? styles.overBrandButtonVariants[finalType]
+              : variant === 'negative'
+                ? styles.overNegativeButtonVariants[finalType]
+                : styles.buttonVariants[finalType];
+    const stateClassNames = {
+        [styles.small]: props.small,
+        [styles.isLoading]: showSpinner,
+    };
+    const content = renderButtonContent({
+        showSpinner,
+        shouldRenderSpinner,
+        setShouldRenderSpinner,
+        children: props.children,
+        loadingText,
+        small: props.small,
+        StartIcon: props.StartIcon,
+        EndIcon: props.EndIcon,
+        withChevron: showChevron,
+        platformOverrides,
+    });
+    const buttonStyle: React.CSSProperties = {
+        ...applyCssVars({
+            [styles.buttonVars.minWidth]: props.small ? minWidthProps.small : minWidthProps.default,
+        }),
+
+        /**
+         * Setting bleed classes with style to override the margin:0 set by the Touchable component.
+         * If we set it using className, it may not work depending on the order in which the styles are applied.
+         */
+        ...(props.bleedLeft
+            ? {
+                  marginLeft: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingLeft.small : styles.buttonPaddingLeft.default}))`,
+              }
+            : undefined),
+        ...(props.bleedRight
+            ? {
+                  marginRight: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingRight.small : styles.buttonPaddingRight.default}))`,
+              }
+            : undefined),
+        ...(props.bleedY
+            ? {
+                  marginTop: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
+                  marginBottom: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
+              }
+            : undefined),
+
+        cursor: props.fake ? 'pointer' : undefined,
+        ...props.style,
+    };
 
     const commonProps = {
         ref,
-        className: classnames(
-            variant === 'media'
-                ? styles.overMediaButtonVariants[finalType]
-                : variant === 'brand'
-                  ? styles.overBrandButtonVariants[finalType]
-                  : variant === 'negative'
-                    ? styles.overNegativeButtonVariants[finalType]
-                    : styles.buttonVariants[finalType],
-            props.className,
-            {
-                [styles.small]: props.small,
-                [styles.isLoading]: showSpinner,
-            }
-        ),
-        style: {
-            ...applyCssVars({
-                [styles.buttonVars.minWidth]: props.small ? minWidthProps.small : minWidthProps.default,
-            }),
-
-            /**
-             * Setting bleed classes with style to override the margin:0 set by the Touchable component.
-             * If we set it using className, it may not work depending on the order in which the styles are applied.
-             */
-            ...(props.bleedLeft
-                ? {
-                      marginLeft: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingLeft.small : styles.buttonPaddingLeft.default}))`,
-                  }
-                : undefined),
-            ...(props.bleedRight
-                ? {
-                      marginRight: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingRight.small : styles.buttonPaddingRight.default}))`,
-                  }
-                : undefined),
-            ...(props.bleedY
-                ? {
-                      marginTop: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
-                      marginBottom: `calc(-1 * (${styles.borderSize} + ${props.small ? styles.buttonPaddingY.small : styles.buttonPaddingY.default}))`,
-                  }
-                : undefined),
-
-            cursor: props.fake ? 'pointer' : undefined,
-            ...props.style,
-        },
+        className: props.small
+            ? classnames(styles.smallTouchableArea, stateClassNames)
+            : classnames(buttonVariantClassName, props.className, stateClassNames),
+        style: props.small ? {cursor: props.fake ? 'pointer' : undefined} : buttonStyle,
         trackingEvent: props.trackingEvent ?? (props.trackEvent ? createDefaultTrackingEvent() : undefined),
         dataAttributes: props.dataAttributes,
         'aria-label': props['aria-label'],
@@ -460,22 +474,26 @@ const BaseButton = React.forwardRef<
         'aria-description': props['aria-description'],
         'aria-describedby': props['aria-describedby'],
         tabIndex: props.tabIndex,
-        children: renderButtonContent({
-            showSpinner,
-            shouldRenderSpinner,
-            setShouldRenderSpinner,
-            children: props.children,
-            loadingText,
-            small: props.small,
-            StartIcon: props.StartIcon,
-            EndIcon: props.EndIcon,
-            withChevron: showChevron,
-            platformOverrides,
-        }),
+        children: props.small ? (
+            <div className={classnames(buttonVariantClassName, styles.smallTouchableVisual)}>{content}</div>
+        ) : (
+            content
+        ),
         disabled: props.disabled || showSpinner || isFormSending,
         role: props.role,
     };
 
+    const containerClassName = classnames(styles.smallTouchableContainer, props.className);
+
+    const wrapInContainer = (touchable: React.ReactNode) =>
+        props.small ? (
+            <div className={containerClassName} style={buttonStyle}>
+                {touchable}
+            </div>
+        ) : (
+            touchable
+        );
+
     if (process.env.NODE_ENV !== 'production') {
         if (props.to === '' || props.href === '') {
             throw Error('to or href props are empty strings');
@@ -483,16 +501,18 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.fake) {
-        return <BaseTouchable maybe {...commonProps} />;
+        return wrapInContainer(<BaseTouchable maybe {...commonProps} />);
     }
 
     if (props.submit) {
         // using empty onPress handler so it gets rendered as a button
-        return <BaseTouchable type="submit" formId={formId} onPress={() => {}} {...commonProps} />;
+        return wrapInContainer(
+            <BaseTouchable type="submit" formId={formId} onPress={() => {}} {...commonProps} />
+        );
     }
 
     if (props.onPress) {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 onPress={(e) => {
@@ -507,7 +527,7 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.to || props.to === '') {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 to={props.to}
@@ -519,7 +539,7 @@ const BaseButton = React.forwardRef<
     }
 
     if (props.href || props.href === '') {
-        return (
+        return wrapInContainer(
             <BaseTouchable
                 {...commonProps}
                 href={props.href}

package/src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx

@@ -12,7 +12,7 @@ test.each`
     ${'button and link'} | ${true}
 `('Advanced Data Card actions: $actions - footerImage: $footerImage', async ({actions, footerImage}) => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {actions, footerImage},
     });
@@ -30,7 +30,7 @@ test.each`
     ${3}
 `('Advanced Data Card extras: $extra', async ({extra}) => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {extra},
     });
@@ -43,7 +43,7 @@ test.each`
 
 test('Advanced Data Card extras: 3 no divider', async () => {
     await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {extra: 3, noExtraDivider: true},
     });
@@ -56,7 +56,7 @@ test('Advanced Data Card extras: 3 no divider', async () => {
 
 test('Advanced Data Card inside Carousel', async () => {
     await openStoryPage({
-        id: 'community-advanceddatacards-in-carousel--default',
+        id: 'community-vivo-advanceddatacards-in-carousel--default',
         device: 'DESKTOP',
     });
 
@@ -68,7 +68,7 @@ test('Advanced Data Card inside Carousel', async () => {
 
 test('Advanced Data Card without stackingGroup, with top actions and too long title', async () => {
     const page = await openStoryPage({
-        id: 'community-advanceddatacard--default',
+        id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
         args: {
             stackingGroup: false,

package/src/community/__screenshot_tests__/blocks-screenshot-test.tsx

@@ -1,7 +1,7 @@
 import {openStoryPage, screen} from '../../test-utils';
 
 test('Blocks Highlighted Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-highlighted-value', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-highlighted-value', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('highlighted-value-block');
 
@@ -11,7 +11,7 @@ test('Blocks Highlighted Value Block', async () => {
 });
 
 test('Blocks Information Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-information', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-information', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('information-block');
 
@@ -25,7 +25,7 @@ test.each`
     ${false}      | ${true}
 `('Blocks Progress Block', async ({stackingGroup}) => {
     await openStoryPage({
-        id: 'community-blocks--block-progress',
+        id: 'community-vivo-blocks--block-progress',
         device: 'MOBILE_IOS',
         args: {stackingGroup},
     });
@@ -39,7 +39,7 @@ test.each`
 
 test('Blocks Row Block', async () => {
     await openStoryPage({
-        id: 'community-blocks--block-row',
+        id: 'community-vivo-blocks--block-row',
         device: 'MOBILE_IOS',
         args: {description: 'This is a very long description to verify text alignment'},
     });
@@ -52,7 +52,7 @@ test('Blocks Row Block', async () => {
 });
 
 test('Blocks Simple Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-simple', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-simple', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('simple-block');
 
@@ -62,7 +62,7 @@ test('Blocks Simple Block', async () => {
 });
 
 test('Blocks Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-value', device: 'MOBILE_IOS'});
+    await openStoryPage({id: 'community-vivo-blocks--block-value', device: 'MOBILE_IOS'});
 
     const stepper = await screen.findByTestId('value-block');
 

package/src/community/__stories__/advanced-data-card-carousel-story.tsx

@@ -5,7 +5,7 @@ import {Carousel} from '../../carousel';
 import Tag from '../../tag';
 
 export default {
-    title: 'Community/AdvancedDataCards in Carousel',
+    title: 'Community/Vivo/AdvancedDataCards in Carousel',
 };
 
 type Args = {href: boolean};

package/src/community/__stories__/advanced-data-card-story.tsx

@@ -11,7 +11,7 @@ import type {HeadingType} from '../../utils/types';
 import type {TagType} from '../../tag';
 
 export default {
-    title: 'Community/AdvancedDataCard',
+    title: 'Community/Vivo/AdvancedDataCard',
 };
 
 type Args = {

package/src/community/__stories__/ai-card-story.tsx

@@ -6,7 +6,7 @@ import IconArtificialIntelligenceFilled from '../../generated/mistica-icons/icon
 import {vars} from '../../skins/skin-contract.css';
 
 export default {
-    title: 'Community/AiCard',
+    title: 'Community/Vivo/AiCard',
     parameters: {fullScreen: true},
 };
 

package/src/community/__stories__/blocks-story.tsx

@@ -14,7 +14,7 @@ import {vars} from '../../skins/skin-contract.css';
 import type {TagType} from '../..';
 
 export default {
-    title: 'Community/Blocks',
+    title: 'Community/Vivo/Blocks',
     parameters: {
         fullScreen: true,
     },

package/src/community/skins/cyber-skin.tsx

@@ -109,9 +109,9 @@ export const getCyberSkin = (): Skin => {
             backgroundDropZoneMediaHover: applyAlpha(palette.brand80, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.brand80, 0.4),
             skeletonWave: palette.grey100,
-            borderLow: palette.grey100,
-            border: palette.grey300,
-            borderHigh: palette.grey500,
+            borderLow: palette.grey15,
+            border: palette.grey100,
+            borderHigh: palette.grey400,
             borderSelected: palette.brand,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
@@ -481,7 +481,7 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
-            textActivated: palette.brand30,
+            textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,
             inputBorder: palette.grey400,
             inputBorderInverse: palette.grey400,
@@ -501,10 +501,10 @@ export const getCyberSkin = (): Skin => {
             controlActivatedBrand: palette.darkModeBrand,
             controlError: palette.red30,
             chevronIndicator: palette.grey400,
-            barTrack: palette.brandDark,
-            barTrackInverse: palette.brandDark,
-            barTrackNegative: palette.brandDark,
-            barTrackBrand: palette.brandDark,
+            barTrack: palette.grey800,
+            barTrackInverse: palette.grey800,
+            barTrackNegative: palette.grey800,
+            barTrackBrand: palette.grey800,
             loadingBar: palette.darkModeBrand,
             loadingBarBackground: palette.grey500,
             toggleAndroidInactive: palette.grey100,

package/src/focus-trap.tsx

@@ -6,10 +6,18 @@ type Props = {
     className?: string;
     disabled?: boolean;
     group?: string;
+    returnFocus?: React.ComponentProps<typeof ReactFocusLock>['returnFocus'];
 };
 
-const FocusTrap = ({children, disabled, className, group}: Props): JSX.Element => (
-    <ReactFocusLock noFocusGuards disabled={disabled} className={className} group={group}>
+// TODO https://github.com/Telefonica/mistica-web/issues/1589 unify focus-restoration logic with consumers that restore focus manually (e.g. Drawer's useRestoreFocus)
+const FocusTrap = ({children, disabled, className, group, returnFocus = true}: Props): JSX.Element => (
+    <ReactFocusLock
+        noFocusGuards
+        disabled={disabled}
+        className={className}
+        group={group}
+        returnFocus={returnFocus}
+    >
         {children}
     </ReactFocusLock>
 );

package/src/icons/__stories__/mistica-icons-story.tsx

@@ -41,6 +41,9 @@ export default {
             options: ['default', 'brand', 'negative', 'alternative'],
             control: {type: 'select'},
         },
+        gradient: {
+            control: {type: 'boolean'},
+        },
     },
     parameters: {
         fullScreen: true,
@@ -57,6 +60,7 @@ type Args = {
     variantOutside: Variant;
     names: boolean;
     background: boolean;
+    gradient: boolean;
 };
 
 export const Catalog: StoryComponent<Args> = ({
@@ -69,6 +73,7 @@ export const Catalog: StoryComponent<Args> = ({
     variantOutside,
     names,
     background,
+    gradient,
 }) => {
     const getRealName = (name: string) => name.replace(/^Icon/, '').replace(/(Regular|Filled|Light)$/, '');
     const getTypeSortValue = (name: string) => {
@@ -138,6 +143,7 @@ export const Catalog: StoryComponent<Args> = ({
             ));
 
     const iconBackgroundColor = background ? '#aaa' : 'none';
+    const gradientColor = 'linear-gradient(225deg, #AE42E4 17.51%, #BD4AFF 38.3%, #EF7E9C 82.5%)';
 
     return (
         <ResponsiveLayout fullWidth variant={variantOutside}>
@@ -165,7 +171,7 @@ export const Catalog: StoryComponent<Args> = ({
                                     fontSize: 0,
                                 }}
                             >
-                                <Icon size={size} />
+                                <Icon size={size} color={gradient ? gradientColor : undefined} />
                             </div>
                             {names && (
                                 <Box paddingTop={8}>
@@ -189,4 +195,5 @@ Catalog.args = {
     variantOutside: 'default',
     names: true,
     background: false,
+    gradient: false,
 };

package/src/index.tsx

@@ -1074,6 +1074,9 @@ export {default as IconEmergencyCrossRegular} from './generated/mistica-icons/ic
 export {default as IconEmergencyCrossWithCircleFilled} from './generated/mistica-icons/icon-emergency-cross-with-circle-filled';
 export {default as IconEmergencyCrossWithCircleLight} from './generated/mistica-icons/icon-emergency-cross-with-circle-light';
 export {default as IconEmergencyCrossWithCircleRegular} from './generated/mistica-icons/icon-emergency-cross-with-circle-regular';
+export {default as IconEqualFilled} from './generated/mistica-icons/icon-equal-filled';
+export {default as IconEqualLight} from './generated/mistica-icons/icon-equal-light';
+export {default as IconEqualRegular} from './generated/mistica-icons/icon-equal-regular';
 export {default as IconErrorFilled} from './generated/mistica-icons/icon-error-filled';
 export {default as IconErrorLight} from './generated/mistica-icons/icon-error-light';
 export {default as IconErrorRegular} from './generated/mistica-icons/icon-error-regular';
@@ -1893,6 +1896,15 @@ export {default as IconQueueRegular} from './generated/mistica-icons/icon-queue-
 export {default as IconRainFilled} from './generated/mistica-icons/icon-rain-filled';
 export {default as IconRainLight} from './generated/mistica-icons/icon-rain-light';
 export {default as IconRainRegular} from './generated/mistica-icons/icon-rain-regular';
+export {default as IconRankHighestFilled} from './generated/mistica-icons/icon-rank-highest-filled';
+export {default as IconRankHighestLight} from './generated/mistica-icons/icon-rank-highest-light';
+export {default as IconRankHighestRegular} from './generated/mistica-icons/icon-rank-highest-regular';
+export {default as IconRankHighFilled} from './generated/mistica-icons/icon-rank-high-filled';
+export {default as IconRankHighLight} from './generated/mistica-icons/icon-rank-high-light';
+export {default as IconRankHighRegular} from './generated/mistica-icons/icon-rank-high-regular';
+export {default as IconRankLowFilled} from './generated/mistica-icons/icon-rank-low-filled';
+export {default as IconRankLowLight} from './generated/mistica-icons/icon-rank-low-light';
+export {default as IconRankLowRegular} from './generated/mistica-icons/icon-rank-low-regular';
 export {default as IconRatingFilled} from './generated/mistica-icons/icon-rating-filled';
 export {default as IconRatingLight} from './generated/mistica-icons/icon-rating-light';
 export {default as IconRatingRegular} from './generated/mistica-icons/icon-rating-regular';
@@ -1939,6 +1951,9 @@ export {default as IconRewindCircleRegular} from './generated/mistica-icons/icon
 export {default as IconRewindFilled} from './generated/mistica-icons/icon-rewind-filled';
 export {default as IconRewindLight} from './generated/mistica-icons/icon-rewind-light';
 export {default as IconRewindRegular} from './generated/mistica-icons/icon-rewind-regular';
+export {default as IconRingFilled} from './generated/mistica-icons/icon-ring-filled';
+export {default as IconRingLight} from './generated/mistica-icons/icon-ring-light';
+export {default as IconRingRegular} from './generated/mistica-icons/icon-ring-regular';
 export {default as IconRoadSignFilled} from './generated/mistica-icons/icon-road-sign-filled';
 export {default as IconRoadSignLight} from './generated/mistica-icons/icon-road-sign-light';
 export {default as IconRoadSignRegular} from './generated/mistica-icons/icon-road-sign-regular';

package/src/menu.tsx

@@ -153,7 +153,6 @@ export const MenuItem = ({
                 onChange={() => {
                     if (isMenuOpen && itemIndex !== null) {
                         onPress?.(itemIndex);
-                        closeMenu();
                     }
                 }}
                 disabled={disabled}

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.67.0' as string;
+export const PACKAGE_VERSION = '16.69.0' as string;

package/src/theme-context-provider.tsx

@@ -26,7 +26,6 @@ import {PACKAGE_VERSION} from './package-version';
 import {SnackbarRoot} from './snackbar-context';
 import {mapToWeight} from './text';
 import * as mq from './media-queries.css';
-import * as styles from './theme-context.css';
 import {localeToLanguage} from './utils/locale';
 
 import type {Colors, TextPresetsConfig} from './skins/types';
@@ -140,6 +139,7 @@ const makeRawColors = (colors: Colors): Colors =>
     ) as Colors;
 
 const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Props): JSX.Element => {
+    const themeScopeId = React.useId();
     const isOsDarkModeEnabled = useIsOsDarkModeEnabled();
 
     const colorScheme = theme.colorScheme ?? 'auto';
@@ -332,16 +332,18 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
                                                 <SnackbarRoot>
                                                     {as ? (
                                                         <>
-                                                            {renderStyles(`.${styles.themeVars}`)}
+                                                            {renderStyles(
+                                                                `[data-mistica-theme="${themeScopeId}"]`
+                                                            )}
                                                             {React.createElement(
                                                                 as,
                                                                 {
                                                                     style: {
                                                                         isolation: 'isolate',
                                                                     },
-                                                                    className: withoutStyles
+                                                                    'data-mistica-theme': withoutStyles
                                                                         ? undefined
-                                                                        : styles.themeVars,
+                                                                        : themeScopeId,
                                                                 },
                                                                 children
                                                             )}

package/src/utils/__tests__/icon-gradient-helpers-test.tsx

@@ -0,0 +1,90 @@
+import {
+    directionToAngle,
+    splitGradientParts,
+    parseColorStop,
+    parseLinearGradient,
+    parseRadialGradient,
+    parseCSSGradient,
+    extractGradientContent,
+} from '../icon-gradient-helpers';
+
+test('directionToAngle converts css directions to angles', () => {
+    expect(directionToAngle('to right')).toBe(90);
+    expect(directionToAngle('to bottom')).toBe(180);
+    expect(directionToAngle('invalid')).toBe(180);
+});
+
+test('splitGradientParts ignores commas inside functions', () => {
+    expect(splitGradientParts('rgba(0,0,0,1), rgba(255,255,255,1)')).toEqual([
+        'rgba(0,0,0,1)',
+        ' rgba(255,255,255,1)',
+    ]);
+});
+
+test('parseColorStop parses correct offsets or falls back to defaults', () => {
+    expect(parseColorStop('#fff 25%', 0, 2)).toEqual({color: '#fff', offset: '25%'});
+    expect(parseColorStop('#fff', 0, 2)).toEqual({color: '#fff', offset: '0%'});
+    expect(parseColorStop('', 0, 2)).toBeNull();
+});
+
+test('parseLinearGradient parses direction, stops and angle units', () => {
+    expect(parseLinearGradient('to right, red, blue')).toEqual({
+        type: 'linear',
+        angle: 90,
+        stops: [
+            {color: 'red', offset: '0%'},
+            {color: 'blue', offset: '100%'},
+        ],
+    });
+    expect(parseLinearGradient('45deg, red, blue')?.angle).toBe(45);
+    expect(parseLinearGradient('100grad, red, blue')?.angle).toBe(90);
+    expect(parseLinearGradient('1rad, red, blue')?.angle).toBeCloseTo(57.2958, 4);
+    expect(parseLinearGradient('0.5turn, red, blue')?.angle).toBe(180);
+});
+
+test('parseLinearGradient returns null if no color stops are found', () => {
+    expect(parseLinearGradient('to right')).toBeNull();
+    expect(parseLinearGradient('45deg')).toBeNull();
+});
+
+test('parseRadialGradient parses configurations, shapes and center positions', () => {
+    expect(parseRadialGradient('circle at center, red, blue')).toEqual({
+        type: 'radial',
+        center: {x: '50%', y: '50%'},
+        radius: undefined,
+        stops: [
+            {color: 'red', offset: '0%'},
+            {color: 'blue', offset: '100%'},
+        ],
+    });
+    expect(parseRadialGradient('circle at 25% 75%, red, blue')?.center).toEqual({
+        x: '25%',
+        y: '75%',
+    });
+    expect(parseRadialGradient('50% at center, red, blue')?.radius).toBe('50%');
+    expect(parseRadialGradient('circle, red, blue')?.type).toBe('radial');
+    expect(parseRadialGradient('ellipse, red, blue')?.type).toBe('radial');
+});
+
+test('parseRadialGradient returns null if invalid or no color stops are found', () => {
+    expect(parseRadialGradient('circle at center')).toBeNull();
+    expect(parseRadialGradient('ellipse')).toBeNull();
+});
+
+test('parseCSSGradient returns null for invalid input', () => {
+    expect(parseCSSGradient('red')).toBeNull();
+});
+
+test('extractGradientContent handles valid and invalid inputs', () => {
+    expect(extractGradientContent('linear-gradient(red, blue)')).toEqual({
+        type: 'linear',
+        content: 'red, blue',
+    });
+    expect(extractGradientContent('radial-gradient(red, blue)')).toEqual({
+        type: 'radial',
+        content: 'red, blue',
+    });
+    expect(extractGradientContent('linear-gradient')).toBeNull();
+    expect(extractGradientContent('linear-gradient(red, blue')).toBeNull();
+    expect(extractGradientContent('red')).toBeNull();
+});