diff --git a/src/__private_stories__/skin-components-story.tsx b/src/__private_stories__/skin-components-story.tsx index ff782b5479..09db1625c1 100644 --- a/src/__private_stories__/skin-components-story.tsx +++ b/src/__private_stories__/skin-components-story.tsx @@ -238,6 +238,9 @@ export const Default: StoryComponent = ({variant}) => { {/** Chip */} + + Default chip + Active chip diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-1-snap.png new file mode 100644 index 0000000000..b52e55b4fb Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png new file mode 100644 index 0000000000..f348ad0887 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-1-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-1-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-2-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-snap.png new file mode 100644 index 0000000000..c1ef2cc2d4 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png new file mode 100644 index 0000000000..fa20a7bb86 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-1-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-1-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-2-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-1-snap.png new file mode 100644 index 0000000000..a14c80f68b Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png new file mode 100644 index 0000000000..a7db02016d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-1-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-1-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-2-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-snap.png new file mode 100644 index 0000000000..255313810b Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png new file mode 100644 index 0000000000..7962c7391d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-1-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-1-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png similarity index 100% rename from src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-2-snap.png rename to src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-1-snap.png index 075b63a142..0bdeec45c7 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-1-snap.png index 1821bf159a..0008732883 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-1-snap.png index 1f51276a7b..6cb7ff8ad3 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-1-snap.png index aaac00cbcf..1af1bea864 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-1-snap.png index 719686ba4a..ee8bfe9b42 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-1-snap.png index 69237dbf89..1d5ff3f0fb 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png index 4690f31081..23a2accd2f 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-1-snap.png index aba1b70ce0..f3985cb34c 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png index cfa14c25f3..df2556a6b2 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png index b1e90c95bd..5827309af2 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-1-snap.png index a3759ba42e..defcfbc85f 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-1-snap.png index 0548f86bd6..2048e286b4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-1-snap.png index 55fad8788a..c0ce088f64 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-1-snap.png index 9456116e00..467cd40f03 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-1-snap.png index d9fd5fea7e..fe5d84f5d0 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png index 2af03c0904..f0d3167f08 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png index 2f58c8b1b6..3ea6a53713 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png index daf785dc2f..39406ed446 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png index 0d39b390b4..53823057ac 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png index 4a0a533366..0f36fd43ad 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-1-snap.png index c6bcebcbf6..b2dbe91391 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-1-snap.png index 48052b9970..be82c0dc4b 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-1-snap.png index 4584ca2cec..5345f6d8dc 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-1-snap.png index f7f2268afd..e1f69d3d56 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-1-snap.png index f600aa7155..1ddf98cbfe 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-1-snap.png index e1f5327333..985b553afb 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-1-snap.png index febf4fd3d4..7118f3f127 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-1-snap.png index 666292634c..895f24f26c 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-1-snap.png index 7c40bbbe86..66db8845cb 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-1-snap.png index 404d120e52..58098c6832 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png index 1697e2a1e7..8a9d7090c1 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png index d1e90ee952..6839ed103e 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png index ef9ce713b4..6baa48dd73 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png index 7e957c583e..8afef2318c 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png index cc8d1bac03..76eff96e16 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/chip-screenshot-test.tsx b/src/__screenshot_tests__/chip-screenshot-test.tsx index ea49a8d990..10b73d5e82 100644 --- a/src/__screenshot_tests__/chip-screenshot-test.tsx +++ b/src/__screenshot_tests__/chip-screenshot-test.tsx @@ -26,16 +26,20 @@ test.each(CHIP_OPTIONS)('Chip - %s', async (option) => { }); test.each` - selection | inverse - ${'single'} | ${false} - ${'single'} | ${true} - ${'multiple'} | ${false} - ${'multiple'} | ${true} -`('Chip - $selection selection (inverse = $inverse)', async ({selection, inverse}) => { + selection | inverse | badge + ${'single'} | ${false} | ${undefined} + ${'single'} | ${true} | ${undefined} + ${'multiple'} | ${false} | ${undefined} + ${'multiple'} | ${true} | ${undefined} + ${'single'} | ${false} | ${2} + ${'single'} | ${true} | ${2} + ${'multiple'} | ${false} | ${2} + ${'multiple'} | ${true} | ${2} +`('Chip - $selection selection (inverse = $inverse, badge = $badge)', async ({selection, inverse, badge}) => { const page = await openStoryPage({ id: `components-chip--${selection}-selection`, device: 'DESKTOP', - args: {inverse, withIcon: true}, + args: {inverse, withIcon: true, badge}, }); const story = await screen.findByTestId(`chip-${selection}-selection`); diff --git a/src/__stories__/chip-story.tsx b/src/__stories__/chip-story.tsx index 4d7f57383e..c7a6143d20 100644 --- a/src/__stories__/chip-story.tsx +++ b/src/__stories__/chip-story.tsx @@ -67,9 +67,10 @@ export const Default: StoryComponent = ({inverse, withIcon, closable, badg ); }; -export const SingleSelection: StoryComponent> = ({inverse, withIcon}) => { +export const SingleSelection: StoryComponent> = ({inverse, badge, withIcon}) => { const props = { Icon: withIcon ? IconLightningFilled : undefined, + badge: badge !== 'undefined' ? +badge : undefined, }; return ( @@ -106,9 +107,10 @@ export const SingleSelection: StoryComponent> = ); }; -export const MultipleSelection: StoryComponent> = ({inverse, withIcon}) => { +export const MultipleSelection: StoryComponent> = ({inverse, badge, withIcon}) => { const props = { Icon: withIcon ? IconLightningFilled : undefined, + badge: badge !== 'undefined' ? +badge : undefined, }; return ( @@ -150,15 +152,19 @@ const defaultArgs = { closable: false, }; -Default.storyName = 'Chip'; - -Default.argTypes = { +const defaultArgTypes = { badge: { options: badgeOptions, control: {type: 'select'}, }, }; +Default.storyName = 'Chip'; +Default.argTypes = defaultArgTypes; Default.args = defaultArgs; -SingleSelection.args = {...(({closable, badge, ...o}) => o)(defaultArgs)}; -MultipleSelection.args = {...(({closable, badge, ...o}) => o)(defaultArgs)}; + +SingleSelection.argTypes = defaultArgTypes; +SingleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)}; + +MultipleSelection.argTypes = defaultArgTypes; +MultipleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)}; diff --git a/src/chip.tsx b/src/chip.tsx index 5d2e7a1964..5f5dd9560f 100644 --- a/src/chip.tsx +++ b/src/chip.tsx @@ -47,13 +47,6 @@ const Chip: React.FC = (props: ChipProps) => { const paddingRight = {mobile: 20, desktop: 12} as const; const paddingIcon = {mobile: 16, desktop: 8} as const; - const renderBadge = () => { - if (!badge) { - return null; - } - return <>{badge === true ? : }; - }; - const body = ( <> {Icon && ( @@ -69,22 +62,6 @@ const Chip: React.FC = (props: ChipProps) => { ); - if (badge) { - return ( - - {body} - {renderBadge()} - - ); - } if (onClose) { return ( = (props: ChipProps) => { const chipDataAttributes = {'component-name': 'Chip', ...dataAttributes}; + const renderBadge = () => { + if (!badge) { + return null; + } + return <>{badge === true ? : }; + }; + const renderContent = (dataAttributes?: DataAttributes) => ( = (props: ChipProps) => { } )} paddingLeft={paddingLeft} - paddingRight={paddingRight} + paddingRight={badge ? paddingIcon : paddingRight} dataAttributes={dataAttributes} > {body} + {renderBadge()} );