diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a330d30f35..83a01e9744 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -71,14 +71,16 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => { }, []); return ( - - - {skin === VIVO_NEW_SKIN && } - {skin === TELEFONICA_SKIN && } - {skin === O2_SKIN && } - - - + + + + {skin === VIVO_NEW_SKIN && } + {skin === TELEFONICA_SKIN && } + {skin === O2_SKIN && } + + + + ); }; diff --git a/CHANGELOG.md b/CHANGELOG.md index c322e16961..786c490368 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,46 @@ +# [14.24.0](https://github.com/Telefonica/mistica-web/compare/v14.23.1...v14.24.0) (2023-09-28) + + +### Features + +* **Sheet:** multiline support for description ([#896](https://github.com/Telefonica/mistica-web/issues/896)) ([0c328bf](https://github.com/Telefonica/mistica-web/commit/0c328bf4c2c19cc4f57438416e479326988a2999)) + +## [14.23.1](https://github.com/Telefonica/mistica-web/compare/v14.23.0...v14.23.1) (2023-09-25) + + +### Bug Fixes + +* **Header:** don't render title when not provided ([#898](https://github.com/Telefonica/mistica-web/issues/898)) ([b760243](https://github.com/Telefonica/mistica-web/commit/b760243d6c905befb8e5c97e80e5e59b9075e916)) +* **Snackbar:** z-index conflict with FixedFooterLayout ([#897](https://github.com/Telefonica/mistica-web/issues/897)) ([0d86e02](https://github.com/Telefonica/mistica-web/commit/0d86e027ba73937b091f1c04bf1099fdb21aa72d)) +* **SuccessFeedback:** Vivo-new icon size change ([#895](https://github.com/Telefonica/mistica-web/issues/895)) ([71c5297](https://github.com/Telefonica/mistica-web/commit/71c5297fcef8be8c9ec7b0c1aee8b3972a4b76df)) + +# [14.23.0](https://github.com/Telefonica/mistica-web/compare/v14.22.2...v14.23.0) (2023-09-22) + + +### Bug Fixes + +* **Cards:** use polyfill for aspectRatio to prevent Safari from behaving different than other browsers ([#890](https://github.com/Telefonica/mistica-web/issues/890)) ([f81490f](https://github.com/Telefonica/mistica-web/commit/f81490f0861d5671f7364d87694a8205d0a317c8)) +* **FixedFooterLayout:** prevent content from being rendered on top of the footer ([#891](https://github.com/Telefonica/mistica-web/issues/891)) ([dc861d5](https://github.com/Telefonica/mistica-web/commit/dc861d5bfa4c36e55e3db7ee80e73b6d4ba86452)) + + +### Features + +* **Carousel:** large mobilePageOffset support ([#887](https://github.com/Telefonica/mistica-web/issues/887)) ([803506a](https://github.com/Telefonica/mistica-web/commit/803506af37d3c4e3dd5315ea0baad0d04177e95e)) + +## [14.22.2](https://github.com/Telefonica/mistica-web/compare/v14.22.1...v14.22.2) (2023-09-18) + + +### Bug Fixes + +* **Touchable:** add margin 0 as default to prevent Safari issues ([#885](https://github.com/Telefonica/mistica-web/issues/885)) ([9c1b470](https://github.com/Telefonica/mistica-web/commit/9c1b47073c5a543e17c351cb2863610c5ce7e31f)) + +## [14.22.1](https://github.com/Telefonica/mistica-web/compare/v14.22.0...v14.22.1) (2023-09-14) + + +### Bug Fixes + +* **AdvancedDataCard:** add isolation to container ([#884](https://github.com/Telefonica/mistica-web/issues/884)) ([53a1dbe](https://github.com/Telefonica/mistica-web/commit/53a1dbe4121deabd96c1504a66d584958a42f17d)) + # [14.22.0](https://github.com/Telefonica/mistica-web/compare/v14.21.0...v14.22.0) (2023-09-11) diff --git a/package.json b/package.json index 4eb237968b..ecd6bf5ae0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@telefonica/mistica", - "version": "14.22.0", + "version": "14.24.0", "license": "MIT", "repository": { "type": "git", diff --git a/playroom/frame-component.tsx b/playroom/frame-component.tsx index e814d2c47c..d187b56ba4 100644 --- a/playroom/frame-component.tsx +++ b/playroom/frame-component.tsx @@ -62,16 +62,18 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string} type Props = {children: React.ReactNode; theme: ThemeConfig}; const FrameComponent = ({children, theme}: Props): React.ReactNode => ( - - {(overridenTheme) => ( - - - - {children} - - - )} - + + + {(overridenTheme) => ( + + + + {children} + + + )} + + ); export default FrameComponent; diff --git a/playroom/themes.tsx b/playroom/themes.tsx index b565b07e1a..af66f650c5 100644 --- a/playroom/themes.tsx +++ b/playroom/themes.tsx @@ -5,7 +5,6 @@ import type {ThemeConfig} from '../src/theme'; const common: Partial = { enableTabFocus: true, colorScheme: 'auto', - i18n: {locale: 'en-US', phoneNumberFormattingRegionCode: 'ES'}, dimensions: { headerMobileHeight: 0, }, diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png new file mode 100644 index 0000000000..cb90432fac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png new file mode 100644 index 0000000000..a498bcdaab Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-1-snap.png new file mode 100644 index 0000000000..d8f08ee824 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-2-snap.png new file mode 100644 index 0000000000..05775e6345 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-with-large-mobile-page-offset-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/data-card-screenshot-test-tsx-data-card-with-aspect-ratio-7-10-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/data-card-screenshot-test-tsx-data-card-with-aspect-ratio-7-10-1-snap.png index 2ec599b45d..618a7274f6 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/data-card-screenshot-test-tsx-data-card-with-aspect-ratio-7-10-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/data-card-screenshot-test-tsx-data-card-with-aspect-ratio-7-10-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/display-data-card-screenshot-test-tsx-display-data-card-with-aspect-ratio-7-10-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/display-data-card-screenshot-test-tsx-display-data-card-with-aspect-ratio-7-10-1-snap.png index 8f22c9c917..b27a4df66e 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/display-data-card-screenshot-test-tsx-display-data-card-with-aspect-ratio-7-10-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/display-data-card-screenshot-test-tsx-display-data-card-with-aspect-ratio-7-10-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/display-media-card-screenshot-test-tsx-display-media-card-group-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/display-media-card-screenshot-test-tsx-display-media-card-group-1-snap.png index ef1ac949c7..4078e9a2d2 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/display-media-card-screenshot-test-tsx-display-media-card-group-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/display-media-card-screenshot-test-tsx-display-media-card-group-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png index d9425aad1c..086efbcf60 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png index 31a6dd7d53..9a37b8e240 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-1-snap.png index 00fb0ad020..3b080f090a 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-2-snap.png index 4cef2f7a34..090fc3fed4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-3-snap.png index 171bfb8018..4661d5151f 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-blau-3-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-1-snap.png index 00fb0ad020..3b080f090a 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-2-snap.png index 4cef2f7a34..090fc3fed4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-3-snap.png index 171bfb8018..4661d5151f 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-movistar-3-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-1-snap.png index 00fb0ad020..3b080f090a 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-2-snap.png index 4cef2f7a34..090fc3fed4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-3-snap.png index 171bfb8018..4661d5151f 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/icons-screenshot-test-tsx-icons-catalog-for-o-2-3-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-group-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-group-1-snap.png index 9353a2da4f..c0f77d07d2 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-group-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-group-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-1-snap.png deleted file mode 100644 index 5f57c1ff5c..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-1-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-default-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-default-1-snap.png new file mode 100644 index 0000000000..3f1cebfd67 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-default-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-red-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-red-1-snap.png new file mode 100644 index 0000000000..56e906c1ef Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-color-red-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png new file mode 100644 index 0000000000..644afb28be Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/snap-card-screenshot-test-tsx-snap-card-with-aspect-ratio-7-10-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/snap-card-screenshot-test-tsx-snap-card-with-aspect-ratio-7-10-1-snap.png index 2b61a0e96c..49913e4fc4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/snap-card-screenshot-test-tsx-snap-card-with-aspect-ratio-7-10-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/snap-card-screenshot-test-tsx-snap-card-with-aspect-ratio-7-10-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-1-snap.png deleted file mode 100644 index 7603697a64..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-1-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-2-snap.png deleted file mode 100644 index d3e25a448c..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-2-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-3-snap.png deleted file mode 100644 index 151746b5c8..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-3-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-4-snap.png deleted file mode 100644 index b25f0daabd..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-4-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-5-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-5-snap.png deleted file mode 100644 index 9c316ee2e9..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-5-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-6-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-6-snap.png deleted file mode 100644 index 967e864fe9..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-6-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-7-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-7-snap.png deleted file mode 100644 index 25c509222f..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-7-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-8-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-8-snap.png deleted file mode 100644 index 61c3fb87b5..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-8-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png new file mode 100644 index 0000000000..17400e152c Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png new file mode 100644 index 0000000000..7ac168ffb1 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png new file mode 100644 index 0000000000..abf09de796 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png new file mode 100644 index 0000000000..d5c7e09eba Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png new file mode 100644 index 0000000000..7d54787af5 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png new file mode 100644 index 0000000000..6e75e7c878 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png new file mode 100644 index 0000000000..a0e3ce9afe Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png new file mode 100644 index 0000000000..6dc6c4c9d9 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png index 4c8f456859..93825e35c7 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png index 609dd0205f..e665ba133e 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-and-long-text-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-and-long-text-snap.png deleted file mode 100644 index 5acef7e857..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-and-long-text-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-snap.png deleted file mode 100644 index ac0a03f010..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-with-link-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-without-link-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-without-link-snap.png deleted file mode 100644 index 3bb2e0caa6..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-desktop-without-link-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-and-long-text-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-and-long-text-snap.png deleted file mode 100644 index 7bcc1570d1..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-and-long-text-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-snap.png deleted file mode 100644 index afd5369f78..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-with-link-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-without-link-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-without-link-snap.png deleted file mode 100644 index 7618dd8987..0000000000 Binary files a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-mobile_android-without-link-snap.png and /dev/null differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-desktop-1-snap.png new file mode 100644 index 0000000000..939827f2be Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-mobile-ios-1-snap.png new file mode 100644 index 0000000000..1e9f4b4fc2 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-icon-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-desktop-1-snap.png new file mode 100644 index 0000000000..57b105cc60 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-mobile-ios-1-snap.png new file mode 100644 index 0000000000..363bb19f25 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-and-long-text-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-desktop-1-snap.png new file mode 100644 index 0000000000..d6464a0ea9 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..f60b7d3016 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-with-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-desktop-1-snap.png new file mode 100644 index 0000000000..8879ec37ca Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..4692e3a20f Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-1-without-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-desktop-1-snap.png new file mode 100644 index 0000000000..e1b7181aff Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-mobile-ios-1-snap.png new file mode 100644 index 0000000000..d34fba0db5 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-icon-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-desktop-1-snap.png new file mode 100644 index 0000000000..5a4a81e0eb Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-mobile-ios-1-snap.png new file mode 100644 index 0000000000..fe36c27493 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-and-long-text-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-desktop-1-snap.png new file mode 100644 index 0000000000..8d910cd2c0 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..b77c4244f0 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-with-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-desktop-1-snap.png new file mode 100644 index 0000000000..e9b74d12af Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..af36d50ecb Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-2-without-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-desktop-1-snap.png new file mode 100644 index 0000000000..139cf88f25 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-mobile-ios-1-snap.png new file mode 100644 index 0000000000..7ad5eef4a5 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-icon-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-desktop-1-snap.png new file mode 100644 index 0000000000..2d6afa831d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-mobile-ios-1-snap.png new file mode 100644 index 0000000000..765521cb05 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-and-long-text-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-desktop-1-snap.png new file mode 100644 index 0000000000..204f43af84 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..fdac1f6bd4 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-with-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-desktop-1-snap.png new file mode 100644 index 0000000000..64f69e3c6f Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-mobile-ios-1-snap.png new file mode 100644 index 0000000000..a4fb31a7ca Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/title-screenshot-test-tsx-title-3-without-link-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/carousel-screenshot-test.tsx b/src/__screenshot_tests__/carousel-screenshot-test.tsx index 70596af02a..07e7117204 100644 --- a/src/__screenshot_tests__/carousel-screenshot-test.tsx +++ b/src/__screenshot_tests__/carousel-screenshot-test.tsx @@ -1,4 +1,5 @@ import {openStoryPage, screen} from '../test-utils'; +import {VIVO_NEW_SKIN} from '../skins/constants'; import type {ElementHandle} from 'puppeteer'; @@ -17,6 +18,34 @@ test('Carousel mobile', async () => { expect(await page.screenshot()).toMatchImageSnapshot(); }); +test('Carousel mobile in Vivo new', async () => { + const page = await openStoryPage({ + id: 'components-carousels-carousel--default', + device: 'MOBILE_IOS', + skin: VIVO_NEW_SKIN, + }); + + expect(await page.screenshot()).toMatchImageSnapshot(); + + await (await screen.findByLabelText('Carousel item 2')).evaluate((el) => el.scrollIntoView()); + + expect(await page.screenshot()).toMatchImageSnapshot(); +}); + +test('Carousel mobile with large mobilePageOffset', async () => { + const page = await openStoryPage({ + id: 'components-carousels-carousel--default', + device: 'MOBILE_IOS', + args: {mobilePageOffset: 'large'}, + }); + + expect(await page.screenshot()).toMatchImageSnapshot(); + + await (await screen.findByLabelText('Carousel item 2')).evaluate((el) => el.scrollIntoView()); + + expect(await page.screenshot()).toMatchImageSnapshot(); +}); + test('Carousel mobile with initialActiveItem=1', async () => { const page = await openStoryPage({ id: 'components-carousels-carousel--default', diff --git a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx index e7b11d0367..8649a31bcd 100644 --- a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx +++ b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx @@ -1,7 +1,9 @@ import {openStoryPage, screen} from '../test-utils'; -test('ProgressBar', async () => { - await openStoryPage({id: 'components-progress-bar--default'}); +const COLORS = ['default', 'red']; + +test.each(COLORS)('ProgressBar - color={%s}', async (color) => { + await openStoryPage({id: 'components-progressbar--default', args: {color}}); const stepper = await screen.findByTestId('progress-bar'); diff --git a/src/__screenshot_tests__/sheet-screenshot-test.tsx b/src/__screenshot_tests__/sheet-screenshot-test.tsx index e39a2bcf94..a0fbfd4bc2 100644 --- a/src/__screenshot_tests__/sheet-screenshot-test.tsx +++ b/src/__screenshot_tests__/sheet-screenshot-test.tsx @@ -66,6 +66,26 @@ test.each(TESTABLE_DEVICES)('InfoSheet in %s', async (device) => { expect(image).toMatchImageSnapshot(); }); +test('InfoSheet with multiple description paragraphs', async () => { + const page = await openStoryPage({ + id: 'components-modals-sheet--info', + device: 'MOBILE_IOS', + args: { + description: 'Description paragraph', + multiparagraphDescription: true, + }, + }); + + const button = await screen.findByRole('button', {name: 'Open'}); + await button.click(); + + await screen.findByRole('dialog'); + + const image = await page.screenshot(); + + expect(image).toMatchImageSnapshot(); +}); + test.each(TESTABLE_DEVICES)('ActionsSheet in %s', async (device) => { const page = await openStoryPage({ id: 'components-modals-sheet--actions', diff --git a/src/__screenshot_tests__/skeletons-screenshot-test.tsx b/src/__screenshot_tests__/skeletons-screenshot-test.tsx index 6cd4cb1508..1b8f678740 100644 --- a/src/__screenshot_tests__/skeletons-screenshot-test.tsx +++ b/src/__screenshot_tests__/skeletons-screenshot-test.tsx @@ -12,7 +12,7 @@ test.each` `Skeleton circle given inverse $givenStoryPageArgs.inverse and size of $givenStoryPageArgs.size`, async ({givenStoryPageArgs}) => { await openStoryPage({ - id: 'components-skeletons-skeleton-circle', + id: 'components-skeletons-skeletoncircle', device: 'MOBILE_IOS', args: givenStoryPageArgs, }); @@ -28,7 +28,7 @@ test.each` ${{inverse: true}} `(`Skeleton row given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => { await openStoryPage({ - id: 'components-skeletons-skeleton-row', + id: 'components-skeletons-skeletonrow', device: 'MOBILE_IOS', args: givenStoryPageArgs, }); @@ -48,7 +48,7 @@ test.each` `Skeleton rectangle given inverse $givenStoryPageArgs.inverse and height $givenStoryPageArgs.height and width $givenStoryPageArgs.width`, async ({givenStoryPageArgs}) => { await openStoryPage({ - id: 'components-skeletons-skeleton-rectangle', + id: 'components-skeletons-skeletonrectangle', device: 'MOBILE_IOS', args: givenStoryPageArgs, }); @@ -64,7 +64,7 @@ test.each` ${{inverse: true}} `(`Skeleton text given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => { await openStoryPage({ - id: 'components-skeletons-skeleton-text', + id: 'components-skeletons-skeletontext', device: 'MOBILE_IOS', args: givenStoryPageArgs, }); @@ -79,7 +79,7 @@ test.each` ${{inverse: true}} `(`Skeleton line given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => { await openStoryPage({ - id: 'components-skeletons-skeleton-line', + id: 'components-skeletons-skeletonline', device: 'MOBILE_IOS', args: givenStoryPageArgs, }); diff --git a/src/__screenshot_tests__/stacking-group-screenshot-test.tsx b/src/__screenshot_tests__/stacking-group-screenshot-test.tsx index 8895ba7eab..4fbc09a301 100644 --- a/src/__screenshot_tests__/stacking-group-screenshot-test.tsx +++ b/src/__screenshot_tests__/stacking-group-screenshot-test.tsx @@ -1,4 +1,4 @@ -import {openStoryPage, screen} from '../test-utils'; +import {openStoryPage, screen, ssimScreenshotConfig} from '../test-utils'; test.each` type | stacked | inverse @@ -10,7 +10,7 @@ test.each` ${'circle'} | ${true} | ${true} ${'square'} | ${false} | ${true} ${'circle'} | ${false} | ${true} -`('Stacking Group', async ({type, stacked, inverse}) => { +`('Stacking Group. type={$type} stacked={$stacked} inverse={$inverse}', async ({type, stacked, inverse}) => { await openStoryPage({ id: 'components-stackinggroup--default', device: 'DESKTOP', @@ -20,5 +20,5 @@ test.each` const element = await screen.findByTestId('stacking-group'); const image = await element.screenshot(); - expect(image).toMatchImageSnapshot(); + expect(image).toMatchImageSnapshot(ssimScreenshotConfig); }); diff --git a/src/__screenshot_tests__/title-screenshot-test.tsx b/src/__screenshot_tests__/title-screenshot-test.tsx index bc7de2dffe..a7215d14a2 100644 --- a/src/__screenshot_tests__/title-screenshot-test.tsx +++ b/src/__screenshot_tests__/title-screenshot-test.tsx @@ -1,37 +1,48 @@ -import {openStoryPage} from '../test-utils'; +import {openStoryPage, screen} from '../test-utils'; -test('Title', async () => { - const argsCases = [ - { - caseName: 'without-link', - title: 'This is a title', - linkText: '', - }, - { - caseName: 'with-link', - title: 'This is a title with link', - linkText: 'Link', - }, - { - caseName: 'with-link-and-long-text', - title: 'This is a title with link and with a very long text that may wrap to multiple lines in small screens', - linkText: 'Link', - }, - ]; +import type {Device} from '../test-utils'; - const devices = ['DESKTOP', 'MOBILE_ANDROID'] as const; +const COMPONENT_TYPES = [ + {component: 'Title1', storyName: 'title-1'}, + {component: 'Title2', storyName: 'title-2'}, + {component: 'Title3', storyName: 'title-3'}, +]; +const CASE_NAMES = ['without-link', 'with-link', 'with-link-and-long-text', 'with-icon'] as const; +const DEVICES = ['DESKTOP', 'MOBILE_IOS'] as const; - for (const {caseName, title, linkText} of argsCases) { - for (const device of devices) { - await openStoryPage({ - id: 'components-title--default', - device, - args: {title, linkText}, - }); - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot({ - customSnapshotIdentifier: `title-screenshot-test-${device.toLowerCase()}-${caseName}`, - }); +const caseArgs = { + 'without-link': {title: 'This is a title', right: 'undefined', linkText: undefined}, + 'with-link': {title: 'This is a title with link', right: 'link', linkText: 'Link'}, + 'with-link-and-long-text': { + title: 'This is a title with link and with a very long text that may wrap to multiple lines in small screens', + right: 'link', + linkText: 'Link', + }, + 'with-icon': {title: 'This is a title', right: 'icon', linkText: undefined}, +}; + +const getCases = () => { + const cases = []; + for (const componentType of COMPONENT_TYPES) { + for (const caseName of CASE_NAMES) { + for (const device of DEVICES) { + cases.push([componentType.component, caseName, device, componentType.storyName]); + } } } + return cases; +}; + +test.each(getCases())('%s (%s) - %s', async (component, caseName, device, storyName) => { + const args = caseArgs[caseName as (typeof CASE_NAMES)[number]]; + + await openStoryPage({ + id: `components-titles--${storyName}-story`, + device: device as Device, + args: {title: args.title, right: args.right, ...(args.linkText ? {linkText: args.linkText} : {})}, + }); + + const element = await screen.findByTestId(component); + const image = await element.screenshot(); + expect(image).toMatchImageSnapshot(); }); diff --git a/src/__stories__/carousel-story.tsx b/src/__stories__/carousel-story.tsx index b99a9d3d44..4f0f81d715 100644 --- a/src/__stories__/carousel-story.tsx +++ b/src/__stories__/carousel-story.tsx @@ -18,6 +18,8 @@ export default { title: 'Components/Carousels/Carousel', }; +const mobilePageOffsetOptions = ['regular', 'large'] as const; + type Args = { numItems: number; itemsPerPageMobile: number; @@ -26,6 +28,7 @@ type Args = { withBullets: boolean; free: boolean; itemsToScroll: number; + mobilePageOffset: (typeof mobilePageOffsetOptions)[number]; autoplay: boolean; loop: boolean; initialActiveItem: number; @@ -39,6 +42,7 @@ export const Default: StoryComponent = ({ itemsPerPageDesktop, free, itemsToScroll, + mobilePageOffset, autoplay, loop, initialActiveItem, @@ -65,6 +69,7 @@ export const Default: StoryComponent = ({ desktop: itemsPerPageDesktop, }} itemsToScroll={itemsToScroll} + mobilePageOffset={mobilePageOffset} autoplay={autoplay ? {time: 5000, loop} : false} onPageChange={setPageInfo} items={Array.from({length: numItems}, (_, idx) => ( @@ -106,4 +111,11 @@ Default.args = { loop: false, itemsToScroll: 0, initialActiveItem: 0, + mobilePageOffset: 'regular', +}; +Default.argTypes = { + mobilePageOffset: { + options: mobilePageOffsetOptions, + control: {type: 'select'}, + }, }; diff --git a/src/__stories__/progress-bar-story.tsx b/src/__stories__/progress-bar-story.tsx index 82a01c36c4..93a4f95e86 100644 --- a/src/__stories__/progress-bar-story.tsx +++ b/src/__stories__/progress-bar-story.tsx @@ -2,22 +2,34 @@ import * as React from 'react'; import {ProgressBar} from '..'; export default { - title: 'Components/Progress bar', + title: 'Components/ProgressBar', + argTypes: { + color: { + options: ['default', 'red'], + control: {type: 'select'}, + }, + }, }; type Args = { reverse: boolean; progressPercent: number; + color: 'default' | 'red'; }; -export const Default: StoryComponent = ({reverse, progressPercent}) => ( +export const Default: StoryComponent = ({reverse, progressPercent, color}) => (
- +
); -Default.storyName = 'Progress bar'; +Default.storyName = 'ProgressBar'; Default.args = { reverse: false, progressPercent: 30, + color: 'default', }; diff --git a/src/__stories__/sheet-story.tsx b/src/__stories__/sheet-story.tsx index 10241b122e..596edcb6c0 100644 --- a/src/__stories__/sheet-story.tsx +++ b/src/__stories__/sheet-story.tsx @@ -82,13 +82,20 @@ type SheetArgs = { title: string; subtitle: string; description: string; + multiparagraphDescription: boolean; }; type RadioListSheetArgs = SheetArgs & { selectedId: string; }; -export const RadioList: StoryComponent = ({title, subtitle, description, selectedId}) => { +export const RadioList: StoryComponent = ({ + title, + subtitle, + description, + multiparagraphDescription, + selectedId, +}) => { const [open, setOpen] = React.useState(false); const [selected, setSelected] = React.useState(null); @@ -121,7 +128,9 @@ export const RadioList: StoryComponent = ({title, subtitle, }} title={title} subtitle={subtitle} - description={description} + description={ + description && multiparagraphDescription ? [description, description] : description + } selectedId={selectedId === 'none' ? undefined : selectedId} items={[ 'Apple', @@ -158,6 +167,7 @@ RadioList.args = { title: 'Select a fruit', subtitle: 'Subtitle', description: 'Description', + multiparagraphDescription: false, selectedId: 'none', }; RadioList.argTypes = { @@ -165,9 +175,17 @@ RadioList.argTypes = { control: {type: 'select'}, options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'none'], }, + multiparagraphDescription: { + if: {arg: 'description'}, + }, }; -export const ActionsList: StoryComponent = ({title, subtitle, description}) => { +export const ActionsList: StoryComponent = ({ + title, + subtitle, + description, + multiparagraphDescription, +}) => { const [open, setOpen] = React.useState(false); const [selected, setSelected] = React.useState(null); @@ -200,7 +218,9 @@ export const ActionsList: StoryComponent = ({title, subtitle, descrip }} title={title} subtitle={subtitle} - description={description} + description={ + description && multiparagraphDescription ? [description, description] : description + } items={[ { id: '1', @@ -233,6 +253,12 @@ ActionsList.args = { title: 'Title', subtitle: 'Subtitle', description: 'Description', + multiparagraphDescription: false, +}; +ActionsList.argTypes = { + multiparagraphDescription: { + if: {arg: 'description'}, + }, }; type InfoSheetArgs = SheetArgs & { @@ -240,7 +266,14 @@ type InfoSheetArgs = SheetArgs & { iconType: 'bullet' | 'regular' | 'small'; }; -export const Info: StoryComponent = ({title, subtitle, description, numItems, iconType}) => { +export const Info: StoryComponent = ({ + title, + subtitle, + description, + multiparagraphDescription, + numItems, + iconType, +}) => { const [open, setOpen] = React.useState(false); return ( @@ -261,7 +294,9 @@ export const Info: StoryComponent = ({title, subtitle, descriptio }} title={title} subtitle={subtitle} - description={description} + description={ + description && multiparagraphDescription ? [description, description] : description + } items={Array.from({length: numItems}, (_, idx) => ({ id: String(idx), title: 'Item ' + idx, @@ -290,12 +325,16 @@ Info.args = { description: 'Description', numItems: 5, iconType: 'bullet', + multiparagraphDescription: false, }; Info.argTypes = { iconType: { control: {type: 'select'}, options: ['bullet', 'regular', 'small'], }, + multiparagraphDescription: { + if: {arg: 'description'}, + }, }; type ActionsSheetArgs = SheetArgs & { @@ -309,6 +348,7 @@ export const Actions: StoryComponent = ({ title, subtitle, description, + multiparagraphDescription, buttonText, secondaryButtonText, buttonLinkText, @@ -344,7 +384,9 @@ export const Actions: StoryComponent = ({ onPressButton={setPressedButton} title={title} subtitle={subtitle} - description={description} + description={ + description && multiparagraphDescription ? [description, description] : description + } button={{ text: buttonText, }} @@ -374,6 +416,7 @@ Actions.args = { title: 'Title', subtitle: 'Subtitle', description: 'Description', + multiparagraphDescription: false, buttonText: 'Button', secondaryButtonText: 'Secondary button', buttonLinkText: 'Link', @@ -384,15 +427,19 @@ Actions.argTypes = { control: {type: 'boolean'}, if: {arg: 'buttonLinkText'}, }, + multiparagraphDescription: { + if: {arg: 'description'}, + }, }; type RootArgs = { title: string; subtitle: string; description: string; + multiparagraphDescription: boolean; }; -export const Root: StoryComponent = ({title, subtitle, description}) => { +export const Root: StoryComponent = ({title, subtitle, description, multiparagraphDescription}) => { const [response, setResponse] = React.useState(); return ( @@ -407,7 +454,10 @@ export const Root: StoryComponent = ({title, subtitle, description}) = props: { title, subtitle, - description, + description: + description && multiparagraphDescription + ? [description, description] + : description, items: [ { id: '1', @@ -440,7 +490,10 @@ export const Root: StoryComponent = ({title, subtitle, description}) = props: { title, subtitle, - description, + description: + description && multiparagraphDescription + ? [description, description] + : description, items: [ { id: '1', @@ -469,7 +522,10 @@ export const Root: StoryComponent = ({title, subtitle, description}) = props: { title, subtitle, - description, + description: + description && multiparagraphDescription + ? [description, description] + : description, button: { text: 'Button', }, @@ -491,7 +547,10 @@ export const Root: StoryComponent = ({title, subtitle, description}) = props: { title, subtitle, - description, + description: + description && multiparagraphDescription + ? [description, description] + : description, selectedId: '1', items: [ { @@ -532,4 +591,10 @@ Root.args = { title: 'Title', subtitle: 'Subtitle', description: 'Description', + multiparagraphDescription: false, +}; +Root.argTypes = { + multiparagraphDescription: { + if: {arg: 'description'}, + }, }; diff --git a/src/__stories__/skeleton-circle-story.tsx b/src/__stories__/skeleton-circle-story.tsx index 7c4756b4b3..fb7c440e8f 100644 --- a/src/__stories__/skeleton-circle-story.tsx +++ b/src/__stories__/skeleton-circle-story.tsx @@ -3,7 +3,7 @@ import {ThemeVariant, skinVars} from '..'; import {SkeletonCircle} from '../skeletons'; export default { - title: 'Components/Skeletons/Skeleton Circle', + title: 'Components/Skeletons/SkeletonCircle', parameters: { fullScreen: true, }, @@ -34,7 +34,7 @@ export const Default: StoryComponent = ({size, inverse, ariaValueText}) => ); }; -Default.storyName = 'Skeleton Circle'; +Default.storyName = 'SkeletonCircle'; Default.args = { size: 40, diff --git a/src/__stories__/skeleton-line-story.tsx b/src/__stories__/skeleton-line-story.tsx index aaf2db903f..2fab7c6d62 100644 --- a/src/__stories__/skeleton-line-story.tsx +++ b/src/__stories__/skeleton-line-story.tsx @@ -3,7 +3,7 @@ import {ThemeVariant, skinVars} from '..'; import {SkeletonLine} from '../skeletons'; export default { - title: 'Components/Skeletons/Skeleton Line', + title: 'Components/Skeletons/SkeletonLine', parameters: { fullScreen: true, }, @@ -36,7 +36,7 @@ export const Default: StoryComponent = ({inverse, ariaLabel, width}) => { ); }; -Default.storyName = 'Skeleton Line'; +Default.storyName = 'SkeletonLine'; Default.args = { inverse: false, diff --git a/src/__stories__/skeleton-rectangle-story.tsx b/src/__stories__/skeleton-rectangle-story.tsx index 04f0c7f593..bc926e5257 100644 --- a/src/__stories__/skeleton-rectangle-story.tsx +++ b/src/__stories__/skeleton-rectangle-story.tsx @@ -3,7 +3,7 @@ import {SkeletonRectangle} from '../skeletons'; import {ThemeVariant, skinVars} from '..'; export default { - title: 'Components/Skeletons/Skeleton Rectangle', + title: 'Components/Skeletons/SkeletonRectangle', parameters: { fullScreen: true, }, @@ -38,7 +38,7 @@ export const Default: StoryComponent = ({height, width, inverse, ariaLabel ); }; -Default.storyName = 'Skeleton Rectangle'; +Default.storyName = 'SkeletonRectangle'; Default.args = { height: '100', diff --git a/src/__stories__/skeleton-row-story.tsx b/src/__stories__/skeleton-row-story.tsx index 551a17697c..20a742f89c 100644 --- a/src/__stories__/skeleton-row-story.tsx +++ b/src/__stories__/skeleton-row-story.tsx @@ -3,7 +3,7 @@ import {ThemeVariant, skinVars} from '..'; import {SkeletonRow} from '../skeletons'; export default { - title: 'Components/Skeletons/Skeleton Row', + title: 'Components/Skeletons/SkeletonRow', parameters: { fullScreen: true, }, @@ -36,7 +36,7 @@ export const Default: StoryComponent = ({inverse, ariaLabel, width}) => { ); }; -Default.storyName = 'Skeleton Row'; +Default.storyName = 'SkeletonRow'; Default.args = { width: '100%', diff --git a/src/__stories__/skeleton-text-story.tsx b/src/__stories__/skeleton-text-story.tsx index 70e0bce66b..7d66fb1e87 100644 --- a/src/__stories__/skeleton-text-story.tsx +++ b/src/__stories__/skeleton-text-story.tsx @@ -3,7 +3,7 @@ import {ThemeVariant, skinVars} from '..'; import {SkeletonText} from '../skeletons'; export default { - title: 'Components/Skeletons/Skeleton Text', + title: 'Components/Skeletons/SkeletonText', parameters: { fullScreen: true, }, @@ -29,7 +29,7 @@ export const Default: StoryComponent = ({inverse, ariaLabel}) => { ); }; -Default.storyName = 'Skeleton Text'; +Default.storyName = 'SkeletonText'; Default.args = { inverse: false, diff --git a/src/__stories__/spinner-story.tsx b/src/__stories__/spinner-story.tsx index 5ac7c95562..443797a4e2 100644 --- a/src/__stories__/spinner-story.tsx +++ b/src/__stories__/spinner-story.tsx @@ -1,27 +1,25 @@ import * as React from 'react'; -import {Spinner, IntegerField, Stack} from '..'; -import {StorySection} from './helpers'; +import {Spinner} from '..'; export default { title: 'Components/Spinner', component: Spinner, + argTypes: { + size: { + control: {type: 'range', min: 24, max: 100, step: 4}, + }, + }, }; -export const Default: StoryComponent = () => { - const [size, setSize] = React.useState(24); - return ( - - - setSize(Number(newValue))} - /> - - - - ); +type Args = { + size: number; +}; + +export const Default: StoryComponent = ({size}) => { + return ; }; Default.storyName = 'Spinner'; +Default.args = { + size: 24, +}; diff --git a/src/__stories__/stacking-group-story.tsx b/src/__stories__/stacking-group-story.tsx index 57158f6deb..7a9ceedd5b 100644 --- a/src/__stories__/stacking-group-story.tsx +++ b/src/__stories__/stacking-group-story.tsx @@ -31,8 +31,8 @@ export const Default: StoryComponent = ({ inverse = false, }) => { return ( - - + + {Array.from({length: itemsToInclude}, (_, idx) => type === 'circle' ? ( @@ -59,7 +59,7 @@ export const Default: StoryComponent = ({ ); }; -Default.storyName = 'Stacking Group'; +Default.storyName = 'StackingGroup'; Default.argTypes = { size: { control: {type: 'range', min: 24, max: 128, step: 4}, diff --git a/src/__stories__/title-story.tsx b/src/__stories__/title-story.tsx index 5319b42ff1..c22bbddac9 100644 --- a/src/__stories__/title-story.tsx +++ b/src/__stories__/title-story.tsx @@ -1,55 +1,93 @@ import * as React from 'react'; -import {Title1, Title2, Title3, Stack, ButtonLink} from '..'; +import {Title1, Title2, Title3, ButtonLink, IconInformationRegular, skinVars} from '..'; + +import type {TitleProps} from '../title'; export default { - title: 'Components/Title', + title: 'Components/Titles', + args: { + title: '', + right: 'link', + linkText: 'Link', + }, + argTypes: { + right: { + options: ['link', 'icon', 'undefined'], + control: {type: 'select'}, + }, + linkText: {if: {arg: 'right', eq: 'link'}}, + }, +}; + +type renderTitleComponentProps = { + title: string; + linkText: string; + right: 'link' | 'icon' | 'undefined'; + defaultTitle: string; + as: 'h1' | 'h2' | 'h3'; + TitleComponent: React.ComponentType; }; -type Args = {title: string; linkText: string}; - -export const Default: StoryComponent = ({title, linkText}) => ( - - - {linkText} - - ) : undefined - } - > - {title || 'Title1'} - - - {linkText} - - ) : undefined - } - > - {title || 'Title2'} - - - {linkText} - - ) : undefined - } - > - {title || 'Title3'} - - +const TitleComponent = ({ + title, + right, + linkText, + defaultTitle, + as, + TitleComponent, +}: renderTitleComponentProps): JSX.Element => ( + + {linkText || 'link'} + + ) : right === 'icon' ? ( + + ) : undefined + } + > + {title || defaultTitle} + ); -Default.storyName = 'Title'; -Default.args = { - title: '', - linkText: 'Link', -}; +type Args = {title: string; right: 'link' | 'icon' | 'undefined'; linkText: string}; + +export const Title1Story: StoryComponent = ({title, right, linkText}) => ( + +); + +export const Title2Story: StoryComponent = ({title, right, linkText}) => ( + +); + +export const Title3Story: StoryComponent = ({title, right, linkText}) => ( + +); + +Title1Story.storyName = 'Title1'; +Title2Story.storyName = 'Title2'; +Title3Story.storyName = 'Title3'; diff --git a/src/button.css.ts b/src/button.css.ts index 32561b2790..8b80562815 100644 --- a/src/button.css.ts +++ b/src/button.css.ts @@ -19,7 +19,7 @@ export const SMALL_ICON_SIZE = 20; export const SPINNER_SIZE = 20; export const SMALL_SPINNER_SIZE = 16; export const PADDING_Y_LINK = 6; -const PADDING_X_LINK = 12; +export const PADDING_X_LINK = 12; export const CHEVRON_MARGIN_LEFT_LINK = 2; const disabledStyle = {opacity: 0.5}; @@ -358,10 +358,6 @@ globalStyle(`${textContentLink} svg`, { display: 'block', }); -export const alignedLeftLink = style({marginLeft: -PADDING_X_LINK}); -export const alignedRightLink = style({marginRight: -PADDING_X_LINK}); -export const alignedVerticalLink = style({marginTop: -PADDING_Y_LINK, marginBottom: -PADDING_Y_LINK}); - export const variants = styleVariants({ primary: lightPrimary, secondary: lightSecondary, diff --git a/src/button.tsx b/src/button.tsx index 1ad7f3e2c1..f5beb2aaf2 100644 --- a/src/button.tsx +++ b/src/button.tsx @@ -515,11 +515,19 @@ export const ButtonLink = React.forwardRef((p const commonProps = { className: classnames(styles.link, { [styles.inverseLink]: isInverse, - [styles.alignedLeftLink]: !!props.bleedLeft || !!props.aligned, - [styles.alignedRightLink]: !!props.bleedRight, - [styles.alignedVerticalLink]: !!props.bleedY, [styles.isLoading]: showSpinner, }), + /** + * 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. + */ + style: { + ...(props.bleedLeft || props.aligned ? {marginLeft: -styles.PADDING_X_LINK} : undefined), + ...(props.bleedRight ? {marginRight: -styles.PADDING_X_LINK} : undefined), + ...(props.bleedY + ? {marginTop: -styles.PADDING_Y_LINK, marginBottom: -styles.PADDING_Y_LINK} + : undefined), + }, trackingEvent: props.trackingEvent ?? (props.trackEvent ? createDefaultTrackingEvent() : undefined), dataAttributes: {'component-name': 'ButtonLink', ...props.dataAttributes}, children: renderButtonContent({ diff --git a/src/card.css.ts b/src/card.css.ts index f2c6a1db23..ef6ebd1764 100644 --- a/src/card.css.ts +++ b/src/card.css.ts @@ -387,20 +387,15 @@ export const vars = {aspectRatio}; export const cardContainer = style({ position: 'relative', - aspectRatio, - '@supports': { - 'not (aspect-ratio: 1 / 1)': { - display: 'flex', - ':before': { - float: 'left', - content: '""', - paddingTop: `calc(100% / ${aspectRatio})`, - }, - ':after': { - display: 'block', - content: '""', - clear: 'both', - }, - }, + display: 'flex', + ':before': { + float: 'left', + content: '""', + paddingTop: `calc(100% / ${aspectRatio})`, + }, + ':after': { + display: 'block', + content: '""', + clear: 'both', }, }); diff --git a/src/card.tsx b/src/card.tsx index 77a2ecf9f0..eda034f4d2 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -23,6 +23,7 @@ import classNames from 'classnames'; import {assignInlineVars} from '@vanilla-extract/dynamic'; import Inline from './inline'; import {getPrefixedDataAttributes} from './utils/dom'; +import {isRunningAcceptanceTest} from './utils/platform'; import type {Variant} from './theme-variant-context'; import type {PressHandler} from './touchable'; @@ -291,7 +292,7 @@ const useVideoWithControls = ( playing: CardActionPauseIcon, loading: CardActionPauseIcon, paused: CardActionPlayIcon, - loadingTimeout: CardActionSpinner, + loadingTimeout: isRunningAcceptanceTest() ? CardActionPauseIcon : CardActionSpinner, }[videoStatus], onPress: onVideoControlPress, label: { diff --git a/src/carousel.css.ts b/src/carousel.css.ts index 05cf2936f2..44edbd0fb6 100644 --- a/src/carousel.css.ts +++ b/src/carousel.css.ts @@ -88,6 +88,7 @@ const arrowButtonBase = style([ ]); export const carouselContainer = sprinkles({ + isolation: 'isolate', // This minWidth value is a workaround to solve an issue when the page is rendered in a hidden webview // in that case the window size is reported as 0 and the scroll snap is placed at the wrong slide minWidth: 64, @@ -99,16 +100,20 @@ const itemsPerPageMobile = createVar(); const itemsPerPageTablet = createVar(); const itemsPerPageDesktop = createVar(); const gap = createVar(); +const mobilePageOffset = createVar(); export const vars = { itemsPerPageMobile, itemsPerPageTablet, itemsPerPageDesktop, gap, + mobilePageOffset, }; export const DEFAULT_DESKTOP_GAP = 16; const DEFAULT_MOBILE_GAP = 8; +const DEFAULT_MOBILE_PAGE_OFFSET = '16px'; +const DEFAULT_TABLET_PAGE_OFFSET = '36px'; export const carousel = style([ hideScrollbar, @@ -121,9 +126,15 @@ export const carousel = style([ vars: { [gap]: String(DEFAULT_MOBILE_GAP), + [mobilePageOffset]: DEFAULT_MOBILE_PAGE_OFFSET, }, '@media': { + [mq.tablet]: { + vars: { + [mobilePageOffset]: DEFAULT_TABLET_PAGE_OFFSET, + }, + }, [mq.desktopOrBigger]: { vars: { [gap]: String(DEFAULT_DESKTOP_GAP), @@ -134,7 +145,6 @@ export const carousel = style([ ]); const responsiveLayoutSideMargin = fallbackVar(responsiveLayoutVars.sideMargin, '0px'); -const mobilePageOffset = fallbackVar(responsiveLayoutVars.sideMargin, '16px'); export const carouselWithScroll = style({ margin: `0 calc(${responsiveLayoutSideMargin} * -1)`, diff --git a/src/carousel.tsx b/src/carousel.tsx index 6bacc6593d..68c6dddfab 100644 --- a/src/carousel.tsx +++ b/src/carousel.tsx @@ -15,6 +15,7 @@ import * as styles from './carousel.css'; import {assignInlineVars} from '@vanilla-extract/dynamic'; import {sprinkles} from './sprinkles.css'; import {useDesktopContainerType} from './desktop-container-type-context'; +import {VIVO_NEW_SKIN} from './skins/constants'; import type {DesktopContainerType} from './desktop-container-type-context'; import type {DataAttributes} from './utils/types'; @@ -167,6 +168,7 @@ type BaseCarouselProps = { itemsPerPage?: ItemsPerPageProp; /** scrolls one page by default */ itemsToScroll?: number; + mobilePageOffset?: 'regular' | 'large'; /** If true, scroll snap doesn't apply and the user has a free scroll */ free?: boolean; gap?: number; @@ -187,6 +189,7 @@ const BaseCarousel: React.FC = ({ initialActiveItem, itemsPerPage, itemsToScroll, + mobilePageOffset, gap, free, centered, @@ -194,7 +197,7 @@ const BaseCarousel: React.FC = ({ onPageChange, dataAttributes, }) => { - const {texts, platformOverrides} = useTheme(); + const {texts, platformOverrides, skinName} = useTheme(); const desktopContainerType = useDesktopContainerType(); const itemsPerPageConfig = normalizeItemsPerPage(desktopContainerType || 'large', itemsPerPage); @@ -372,6 +375,9 @@ const BaseCarousel: React.FC = ({ ); } + const largePageOffset = '64px'; + const vivoNewMobilePageOffset = '36px'; + return (
@@ -395,6 +401,11 @@ const BaseCarousel: React.FC = ({ [styles.vars.itemsPerPageDesktop]: String(itemsPerPageConfig.desktop), [styles.vars.itemsPerPageTablet]: String(itemsPerPageConfig.tablet), [styles.vars.itemsPerPageMobile]: String(itemsPerPageConfig.mobile), + ...(mobilePageOffset === 'large' + ? {[styles.vars.mobilePageOffset]: largePageOffset} + : skinName === VIVO_NEW_SKIN + ? {[styles.vars.mobilePageOffset]: vivoNewMobilePageOffset} + : {}), ...(gap !== undefined ? {[styles.vars.gap]: String(gap)} : {}), }), scrollSnapType: free ? 'initial' : 'x mandatory', @@ -441,6 +452,7 @@ type CarouselProps = { itemsPerPage?: ItemsPerPageProp; /** scrolls one page by default */ itemsToScroll?: number; + mobilePageOffset?: 'regular' | 'large'; /** If true, scroll snap doesn't apply and the user has a free scroll */ free?: boolean; autoplay?: boolean | {time: number; loop?: boolean}; diff --git a/src/community/advanced-data-card.css.ts b/src/community/advanced-data-card.css.ts index 4beefbf49e..2cd525678a 100644 --- a/src/community/advanced-data-card.css.ts +++ b/src/community/advanced-data-card.css.ts @@ -98,6 +98,9 @@ export const cardContentStyle = style([ export const minHeight = style({minHeight: 216}); export const dataCard = style([ + { + isolation: 'isolate', // This avoids problems with some screenshot tests in webapp + }, sprinkles({ position: 'relative', display: 'flex', diff --git a/src/fixed-footer-layout.css.ts b/src/fixed-footer-layout.css.ts index 573fc3c680..7bdc899765 100644 --- a/src/fixed-footer-layout.css.ts +++ b/src/fixed-footer-layout.css.ts @@ -47,6 +47,7 @@ export const withoutFooter = sprinkles({display: 'none'}); export const container = style({ '@media': { [mq.tabletOrSmaller]: { + isolation: 'isolate', paddingBottom: footerHeight, background: fallbackVar(backgroundColor, skinVars.colors.background), }, diff --git a/src/generated/mistica-icons/icon-alert-regular.tsx b/src/generated/mistica-icons/icon-alert-regular.tsx index a7de7826ef..8af8699353 100644 --- a/src/generated/mistica-icons/icon-alert-regular.tsx +++ b/src/generated/mistica-icons/icon-alert-regular.tsx @@ -20,7 +20,7 @@ const IconAlertRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-battery-regular.tsx b/src/generated/mistica-icons/icon-battery-regular.tsx index a20dadde48..23ae8690c1 100644 --- a/src/generated/mistica-icons/icon-battery-regular.tsx +++ b/src/generated/mistica-icons/icon-battery-regular.tsx @@ -18,7 +18,7 @@ const IconBatteryRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-chip-device-regular.tsx b/src/generated/mistica-icons/icon-chip-device-regular.tsx index 06b20e3ed8..9475d9eabb 100644 --- a/src/generated/mistica-icons/icon-chip-device-regular.tsx +++ b/src/generated/mistica-icons/icon-chip-device-regular.tsx @@ -18,11 +18,11 @@ const IconChipDeviceRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-chip-sim-card-filled.tsx b/src/generated/mistica-icons/icon-chip-sim-card-filled.tsx index 3c9469d6b4..e355fec0b7 100644 --- a/src/generated/mistica-icons/icon-chip-sim-card-filled.tsx +++ b/src/generated/mistica-icons/icon-chip-sim-card-filled.tsx @@ -33,7 +33,11 @@ const IconChipSimCardFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem + ); diff --git a/src/generated/mistica-icons/icon-chip-sim-card-light.tsx b/src/generated/mistica-icons/icon-chip-sim-card-light.tsx index b3c54f3e36..1c01c94c1e 100644 --- a/src/generated/mistica-icons/icon-chip-sim-card-light.tsx +++ b/src/generated/mistica-icons/icon-chip-sim-card-light.tsx @@ -33,11 +33,11 @@ const IconChipSimCardLight = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-data-settings-regular.tsx b/src/generated/mistica-icons/icon-data-settings-regular.tsx index 23b0d0022a..6513a66ab4 100644 --- a/src/generated/mistica-icons/icon-data-settings-regular.tsx +++ b/src/generated/mistica-icons/icon-data-settings-regular.tsx @@ -18,7 +18,7 @@ const IconDataSettingsRegular = ({color, size = 24, ...rest}: IconProps): JSX.El ); diff --git a/src/generated/mistica-icons/icon-diamond-regular.tsx b/src/generated/mistica-icons/icon-diamond-regular.tsx index ce40e99f71..30b6e041d6 100644 --- a/src/generated/mistica-icons/icon-diamond-regular.tsx +++ b/src/generated/mistica-icons/icon-diamond-regular.tsx @@ -18,7 +18,7 @@ const IconDiamondRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-edit-pencil-regular.tsx b/src/generated/mistica-icons/icon-edit-pencil-regular.tsx index 73f8cb1892..ef7665ec0b 100644 --- a/src/generated/mistica-icons/icon-edit-pencil-regular.tsx +++ b/src/generated/mistica-icons/icon-edit-pencil-regular.tsx @@ -39,7 +39,7 @@ const IconEditPencilRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-euro-symbol-light.tsx b/src/generated/mistica-icons/icon-euro-symbol-light.tsx index 9bd42810ca..431c6888a1 100644 --- a/src/generated/mistica-icons/icon-euro-symbol-light.tsx +++ b/src/generated/mistica-icons/icon-euro-symbol-light.tsx @@ -18,7 +18,7 @@ const IconEuroSymbolLight = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-file-compressed-regular.tsx b/src/generated/mistica-icons/icon-file-compressed-regular.tsx index 4e265e1200..66df147f94 100644 --- a/src/generated/mistica-icons/icon-file-compressed-regular.tsx +++ b/src/generated/mistica-icons/icon-file-compressed-regular.tsx @@ -18,7 +18,7 @@ const IconFileCompressedRegular = ({color, size = 24, ...rest}: IconProps): JSX. ); diff --git a/src/generated/mistica-icons/icon-file-error-regular.tsx b/src/generated/mistica-icons/icon-file-error-regular.tsx index f85cbe9f31..3df72dca54 100644 --- a/src/generated/mistica-icons/icon-file-error-regular.tsx +++ b/src/generated/mistica-icons/icon-file-error-regular.tsx @@ -18,7 +18,7 @@ const IconFileErrorRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-file-illustrator-filled.tsx b/src/generated/mistica-icons/icon-file-illustrator-filled.tsx index fec53fa120..ee3463c2fc 100644 --- a/src/generated/mistica-icons/icon-file-illustrator-filled.tsx +++ b/src/generated/mistica-icons/icon-file-illustrator-filled.tsx @@ -18,11 +18,11 @@ const IconFileIllustratorFilled = ({color, size = 24, ...rest}: IconProps): JSX. ); diff --git a/src/generated/mistica-icons/icon-file-png-filled.tsx b/src/generated/mistica-icons/icon-file-png-filled.tsx index f7e5ec38fa..f4017d7146 100644 --- a/src/generated/mistica-icons/icon-file-png-filled.tsx +++ b/src/generated/mistica-icons/icon-file-png-filled.tsx @@ -18,11 +18,11 @@ const IconFilePngFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-fingerprint-regular.tsx b/src/generated/mistica-icons/icon-fingerprint-regular.tsx index 43ebef315f..8a3a45bc2b 100644 --- a/src/generated/mistica-icons/icon-fingerprint-regular.tsx +++ b/src/generated/mistica-icons/icon-fingerprint-regular.tsx @@ -18,7 +18,7 @@ const IconFingerprintRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-flower-regular.tsx b/src/generated/mistica-icons/icon-flower-regular.tsx index e05c9efcba..e0e135eea9 100644 --- a/src/generated/mistica-icons/icon-flower-regular.tsx +++ b/src/generated/mistica-icons/icon-flower-regular.tsx @@ -18,7 +18,7 @@ const IconFlowerRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-folder-encrypted-filled.tsx b/src/generated/mistica-icons/icon-folder-encrypted-filled.tsx index ba9f2eabeb..3e0ed9cd2b 100644 --- a/src/generated/mistica-icons/icon-folder-encrypted-filled.tsx +++ b/src/generated/mistica-icons/icon-folder-encrypted-filled.tsx @@ -18,7 +18,7 @@ const IconFolderEncryptedFilled = ({color, size = 24, ...rest}: IconProps): JSX. ); diff --git a/src/generated/mistica-icons/icon-gift-light.tsx b/src/generated/mistica-icons/icon-gift-light.tsx index 0c744a4759..dfe93900bd 100644 --- a/src/generated/mistica-icons/icon-gift-light.tsx +++ b/src/generated/mistica-icons/icon-gift-light.tsx @@ -38,7 +38,7 @@ const IconGiftLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-hamburguer-filled.tsx b/src/generated/mistica-icons/icon-hamburguer-filled.tsx index 5c572fbea8..4bcce1ecae 100644 --- a/src/generated/mistica-icons/icon-hamburguer-filled.tsx +++ b/src/generated/mistica-icons/icon-hamburguer-filled.tsx @@ -18,7 +18,7 @@ const IconHamburguerFilled = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-hand-right-regular.tsx b/src/generated/mistica-icons/icon-hand-right-regular.tsx index cdc9a20680..6abfe5a452 100644 --- a/src/generated/mistica-icons/icon-hand-right-regular.tsx +++ b/src/generated/mistica-icons/icon-hand-right-regular.tsx @@ -18,7 +18,7 @@ const IconHandRightRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-hand-up-regular.tsx b/src/generated/mistica-icons/icon-hand-up-regular.tsx index eca6448c96..75cc3d64ed 100644 --- a/src/generated/mistica-icons/icon-hand-up-regular.tsx +++ b/src/generated/mistica-icons/icon-hand-up-regular.tsx @@ -18,7 +18,7 @@ const IconHandUpRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-hard-disk-regular.tsx b/src/generated/mistica-icons/icon-hard-disk-regular.tsx index 07c553d9ca..d6a7bdaf58 100644 --- a/src/generated/mistica-icons/icon-hard-disk-regular.tsx +++ b/src/generated/mistica-icons/icon-hard-disk-regular.tsx @@ -18,7 +18,7 @@ const IconHardDiskRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-heart-regular.tsx b/src/generated/mistica-icons/icon-heart-regular.tsx index 89d1d776f0..857f3434cc 100644 --- a/src/generated/mistica-icons/icon-heart-regular.tsx +++ b/src/generated/mistica-icons/icon-heart-regular.tsx @@ -38,7 +38,7 @@ const IconHeartRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-hotel-filled.tsx b/src/generated/mistica-icons/icon-hotel-filled.tsx index 4ccc8831c4..b93e7840eb 100644 --- a/src/generated/mistica-icons/icon-hotel-filled.tsx +++ b/src/generated/mistica-icons/icon-hotel-filled.tsx @@ -18,7 +18,7 @@ const IconHotelFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-invoice-digital-filled.tsx b/src/generated/mistica-icons/icon-invoice-digital-filled.tsx index 58dd0c296d..c684b38dee 100644 --- a/src/generated/mistica-icons/icon-invoice-digital-filled.tsx +++ b/src/generated/mistica-icons/icon-invoice-digital-filled.tsx @@ -18,12 +18,12 @@ const IconInvoiceDigitalFilled = ({color, size = 24, ...rest}: IconProps): JSX.E - + ); diff --git a/src/generated/mistica-icons/icon-invoice-plan-file-filled.tsx b/src/generated/mistica-icons/icon-invoice-plan-file-filled.tsx index 338772a991..db2f83ed80 100644 --- a/src/generated/mistica-icons/icon-invoice-plan-file-filled.tsx +++ b/src/generated/mistica-icons/icon-invoice-plan-file-filled.tsx @@ -30,7 +30,7 @@ const IconInvoicePlanFileFilled = ({color, size = 24, ...rest}: IconProps): JSX. ); diff --git a/src/generated/mistica-icons/icon-invoice-plan-file-regular.tsx b/src/generated/mistica-icons/icon-invoice-plan-file-regular.tsx index 9ffa7523a2..c16ae55787 100644 --- a/src/generated/mistica-icons/icon-invoice-plan-file-regular.tsx +++ b/src/generated/mistica-icons/icon-invoice-plan-file-regular.tsx @@ -46,11 +46,11 @@ const IconInvoicePlanFileRegular = ({color, size = 24, ...rest}: IconProps): JSX ); diff --git a/src/generated/mistica-icons/icon-lightbulb-regular.tsx b/src/generated/mistica-icons/icon-lightbulb-regular.tsx index 66e13ecff7..77b95dfd71 100644 --- a/src/generated/mistica-icons/icon-lightbulb-regular.tsx +++ b/src/generated/mistica-icons/icon-lightbulb-regular.tsx @@ -29,7 +29,7 @@ const IconLightbulbRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-location-filled.tsx b/src/generated/mistica-icons/icon-location-filled.tsx index df26f8e9af..779e2fc0f9 100644 --- a/src/generated/mistica-icons/icon-location-filled.tsx +++ b/src/generated/mistica-icons/icon-location-filled.tsx @@ -29,7 +29,7 @@ const IconLocationFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-lock-open-light.tsx b/src/generated/mistica-icons/icon-lock-open-light.tsx index c80e6b7aa4..33d19bf380 100644 --- a/src/generated/mistica-icons/icon-lock-open-light.tsx +++ b/src/generated/mistica-icons/icon-lock-open-light.tsx @@ -33,7 +33,7 @@ const IconLockOpenLight = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-loudspeaker-regular.tsx b/src/generated/mistica-icons/icon-loudspeaker-regular.tsx index 87e593945f..e99b3048e1 100644 --- a/src/generated/mistica-icons/icon-loudspeaker-regular.tsx +++ b/src/generated/mistica-icons/icon-loudspeaker-regular.tsx @@ -18,7 +18,7 @@ const IconLoudspeakerRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-lungs-filled.tsx b/src/generated/mistica-icons/icon-lungs-filled.tsx index 7f3be1f8a7..bd1996aef9 100644 --- a/src/generated/mistica-icons/icon-lungs-filled.tsx +++ b/src/generated/mistica-icons/icon-lungs-filled.tsx @@ -18,7 +18,7 @@ const IconLungsFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-lungs-regular.tsx b/src/generated/mistica-icons/icon-lungs-regular.tsx index 0a6ad8bd81..3388654716 100644 --- a/src/generated/mistica-icons/icon-lungs-regular.tsx +++ b/src/generated/mistica-icons/icon-lungs-regular.tsx @@ -18,7 +18,7 @@ const IconLungsRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-menu-light.tsx b/src/generated/mistica-icons/icon-menu-light.tsx index f8e72809eb..021779f4b5 100644 --- a/src/generated/mistica-icons/icon-menu-light.tsx +++ b/src/generated/mistica-icons/icon-menu-light.tsx @@ -18,7 +18,7 @@ const IconMenuLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-microchip-regular.tsx b/src/generated/mistica-icons/icon-microchip-regular.tsx index 301ad473e4..c382acec4a 100644 --- a/src/generated/mistica-icons/icon-microchip-regular.tsx +++ b/src/generated/mistica-icons/icon-microchip-regular.tsx @@ -18,7 +18,7 @@ const IconMicrochipRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-microphone-regular.tsx b/src/generated/mistica-icons/icon-microphone-regular.tsx index 60362631ae..d4ba610af7 100644 --- a/src/generated/mistica-icons/icon-microphone-regular.tsx +++ b/src/generated/mistica-icons/icon-microphone-regular.tsx @@ -29,7 +29,7 @@ const IconMicrophoneRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-mobile-question-light.tsx b/src/generated/mistica-icons/icon-mobile-question-light.tsx index 4da56f9bf7..e336363372 100644 --- a/src/generated/mistica-icons/icon-mobile-question-light.tsx +++ b/src/generated/mistica-icons/icon-mobile-question-light.tsx @@ -18,7 +18,7 @@ const IconMobileQuestionLight = ({color, size = 24, ...rest}: IconProps): JSX.El ); diff --git a/src/generated/mistica-icons/icon-money-drop-filled.tsx b/src/generated/mistica-icons/icon-money-drop-filled.tsx index 905e0b5335..6c89075b5f 100644 --- a/src/generated/mistica-icons/icon-money-drop-filled.tsx +++ b/src/generated/mistica-icons/icon-money-drop-filled.tsx @@ -18,7 +18,7 @@ const IconMoneyDropFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-moon-filled.tsx b/src/generated/mistica-icons/icon-moon-filled.tsx index 334437b9aa..2417ed2f12 100644 --- a/src/generated/mistica-icons/icon-moon-filled.tsx +++ b/src/generated/mistica-icons/icon-moon-filled.tsx @@ -18,7 +18,7 @@ const IconMoonFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-neural-network-human-filled.tsx b/src/generated/mistica-icons/icon-neural-network-human-filled.tsx index 09df17307c..9489f0054b 100644 --- a/src/generated/mistica-icons/icon-neural-network-human-filled.tsx +++ b/src/generated/mistica-icons/icon-neural-network-human-filled.tsx @@ -18,7 +18,7 @@ const IconNeuralNetworkHumanFilled = ({color, size = 24, ...rest}: IconProps): J ); diff --git a/src/generated/mistica-icons/icon-neural-network-regular.tsx b/src/generated/mistica-icons/icon-neural-network-regular.tsx index c8995d4866..90ae50db1f 100644 --- a/src/generated/mistica-icons/icon-neural-network-regular.tsx +++ b/src/generated/mistica-icons/icon-neural-network-regular.tsx @@ -18,7 +18,7 @@ const IconNeuralNetworkRegular = ({color, size = 24, ...rest}: IconProps): JSX.E ); diff --git a/src/generated/mistica-icons/icon-not-conexion-filled.tsx b/src/generated/mistica-icons/icon-not-conexion-filled.tsx index c4482b5b51..87cab10655 100644 --- a/src/generated/mistica-icons/icon-not-conexion-filled.tsx +++ b/src/generated/mistica-icons/icon-not-conexion-filled.tsx @@ -18,7 +18,7 @@ const IconNotConexionFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-notes-filled.tsx b/src/generated/mistica-icons/icon-notes-filled.tsx index 5e1d790880..d879d694b8 100644 --- a/src/generated/mistica-icons/icon-notes-filled.tsx +++ b/src/generated/mistica-icons/icon-notes-filled.tsx @@ -18,7 +18,7 @@ const IconNotesFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-notes-regular.tsx b/src/generated/mistica-icons/icon-notes-regular.tsx index ee9099a3b8..4bdb9df4cd 100644 --- a/src/generated/mistica-icons/icon-notes-regular.tsx +++ b/src/generated/mistica-icons/icon-notes-regular.tsx @@ -18,7 +18,7 @@ const IconNotesRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-offer-percent-light.tsx b/src/generated/mistica-icons/icon-offer-percent-light.tsx index 0a7e8ccde3..0e5f62d137 100644 --- a/src/generated/mistica-icons/icon-offer-percent-light.tsx +++ b/src/generated/mistica-icons/icon-offer-percent-light.tsx @@ -29,11 +29,11 @@ const IconOfferPercentLight = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-offer-regular.tsx b/src/generated/mistica-icons/icon-offer-regular.tsx index 55d10b1f26..56662d2829 100644 --- a/src/generated/mistica-icons/icon-offer-regular.tsx +++ b/src/generated/mistica-icons/icon-offer-regular.tsx @@ -29,7 +29,7 @@ const IconOfferRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-optical-fiber-filled.tsx b/src/generated/mistica-icons/icon-optical-fiber-filled.tsx index fa7603e201..ad41b0255d 100644 --- a/src/generated/mistica-icons/icon-optical-fiber-filled.tsx +++ b/src/generated/mistica-icons/icon-optical-fiber-filled.tsx @@ -29,11 +29,11 @@ const IconOpticalFiberFilled = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-outgoing-call-filled.tsx b/src/generated/mistica-icons/icon-outgoing-call-filled.tsx index d43cf92d14..1f6b2f83b9 100644 --- a/src/generated/mistica-icons/icon-outgoing-call-filled.tsx +++ b/src/generated/mistica-icons/icon-outgoing-call-filled.tsx @@ -18,7 +18,7 @@ const IconOutgoingCallFilled = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-pause-circle-filled.tsx b/src/generated/mistica-icons/icon-pause-circle-filled.tsx index 9c3ac7a714..84c38c8f81 100644 --- a/src/generated/mistica-icons/icon-pause-circle-filled.tsx +++ b/src/generated/mistica-icons/icon-pause-circle-filled.tsx @@ -29,7 +29,7 @@ const IconPauseCircleFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-pause-circle-light.tsx b/src/generated/mistica-icons/icon-pause-circle-light.tsx index 72633c07de..3e87acd737 100644 --- a/src/generated/mistica-icons/icon-pause-circle-light.tsx +++ b/src/generated/mistica-icons/icon-pause-circle-light.tsx @@ -29,7 +29,7 @@ const IconPauseCircleLight = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-pay-invoice-light.tsx b/src/generated/mistica-icons/icon-pay-invoice-light.tsx index 26cce581b2..1dc068f55f 100644 --- a/src/generated/mistica-icons/icon-pay-invoice-light.tsx +++ b/src/generated/mistica-icons/icon-pay-invoice-light.tsx @@ -29,11 +29,11 @@ const IconPayInvoiceLight = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-pendrive-regular.tsx b/src/generated/mistica-icons/icon-pendrive-regular.tsx index 5e636c5106..b68e524e0e 100644 --- a/src/generated/mistica-icons/icon-pendrive-regular.tsx +++ b/src/generated/mistica-icons/icon-pendrive-regular.tsx @@ -18,7 +18,7 @@ const IconPendriveRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-people-network-filled.tsx b/src/generated/mistica-icons/icon-people-network-filled.tsx index 99da46ddc7..5d841f87e1 100644 --- a/src/generated/mistica-icons/icon-people-network-filled.tsx +++ b/src/generated/mistica-icons/icon-people-network-filled.tsx @@ -29,7 +29,7 @@ const IconPeopleNetworkFilled = ({color, size = 24, ...rest}: IconProps): JSX.El ); diff --git a/src/generated/mistica-icons/icon-percent-regular.tsx b/src/generated/mistica-icons/icon-percent-regular.tsx index ecdd73705a..4077457ea9 100644 --- a/src/generated/mistica-icons/icon-percent-regular.tsx +++ b/src/generated/mistica-icons/icon-percent-regular.tsx @@ -18,7 +18,7 @@ const IconPercentRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-photo-camera-regular.tsx b/src/generated/mistica-icons/icon-photo-camera-regular.tsx index be25768ab9..ae5c71f27f 100644 --- a/src/generated/mistica-icons/icon-photo-camera-regular.tsx +++ b/src/generated/mistica-icons/icon-photo-camera-regular.tsx @@ -33,7 +33,7 @@ const IconPhotoCameraRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-pills-regular.tsx b/src/generated/mistica-icons/icon-pills-regular.tsx index 01b2a7ab60..1b0248db70 100644 --- a/src/generated/mistica-icons/icon-pills-regular.tsx +++ b/src/generated/mistica-icons/icon-pills-regular.tsx @@ -18,7 +18,7 @@ const IconPillsRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-play-circle-light.tsx b/src/generated/mistica-icons/icon-play-circle-light.tsx index 2238a819b9..35aac31dd1 100644 --- a/src/generated/mistica-icons/icon-play-circle-light.tsx +++ b/src/generated/mistica-icons/icon-play-circle-light.tsx @@ -18,7 +18,7 @@ const IconPlayCircleLight = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-podium-filled.tsx b/src/generated/mistica-icons/icon-podium-filled.tsx index 60b04c9d88..9238413de2 100644 --- a/src/generated/mistica-icons/icon-podium-filled.tsx +++ b/src/generated/mistica-icons/icon-podium-filled.tsx @@ -18,7 +18,7 @@ const IconPodiumFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-postpay-light.tsx b/src/generated/mistica-icons/icon-postpay-light.tsx index 226e320d6c..04b91c9416 100644 --- a/src/generated/mistica-icons/icon-postpay-light.tsx +++ b/src/generated/mistica-icons/icon-postpay-light.tsx @@ -18,11 +18,11 @@ const IconPostpayLight = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-pound-symbol-circle-light.tsx b/src/generated/mistica-icons/icon-pound-symbol-circle-light.tsx index 2b1d9e2f6c..d9800647cd 100644 --- a/src/generated/mistica-icons/icon-pound-symbol-circle-light.tsx +++ b/src/generated/mistica-icons/icon-pound-symbol-circle-light.tsx @@ -33,7 +33,7 @@ const IconPoundSymbolCircleLight = ({color, size = 24, ...rest}: IconProps): JSX ); diff --git a/src/generated/mistica-icons/icon-presentation-regular.tsx b/src/generated/mistica-icons/icon-presentation-regular.tsx index adfdb80d26..b25740815b 100644 --- a/src/generated/mistica-icons/icon-presentation-regular.tsx +++ b/src/generated/mistica-icons/icon-presentation-regular.tsx @@ -18,7 +18,7 @@ const IconPresentationRegular = ({color, size = 24, ...rest}: IconProps): JSX.El ); diff --git a/src/generated/mistica-icons/icon-price-drop-regular.tsx b/src/generated/mistica-icons/icon-price-drop-regular.tsx index 1169f5583d..cd91adb37a 100644 --- a/src/generated/mistica-icons/icon-price-drop-regular.tsx +++ b/src/generated/mistica-icons/icon-price-drop-regular.tsx @@ -18,11 +18,11 @@ const IconPriceDropRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-process-loading-light.tsx b/src/generated/mistica-icons/icon-process-loading-light.tsx index 9733fc4add..7e91ed87ac 100644 --- a/src/generated/mistica-icons/icon-process-loading-light.tsx +++ b/src/generated/mistica-icons/icon-process-loading-light.tsx @@ -29,7 +29,7 @@ const IconProcessLoadingLight = ({color, size = 24, ...rest}: IconProps): JSX.El ); diff --git a/src/generated/mistica-icons/icon-puzzle-light.tsx b/src/generated/mistica-icons/icon-puzzle-light.tsx index 8d5ff1b392..40928e37fa 100644 --- a/src/generated/mistica-icons/icon-puzzle-light.tsx +++ b/src/generated/mistica-icons/icon-puzzle-light.tsx @@ -18,7 +18,7 @@ const IconPuzzleLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-reload-regular.tsx b/src/generated/mistica-icons/icon-reload-regular.tsx index 8c20fc9a8c..1c77132e89 100644 --- a/src/generated/mistica-icons/icon-reload-regular.tsx +++ b/src/generated/mistica-icons/icon-reload-regular.tsx @@ -38,7 +38,7 @@ const IconReloadRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-renovate-device-change-mobile-regular.tsx b/src/generated/mistica-icons/icon-renovate-device-change-mobile-regular.tsx index f3d2f304f0..4d7eeeaa0e 100644 --- a/src/generated/mistica-icons/icon-renovate-device-change-mobile-regular.tsx +++ b/src/generated/mistica-icons/icon-renovate-device-change-mobile-regular.tsx @@ -29,15 +29,15 @@ const IconRenovateDeviceChangeMobileRegular = ({color, size = 24, ...rest}: Icon ); diff --git a/src/generated/mistica-icons/icon-restaurant-light.tsx b/src/generated/mistica-icons/icon-restaurant-light.tsx index 7c68aa0a24..650bccc194 100644 --- a/src/generated/mistica-icons/icon-restaurant-light.tsx +++ b/src/generated/mistica-icons/icon-restaurant-light.tsx @@ -29,7 +29,7 @@ const IconRestaurantLight = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-rewind-light.tsx b/src/generated/mistica-icons/icon-rewind-light.tsx index 8c0aa39720..2052cb4a2e 100644 --- a/src/generated/mistica-icons/icon-rewind-light.tsx +++ b/src/generated/mistica-icons/icon-rewind-light.tsx @@ -29,11 +29,11 @@ const IconRewindLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-robot-light.tsx b/src/generated/mistica-icons/icon-robot-light.tsx index 41781df102..5fd89f818a 100644 --- a/src/generated/mistica-icons/icon-robot-light.tsx +++ b/src/generated/mistica-icons/icon-robot-light.tsx @@ -29,7 +29,7 @@ const IconRobotLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-rocket-filled.tsx b/src/generated/mistica-icons/icon-rocket-filled.tsx index adf99a7d26..ef0348fcd5 100644 --- a/src/generated/mistica-icons/icon-rocket-filled.tsx +++ b/src/generated/mistica-icons/icon-rocket-filled.tsx @@ -29,7 +29,7 @@ const IconRocketFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-rook-filled.tsx b/src/generated/mistica-icons/icon-rook-filled.tsx index 441866d4f0..2376d06c58 100644 --- a/src/generated/mistica-icons/icon-rook-filled.tsx +++ b/src/generated/mistica-icons/icon-rook-filled.tsx @@ -18,7 +18,7 @@ const IconRookFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-rook-light.tsx b/src/generated/mistica-icons/icon-rook-light.tsx index 351d2067eb..e26668ba77 100644 --- a/src/generated/mistica-icons/icon-rook-light.tsx +++ b/src/generated/mistica-icons/icon-rook-light.tsx @@ -18,7 +18,7 @@ const IconRookLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-route-light.tsx b/src/generated/mistica-icons/icon-route-light.tsx index 655596169a..76f18b5992 100644 --- a/src/generated/mistica-icons/icon-route-light.tsx +++ b/src/generated/mistica-icons/icon-route-light.tsx @@ -18,7 +18,7 @@ const IconRouteLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-router-light.tsx b/src/generated/mistica-icons/icon-router-light.tsx index 091765a4d5..b6c3f034b0 100644 --- a/src/generated/mistica-icons/icon-router-light.tsx +++ b/src/generated/mistica-icons/icon-router-light.tsx @@ -29,7 +29,7 @@ const IconRouterLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-search-cloud-filled.tsx b/src/generated/mistica-icons/icon-search-cloud-filled.tsx index 4906400e1c..9a4ef12aeb 100644 --- a/src/generated/mistica-icons/icon-search-cloud-filled.tsx +++ b/src/generated/mistica-icons/icon-search-cloud-filled.tsx @@ -18,7 +18,7 @@ const IconSearchCloudFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-search-file-filled.tsx b/src/generated/mistica-icons/icon-search-file-filled.tsx index 9960238a42..ab45beb891 100644 --- a/src/generated/mistica-icons/icon-search-file-filled.tsx +++ b/src/generated/mistica-icons/icon-search-file-filled.tsx @@ -18,7 +18,7 @@ const IconSearchFileFilled = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-search-file-regular.tsx b/src/generated/mistica-icons/icon-search-file-regular.tsx index 6f4fdea624..2a153717f1 100644 --- a/src/generated/mistica-icons/icon-search-file-regular.tsx +++ b/src/generated/mistica-icons/icon-search-file-regular.tsx @@ -18,7 +18,7 @@ const IconSearchFileRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-search-money-filled.tsx b/src/generated/mistica-icons/icon-search-money-filled.tsx index dbec0db751..4e859c38c2 100644 --- a/src/generated/mistica-icons/icon-search-money-filled.tsx +++ b/src/generated/mistica-icons/icon-search-money-filled.tsx @@ -18,15 +18,15 @@ const IconSearchMoneyFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-search-money-regular.tsx b/src/generated/mistica-icons/icon-search-money-regular.tsx index aebd86ed9e..3b348c6f9b 100644 --- a/src/generated/mistica-icons/icon-search-money-regular.tsx +++ b/src/generated/mistica-icons/icon-search-money-regular.tsx @@ -18,7 +18,7 @@ const IconSearchMoneyRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-shield-antivirus-light.tsx b/src/generated/mistica-icons/icon-shield-antivirus-light.tsx index 365cc4ae77..1aebb7f718 100644 --- a/src/generated/mistica-icons/icon-shield-antivirus-light.tsx +++ b/src/generated/mistica-icons/icon-shield-antivirus-light.tsx @@ -18,7 +18,7 @@ const IconShieldAntivirusLight = ({color, size = 24, ...rest}: IconProps): JSX.E ); diff --git a/src/generated/mistica-icons/icon-skull-filled.tsx b/src/generated/mistica-icons/icon-skull-filled.tsx index 8994b2801d..f03cae8a26 100644 --- a/src/generated/mistica-icons/icon-skull-filled.tsx +++ b/src/generated/mistica-icons/icon-skull-filled.tsx @@ -18,7 +18,7 @@ const IconSkullFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-smart-wifi-regular.tsx b/src/generated/mistica-icons/icon-smart-wifi-regular.tsx index 41819ba631..e563c391e3 100644 --- a/src/generated/mistica-icons/icon-smart-wifi-regular.tsx +++ b/src/generated/mistica-icons/icon-smart-wifi-regular.tsx @@ -18,7 +18,7 @@ const IconSmartWifiRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-smiley-happy-filled.tsx b/src/generated/mistica-icons/icon-smiley-happy-filled.tsx index 9d0767784c..7b198752d4 100644 --- a/src/generated/mistica-icons/icon-smiley-happy-filled.tsx +++ b/src/generated/mistica-icons/icon-smiley-happy-filled.tsx @@ -18,7 +18,7 @@ const IconSmileyHappyFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-smiley-sad-filled.tsx b/src/generated/mistica-icons/icon-smiley-sad-filled.tsx index 00ce2ebac4..31304c3491 100644 --- a/src/generated/mistica-icons/icon-smiley-sad-filled.tsx +++ b/src/generated/mistica-icons/icon-smiley-sad-filled.tsx @@ -18,7 +18,7 @@ const IconSmileySadFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-snowflake-light.tsx b/src/generated/mistica-icons/icon-snowflake-light.tsx index 98d88d9497..39151ffaaf 100644 --- a/src/generated/mistica-icons/icon-snowflake-light.tsx +++ b/src/generated/mistica-icons/icon-snowflake-light.tsx @@ -18,7 +18,7 @@ const IconSnowflakeLight = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-snowflake-regular.tsx b/src/generated/mistica-icons/icon-snowflake-regular.tsx index 20c7409fe7..85981a2aad 100644 --- a/src/generated/mistica-icons/icon-snowflake-regular.tsx +++ b/src/generated/mistica-icons/icon-snowflake-regular.tsx @@ -18,7 +18,7 @@ const IconSnowflakeRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-sport-ball-filled.tsx b/src/generated/mistica-icons/icon-sport-ball-filled.tsx index a47b51ce9c..b368d4de02 100644 --- a/src/generated/mistica-icons/icon-sport-ball-filled.tsx +++ b/src/generated/mistica-icons/icon-sport-ball-filled.tsx @@ -18,7 +18,7 @@ const IconSportBallFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-status-chart-regular.tsx b/src/generated/mistica-icons/icon-status-chart-regular.tsx index a6b1ebef7b..712a4b4819 100644 --- a/src/generated/mistica-icons/icon-status-chart-regular.tsx +++ b/src/generated/mistica-icons/icon-status-chart-regular.tsx @@ -29,7 +29,7 @@ const IconStatusChartRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-storm-regular.tsx b/src/generated/mistica-icons/icon-storm-regular.tsx index 04ace23252..a963976270 100644 --- a/src/generated/mistica-icons/icon-storm-regular.tsx +++ b/src/generated/mistica-icons/icon-storm-regular.tsx @@ -18,7 +18,7 @@ const IconStormRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-sun-filled.tsx b/src/generated/mistica-icons/icon-sun-filled.tsx index a40309a401..be66e6ba49 100644 --- a/src/generated/mistica-icons/icon-sun-filled.tsx +++ b/src/generated/mistica-icons/icon-sun-filled.tsx @@ -18,7 +18,7 @@ const IconSunFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-support-agent-filled.tsx b/src/generated/mistica-icons/icon-support-agent-filled.tsx index 894c1f5f27..c4f1641451 100644 --- a/src/generated/mistica-icons/icon-support-agent-filled.tsx +++ b/src/generated/mistica-icons/icon-support-agent-filled.tsx @@ -33,11 +33,11 @@ const IconSupportAgentFilled = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-syringe-filled.tsx b/src/generated/mistica-icons/icon-syringe-filled.tsx index eb80764fcc..0c987a9ee4 100644 --- a/src/generated/mistica-icons/icon-syringe-filled.tsx +++ b/src/generated/mistica-icons/icon-syringe-filled.tsx @@ -18,7 +18,7 @@ const IconSyringeFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-tag-filled.tsx b/src/generated/mistica-icons/icon-tag-filled.tsx index cb8ab75baf..5a48e9cfa2 100644 --- a/src/generated/mistica-icons/icon-tag-filled.tsx +++ b/src/generated/mistica-icons/icon-tag-filled.tsx @@ -29,7 +29,7 @@ const IconTagFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-target-filled.tsx b/src/generated/mistica-icons/icon-target-filled.tsx index 97f27c0a53..0b30a0c137 100644 --- a/src/generated/mistica-icons/icon-target-filled.tsx +++ b/src/generated/mistica-icons/icon-target-filled.tsx @@ -29,7 +29,7 @@ const IconTargetFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-target-regular.tsx b/src/generated/mistica-icons/icon-target-regular.tsx index fb288018d8..3ab313fa14 100644 --- a/src/generated/mistica-icons/icon-target-regular.tsx +++ b/src/generated/mistica-icons/icon-target-regular.tsx @@ -29,7 +29,7 @@ const IconTargetRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-tech-service-filled.tsx b/src/generated/mistica-icons/icon-tech-service-filled.tsx index 60ab93af1a..fe8d30f0a5 100644 --- a/src/generated/mistica-icons/icon-tech-service-filled.tsx +++ b/src/generated/mistica-icons/icon-tech-service-filled.tsx @@ -29,7 +29,7 @@ const IconTechServiceFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elem ); diff --git a/src/generated/mistica-icons/icon-tech-service-internet-regular.tsx b/src/generated/mistica-icons/icon-tech-service-internet-regular.tsx index 3f3f9b449f..ab51ae6883 100644 --- a/src/generated/mistica-icons/icon-tech-service-internet-regular.tsx +++ b/src/generated/mistica-icons/icon-tech-service-internet-regular.tsx @@ -29,11 +29,11 @@ const IconTechServiceInternetRegular = ({color, size = 24, ...rest}: IconProps): ); diff --git a/src/generated/mistica-icons/icon-tech-service-landline-light.tsx b/src/generated/mistica-icons/icon-tech-service-landline-light.tsx index d5d58f3cb1..0207435cca 100644 --- a/src/generated/mistica-icons/icon-tech-service-landline-light.tsx +++ b/src/generated/mistica-icons/icon-tech-service-landline-light.tsx @@ -18,7 +18,7 @@ const IconTechServiceLandlineLight = ({color, size = 24, ...rest}: IconProps): J ); diff --git a/src/generated/mistica-icons/icon-tech-service-landline-regular.tsx b/src/generated/mistica-icons/icon-tech-service-landline-regular.tsx index f2cbb73173..92b59e8b21 100644 --- a/src/generated/mistica-icons/icon-tech-service-landline-regular.tsx +++ b/src/generated/mistica-icons/icon-tech-service-landline-regular.tsx @@ -18,7 +18,7 @@ const IconTechServiceLandlineRegular = ({color, size = 24, ...rest}: IconProps): ); diff --git a/src/generated/mistica-icons/icon-tech-service-mobile-light.tsx b/src/generated/mistica-icons/icon-tech-service-mobile-light.tsx index e48a8ee0fd..0b5e8c5252 100644 --- a/src/generated/mistica-icons/icon-tech-service-mobile-light.tsx +++ b/src/generated/mistica-icons/icon-tech-service-mobile-light.tsx @@ -22,7 +22,7 @@ const IconTechServiceMobileLight = ({color, size = 24, ...rest}: IconProps): JSX /> ); diff --git a/src/generated/mistica-icons/icon-teddy-bear-light.tsx b/src/generated/mistica-icons/icon-teddy-bear-light.tsx index 76a762532f..4c06926e9c 100644 --- a/src/generated/mistica-icons/icon-teddy-bear-light.tsx +++ b/src/generated/mistica-icons/icon-teddy-bear-light.tsx @@ -18,7 +18,7 @@ const IconTeddyBearLight = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-teddy-bear-regular.tsx b/src/generated/mistica-icons/icon-teddy-bear-regular.tsx index 2230900205..13fb29caf5 100644 --- a/src/generated/mistica-icons/icon-teddy-bear-regular.tsx +++ b/src/generated/mistica-icons/icon-teddy-bear-regular.tsx @@ -18,7 +18,7 @@ const IconTeddyBearRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-theater-regular.tsx b/src/generated/mistica-icons/icon-theater-regular.tsx index f8e39509a7..e3ed2cb68f 100644 --- a/src/generated/mistica-icons/icon-theater-regular.tsx +++ b/src/generated/mistica-icons/icon-theater-regular.tsx @@ -18,7 +18,7 @@ const IconTheaterRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-tongue-filled.tsx b/src/generated/mistica-icons/icon-tongue-filled.tsx index c386b2fd19..c2ed2504cb 100644 --- a/src/generated/mistica-icons/icon-tongue-filled.tsx +++ b/src/generated/mistica-icons/icon-tongue-filled.tsx @@ -18,7 +18,7 @@ const IconTongueFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-tongue-light.tsx b/src/generated/mistica-icons/icon-tongue-light.tsx index ae9088b357..dc9b42efd1 100644 --- a/src/generated/mistica-icons/icon-tongue-light.tsx +++ b/src/generated/mistica-icons/icon-tongue-light.tsx @@ -18,7 +18,7 @@ const IconTongueLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-tooth-filled.tsx b/src/generated/mistica-icons/icon-tooth-filled.tsx index 2d74c30086..e6679cfe45 100644 --- a/src/generated/mistica-icons/icon-tooth-filled.tsx +++ b/src/generated/mistica-icons/icon-tooth-filled.tsx @@ -18,7 +18,7 @@ const IconToothFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-tow-truck-filled.tsx b/src/generated/mistica-icons/icon-tow-truck-filled.tsx index 27c0f2714a..0693faa2bb 100644 --- a/src/generated/mistica-icons/icon-tow-truck-filled.tsx +++ b/src/generated/mistica-icons/icon-tow-truck-filled.tsx @@ -18,7 +18,7 @@ const IconTowTruckFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-train-filled.tsx b/src/generated/mistica-icons/icon-train-filled.tsx index ec96c7e14d..ab0b1afd83 100644 --- a/src/generated/mistica-icons/icon-train-filled.tsx +++ b/src/generated/mistica-icons/icon-train-filled.tsx @@ -29,7 +29,7 @@ const IconTrainFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-train-light.tsx b/src/generated/mistica-icons/icon-train-light.tsx index 7e40192375..cb9c0ce958 100644 --- a/src/generated/mistica-icons/icon-train-light.tsx +++ b/src/generated/mistica-icons/icon-train-light.tsx @@ -29,7 +29,7 @@ const IconTrainLight = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-tram-train-light.tsx b/src/generated/mistica-icons/icon-tram-train-light.tsx index 9637d82620..5c22ba5318 100644 --- a/src/generated/mistica-icons/icon-tram-train-light.tsx +++ b/src/generated/mistica-icons/icon-tram-train-light.tsx @@ -18,7 +18,7 @@ const IconTramTrainLight = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-tram-train-regular.tsx b/src/generated/mistica-icons/icon-tram-train-regular.tsx index 14f9c66671..9b124f6a05 100644 --- a/src/generated/mistica-icons/icon-tram-train-regular.tsx +++ b/src/generated/mistica-icons/icon-tram-train-regular.tsx @@ -18,7 +18,7 @@ const IconTramTrainRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-trash-can-filled.tsx b/src/generated/mistica-icons/icon-trash-can-filled.tsx index 1ae5b6e926..555cd12865 100644 --- a/src/generated/mistica-icons/icon-trash-can-filled.tsx +++ b/src/generated/mistica-icons/icon-trash-can-filled.tsx @@ -29,7 +29,7 @@ const IconTrashCanFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-trash-can-light.tsx b/src/generated/mistica-icons/icon-trash-can-light.tsx index f6201755ac..6f631829f4 100644 --- a/src/generated/mistica-icons/icon-trash-can-light.tsx +++ b/src/generated/mistica-icons/icon-trash-can-light.tsx @@ -33,7 +33,7 @@ const IconTrashCanLight = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-travel-bag-filled.tsx b/src/generated/mistica-icons/icon-travel-bag-filled.tsx index d1f10b51dd..96e8efb9d4 100644 --- a/src/generated/mistica-icons/icon-travel-bag-filled.tsx +++ b/src/generated/mistica-icons/icon-travel-bag-filled.tsx @@ -18,7 +18,7 @@ const IconTravelBagFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-travel-bag-regular.tsx b/src/generated/mistica-icons/icon-travel-bag-regular.tsx index 1c1338f32f..5a93cba9b4 100644 --- a/src/generated/mistica-icons/icon-travel-bag-regular.tsx +++ b/src/generated/mistica-icons/icon-travel-bag-regular.tsx @@ -18,7 +18,7 @@ const IconTravelBagRegular = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-tree-2-filled.tsx b/src/generated/mistica-icons/icon-tree-2-filled.tsx index 2836721a3e..f61606bd34 100644 --- a/src/generated/mistica-icons/icon-tree-2-filled.tsx +++ b/src/generated/mistica-icons/icon-tree-2-filled.tsx @@ -18,7 +18,7 @@ const IconTree2Filled = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-trophy-filled.tsx b/src/generated/mistica-icons/icon-trophy-filled.tsx index 2937b67710..c694f0183f 100644 --- a/src/generated/mistica-icons/icon-trophy-filled.tsx +++ b/src/generated/mistica-icons/icon-trophy-filled.tsx @@ -29,7 +29,7 @@ const IconTrophyFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-tshirt-filled.tsx b/src/generated/mistica-icons/icon-tshirt-filled.tsx index 5e5cdc0238..9bf76ae264 100644 --- a/src/generated/mistica-icons/icon-tshirt-filled.tsx +++ b/src/generated/mistica-icons/icon-tshirt-filled.tsx @@ -18,7 +18,7 @@ const IconTshirtFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-tshirt-regular.tsx b/src/generated/mistica-icons/icon-tshirt-regular.tsx index eff46cf772..a1d90d8db3 100644 --- a/src/generated/mistica-icons/icon-tshirt-regular.tsx +++ b/src/generated/mistica-icons/icon-tshirt-regular.tsx @@ -18,7 +18,7 @@ const IconTshirtRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/generated/mistica-icons/icon-umbrella-regular.tsx b/src/generated/mistica-icons/icon-umbrella-regular.tsx index b14e49f3a6..49eee2a217 100644 --- a/src/generated/mistica-icons/icon-umbrella-regular.tsx +++ b/src/generated/mistica-icons/icon-umbrella-regular.tsx @@ -18,7 +18,7 @@ const IconUmbrellaRegular = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-user-account-light.tsx b/src/generated/mistica-icons/icon-user-account-light.tsx index 8ecdb40dfd..d29cf22c59 100644 --- a/src/generated/mistica-icons/icon-user-account-light.tsx +++ b/src/generated/mistica-icons/icon-user-account-light.tsx @@ -29,7 +29,7 @@ const IconUserAccountLight = ({color, size = 24, ...rest}: IconProps): JSX.Eleme ); diff --git a/src/generated/mistica-icons/icon-user-account-regular.tsx b/src/generated/mistica-icons/icon-user-account-regular.tsx index 49378fb132..6807eb5c02 100644 --- a/src/generated/mistica-icons/icon-user-account-regular.tsx +++ b/src/generated/mistica-icons/icon-user-account-regular.tsx @@ -38,7 +38,7 @@ const IconUserAccountRegular = ({color, size = 24, ...rest}: IconProps): JSX.Ele ); diff --git a/src/generated/mistica-icons/icon-video-surveillance-security-filled.tsx b/src/generated/mistica-icons/icon-video-surveillance-security-filled.tsx index 2c1ce53406..500b00179a 100644 --- a/src/generated/mistica-icons/icon-video-surveillance-security-filled.tsx +++ b/src/generated/mistica-icons/icon-video-surveillance-security-filled.tsx @@ -18,7 +18,7 @@ const IconVideoSurveillanceSecurityFilled = ({color, size = 24, ...rest}: IconPr ); diff --git a/src/generated/mistica-icons/icon-virus-scan-filled.tsx b/src/generated/mistica-icons/icon-virus-scan-filled.tsx index 1e1a674f84..ab395655f8 100644 --- a/src/generated/mistica-icons/icon-virus-scan-filled.tsx +++ b/src/generated/mistica-icons/icon-virus-scan-filled.tsx @@ -18,7 +18,7 @@ const IconVirusScanFilled = ({color, size = 24, ...rest}: IconProps): JSX.Elemen ); diff --git a/src/generated/mistica-icons/icon-web-filled.tsx b/src/generated/mistica-icons/icon-web-filled.tsx index f416940c82..f1039a6d14 100644 --- a/src/generated/mistica-icons/icon-web-filled.tsx +++ b/src/generated/mistica-icons/icon-web-filled.tsx @@ -18,7 +18,7 @@ const IconWebFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element => { ); diff --git a/src/generated/mistica-icons/icon-wifi-regular.tsx b/src/generated/mistica-icons/icon-wifi-regular.tsx index 7524f3dfa2..1d74ebfa85 100644 --- a/src/generated/mistica-icons/icon-wifi-regular.tsx +++ b/src/generated/mistica-icons/icon-wifi-regular.tsx @@ -54,11 +54,11 @@ const IconWifiRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element => ); diff --git a/src/generated/mistica-icons/icon-winner-filled.tsx b/src/generated/mistica-icons/icon-winner-filled.tsx index 4330b4bd67..4ea8806e47 100644 --- a/src/generated/mistica-icons/icon-winner-filled.tsx +++ b/src/generated/mistica-icons/icon-winner-filled.tsx @@ -29,7 +29,7 @@ const IconWinnerFilled = ({color, size = 24, ...rest}: IconProps): JSX.Element = ); diff --git a/src/generated/mistica-icons/icon-winner-regular.tsx b/src/generated/mistica-icons/icon-winner-regular.tsx index 24088c517f..ce04775c10 100644 --- a/src/generated/mistica-icons/icon-winner-regular.tsx +++ b/src/generated/mistica-icons/icon-winner-regular.tsx @@ -29,7 +29,7 @@ const IconWinnerRegular = ({color, size = 24, ...rest}: IconProps): JSX.Element ); diff --git a/src/header.tsx b/src/header.tsx index 5f36e08d2c..b356ed64e0 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -94,7 +94,8 @@ export const Header: React.FC = ({ {pretitle && renderRichText(pretitle, {color: vars.colors.textPrimary})} - {small ? {title} : {title}} + {title && + (small ? {title} : {title})} {description && (small ? ( diff --git a/src/icons/icon-success-vivo-new.tsx b/src/icons/icon-success-vivo-new.tsx index 0858dbcf7a..67ae08710e 100644 --- a/src/icons/icon-success-vivo-new.tsx +++ b/src/icons/icon-success-vivo-new.tsx @@ -15,9 +15,9 @@ const IconSuccessVivoNew = ({size = 48}: Props): JSX.Element => { { strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" - points="25.75,32.75 29.69,37.5 38.25,26.5" + points="24,32.75 30,39 40.5,24.5" {...getAnimateDrawLineProps('44', '0.4s', platformOverrides, '0.5 0 0.83 0.83')} /> diff --git a/src/package-version.tsx b/src/package-version.tsx index b56d4ce221..94089bc1cd 100644 --- a/src/package-version.tsx +++ b/src/package-version.tsx @@ -1,2 +1,2 @@ // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js -export const PACKAGE_VERSION = '14.22.0' as string; +export const PACKAGE_VERSION = '14.24.0' as string; diff --git a/src/sheet-root.tsx b/src/sheet-root.tsx index 0e5795d4ff..fb3cb83a14 100644 --- a/src/sheet-root.tsx +++ b/src/sheet-root.tsx @@ -18,7 +18,7 @@ type SheetProps = Id< { title?: string; subtitle?: string; - description?: string; + description?: string | Array; } & T >; @@ -95,6 +95,17 @@ let listener: SheetPropsListener | null = null; let sheetPromiseResolve: SheetPromiseResolve | null = null; let nativeSheetImplementation: NativeSheetImplementation | null = null; +const normalizeDescriptionForNative = (description?: string | Array): string | undefined => { + if (Array.isArray(description)) { + if (description.length) { + return description.join('\n\n'); + } else { + return undefined; + } + } + return description; +}; + const showRadioListNativeSheet = ({ title, subtitle, @@ -105,7 +116,8 @@ const showRadioListNativeSheet = ({ (nativeSheetImplementation as NativeSheetImplementation)({ title, subtitle, - description, + // TODO: add multiline support to native sheet + description: normalizeDescriptionForNative(description), content: [ { type: 'LIST', @@ -139,7 +151,8 @@ const showActionsListNativeSheet = ({ (nativeSheetImplementation as NativeSheetImplementation)({ title, subtitle, - description, + // TODO: add multiline support to native sheet + description: normalizeDescriptionForNative(description), content: [ { type: 'LIST', @@ -168,7 +181,8 @@ const showInfoNativeSheet = async ({title, subtitle, description, items}: SheetP await (nativeSheetImplementation as NativeSheetImplementation)({ title, subtitle, - description, + // TODO: add multiline support to native sheet + description: normalizeDescriptionForNative(description), content: [ { type: 'LIST', @@ -193,7 +207,8 @@ const showActionsNativeSheet = async ({ return (nativeSheetImplementation as NativeSheetImplementation)({ title, subtitle, - description, + // TODO: add multiline support to native sheet + description: normalizeDescriptionForNative(description), content: [ { type: 'BOTTOM_ACTIONS', diff --git a/src/sheet.tsx b/src/sheet.tsx index d1b4ba2b89..e5cde6740a 100644 --- a/src/sheet.tsx +++ b/src/sheet.tsx @@ -295,7 +295,7 @@ const Sheet = React.forwardRef(({onClose, children, type SheetBodyProps = { title?: string; subtitle?: string; - description?: string; + description?: string | Array; button?: RendersNullableElement; secondaryButton?: RendersNullableElement; link?: RendersNullableElement; @@ -360,11 +360,29 @@ export const SheetBody = ({ {subtitle} )} - {description && ( - - {description} - - )} + {description && + (Array.isArray(description) ? ( + + {description.map((text, index) => ( +

+ {text} +

+ ))} + + ) : ( + + {description} + + ))} ) : null} {children} @@ -393,7 +411,7 @@ export const SheetBody = ({ type RadioListSheetProps = { title?: string; subtitle?: string; - description?: string; + description?: string | Array; items: Array<{ id: string; title?: string; @@ -487,7 +505,7 @@ export const RadioListSheet = React.forwardRef; items: Array<{ id: string; title: string; @@ -582,7 +600,7 @@ export const ActionsListSheet = React.forwardRef; items: Array<{ id?: string; title: string; @@ -674,7 +692,7 @@ type ButtonProps = { type ActionsSheetProps = { title?: string; subtitle?: string; - description?: string; + description?: string | Array; button: ButtonProps; secondaryButton?: ButtonProps; buttonLink?: ButtonProps & {withChevron?: boolean}; diff --git a/src/snackbar.tsx b/src/snackbar.tsx index 2f6d80f28d..00eb0d9acb 100644 --- a/src/snackbar.tsx +++ b/src/snackbar.tsx @@ -8,6 +8,7 @@ import * as styles from './snackbar.css'; import {sprinkles} from './sprinkles.css'; import {vars} from './skins/skin-contract.css'; import {getPrefixedDataAttributes} from './utils/dom'; +import {Portal} from './portal'; import type {DataAttributes} from './utils/types'; @@ -58,54 +59,56 @@ const SnackbarComponent: React.FC = ({ }, [close, duration]); return ( -
-
+ +
- - {message} - - {buttonText && ( -
- + + {message} + + {buttonText && ( +
- {buttonText} - -
- )} + + {buttonText} + +
+ )} +
-
+ ); }; diff --git a/src/sprinkles.css.ts b/src/sprinkles.css.ts index 4ca8676220..2d6a8895e0 100644 --- a/src/sprinkles.css.ts +++ b/src/sprinkles.css.ts @@ -42,6 +42,7 @@ const responsiveProperties = defineProperties({ const commonProperties = defineProperties({ properties: { + isolation: ['isolate'], position: ['relative', 'absolute', 'fixed', 'static', 'sticky'], display: ['none', 'flex', 'inline-flex', 'block', 'inline', 'inline-block'], flexDirection: ['row', 'column'], diff --git a/src/tabs.css.ts b/src/tabs.css.ts index 4ef8482264..506810227a 100644 --- a/src/tabs.css.ts +++ b/src/tabs.css.ts @@ -55,11 +55,6 @@ const baseTab = style([ background: 'transparent', }), { - /** - * Setting margin to 0, in order to avoid Safari from automatically adding extra margin to - * the touchable container (https://stackoverflow.com/a/71093016) - */ - margin: 0, textAlign: 'center', verticalAlign: 'baseline', borderBottom: '2px solid transparent', diff --git a/src/title.tsx b/src/title.tsx index 51d0640fcb..289f52c4da 100644 --- a/src/title.tsx +++ b/src/title.tsx @@ -4,6 +4,7 @@ import Inline from './inline'; import Box from './box'; import {vars} from './skins/skin-contract.css'; import {useTheme} from './hooks'; +import {getPrefixedDataAttributes} from './utils/dom'; import type {DataAttributes} from './utils/types'; @@ -16,7 +17,7 @@ type TitleLayoutProps = { const TitleLayout = ({title, right, dataAttributes}: TitleLayoutProps): React.ReactElement => { const {textPresets} = useTheme(); if (!right) { - return title; + return
{title}
; } return ( @@ -29,7 +30,7 @@ const TitleLayout = ({title, right, dataAttributes}: TitleLayoutProps): React.Re ); }; -type TitleProps = { +export type TitleProps = { children: React.ReactNode; id?: string; right?: React.ReactNode; diff --git a/src/touchable.css.ts b/src/touchable.css.ts index 6f626d23f7..3040bddc81 100644 --- a/src/touchable.css.ts +++ b/src/touchable.css.ts @@ -6,6 +6,10 @@ export const base = style([ cursor: 'pointer', }), { + /** + * Setting margin to 0, in order to avoid Safari from automatically adding extra margin to + * the touchable container (https://stackoverflow.com/a/71093016) + */ margin: 0, verticalAlign: 'bottom', // required to remove bottom gap when rendered as inline-block div fontFamily: 'inherit', diff --git a/src/utils/__tests__/helpers-test.tsx b/src/utils/__tests__/helpers-test.tsx index 73235f57a5..bacd935737 100644 --- a/src/utils/__tests__/helpers-test.tsx +++ b/src/utils/__tests__/helpers-test.tsx @@ -4,7 +4,7 @@ beforeEach(() => { jest.useFakeTimers(); }); -test('debounce happy case', () => { +test('debounce without leading and with trailing', () => { const fn = jest.fn().mockImplementation((a) => a); const debounced = debounce(fn, 5000); @@ -16,12 +16,10 @@ test('debounce happy case', () => { expect(fn).not.toHaveBeenCalled(); jest.runAllTimers(); - - expect(fn).toHaveBeenCalledTimes(1); expect(fn.mock.calls).toEqual([[3]]); }); -test('debounce with leading', () => { +test('debounce with leading and trailing', () => { const fn = jest.fn().mockImplementation((a) => a); const debounced = debounce(fn, 5000, {leading: true}); @@ -33,11 +31,24 @@ test('debounce with leading', () => { expect(fn.mock.calls).toEqual([[1]]); jest.runAllTimers(); - - expect(fn).toHaveBeenCalledTimes(2); expect(fn.mock.calls).toEqual([[1], [3]]); }); +test('debounce with leading and without trailing', () => { + const fn = jest.fn().mockImplementation((a) => a); + const debounced = debounce(fn, 5000, {leading: true, trailing: false}); + + debounced(1); + expect(fn.mock.calls).toEqual([[1]]); + + debounced(2); + debounced(3); + expect(fn.mock.calls).toEqual([[1]]); + + jest.runAllTimers(); + expect(fn.mock.calls).toEqual([[1]]); +}); + test('debounce with maxWait', () => { const fn = jest.fn().mockImplementation((a) => a); const debounced = debounce(fn, 2500, {maxWait: 3000}); @@ -66,6 +77,24 @@ test("debounce with leading and maxWait don't gets called twice", () => { expect(fn.mock.calls).toEqual([[1]]); }); +test('debounce calls the function when maxWait expires', () => { + const fn = jest.fn().mockImplementation((a) => a); + const debounced = debounce(fn, 1000, {maxWait: 2000}); + + debounced(1); + jest.advanceTimersByTime(500); + debounced(2); + jest.advanceTimersByTime(500); + debounced(3); + jest.advanceTimersByTime(500); + debounced(4); + jest.advanceTimersByTime(500); + + expect(fn.mock.calls).toEqual([[4]]); + jest.runAllTimers(); + expect(fn.mock.calls).toEqual([[4]]); +}); + test('debounce cancel', () => { const fn = jest.fn().mockImplementation((a) => a); const debounced = debounce(fn, 5000); @@ -81,6 +110,20 @@ test('debounce cancel', () => { expect(fn).not.toHaveBeenCalled(); }); +test('debounce flush', () => { + const fn = jest.fn().mockImplementation((a) => a); + const debounced = debounce(fn, 5000); + + debounced(1); + debounced(2); + debounced(3); + + debounced.flush(); + + jest.runAllTimers(); + expect(fn.mock.calls).toEqual([[3]]); +}); + test('isEqual happy case', () => { const symbol = Symbol('abc'); diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx index 3e17a7af76..d9b1bb33c9 100644 --- a/src/utils/helpers.tsx +++ b/src/utils/helpers.tsx @@ -1,59 +1,123 @@ -type Debounced = T & {cancel: () => void}; +/** These functions are copies of the ones located in webapp packages */ +type Debounced = T & {cancel: () => void; flush: () => void}; + +/** + * Creates a debounced function that delays invoking func until after wait milliseconds + * have elapsed since the last time the debounced function was invoked. The debounced function + * comes with a cancel method to cancel delayed func invocations and a flush method to immediately + * invoke them. The func is invoked with the last arguments provided to the debounced function. + * Subsequent calls to the debounced function return the result of the last func invocation. + */ export const debounce = ) => any>( func: T, wait: number, options: { leading?: boolean; + trailing?: boolean; maxWait?: number; } = {} ): Debounced => { - let debounceTimeoutId: ReturnType | undefined; - let maxWaitTimeoutId: ReturnType | undefined; - let currentArgs: Parameters; - let isLeading = true; - - const debounced = (...args: Parameters) => { - if (debounceTimeoutId) { - clearTimeout(debounceTimeoutId); + const waitTime = wait; + const leading = options.leading ?? false; + const trailing = options.trailing ?? true; + const maxWait = options.maxWait !== undefined ? Math.max(options.maxWait, waitTime) : undefined; + + let currentArgs: Parameters | undefined; + let lastInvokeTime = 0; + let lastCallTime = -1; + let result: any; + + let timerId: ReturnType | undefined; + + const invokeFunction = (time: number): any => { + lastInvokeTime = time; + if (currentArgs) { + result = func(...currentArgs); } + currentArgs = undefined; + return result; + }; + + const shouldInvoke = (time: number): boolean => { + const timeSinceLastCall = time - lastCallTime; + const timeSinceLastInvoke = time - lastInvokeTime; + + return ( + lastCallTime < 0 || + timeSinceLastCall >= wait || + timeSinceLastCall < 0 || + (maxWait !== undefined && timeSinceLastInvoke >= maxWait) + ); + }; - if (isLeading && options.leading) { - isLeading = false; - func(...args); - return; + const remainingWait = (time: number): number => { + const timeSinceLastCall = time - lastCallTime; + const timeSinceLastInvoke = time - lastInvokeTime; + const timeWaiting = wait - timeSinceLastCall; + return maxWait !== undefined ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting; + }; + + const trailingEdge = (time: number): any => { + timerId = undefined; + + if (trailing && currentArgs) { + return invokeFunction(time); } - currentArgs = args; + currentArgs = undefined; + return result; + }; - if (!maxWaitTimeoutId && options.maxWait) { - maxWaitTimeoutId = setTimeout(() => { - func(...currentArgs); - maxWaitTimeoutId = undefined; - clearTimeout(debounceTimeoutId); - }, options.maxWait); + const timerExpired = (): any => { + const time = Date.now(); + if (shouldInvoke(time)) { + return trailingEdge(time); } + timerId = setTimeout(timerExpired, remainingWait(time)); + }; - debounceTimeoutId = setTimeout(() => { - func(...args); - if (maxWaitTimeoutId) { - clearTimeout(maxWaitTimeoutId); - } - debounceTimeoutId = undefined; - maxWaitTimeoutId = undefined; - // eslint-disable-next-line testing-library/await-async-utils - }, wait); + const leadingEdge = (time: number): any => { + lastInvokeTime = time; + + timerId = setTimeout(timerExpired, waitTime); + return leading ? invokeFunction(time) : result; }; - debounced.cancel = () => { - if (debounceTimeoutId) { - clearTimeout(debounceTimeoutId); - debounceTimeoutId = undefined; + const debounced = (...args: Parameters) => { + const time = Date.now(); + const isInvoking = shouldInvoke(time); + + currentArgs = args; + lastCallTime = time; + + if (isInvoking) { + if (timerId === undefined) { + return leadingEdge(lastCallTime); + } + if (maxWait !== undefined) { + timerId = setTimeout(timerExpired, waitTime); + return invokeFunction(lastCallTime); + } + } + if (timerId === undefined) { + timerId = setTimeout(timerExpired, waitTime); } - if (maxWaitTimeoutId) { - clearTimeout(maxWaitTimeoutId); - maxWaitTimeoutId = undefined; + return result; + }; + + debounced.cancel = (): void => { + if (timerId !== undefined) { + clearTimeout(timerId); + timerId = undefined; } + lastInvokeTime = 0; + lastCallTime = -1; + currentArgs = undefined; + }; + + debounced.flush = (): any => { + return timerId === undefined ? result : trailingEdge(Date.now()); }; return debounced as Debounced; @@ -69,6 +133,9 @@ const isPrimitive = (v: unknown): v is string | number | undefined | null | bool return true; }; +/** + * Performs a deep comparison between two values to determine if they are equivalent. + */ export const isEqual = (a: unknown, b: unknown): boolean => { if (a === b) { return true;