diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b8db85ee4..832f85eec1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1459,6 +1459,9 @@ importers: '@semcore/icon': specifier: workspace:* version: link:../icon + '@semcore/illustration': + specifier: workspace:* + version: link:../illustration '@semcore/testing-utils': specifier: workspace:* version: link:../../tools/testing-utils diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index 8aaae36f87..5e0f2beaac 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index b6d7aed67c..7743b3b000 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index e110ae7dba..24a58550ef 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index a33081ee46..e565f7ef74 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index 9226d28ef8..109fc3f686 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index 3433bc95bb..4fd81b3313 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png index 243d994842..4d452c5144 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png index 9b9ac32fb5..102a975c7f 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png index d9327310a6..9fea98ac12 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png index 0eac94f408..ab46df1ab5 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png index 592ff9217a..a2bf13501e 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png index adbbc64967..a8ca215bc2 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png index 549ed29c2c..bd18802196 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png index 5840c7b8d4..464a1ca564 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png index 89a6367a8a..538f49028c 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png index 5bf7409696..46a2c88d46 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png index 415cb361be..eca888602b 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png index 600ab90e72..c1ca18dc04 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png index 01ff505be4..02c263012c 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png index 100fab399f..4df719f3ac 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png index 0bc01b1d4a..d931edc664 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png index 6fc4c2cca2..c619e94394 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png index f2258befce..c07c5e6e9d 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png index d70a46a568..e436f6e3a2 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png index 5f0a457983..ab6e57b04d 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png index 9797dd0344..a53447b63f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png index c9286beddd..831cbe5dc4 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png index f084422a64..004d9fb8e5 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png index e001ed3bd1..f19666a4a7 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png index 5b491a676c..58ba554d67 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png index 5e1dd65840..b68bbfbaae 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png index 795ba9e80c..13befedacf 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png index e18c76f47e..b021c1a1fb 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png index 6fc33b8c2e..22891b114f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png index 3dc8bb212f..35ef619011 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png index f4e9e4f115..f9c1d485a4 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png index d023cebf01..83b94577df 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png index 5842a07cb8..30e17da3a5 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png index beb8dfafb9..33326256c6 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png index 64757c5bff..14072cc8d7 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png index 65ea624396..a979fdecc1 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png index ddb493140b..2e5f0f2e3f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png index dc3073fb92..4c07b3d9c6 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png index 7bc7939bec..1ca499cc4c 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png index 983a8facab..b8f141187a 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png index be883ccfa2..1f8187825d 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png index 3e5e5f7fcb..c8006b51a2 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png index 5a2cd185e5..fa2985787a 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png index 702c268407..bb44f0c21e 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png index 92ae8ef24f..d9dfaef165 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png index db6c4c7d09..7e75b6982a 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png index ce93dd6e4b..b49f33c034 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png index cb4b667437..76cfa28b1a 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx b/semcore/notice/__tests__/notice.browser-test.tsx index f41091d80b..c7d7a14055 100644 --- a/semcore/notice/__tests__/notice.browser-test.tsx +++ b/semcore/notice/__tests__/notice.browser-test.tsx @@ -3,11 +3,15 @@ import { expect, test } from '@semcore/testing-utils/playwright'; import { loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; +const SMART_STORY = 'stories/components/notice/tests/examples/noticesmart_full_props.tsx'; + export const locators = { notice: (page: Page) => page.locator('[data-ui-name="Notice"]'), noticeSmart: (page: Page) => page.locator('[data-ui-name="NoticeSmart"]'), close: (page: Page) => page.locator('[data-ui-name="Notice.Close"]'), content: (page: Page) => page.locator('[data-ui-name="Notice.Content"]'), + icon: (page: Page) => + page.locator('[data-ui-name="Notice"] > [data-ui-name="Box"], [data-ui-name="NoticeSmart"] > [data-ui-name="Box"]'), title: (page: Page) => page.locator('[data-ui-name="Notice.Title"]'), text: (page: Page) => page.locator('[data-ui-name="Notice.Text"]'), }; @@ -47,7 +51,7 @@ test.describe(`${TAG.VISUAL}`, () => { const noticeContent = locators.content(page); const title = noticeContent.first().locator('[data-ui-name="Notice.Title"]'); await expect(title).toHaveCSS('margin-top', '2px'); - await expect(title).toHaveCSS('margin-bottom', '2px'); + await expect(title).toHaveCSS('margin-bottom', '0px'); const text = noticeContent.first().locator('[data-ui-name="Notice.Text"]'); await expect(text).toHaveCSS('margin-top', '4px'); @@ -55,45 +59,83 @@ test.describe(`${TAG.VISUAL}`, () => { }); }); - test('Verify different pairs of sub-components', { + test('Verify notice with icon prop', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await loadPage(page, 'stories/components/notice/docs/examples/basic_notice.tsx', 'en'); - await test.step('Verify all notice states render correctly', async () => { - await page.setViewportSize({ width: 1600, height: 1200 }); - await expect(page).toHaveScreenshot(); + await test.step('Verify icon is rendered inside every notice', async () => { + const notices = await locators.notice(page).all(); + const icons = locators.icon(page); + + await expect(icons).toHaveCount(notices.length); + + for (const icon of await icons.all()) { + await expect(icon).toBeVisible(); + await expect(icon.locator('svg')).toBeVisible(); + } }); - }); - test('Verify notice with big illustrations', { - tag: [TAG.PRIORITY_HIGH, '@notice'], - }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_big_illustration.tsx', 'en'); + await test.step('Verify icon color depends on notice theme', async () => { + const icons = locators.icon(page); + // basic_notice.tsx order: info, muted, warning, danger, success + const [info, muted, warning, danger, success] = await Promise.all( + [0, 1, 2, 3, 4].map((index) => + icons.nth(index).evaluate((node) => getComputedStyle(node).color), + ), + ); + + expect(info).toBe(muted); + expect(new Set([info, warning, danger, success]).size).toBe(4); + }); - await test.step('Verify big illustrations display correctly', async () => { + await test.step('Verify notices with icon render correctly', async () => { await page.setViewportSize({ width: 1600, height: 1000 }); await expect(page).toHaveScreenshot(); }); }); - test('Verify notice with medium illustrations', { + test('Verify NoticeSmart media variations', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_medium_illustration.tsx', 'en'); + for (const media of ['none', 'icon', 'illustration']) { + await test.step(`Verify NoticeSmart with media set to ${media}`, async () => { + await loadPage(page, SMART_STORY, 'en', { media }); + await expect(page).toHaveScreenshot(); + }); + } + }); - await test.step('Verify medium illustrations display correctly', async () => { - await page.setViewportSize({ width: 1600, height: 1000 }); + test('Verify NoticeSmart content combinations', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify NoticeSmart without title', async () => { + await loadPage(page, SMART_STORY, 'en', { title: '' }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart without text', async () => { + await loadPage(page, SMART_STORY, 'en', { text: '' }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart without actions and close button', async () => { + await loadPage(page, SMART_STORY, 'en', { withActions: false, closable: false }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart in narrow container wraps text', async () => { + await loadPage(page, SMART_STORY, 'en', { w: 320 }); await expect(page).toHaveScreenshot(); }); }); - test('Verify notice with small illustrations', { + test('Verify notice with big illustrations', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_small_illustration.tsx', 'en'); + await loadPage(page, 'stories/components/notice/tests/examples/notice_big_illustration.tsx', 'en'); - await test.step('Verify small illustrations display correctly', async () => { + await test.step('Verify big illustrations display correctly', async () => { await page.setViewportSize({ width: 1600, height: 1000 }); await expect(page).toHaveScreenshot(); }); @@ -154,40 +196,115 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { }); }); - test.describe(`Notice `, () => { - test('Verify hidden prop toggle shows and hides notice', { + test.describe(`NoticeSmart `, () => { + test('Verify hidden prop hides notice', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify notice is visible by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(page.getByTestId('smart-configurable')).toBeVisible(); + }); + + await test.step('Verify notice is not visible with hidden prop', async () => { + await loadPage(page, SMART_STORY, 'en', { hidden: true }); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); + }); + }); + + test('Verify closable prop and closing by click', { tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await test.step('Verify close button is absent when closable is false', async () => { + await loadPage(page, SMART_STORY, 'en', { closable: false }); + await expect(locators.close(page)).toHaveCount(0); + }); + + await test.step('Verify notice closes on close button click', async () => { + await loadPage(page, SMART_STORY, 'en'); + await locators.close(page).click(); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); + }); + }); + + test('Verify close button is reachable by keyboard', { + tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, '@notice'], + }, async ({ page }) => { + await loadPage(page, SMART_STORY, 'en'); + + await test.step('Verify Tab moves focus to actions and then to close button', async () => { + await page.keyboard.press('Tab'); + await expect(page.getByRole('button', { name: 'Learn more' })).toBeFocused(); - await test.step('Verify notice is initially hidden', async () => { - await expect(page.getByLabel('Toggleable notice')).not.toBeVisible(); + await page.keyboard.press('Tab'); + await expect(page.getByRole('button', { name: 'Dismiss' })).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(locators.close(page)).toBeFocused(); }); - await test.step('Verify notice becomes visible on toggle', async () => { - await page.getByTestId('toggle-btn').click(); - await expect(page.getByLabel('Toggleable notice')).toBeVisible(); + await test.step('Verify notice closes on Enter', async () => { + await page.keyboard.press('Enter'); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); }); + }); - await test.step('Verify notice hides again on toggle', async () => { - await page.getByTestId('toggle-btn').click(); - await expect(page.getByLabel('Toggleable notice')).not.toBeVisible(); + test('Verify actions are rendered only when passed', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify actions are present by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(page.getByRole('button', { name: 'Learn more' })).toBeVisible(); + }); + + await test.step('Verify actions are absent when not passed', async () => { + await loadPage(page, SMART_STORY, 'en', { withActions: false }); + await expect(page.getByRole('button', { name: 'Learn more' })).toHaveCount(0); }); }); - test('Verify aria-live attribute passthrough', { + test('Verify title and text are rendered only when passed', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await test.step('Verify title and text are present by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(locators.title(page)).toHaveCount(1); + await expect(locators.text(page)).toHaveCount(1); + }); - await test.step('Verify aria-live is set on notice', async () => { - const liveNotice = page.getByLabel('Live notice'); - await expect(liveNotice).toHaveAttribute('aria-live', 'polite'); + await test.step('Verify title is absent when empty', async () => { + await loadPage(page, SMART_STORY, 'en', { title: '' }); + await expect(locators.title(page)).toHaveCount(0); + await expect(locators.text(page)).toHaveCount(1); + }); + + await test.step('Verify text is absent when empty', async () => { + await loadPage(page, SMART_STORY, 'en', { text: '' }); + await expect(locators.title(page)).toHaveCount(1); + await expect(locators.text(page)).toHaveCount(0); + }); + }); + + test('Verify media element is rendered according to media prop', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify only one media element is rendered for icon', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'icon' }); + await expect(locators.icon(page)).toHaveCount(1); + }); + + await test.step('Verify only one media element is rendered for illustration', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'illustration' }); + await expect(locators.icon(page)).toHaveCount(1); + }); + + await test.step('Verify no media element is rendered for none', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'none' }); + await expect(locators.icon(page)).toHaveCount(0); }); }); }); - test.describe(`NoticeSmart `, () => { + test.describe(`NoticeSmart docs example `, () => { test('Verify NoticeSmart roles and attributes', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { @@ -214,31 +331,34 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { } }); }); + }); - test('Verify NoticeSmart interactions', { - tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, TAG.MOUSE, '@notice'], + test.describe(`Notice illustrations `, () => { + test('Verify medium illustrations keep their default size and stay left of the content', { + tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/docs/examples/noticesmart.tsx', 'en'); + await loadPage(page, 'stories/components/notice/tests/examples/notice_medium_illustration.tsx', 'en'); - await test.step('Verify keyboard navigation to close button', async () => { - const closes = locators.close(page); - await page.keyboard.press('Tab'); - await expect(closes.first()).toBeFocused(); + const notices = locators.notice(page); + const noticesCount = await notices.count(); + + await test.step('Verify every notice renders a single illustration', async () => { + await expect(locators.icon(page)).toHaveCount(noticesCount); }); - await test.step('Verify notices close on Enter and click', async () => { - await page.keyboard.press('Enter'); - await expect(page.getByLabel('New tool announcement')).not.toBeVisible(); + for (let index = 0; index < noticesCount; index++) { + await test.step(`Verify illustration ${index + 1} size and position`, async () => { + const illustration = locators.icon(page).nth(index); + const illustrationBox = await illustration.locator('svg').boundingBox(); + const contentBox = await locators.content(page).nth(index).boundingBox(); - await locators.close(page).first().click(); - await expect(page.getByLabel('New feature announcement')).not.toBeVisible(); - await expect(page.locator('[data-ui-name="Notice.Label"][color="muted"]')).not.toBeVisible(); - }); + // Illustrations render at their own default size, the component does not resize them + expect(illustrationBox?.width).toBeCloseTo(80, 3); + expect(illustrationBox?.height).toBeCloseTo(80, 3); + + expect(illustrationBox!.x + illustrationBox!.width).toBeLessThanOrEqual(contentBox!.x); + }); + } }); }); }); - -/* ===================================================== -@functional -Additional coverage — hidden toggle, custom theme, aria-live, muted+closable. -===================================================== */ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png index c14c9bf11f..065d5c3417 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png index 098316fd5b..a9685f05c8 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png index 622e90154b..3e3531ad99 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png index 6738834c17..b851e181ff 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png index 3e6b30a60a..2e4de4155a 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png index bdbca5d9c4..bd2263bad1 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png index cd4fe4fb22..7e085d74e8 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png index 5902bc7a3a..81b5edbffa 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png index 4252b5dee7..d8c57440c4 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png new file mode 100644 index 0000000000..5d7e65fc2d Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png new file mode 100644 index 0000000000..8362b6ceff Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png new file mode 100644 index 0000000000..c0b7dd2b68 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png new file mode 100644 index 0000000000..2dfd0ea91d Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png new file mode 100644 index 0000000000..bb0c5ec616 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png new file mode 100644 index 0000000000..04653b507e Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png new file mode 100644 index 0000000000..c06a273f5b Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png new file mode 100644 index 0000000000..a230584a6c Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png new file mode 100644 index 0000000000..bb9b6c4a17 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png new file mode 100644 index 0000000000..a0d1ee3dd6 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png new file mode 100644 index 0000000000..c4bb898e10 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png new file mode 100644 index 0000000000..2a05796fac Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png new file mode 100644 index 0000000000..cca9507231 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png new file mode 100644 index 0000000000..c11dee3d80 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png new file mode 100644 index 0000000000..32be8bda42 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png new file mode 100644 index 0000000000..cb92f33040 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png new file mode 100644 index 0000000000..64c36dd66b Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png new file mode 100644 index 0000000000..74fd08da98 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png new file mode 100644 index 0000000000..e7645e093e Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png new file mode 100644 index 0000000000..2bf9bc8c49 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png new file mode 100644 index 0000000000..cec448a1fd Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-chromium-linux.png deleted file mode 100644 index 856b77f555..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-chromium-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-firefox-linux.png deleted file mode 100644 index a220ccc193..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-firefox-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-webkit-linux.png deleted file mode 100644 index 959a90f708..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-different-pairs-of-sub-components-1-webkit-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png index cbf5d8b5a0..a38d113c2b 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png index cab0b98c7d..2dce58c996 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png index 0a544fcd16..756de064ba 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png new file mode 100644 index 0000000000..3abe149f67 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png new file mode 100644 index 0000000000..319846471a Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png new file mode 100644 index 0000000000..d15df9056c Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-chromium-linux.png deleted file mode 100644 index a1cbe42d95..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-chromium-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-firefox-linux.png deleted file mode 100644 index d8601de955..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-firefox-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-webkit-linux.png deleted file mode 100644 index 97a1fee97f..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-medium-illustrations-1-webkit-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-chromium-linux.png deleted file mode 100644 index 3745a5cfb0..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-chromium-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-firefox-linux.png deleted file mode 100644 index 9b034376d7..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-firefox-linux.png and /dev/null differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-webkit-linux.png deleted file mode 100644 index 23afdde27e..0000000000 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-small-illustrations-1-webkit-linux.png and /dev/null differ diff --git a/semcore/notice/package.json b/semcore/notice/package.json index 574c84dc20..6ef6607d69 100644 --- a/semcore/notice/package.json +++ b/semcore/notice/package.json @@ -33,6 +33,7 @@ "@semcore/core": "workspace:*", "@semcore/base-components": "workspace:*", "@semcore/icon": "workspace:*", + "@semcore/illustration": "workspace:*", "@semcore/testing-utils": "workspace:*" } } diff --git a/semcore/notice/src/Notice.tsx b/semcore/notice/src/Notice.tsx index b685d31d5d..af79aa00de 100644 --- a/semcore/notice/src/Notice.tsx +++ b/semcore/notice/src/Notice.tsx @@ -93,7 +93,9 @@ class RootNotice extends Component< render() { const SNotice = Root; - const { Children, styles, hidden, theme, resolveColor, getI18nText } = this.asProps; + const SIcon = Box; + const SIllustration = Box; + const { Children, styles, hidden, theme, resolveColor, getI18nText, icon, illustration } = this.asProps; const color = resolveColor(theme); const useTheme = isCustomTheme(theme) ? 'custom' : theme; @@ -114,7 +116,13 @@ class RootNotice extends Component< role={role} aria-label={ariaLabel} ref={this.ref} + __excludeProps={['icon', 'illustration']} > + {icon !== undefined && ( + // @ts-expect-error we use theme in css-only + {icon} + )} + {illustration !== undefined && ({illustration})} , ); diff --git a/semcore/notice/src/Notice.type.ts b/semcore/notice/src/Notice.type.ts index 8b300dab63..a8c31f60ce 100644 --- a/semcore/notice/src/Notice.type.ts +++ b/semcore/notice/src/Notice.type.ts @@ -1,7 +1,10 @@ import type { NSAnimation, NSBox } from '@semcore/base-components'; import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { Text } from '@semcore/typography'; +import type Icon from '@semcore/icon'; +import type { IllustrationProps } from '@semcore/illustration'; +import type { NSText } from '@semcore/typography'; +import { ReactElement } from 'react'; import type { LocalizedMessaged } from './translations/__intergalactic-dynamic-locales'; @@ -22,7 +25,13 @@ declare namespace NSNotice { duration?: number; /** Specifies the locale for i18n support */ locale?: string; - }; + } & ({ + icon?: typeof Icon; + illustration?: never; + } | { + icon?: never; + illustration?: React.ReactElement; + }); type DefaultProps = { theme: 'info'; i18n: LocalizedMessaged; @@ -49,11 +58,11 @@ declare namespace NSNotice { } namespace Title { - type Component = typeof Text; + type Component = NSText.Component; } namespace Text { - type Component = typeof Text; + type Component = NSText.Component; } namespace Close { @@ -61,6 +70,9 @@ declare namespace NSNotice { } type Component = Intergalactic.Component<'div', Props, Ctx> & { + /** + * @deprecated. Use icon or illustration props instead. + */ Label: Label.Component; Actions: Actions.Component; Content: Content.Component; diff --git a/semcore/notice/src/NoticeSmart.tsx b/semcore/notice/src/NoticeSmart.tsx index 854db2ce82..1c61cf9511 100644 --- a/semcore/notice/src/NoticeSmart.tsx +++ b/semcore/notice/src/NoticeSmart.tsx @@ -1,10 +1,11 @@ import type { Intergalactic } from '@semcore/core'; -import { createComponent, Component, Root } from '@semcore/core'; +import { sstyled, createComponent, Component, Root } from '@semcore/core'; import isNode from '@semcore/core/lib/utils/isNode'; import React from 'react'; import Notice from './Notice'; import type { NSNoticeSmart } from './NoticeSmart.type'; +import style from './style/notice.shadow.css'; class NoticeSmart extends Component< Intergalactic.InternalTypings.InferComponentProps, @@ -15,17 +16,17 @@ class NoticeSmart extends Component< NSNoticeSmart.DefaultProps > { static displayName = 'NoticeSmart'; - + static style = style; static defaultProps = { theme: 'info', } as const; render() { const SNoticeSmart = Root; - const { label, title, actions, closable, onClose, text } = this.asProps; + const { label, title, actions, closable, onClose, text, styles } = this.asProps; - return ( - + return sstyled(styles)( + {isNode(label) && {label}} {isNode(title) && {title}} @@ -33,7 +34,7 @@ class NoticeSmart extends Component< {isNode(actions) && {actions}} {closable && } - + , ); } } diff --git a/semcore/notice/src/NoticeSmart.type.ts b/semcore/notice/src/NoticeSmart.type.ts index 47207575b6..d8312c0857 100644 --- a/semcore/notice/src/NoticeSmart.type.ts +++ b/semcore/notice/src/NoticeSmart.type.ts @@ -1,11 +1,15 @@ import type { Intergalactic } from '@semcore/core'; +import type Icon from '@semcore/icon'; +import type { IllustrationProps } from '@semcore/illustration'; import type { NSNotice } from './Notice.type'; declare namespace NSNoticeSmart { - type Props = NSNotice.Props & { + type Props = Omit & { /** * A custom element for additional information + * + * @deprecated. Use icon or illustration props instead. */ label?: React.ReactNode; @@ -29,7 +33,13 @@ declare namespace NSNoticeSmart { * Callback on a click on the close button */ onClose?: (event: React.SyntheticEvent) => void; - }; + } & ({ + icon?: typeof Icon; + illustration?: never; + } | { + icon?: never; + illustration?: React.ElementType; + }); type DefaultProps = { theme: 'info'; }; diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index d905d6496e..70558d58b8 100644 --- a/semcore/notice/src/style/notice.shadow.css +++ b/semcore/notice/src/style/notice.shadow.css @@ -1,6 +1,6 @@ SNotice { display: flex; - padding: var(--intergalactic-spacing-4x, 16px); + padding: var(--intergalactic-spacing-content-padding-large, 16px); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 142%); box-sizing: border-box; @@ -8,6 +8,7 @@ SNotice { border-width: 1px; border-radius: var(--intergalactic-surface-rounded, 8px); color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + gap: var(--intergalactic-spacing-content-gap-large, 8px); } SNotice[theme='info'] { @@ -82,44 +83,59 @@ SContent { SActions { flex-shrink: 0; - margin-top: var(--intergalactic-spacing-3x, 12px); + display: flex; + gap: var(--intergalactic-spacing-content-gap-large, 8px); + margin-top: var(--intergalactic-spacing-content-padding-small, 8px); } SLabel { - min-height: var(--intergalactic-form-control-m, 32px); height: fit-content; - margin-right: var(--intergalactic-spacing-2x, 8px); display: inline-flex; align-items: center; + margin-top: 6px; +} + +SIcon { + height: fit-content; + display: inline-flex; + align-items: center; + margin-top: 6px; +} + +SIllustration { + height: fit-content; + display: inline-flex; + align-items: center; + margin-right: var(--intergalactic-spacing-content-padding-xlarge, 20px); } -SLabel[theme='info'] { +SLabel[theme='info'], SIcon[theme='info'] { color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); } -SLabel[theme='danger'] { +SLabel[theme='danger'], SIcon[theme='danger'] { color: var(--intergalactic-icon-primary-critical, oklch(0.552 0.226 28.7 / 0.848)); } -SLabel[theme='warning'] { +SLabel[theme='warning'], SIcon[theme='warning'] { color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); } -SLabel[theme='success'] { +SLabel[theme='success'], SIcon[theme='success'] { color: var(--intergalactic-icon-primary-success, oklch(0.595 0.124 165.4)); } -SLabel[theme='muted'] { +SLabel[theme='muted'], SIcon[theme='muted'] { color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); } -SLabel[theme='custom'] { +SLabel[theme='custom'], SIcon[theme='custom'] { color: var(--color); } SCloseIcon { flex-shrink: 0; - margin-left: var(--intergalactic-spacing-4x, 16px); + margin-left: var(--intergalactic-spacing-content-padding-large, 16px); } SNotice[theme='custom'] { @@ -128,11 +144,10 @@ SNotice[theme='custom'] { } STitle { - margin-top: var(--intergalactic-spacing-05x, 2px); - margin-bottom: var(--intergalactic-spacing-05x, 2px); + margin-top: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) / 2); } SText { - margin-top: var(--intergalactic-spacing-1x, 4px); - margin-bottom: var(--intergalactic-spacing-1x, 4px); + margin-top: var(--intergalactic-spacing-content-padding-xsmall, 4px); + margin-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px); } diff --git a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx index 8f01e80afa..3b7727bcac 100644 --- a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx @@ -50,12 +50,10 @@ const Demo = () => { aria-labelledby='comparator-notice-title' theme='warning' style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }} + icon={} > - - - Warning diff --git a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx index b69a970a07..11427f540f 100644 --- a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx @@ -50,12 +50,10 @@ const Demo = () => { aria-labelledby='month-notice-title' theme='warning' style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }} + icon={} > - - - Warning diff --git a/stories/components/notice/docs/examples/basic_notice.tsx b/stories/components/notice/docs/examples/basic_notice.tsx index 354d9fa51f..97c1ae69b7 100644 --- a/stories/components/notice/docs/examples/basic_notice.tsx +++ b/stories/components/notice/docs/examples/basic_notice.tsx @@ -7,12 +7,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> New keyboard shortcuts are available @@ -22,7 +18,7 @@ const Demo = () => ( - @@ -31,11 +27,7 @@ const Demo = () => ( - - - - - + }> Data export is in progress @@ -45,7 +37,7 @@ const Demo = () => ( - @@ -54,11 +46,7 @@ const Demo = () => ( - - - - - + }> Payment method expires soon @@ -68,7 +56,7 @@ const Demo = () => ( - @@ -77,11 +65,7 @@ const Demo = () => ( - - - - - + }> API request limit reached @@ -91,7 +75,7 @@ const Demo = () => ( - @@ -100,11 +84,7 @@ const Demo = () => ( - - - - - + }> Backup completed successfully @@ -114,7 +94,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/docs/examples/custom_notice.tsx b/stories/components/notice/docs/examples/custom_notice.tsx index ca9289efc6..4bc6f7bc7b 100644 --- a/stories/components/notice/docs/examples/custom_notice.tsx +++ b/stories/components/notice/docs/examples/custom_notice.tsx @@ -4,10 +4,7 @@ import Notice, { type NSNotice } from '@semcore/ui/notice'; import React from 'react'; const Demo = (props: NSNotice.Props) => ( - - - - + }> Strategize your next move with daily and weekly traffic data diff --git a/stories/components/notice/docs/examples/noticesmart.tsx b/stories/components/notice/docs/examples/noticesmart.tsx index 6083037a03..1ce15e3dc8 100644 --- a/stories/components/notice/docs/examples/noticesmart.tsx +++ b/stories/components/notice/docs/examples/noticesmart.tsx @@ -13,7 +13,7 @@ const Demo = () => { return ( } + icon={} aria-label='New tool announcement' closable onClose={() => setFirstHidden(true)} @@ -25,7 +25,7 @@ const Demo = () => { } + icon={} title="We've released a cool new feature!" closable onClose={() => setSecondHidden(true)} @@ -40,7 +40,7 @@ const Demo = () => { } + icon={} aria-label='Maintenance notice' text='Starting new campaigns is temporarily unavailable, but you can continue working with your existing Link Building campaigns.' /> diff --git a/stories/components/notice/tests/Notice.stories.tsx b/stories/components/notice/tests/Notice.stories.tsx index aff2592fa3..807a3b8ee8 100644 --- a/stories/components/notice/tests/Notice.stories.tsx +++ b/stories/components/notice/tests/Notice.stories.tsx @@ -2,8 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import NoticeBigIllustrationExample from './examples/notice_big_illustration'; import NoticeMediumIllustrationExample from './examples/notice_medium_illustration'; -import NoticeSmallIllustrationExample from './examples/notice_small_illustration'; -import NoticeStatesExample from './examples/notice_with_different_states'; +import NoticeSmartFullPropsExample, { defaultNoticeSmartProps } from './examples/noticesmart_full_props'; const meta: Meta = { title: 'Components/Notice/Tests', @@ -14,14 +13,37 @@ export const NoticeMediumIllustration: StoryObj = { render: NoticeMediumIllustrationExample, }; -export const NoticeSmallIllustration: StoryObj = { - render: NoticeSmallIllustrationExample, -}; - export const NoticeBigIllustration: StoryObj = { render: NoticeBigIllustrationExample, }; -export const NoticeStates: StoryObj = { - render: NoticeStatesExample, +const noticeSmartArgTypes = { + theme: { + control: { type: 'select' }, + options: ['info', 'muted', 'warning', 'danger', 'success'], + }, + media: { + control: { type: 'inline-radio' }, + options: ['none', 'icon', 'illustration'], + description: 'icon and illustration are mutually exclusive, so they share one control', + }, + icon: { + control: { type: 'select' }, + options: ['Info', 'ThumbUp', 'Question'], + description: 'Applied when media is set to icon', + }, + withActions: { control: { type: 'boolean' } }, + closable: { control: { type: 'boolean' } }, + hidden: { control: { type: 'boolean' } }, + title: { control: { type: 'text' }, description: 'Empty value removes the title' }, + text: { control: { type: 'text' }, description: 'Empty value removes the text' }, + w: { control: { type: 'number' }, description: 'Notice width, px' }, + duration: { control: { type: 'number' }, description: 'Animation duration, ms' }, + locale: { control: { type: 'select' }, options: ['en', 'es'] }, +} as const; + +export const NoticeSmartFullProps: StoryObj = { + render: NoticeSmartFullPropsExample, + argTypes: noticeSmartArgTypes, + args: defaultNoticeSmartProps, }; diff --git a/stories/components/notice/tests/examples/notice_big_illustration.tsx b/stories/components/notice/tests/examples/notice_big_illustration.tsx index efbd292aa9..0c048b1ebe 100644 --- a/stories/components/notice/tests/examples/notice_big_illustration.tsx +++ b/stories/components/notice/tests/examples/notice_big_illustration.tsx @@ -6,12 +6,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> Your subscription has expired @@ -21,7 +17,7 @@ const Demo = () => ( - @@ -30,11 +26,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -44,7 +36,7 @@ const Demo = () => ( - @@ -53,11 +45,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -70,7 +58,7 @@ const Demo = () => ( - @@ -79,11 +67,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -96,7 +80,7 @@ const Demo = () => ( - @@ -105,11 +89,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -119,7 +99,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/tests/examples/notice_medium_illustration.tsx b/stories/components/notice/tests/examples/notice_medium_illustration.tsx index b89a6ea303..ee023a3d05 100644 --- a/stories/components/notice/tests/examples/notice_medium_illustration.tsx +++ b/stories/components/notice/tests/examples/notice_medium_illustration.tsx @@ -6,12 +6,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> Your subscription has expired @@ -21,7 +17,7 @@ const Demo = () => ( - @@ -30,11 +26,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -44,7 +36,7 @@ const Demo = () => ( - @@ -53,11 +45,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -70,7 +58,7 @@ const Demo = () => ( - @@ -79,11 +67,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -96,7 +80,7 @@ const Demo = () => ( - @@ -105,11 +89,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -119,7 +99,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/tests/examples/notice_small_illustration.tsx b/stories/components/notice/tests/examples/notice_small_illustration.tsx deleted file mode 100644 index b0f651b951..0000000000 --- a/stories/components/notice/tests/examples/notice_small_illustration.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import Coffee from '@semcore/illustration/Coffee'; -import MailSent from '@semcore/illustration/MailSent'; -import { Flex } from '@semcore/ui/base-components'; -import Button from '@semcore/ui/button'; -import Notice from '@semcore/ui/notice'; -import React from 'react'; - -const Demo = () => ( - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription.Please tell us how to improve - something. 49 out of your Star Wars: The Force Awakens shattered box office records upon - its debut becoming the biggest film of all time in. The reports are based on the data from - the Russian Federation and the CIS. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription.Please tell us how to improve - something. 49 out of your Star Wars: The Force Awakens shattered box office records upon - its debut becoming the biggest film of all time in. The reports are based on the data from - the Russian Federation and the CIS. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - -); - -export default Demo; diff --git a/stories/components/notice/tests/examples/notice_with_different_states.tsx b/stories/components/notice/tests/examples/notice_with_different_states.tsx deleted file mode 100644 index dce555e50e..0000000000 --- a/stories/components/notice/tests/examples/notice_with_different_states.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import AlertM from '@semcore/icon/Book/m'; -import InfoM from '@semcore/icon/Info/m'; -import ThumbUpM from '@semcore/icon/ThumbUp/m'; -import WarningM from '@semcore/icon/Warning/m'; -import { Flex } from '@semcore/ui/base-components'; -import Button from '@semcore/ui/button'; -import Notice, { NoticeSmart } from '@semcore/ui/notice'; -import React from 'react'; - -const NoticeSmokeDemo = () => { - const [hidden, setHidden] = React.useState(true); - - return ( - - {/* 1. Minimal Notice */} - - - This is an info notice - - - - {/* 2. Full Featured Notice */} - - - - - - Success! - Everything worked just fine. - - - - - - - - - {/* 3. Title only + Close */} - - - Pay attention - - - - - {/* 4. Icon + Text only */} - - - - - - Something went wrong. - - - - {/* 5. Actions only */} - - - - - - - - - {/* 6. No Content (edge case) */} - - - - - - - - {/* 7. Long text, layout check */} - - - - This is a very long message that should ideally wrap and not break layout or overflow. - - - - - {/* 8. Aria-live announcement */} - - - We'll notify you when it's ready. - - - - {/* 9. Custom theme with color string */} - - Purple - - - Text Notice - - - - - - {/* 10. Duration prop */} - - Duration - - Text Notice - - - - - {/* 11. Hidden toggle */} -
- - -
- - {/* 12. NoticeSmart muted + closable */} - } - text='Muted closable notice' - closable - data-testid='muted-closable' - /> - - {/* 13. NoticeSmart with actions only */} - Retry action} - data-testid='actions-only' - /> - - ); -}; - -export default NoticeSmokeDemo; diff --git a/stories/components/notice/tests/examples/noticesmart_full_props.tsx b/stories/components/notice/tests/examples/noticesmart_full_props.tsx new file mode 100644 index 0000000000..15a8dc9bb8 --- /dev/null +++ b/stories/components/notice/tests/examples/noticesmart_full_props.tsx @@ -0,0 +1,83 @@ +import InfoM from '@semcore/icon/Info/m'; +import QuestionM from '@semcore/icon/Question/m'; +import ThumbUpM from '@semcore/icon/ThumbUp/m'; +import Coffee from '@semcore/illustration/Coffee'; +import { Flex } from '@semcore/ui/base-components'; +import Button from '@semcore/ui/button'; +import { NoticeSmart } from '@semcore/ui/notice'; +import type { NSNoticeSmart } from '@semcore/ui/notice'; +import React from 'react'; + +type Media = 'none' | 'icon' | 'illustration'; +type IconName = 'Info' | 'ThumbUp' | 'Question'; + +type ExampleProps = Omit & { + /** icon and illustration are mutually exclusive, so one control drives both */ + media: Media; + icon: IconName; + withActions: boolean; +}; + +const ICONS = { Info: InfoM, ThumbUp: ThumbUpM, Question: QuestionM }; + +const mediaProps = (media: Media, iconName: IconName) => { + if (media === 'icon') { + const Icon = ICONS[iconName]; + + return { icon: }; + } + + if (media === 'illustration') { + return { illustration: }; + } + + return {}; +}; + +const Demo = (props: ExampleProps) => { + const { media, icon, withActions, theme, title, text, closable, hidden, duration, locale, w } = props; + const [closed, setClosed] = React.useState(false); + + React.useEffect(() => setClosed(false), [closable, hidden, media, theme]); + + return ( + + + ); +}; + +export const defaultNoticeSmartProps: ExampleProps = { + theme: 'info', + media: 'icon', + icon: 'Info', + withActions: true, + closable: true, + hidden: false, + title: 'New tool was launched', + text: 'Hi there! A cool new tool was launched. Take a look at what it can do for your reports.', +}; + +Demo.defaultProps = defaultNoticeSmartProps; +export default Demo; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 81054be701..a3126e69c8 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3263,7 +3263,6 @@ "color-picker", "input", "input-tags", - "notice", "pills", "tab-line", "textarea", @@ -3308,6 +3307,7 @@ "dropdown", "dropdown-menu", "input-tags", + "notice", "pills" ] }, @@ -3329,6 +3329,7 @@ "bulk-textarea", "dropdown", "modal", + "notice", "pills" ] }, @@ -3358,6 +3359,7 @@ "components": [ "bulk-textarea", "feature-popover", + "notice", "notice-bubble" ] }, @@ -3367,7 +3369,8 @@ "description": "Extra large padding for content inside controls and surfaces.", "components": [ "bulk-textarea", - "card" + "card", + "notice" ] }, { @@ -3431,6 +3434,7 @@ "checkbox", "date-picker", "dropdown", + "notice", "notice-bubble", "pagination", "radio",