diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json index 5ca56a3112..79245d44e7 100644 --- a/screenshot/builds/master.json +++ b/screenshot/builds/master.json @@ -11015,6 +11015,669 @@ "isLandscape": false, "isMobile": false }, + { + "id": "99c118ce", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now -200 -400 -350 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "fec28f78", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now -200 -400 -350 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "27557dd1", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 100 -100 -50 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "06ac3c30", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 100 -100 -50 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "54395297", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 175 -25 25 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "2e35ee0e", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 175 -25 25 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "fc8e40f4", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 300 100 150 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "76b66b56", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress max min now 300 100 150 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "01849bcc", + "image": "e8e2ff8736fe1100950a10ef8f68e4a3.png", + "userAgent": "default", + "desc": "ld-progress on brcolor overflow CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "d4a3bc48", + "image": "823aed6318b781809f2d058fbc5e2e8b.png", + "userAgent": "default", + "desc": "ld-progress on brcolor overflow pending steps CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "62ca3eab", + "image": "ba84059962fc905c8016f2036be144f0.png", + "userAgent": "default", + "desc": "ld-progress on brcolor overflow pending steps Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "1aa72c60", + "image": "e8e2ff8736fe1100950a10ef8f68e4a3.png", + "userAgent": "default", + "desc": "ld-progress on brcolor overflow Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "15d8d6f8", + "image": "bd07bf21dbc1685b32d1907c90e44545.png", + "userAgent": "default", + "desc": "ld-progress on brcolor pending steps CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "cb685584", + "image": "bc042bfd51b6656fba92d4416a7b23b8.png", + "userAgent": "default", + "desc": "ld-progress on brcolor pending steps Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "ce83920e", + "image": "840763e99a4951fea31b3020fa69f831.png", + "userAgent": "default", + "desc": "ld-progress on brcolor valuenow CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "8e426bd0", + "image": "840763e99a4951fea31b3020fa69f831.png", + "userAgent": "default", + "desc": "ld-progress on brcolor valuenow Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "4e0dbb92", + "image": "f9cdad0e8d3a6579a2a6d60f11004416.png", + "userAgent": "default", + "desc": "ld-progress overflow less than double max CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "28e19a0e", + "image": "f9cdad0e8d3a6579a2a6d60f11004416.png", + "userAgent": "default", + "desc": "ld-progress overflow less than double max Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "606a92f7", + "image": "70fc06081dd5e4653b844c1c64efaa2c.png", + "userAgent": "default", + "desc": "ld-progress overflow more than double max CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "3d4012fc", + "image": "70fc06081dd5e4653b844c1c64efaa2c.png", + "userAgent": "default", + "desc": "ld-progress overflow more than double max Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "e646dc94", + "image": "d093961d44b149ff5c2f556874644ae8.png", + "userAgent": "default", + "desc": "ld-progress overflow steps CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "9fbe20d6", + "image": "8dac77b6cd39bc9df58e0eeaa96cd028.png", + "userAgent": "default", + "desc": "ld-progress overflow steps Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "41d25930", + "image": "60e2162e44f971fa45e6e018e1b90ce5.png", + "userAgent": "default", + "desc": "ld-progress pending indeterminate CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "639ec187", + "image": "60e2162e44f971fa45e6e018e1b90ce5.png", + "userAgent": "default", + "desc": "ld-progress pending indeterminate Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "83f712bf", + "image": "12a5e41fb3524084439da4271c1421d6.png", + "userAgent": "default", + "desc": "ld-progress pending overflow CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "00a6d8f7", + "image": "86e7e20d1f1197ca5a17e98bf0a13c35.png", + "userAgent": "default", + "desc": "ld-progress pending overflow steps CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "6f45ce1a", + "image": "37d3abb320c459a0fb3204d10e0c3325.png", + "userAgent": "default", + "desc": "ld-progress pending overflow steps Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "cbcbe9b1", + "image": "12a5e41fb3524084439da4271c1421d6.png", + "userAgent": "default", + "desc": "ld-progress pending overflow Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "1ccd0b36", + "image": "7b5bdb34dd8e56b93d509384aa227921.png", + "userAgent": "default", + "desc": "ld-progress pending valuenow CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "836df1a7", + "image": "7b5bdb34dd8e56b93d509384aa227921.png", + "userAgent": "default", + "desc": "ld-progress pending valuenow Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "9c306d7e", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress renders as CSS Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "84bd9fa9", + "image": "2865ae2a0dca0b3a62793ef7bb8832a6.png", + "userAgent": "default", + "desc": "ld-progress renders as Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "c758aaf3", + "image": "f44d018eb8474c630878736a4accb624.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 0 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "bae13540", + "image": "067afd4d0ffceec57d6e977903e63730.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 0 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "83be0a46", + "image": "4a81717466ff70e0a7b57c4aebacec92.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 1 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "14adc9bd", + "image": "de26639aea469adef98af74738033ec4.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 1 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "b364e0f6", + "image": "4de39e86dce5580ca26ef3a38af5d7c6.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 2 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "90bd9f26", + "image": "bce51e41f634e7cc4c398d2256caa0a2.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 2 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "084ee15e", + "image": "c0a5406a67411277d18ec91f6a5d59d1.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 3 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "4834a894", + "image": "f0858111d747fb5517b1e6a66aac99d2.png", + "userAgent": "default", + "desc": "ld-progress steps max now 3 3 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "0df1598e", + "image": "f44d018eb8474c630878736a4accb624.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 0 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "19876092", + "image": "067afd4d0ffceec57d6e977903e63730.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 0 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "07f972c1", + "image": "4a81717466ff70e0a7b57c4aebacec92.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 1 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "af504ad8", + "image": "de26639aea469adef98af74738033ec4.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 1 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "c87c40a4", + "image": "4de39e86dce5580ca26ef3a38af5d7c6.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 2 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "6ff9fe42", + "image": "bce51e41f634e7cc4c398d2256caa0a2.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 2 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "7dcd9b2a", + "image": "c0a5406a67411277d18ec91f6a5d59d1.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 3 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "36a594c1", + "image": "f0858111d747fb5517b1e6a66aac99d2.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 3 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "ea264a73", + "image": "fc36c7ad2cecb6295b98d1d353886093.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 4 CSS component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "fb1e004f", + "image": "bf3ba64edd2c7e59be34624d8d1819bb.png", + "userAgent": "default", + "desc": "ld-progress steps max now 4 4 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "8de8e6cf", + "image": "d3f5daa2df81b90404e4449ca3faa6a4.png", + "userAgent": "default", + "desc": "ld-progress steps min max now 1 -4 -3 Web Component", + "testPath": "./src/liquid/components/ld-progress/test/ld-progress.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, { "id": "89663549", "image": "4b35d193ebe73a13913f0a1caa82d6ba.png", diff --git a/screenshot/images/067afd4d0ffceec57d6e977903e63730.png b/screenshot/images/067afd4d0ffceec57d6e977903e63730.png new file mode 100644 index 0000000000..c2d693a070 Binary files /dev/null and b/screenshot/images/067afd4d0ffceec57d6e977903e63730.png differ diff --git a/screenshot/images/12a5e41fb3524084439da4271c1421d6.png b/screenshot/images/12a5e41fb3524084439da4271c1421d6.png new file mode 100644 index 0000000000..69a66a4abc Binary files /dev/null and b/screenshot/images/12a5e41fb3524084439da4271c1421d6.png differ diff --git a/screenshot/images/2865ae2a0dca0b3a62793ef7bb8832a6.png b/screenshot/images/2865ae2a0dca0b3a62793ef7bb8832a6.png new file mode 100644 index 0000000000..b88a3c3847 Binary files /dev/null and b/screenshot/images/2865ae2a0dca0b3a62793ef7bb8832a6.png differ diff --git a/screenshot/images/37d3abb320c459a0fb3204d10e0c3325.png b/screenshot/images/37d3abb320c459a0fb3204d10e0c3325.png new file mode 100644 index 0000000000..f7ae0a180c Binary files /dev/null and b/screenshot/images/37d3abb320c459a0fb3204d10e0c3325.png differ diff --git a/screenshot/images/4a81717466ff70e0a7b57c4aebacec92.png b/screenshot/images/4a81717466ff70e0a7b57c4aebacec92.png new file mode 100644 index 0000000000..bb59cb7e3e Binary files /dev/null and b/screenshot/images/4a81717466ff70e0a7b57c4aebacec92.png differ diff --git a/screenshot/images/4de39e86dce5580ca26ef3a38af5d7c6.png b/screenshot/images/4de39e86dce5580ca26ef3a38af5d7c6.png new file mode 100644 index 0000000000..3728478c4c Binary files /dev/null and b/screenshot/images/4de39e86dce5580ca26ef3a38af5d7c6.png differ diff --git a/screenshot/images/60e2162e44f971fa45e6e018e1b90ce5.png b/screenshot/images/60e2162e44f971fa45e6e018e1b90ce5.png new file mode 100644 index 0000000000..969195df7f Binary files /dev/null and b/screenshot/images/60e2162e44f971fa45e6e018e1b90ce5.png differ diff --git a/screenshot/images/70fc06081dd5e4653b844c1c64efaa2c.png b/screenshot/images/70fc06081dd5e4653b844c1c64efaa2c.png new file mode 100644 index 0000000000..0b96c2f477 Binary files /dev/null and b/screenshot/images/70fc06081dd5e4653b844c1c64efaa2c.png differ diff --git a/screenshot/images/7b5bdb34dd8e56b93d509384aa227921.png b/screenshot/images/7b5bdb34dd8e56b93d509384aa227921.png new file mode 100644 index 0000000000..98568b61c1 Binary files /dev/null and b/screenshot/images/7b5bdb34dd8e56b93d509384aa227921.png differ diff --git a/screenshot/images/823aed6318b781809f2d058fbc5e2e8b.png b/screenshot/images/823aed6318b781809f2d058fbc5e2e8b.png new file mode 100644 index 0000000000..afae9722d9 Binary files /dev/null and b/screenshot/images/823aed6318b781809f2d058fbc5e2e8b.png differ diff --git a/screenshot/images/840763e99a4951fea31b3020fa69f831.png b/screenshot/images/840763e99a4951fea31b3020fa69f831.png new file mode 100644 index 0000000000..ce75d53d87 Binary files /dev/null and b/screenshot/images/840763e99a4951fea31b3020fa69f831.png differ diff --git a/screenshot/images/86e7e20d1f1197ca5a17e98bf0a13c35.png b/screenshot/images/86e7e20d1f1197ca5a17e98bf0a13c35.png new file mode 100644 index 0000000000..23a8da758d Binary files /dev/null and b/screenshot/images/86e7e20d1f1197ca5a17e98bf0a13c35.png differ diff --git a/screenshot/images/8dac77b6cd39bc9df58e0eeaa96cd028.png b/screenshot/images/8dac77b6cd39bc9df58e0eeaa96cd028.png new file mode 100644 index 0000000000..669507c463 Binary files /dev/null and b/screenshot/images/8dac77b6cd39bc9df58e0eeaa96cd028.png differ diff --git a/screenshot/images/ba84059962fc905c8016f2036be144f0.png b/screenshot/images/ba84059962fc905c8016f2036be144f0.png new file mode 100644 index 0000000000..fd046b1db4 Binary files /dev/null and b/screenshot/images/ba84059962fc905c8016f2036be144f0.png differ diff --git a/screenshot/images/bc042bfd51b6656fba92d4416a7b23b8.png b/screenshot/images/bc042bfd51b6656fba92d4416a7b23b8.png new file mode 100644 index 0000000000..7bc4677283 Binary files /dev/null and b/screenshot/images/bc042bfd51b6656fba92d4416a7b23b8.png differ diff --git a/screenshot/images/bce51e41f634e7cc4c398d2256caa0a2.png b/screenshot/images/bce51e41f634e7cc4c398d2256caa0a2.png new file mode 100644 index 0000000000..da01614b06 Binary files /dev/null and b/screenshot/images/bce51e41f634e7cc4c398d2256caa0a2.png differ diff --git a/screenshot/images/bd07bf21dbc1685b32d1907c90e44545.png b/screenshot/images/bd07bf21dbc1685b32d1907c90e44545.png new file mode 100644 index 0000000000..055ff8a174 Binary files /dev/null and b/screenshot/images/bd07bf21dbc1685b32d1907c90e44545.png differ diff --git a/screenshot/images/bf3ba64edd2c7e59be34624d8d1819bb.png b/screenshot/images/bf3ba64edd2c7e59be34624d8d1819bb.png new file mode 100644 index 0000000000..c3098e231c Binary files /dev/null and b/screenshot/images/bf3ba64edd2c7e59be34624d8d1819bb.png differ diff --git a/screenshot/images/c0a5406a67411277d18ec91f6a5d59d1.png b/screenshot/images/c0a5406a67411277d18ec91f6a5d59d1.png new file mode 100644 index 0000000000..6fb93f3e39 Binary files /dev/null and b/screenshot/images/c0a5406a67411277d18ec91f6a5d59d1.png differ diff --git a/screenshot/images/d093961d44b149ff5c2f556874644ae8.png b/screenshot/images/d093961d44b149ff5c2f556874644ae8.png new file mode 100644 index 0000000000..5b1ac2b48a Binary files /dev/null and b/screenshot/images/d093961d44b149ff5c2f556874644ae8.png differ diff --git a/screenshot/images/d3f5daa2df81b90404e4449ca3faa6a4.png b/screenshot/images/d3f5daa2df81b90404e4449ca3faa6a4.png new file mode 100644 index 0000000000..8da9a04b82 Binary files /dev/null and b/screenshot/images/d3f5daa2df81b90404e4449ca3faa6a4.png differ diff --git a/screenshot/images/de26639aea469adef98af74738033ec4.png b/screenshot/images/de26639aea469adef98af74738033ec4.png new file mode 100644 index 0000000000..1c133ffd80 Binary files /dev/null and b/screenshot/images/de26639aea469adef98af74738033ec4.png differ diff --git a/screenshot/images/e8e2ff8736fe1100950a10ef8f68e4a3.png b/screenshot/images/e8e2ff8736fe1100950a10ef8f68e4a3.png new file mode 100644 index 0000000000..525b35b45e Binary files /dev/null and b/screenshot/images/e8e2ff8736fe1100950a10ef8f68e4a3.png differ diff --git a/screenshot/images/f0858111d747fb5517b1e6a66aac99d2.png b/screenshot/images/f0858111d747fb5517b1e6a66aac99d2.png new file mode 100644 index 0000000000..fec072fba4 Binary files /dev/null and b/screenshot/images/f0858111d747fb5517b1e6a66aac99d2.png differ diff --git a/screenshot/images/f44d018eb8474c630878736a4accb624.png b/screenshot/images/f44d018eb8474c630878736a4accb624.png new file mode 100644 index 0000000000..8d2226992e Binary files /dev/null and b/screenshot/images/f44d018eb8474c630878736a4accb624.png differ diff --git a/screenshot/images/f9cdad0e8d3a6579a2a6d60f11004416.png b/screenshot/images/f9cdad0e8d3a6579a2a6d60f11004416.png new file mode 100644 index 0000000000..9ba201bc93 Binary files /dev/null and b/screenshot/images/f9cdad0e8d3a6579a2a6d60f11004416.png differ diff --git a/screenshot/images/fc36c7ad2cecb6295b98d1d353886093.png b/screenshot/images/fc36c7ad2cecb6295b98d1d353886093.png new file mode 100644 index 0000000000..f6b38b0ab9 Binary files /dev/null and b/screenshot/images/fc36c7ad2cecb6295b98d1d353886093.png differ diff --git a/src/docs/components/docs-example/docs-example.css b/src/docs/components/docs-example/docs-example.css index 2768ffcb45..181b3c01b1 100644 --- a/src/docs/components/docs-example/docs-example.css +++ b/src/docs/components/docs-example/docs-example.css @@ -105,7 +105,7 @@ border-top-left-radius: var(--ld-br-l); border-top-right-radius: var(--ld-br-l); overflow: hidden; - transform: translateZ(1px); /* Fixes overflow in Safari */ + will-change: transform; /* Fixes overflow in Safari */ .docs-example--has-border & { border: var(--ld-sp-1) solid var(--ld-col-neutral-100); diff --git a/src/liquid/components/ld-progress/ld-progress.css b/src/liquid/components/ld-progress/ld-progress.css new file mode 100644 index 0000000000..d6ecde5498 --- /dev/null +++ b/src/liquid/components/ld-progress/ld-progress.css @@ -0,0 +1,208 @@ +:host, +.ld-progress { + --ld-progress-height: var(--ld-sp-8); + --ld-progress-steps-dot-width: var(--ld-progress-height); + --ld-progress-valuemin: 0; + --ld-progress-valuemax: 100; + --ld-progress-valuenow: 0; + --ld-progress-transition-duration: 0.2s; + --ld-progress-width: 17.5rem; + + /* colors */ + --ld-progress-bar-col: var(--ld-thm-primary); + --ld-progress-bar-col-overflow: var(--ld-thm-error); + --ld-progress-bg-col: var(--ld-col-neutral-100); + --ld-progress-bg-col-overflow: var(--ld-thm-error); + --ld-progress-pending-gap-col: var(--ld-progress-bg-col); + --ld-progress-pending-gap-col-overflow: var(--ld-thm-error-focus); + --ld-progress-steps-col: var(--ld-col-neutral-200); + + --ld-progress-calc-valuenow: calc( + var(--ld-progress-valuenow) - var(--ld-progress-valuemin) + ); + --ld-progress-calc-valuemax: calc( + var(--ld-progress-valuemax) - var(--ld-progress-valuemin) + ); + --ld-progress-calc-relative-progress: calc( + var(--ld-progress-calc-valuenow) / var(--ld-progress-calc-valuemax) + ); + --ld-progress-has-overflow: clamp( + 0, + calc((var(--ld-progress-calc-relative-progress) - 1) * 99999999999), + 1 + ); + + border-radius: var(--ld-br-full); + box-shadow: inset 0px 0px 0px + calc((1 - var(--ld-progress-has-overflow)) * 99rem) + var(--ld-progress-bg-col), + inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem) + var(--ld-col-wht-alpha-high), + inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem) + var(--ld-progress-bg-col-overflow); + height: var(--ld-progress-height); + max-width: 100%; + overflow: hidden; + position: relative; + width: var(--ld-progress-width); + + &::before, + &::after { + content: ''; + display: block; + height: 100%; + position: absolute; + width: 100%; + } + + &::before { + background-color: var(--ld-progress-bar-col); + opacity: calc(1 - var(--ld-progress-has-overflow)); + right: 100%; + transform: translateX( + min(100%, calc(var(--ld-progress-calc-relative-progress) * 100%)) + ); + transition: transform var(--ld-progress-transition-duration) ease, + opacity var(--ld-progress-transition-duration) linear; + } + + &::after { + background-color: var(--ld-progress-bar-col-overflow); + opacity: calc(var(--ld-progress-has-overflow)); + transform: translateX( + max(-100%, calc((var(--ld-progress-calc-relative-progress) - 1) * -100%)) + ); /* - 1 substracts the "valid" progress value */ + transition: transform var(--ld-progress-transition-duration) ease; + left: 100%; + } +} + +:host(.ld-progress--brand-color), +.ld-progress--brand-color { + --ld-progress-bar-col: var(--ld-col-wht); + --ld-progress-bar-col-overflow: var(--ld-thm-error); + --ld-progress-bg-col: var(--ld-col-wht-alpha-medium); + --ld-progress-bg-col-overflow: var(--ld-thm-error); + --ld-progress-pending-gap-col: var(--ld-thm-primary-hover); + --ld-progress-pending-gap-col-overflow: var(--ld-col-wht); + --ld-progress-steps-col: var(--ld-col-wht-alpha-medium); + + box-shadow: inset 0px 0px 0px + calc((1 - var(--ld-progress-has-overflow)) * 99rem) + var(--ld-progress-bg-col), + inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem) + var(--ld-col-wht-alpha-medium), + inset 0rem calc(var(--ld-progress-has-overflow) * 505rem) 500rem -500rem var(--ld-progress-bg-col-overflow); +} + +:host(.ld-progress--steps), +.ld-progress--steps { + --ld-progress-step-gradient: var(--ld-progress-steps-col) 0%, + var(--ld-progress-steps-col) calc(var(--ld-progress-steps-dot-width) / 2), + transparent calc(var(--ld-progress-steps-dot-width) / 2); + background-image: radial-gradient( + circle at left, + var(--ld-progress-step-gradient) + ), + radial-gradient(circle at right, var(--ld-progress-step-gradient)); + background-blend-mode: multiply; /* removes gap in steps dot */ + background-size: calc( + (100% - var(--ld-progress-steps-dot-width) - 1px) / + var(--ld-progress-calc-valuemax) + ) + 100%; /* the 1px is a Safari HACK */ + background-repeat: repeat-x; + background-position: calc(var(--ld-progress-steps-dot-width) / 2) center; + box-shadow: inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem) + var(--ld-col-wht-alpha-lowest), + inset 0rem 498rem calc(var(--ld-progress-has-overflow) * 500rem) -500rem var(--ld-progress-bg-col-overflow); + + &::before, + &::after { + border-radius: var(--ld-br-full); + } + + &::before { + transform: translateX( + min( + 100%, + calc( + var(--ld-progress-calc-relative-progress) * + (100% - var(--ld-progress-steps-dot-width)) + + var(--ld-progress-steps-dot-width) + ) + ) + ); + } + + &::after { + transform: translateX( + max( + -100%, + calc( + (var(--ld-progress-calc-relative-progress) - 1) * + (100% - var(--ld-progress-steps-dot-width)) + + var(--ld-progress-steps-dot-width) + 1px + ) * -1 /* the 1px is a Safari HACK */ + ) + ); + } +} + +:host(.ld-progress--steps.ld-progress--brand-color), +.ld-progress--steps.ld-progress--brand-color { + box-shadow: inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem) + var(--ld-col-wht-alpha-low), + inset 0rem 500rem calc(var(--ld-progress-has-overflow) * 500rem) -500rem var(--ld-progress-bg-col-overflow); +} + +:host(.ld-progress.ld-progress--indeterminate), +.ld-progress.ld-progress--indeterminate { + &::before { + transform: translateX(100%); + } +} + +@keyframes ld-progress-animation-pending { + from { + background-position-x: calc(-1.5rem + 1px); + } + to { + background-position-x: 0rem; + } +} +:host(.ld-progress.ld-progress--pending), +.ld-progress.ld-progress--pending { + &::before, + &::after { + background-size: 200% 100%; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + + @media (prefers-reduced-motion: no-preference) { + animation-name: ld-progress-animation-pending; + } + } + + &::before { + background-image: repeating-linear-gradient( + -45deg, + var(--ld-progress-pending-gap-col), + var(--ld-progress-pending-gap-col) 0.5rem, + var(--ld-progress-bar-col) 0.5rem, + var(--ld-progress-bar-col) 1rem + ); + } + + &::after { + background-image: repeating-linear-gradient( + 45deg, + var(--ld-progress-pending-gap-col-overflow), + var(--ld-progress-pending-gap-col-overflow) 0.5rem, + var(--ld-progress-bar-col-overflow) 0.5rem, + var(--ld-progress-bar-col-overflow) 1rem + ); + animation-direction: reverse; + } +} diff --git a/src/liquid/components/ld-progress/ld-progress.tsx b/src/liquid/components/ld-progress/ld-progress.tsx new file mode 100644 index 0000000000..687b55627e --- /dev/null +++ b/src/liquid/components/ld-progress/ld-progress.tsx @@ -0,0 +1,86 @@ +import { Component, h, Host, Prop } from '@stencil/core' +import { getClassNames } from '../../utils/getClassNames' + +/** + * @virtualProp ref - reference to component + * @virtualProp {string | number} key - for tracking the node's identity when working with lists + */ +@Component({ + tag: 'ld-progress', + styleUrl: 'ld-progress.css', + shadow: true, +}) +export class LdProgress { + /** + * Defines the string value or identifies the element (or elements) + * that label the progressbar element providing an accessible name. + */ + @Prop({ reflect: true }) ariaLabeledby?: string + + /** + * Set to a decimal value representing the maximum value, and greater + * than aria-valuemin. If not present, the default value is 100. + */ + @Prop({ reflect: true }) ariaValuemax = 100 + + /** + * Set to a decimal value representing the minimum value, and less + * than aria-valuemax. If not present, the default value is 0. + */ + @Prop({ reflect: true }) ariaValuemin = 0 + + /** + * Only present and required if the value is not indeterminate. + * Set to a decimal value between 0, or valuemin if present, + * and aria-valuemax indicating the current value of the progress bar. + */ + @Prop({ reflect: true }) ariaValuenow?: number + + /** + * Assistive technologies often present the value of aria-valuenow + * as a percentage. If this would not be accurate use this property + * to make the progress bar value understandable. + */ + @Prop({ reflect: true }) ariaValuetext?: string + + // `onBrandColor` is not possible: Stencil expects `on*` props to be event handlers. + /** + * Styles the progress bar in a way that it looks good on the + * primary color of the current theme. + */ + @Prop() brandColor?: boolean + + /** Used to show indeterminate or pending progress state. */ + @Prop() pending?: boolean + + /** Devides progress bar in multiple progress steps. */ + @Prop() steps?: boolean + + render() { + const cl = getClassNames([ + 'ld-progress', + this.ariaValuenow === undefined && 'ld-progress--indeterminate', + this.brandColor && 'ld-progress--brand-color', + this.pending && 'ld-progress--pending', + this.steps && 'ld-progress--steps', + ]) + + return ( + + ) + } +} diff --git a/src/liquid/components/ld-progress/readme.md b/src/liquid/components/ld-progress/readme.md new file mode 100644 index 0000000000..4aac9c2a92 --- /dev/null +++ b/src/liquid/components/ld-progress/readme.md @@ -0,0 +1,152 @@ +--- +eleventyNavigation: + key: Progress + parent: Components +layout: layout.njk +title: Progress +permalink: components/ld-progress/ +--- + + + + +# ld-progress + +The `ld-progress` component can be used to displays the progress status for tasks that take a long time. + +--- + +## Default + +{% example %} + + + + +
+{% endexample %} + +You can make the progress component more accessible by applying the [`aria-labeledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute. + +{% example %} +Progress + + + + +Progress +
+{% endexample %} + +## With custom min and max values + +{% example %} + + + + +
+{% endexample %} + +## Overflow + +The component can visualize an overflow value up to 200% of the maximum progress value. + +{% example %} + + + + +
+
+{% endexample %} + +## Steps + +{% example %} + + + + +
+{% endexample %} + +## Pending + +{% example %} + + + + + +
+
+{% endexample %} + +## On brand color + +Use this mode on backgrounds with brand color. + +{% example '{ "background": "brand", "hasBorder": false }' %} + + + + +
+{% endexample %} + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ----------- | +| `ariaLabeledby` | `aria-labeledby` | Defines the string value or identifies the element (or elements) that label the progressbar element providing an accessible name. | `string` | `undefined` | +| `ariaValuemax` | `aria-valuemax` | Set to a decimal value representing the maximum value, and greater than aria-valuemin. If not present, the default value is 100. | `number` | `100` | +| `ariaValuemin` | `aria-valuemin` | Set to a decimal value representing the minimum value, and less than aria-valuemax. If not present, the default value is 0. | `number` | `0` | +| `ariaValuenow` | `aria-valuenow` | Only present and required if the value is not indeterminate. Set to a decimal value between 0, or valuemin if present, and aria-valuemax indicating the current value of the progress bar. | `number` | `undefined` | +| `ariaValuetext` | `aria-valuetext` | Assistive technologies often present the value of aria-valuenow as a percentage. If this would not be accurate use this property to make the progress bar value understandable. | `string` | `undefined` | +| `brandColor` | `brand-color` | Styles the progress bar in a way that it looks good on the primary color of the current theme. | `boolean` | `undefined` | +| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `pending` | `pending` | Used to show indeterminate or pending progress state. | `boolean` | `undefined` | +| `ref` | `ref` | reference to component | `any` | `undefined` | +| `steps` | `steps` | Devides progress bar in multiple progress steps. | `boolean` | `undefined` | + + +---------------------------------------------- + + diff --git a/src/liquid/components/ld-progress/test/__snapshots__/ld-progress.spec.tsx.snap b/src/liquid/components/ld-progress/test/__snapshots__/ld-progress.spec.tsx.snap new file mode 100644 index 0000000000..a304c22f8e --- /dev/null +++ b/src/liquid/components/ld-progress/test/__snapshots__/ld-progress.spec.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ld-progress applies css custom props according to props applies valuemax prop 1`] = ` + + + +`; + +exports[`ld-progress applies css custom props according to props applies valuemin prop 1`] = ` + + + +`; + +exports[`ld-progress applies css custom props according to props applies valuenow prop 1`] = ` + + + +`; + +exports[`ld-progress renders 1`] = ` + + + +`; diff --git a/src/liquid/components/ld-progress/test/ld-progress.e2e.ts b/src/liquid/components/ld-progress/test/ld-progress.e2e.ts new file mode 100644 index 0000000000..4ffba4637d --- /dev/null +++ b/src/liquid/components/ld-progress/test/ld-progress.e2e.ts @@ -0,0 +1,577 @@ +import { + analyzeAccessibility, + getPageWithContent, +} from '../../../utils/e2e-tests' +import { LdProgress } from '../ld-progress' + +describe('ld-progress', () => { + it('renders as Web Component', async () => { + const page = await getPageWithContent(``) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('renders as CSS Component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + describe('accessibility', () => { + it('is accessible as a Web Component', async () => { + const page = await getPageWithContent( + ` + Loading: + ` + ) + page.waitForChanges() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('is accessible as a CSS Component', async () => { + const page = await getPageWithContent( + ` + Loading: +
`, + { + components: [LdProgress], + } + ) + page.waitForChanges() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + }) + + describe('max min now', () => { + it('300 100 150 Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('300 100 150 CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('100 -100 -50 Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('100 -100 -50 CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('175 -25 25 Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('175 -25 25 CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('-200 -400 -350 Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('-200 -400 -350 CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('steps max now', () => { + for (const now of [0, 1, 2, 3]) { + it(`3 ${now} Web Component`, async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it(`3 ${now} CSS component`, async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + } + + for (const now of [0, 1, 2, 3, 4]) { + it(`4 ${now} Web Component`, async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it(`4 ${now} CSS component`, async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + } + }) + + describe('steps min max now', () => { + it(`1 -4 -3 Web Component`, async () => { + const page = await getPageWithContent( + ` + ` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('overflow', () => { + it('less than double max Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('less than double max CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('more than double max Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('more than double max CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('steps Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('steps CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('pending', () => { + it('indeterminate Web Component', async () => { + const page = await getPageWithContent( + `` + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('indeterminate CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('valuenow Web Component', async () => { + const page = await getPageWithContent( + `` + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('valuenow CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow Web Component', async () => { + const page = await getPageWithContent( + `` + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow steps Web Component', async () => { + const page = await getPageWithContent( + `` + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow steps CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('on brcolor', () => { + it('valuenow Web Component', async () => { + const page = await getPageWithContent( + ``, + { + bgColor: 'var(--ld-thm-primary)', + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('valuenow CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + bgColor: 'var(--ld-thm-primary)', + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow Web Component', async () => { + const page = await getPageWithContent( + `` + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + components: [LdProgress], + } + ) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('pending steps Web Component', async () => { + const page = await getPageWithContent( + ``, + { + bgColor: 'var(--ld-thm-primary)', + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('pending steps CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + bgColor: 'var(--ld-thm-primary)', + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow pending steps Web Component', async () => { + const page = await getPageWithContent( + ``, + { + bgColor: 'var(--ld-thm-primary)', + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('overflow pending steps CSS component', async () => { + const page = await getPageWithContent( + `
`, + { + bgColor: 'var(--ld-thm-primary)', + components: [LdProgress], + } + ) + await page.emulateMediaFeatures([ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ]) + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) +}) diff --git a/src/liquid/components/ld-progress/test/ld-progress.spec.tsx b/src/liquid/components/ld-progress/test/ld-progress.spec.tsx new file mode 100644 index 0000000000..ee8e454247 --- /dev/null +++ b/src/liquid/components/ld-progress/test/ld-progress.spec.tsx @@ -0,0 +1,75 @@ +import { newSpecPage } from '@stencil/core/testing' +import { LdProgress } from '../ld-progress' +import { h } from '@stencil/core' + +describe('ld-progress', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + describe('adds classes according to props', () => { + it('adds indeterminate class', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toHaveClass('ld-progress--indeterminate') + }) + + it('adds brand-color class', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toHaveClass('ld-progress--brand-color') + }) + + it('adds pending class', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toHaveClass('ld-progress--pending') + }) + + it('adds steps class', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => ( + + ), + }) + expect(page.root).toHaveClass('ld-progress--steps') + }) + }) + + describe('applies css custom props according to props', () => { + it('applies valuemax prop', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('applies valuemin prop', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('applies valuenow prop', async () => { + const page = await newSpecPage({ + components: [LdProgress], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + }) +})