diff --git a/.eleventy.js b/.eleventy.js index 41534a08d1..102967fe12 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -122,14 +122,15 @@ module.exports = function (eleventyConfig) { // Code example short codes eleventyConfig.addPairedShortcode('example', function (code, config) { const defaultConfig = { - lang: 'html', - stacked: false, - opened: false, background: undefined, - themable: true, + centered: false, hasPadding: true, heighlight: undefined, heighlightCssComponent: undefined, + lang: 'html', + opened: false, + stacked: false, + themable: true, } const finalConfig = Object.assign(defaultConfig, JSON.parse(config || '{}')) const [codeWebComponent, codeCssComponent] = code @@ -142,6 +143,7 @@ module.exports = function (eleventyConfig) { output += `code-css-component="${encodeURIComponent(codeCssComponent)}" ` } + output += `${finalConfig.centered ? ' centered' : ''}` output += `${finalConfig.stacked ? ' stacked' : ''}` output += `${finalConfig.opened ? ' opened' : ''}` if (finalConfig.background) { diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json index eece04934a..5a181c4926 100644 --- a/screenshot/builds/master.json +++ b/screenshot/builds/master.json @@ -188,7 +188,7 @@ }, { "id": "47001b8a", - "image": "b89912d0e9b0de84066e680da7d2e196.png", + "image": "bd5aafab040b17fe58ed794da64e382e.png", "userAgent": "default", "desc": "ld-button icon only ghost default", "testPath": "./src/liquid/components/ld-button/test/ld-button.e2e.ts", @@ -214,7 +214,7 @@ }, { "id": "7f014d9e", - "image": "94465345e89514df085281fcbdc56a29.png", + "image": "bb7dfd9439d0012bbab917b739f5c4f6.png", "userAgent": "default", "desc": "ld-button icon only ghost sm", "testPath": "./src/liquid/components/ld-button/test/ld-button.e2e.ts", @@ -4829,7 +4829,7 @@ }, { "id": "5261f40a", - "image": "dfbb954c018faadc9405eacdf199be87.png", + "image": "afbef30750aac975e372dbdfc9921026.png", "userAgent": "default", "desc": "ld-header web component default", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4855,7 +4855,7 @@ }, { "id": "1fc8f688", - "image": "77a5d0fd15129227b8922b3dd840fcd7.png", + "image": "8a7fa446a12dbf3418352db06268d444.png", "userAgent": "default", "desc": "ld-header web component sticky", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4868,7 +4868,7 @@ }, { "id": "ca9066cc", - "image": "73c9fa2556ad7afe211af7cd815462f3.png", + "image": "09f7fa27b7b500cc3f24235d7c366b15.png", "userAgent": "default", "desc": "ld-header web component with burger menu button", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4881,7 +4881,7 @@ }, { "id": "1a616c12", - "image": "fc11fd12e707120526ed67523b734441.png", + "image": "f9a08104d9e3b30020536be6a00a8f2c.png", "userAgent": "default", "desc": "ld-header web component with buttons", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4907,7 +4907,7 @@ }, { "id": "30da2887", - "image": "b59a36d01a6327c06f4ea1d841aa1778.png", + "image": "9447a08b927a145692ab475c5ca28215.png", "userAgent": "default", "desc": "ld-header web component with custom site name", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4933,7 +4933,7 @@ }, { "id": "4497b732", - "image": "dfbb954c018faadc9405eacdf199be87.png", + "image": "afbef30750aac975e372dbdfc9921026.png", "userAgent": "default", "desc": "ld-header web component with linked logo", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -4946,7 +4946,7 @@ }, { "id": "04778306", - "image": "41b859e2c4f7af819ad17542efa48b62.png", + "image": "b26d946dac5b0cbb31b8f5ed8c05a6cb.png", "userAgent": "default", "desc": "ld-header web component without site name", "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts", @@ -6153,6 +6153,617 @@ "isLandscape": false, "isMobile": false }, + { + "id": "261f27ce", + "image": "08d3fe6839ab9d9d0f21729495048bf7.png", + "userAgent": "default", + "desc": "ld-pagination active end arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "6a397edd", + "image": "1371d8b3fff3b7033494baaf064c4dd4.png", + "userAgent": "default", + "desc": "ld-pagination active first sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "c8e157d2", + "image": "d598319d5868d458f9edfce246d88a1f.png", + "userAgent": "default", + "desc": "ld-pagination active last sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "5f059380", + "image": "47bb8dc5aec11e1e9388d4409988c8e5.png", + "userAgent": "default", + "desc": "ld-pagination active next arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "bc9d0e47", + "image": "2d8720714c177bd5de96a5294d8db162.png", + "userAgent": "default", + "desc": "ld-pagination active prev arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "a2a08953", + "image": "9ac7208c4e70fec39cf07b736af99f69.png", + "userAgent": "default", + "desc": "ld-pagination active selected item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "3126b3cc", + "image": "0c33424d8f2293b9463ca25e3f8ab884.png", + "userAgent": "default", + "desc": "ld-pagination active slidable item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "1c574ae7", + "image": "90181901a4400639eee89f6395eaa0ab.png", + "userAgent": "default", + "desc": "ld-pagination active start arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "05c33b24", + "image": "5c7cf6b8ac65f70c4d1d8ebf3b3211a9.png", + "userAgent": "default", + "desc": "ld-pagination default end", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "7c3e0c65", + "image": "95bc6b11c0bdcb6d35851abe9b637370.png", + "userAgent": "default", + "desc": "ld-pagination default middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "79ec030b", + "image": "ca752ab4fd97510e065fca6d917fea8c.png", + "userAgent": "default", + "desc": "ld-pagination default single", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "d92406d9", + "image": "159069a077fc2fe327290369572368aa.png", + "userAgent": "default", + "desc": "ld-pagination default start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "13e4e9e7", + "image": "7a3116f4e7f054af1280f5bd5f2f4c01.png", + "userAgent": "default", + "desc": "ld-pagination default without dots", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "524567e7", + "image": "1d36b8727bbeb018da9317cf1fa8c178.png", + "userAgent": "default", + "desc": "ld-pagination focus end arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "337b59f2", + "image": "b167629b504cc009b2e629d4d127b05a.png", + "userAgent": "default", + "desc": "ld-pagination focus first sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "69f38a77", + "image": "3c6bba7ebaefacfa711421c0fef826a9.png", + "userAgent": "default", + "desc": "ld-pagination focus last sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "103cb232", + "image": "cb9059de47db2594dcca2b89280928b9.png", + "userAgent": "default", + "desc": "ld-pagination focus next arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "ac7cc3be", + "image": "24e327eaef64b6f1e584d48899f83fda.png", + "userAgent": "default", + "desc": "ld-pagination focus prev arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "6554efaa", + "image": "8990d8c3c414ee5350344eca8e988cd4.png", + "userAgent": "default", + "desc": "ld-pagination focus selected item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "1753defa", + "image": "3f6273a50904b41512e1974a30c977ab.png", + "userAgent": "default", + "desc": "ld-pagination focus slidable item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "ef2ac9a8", + "image": "b1f8813e1ee8ded0ead4ec74f4c5bb45.png", + "userAgent": "default", + "desc": "ld-pagination focus start arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "6790208e", + "image": "2e8f57327a9fc0a0a320b25167148d65.png", + "userAgent": "default", + "desc": "ld-pagination hover end arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "b9d0a343", + "image": "168609da47798313485eed20b8291b23.png", + "userAgent": "default", + "desc": "ld-pagination hover first sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "fba7ae77", + "image": "efbacb31464494d84a094c7dc84a6c35.png", + "userAgent": "default", + "desc": "ld-pagination hover last sticky item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "4987abcd", + "image": "14199f4eae607f547956869d00424d8b.png", + "userAgent": "default", + "desc": "ld-pagination hover next arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "76bb6b43", + "image": "f760ef659abf1439c5ff044b3caeb9af.png", + "userAgent": "default", + "desc": "ld-pagination hover prev arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "3bcceae7", + "image": "f387b8406198a5a78696ef6dafe012d9.png", + "userAgent": "default", + "desc": "ld-pagination hover selected item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "af19f650", + "image": "b78ccdab10b5031c68e4e257a991ec7a.png", + "userAgent": "default", + "desc": "ld-pagination hover slidable item", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "b607c53a", + "image": "ca687ec826744102d9a76dc4324093b7.png", + "userAgent": "default", + "desc": "ld-pagination hover start arrow", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "27b2014b", + "image": "cd0341d700ef8afd6dfe253ee8ac4e96.png", + "userAgent": "default", + "desc": "ld-pagination indefinite middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "8d6cb8b6", + "image": "7cc4c9c6b1d9d7a1ff3c4c5f61527eaa.png", + "userAgent": "default", + "desc": "ld-pagination indefinite start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "bab86fe3", + "image": "349c204d5e67e2f7e792718868013311.png", + "userAgent": "default", + "desc": "ld-pagination sticky end", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "a00ce27c", + "image": "be9634a503e2e05feb8b6f841164521a.png", + "userAgent": "default", + "desc": "ld-pagination sticky middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "a8625317", + "image": "c3e6e755433c85faf1bdb28801a878b4.png", + "userAgent": "default", + "desc": "ld-pagination sticky single", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "02d0a330", + "image": "5d0bbc64023b2c3bcf9d3a7f6ad06821.png", + "userAgent": "default", + "desc": "ld-pagination sticky start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "a54c7e26", + "image": "20566ee338827657718ef687eb0bee42.png", + "userAgent": "default", + "desc": "ld-pagination sticky without dots", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "e56f1d3e", + "image": "c56edec392c3476a6c42ffe93c90a160.png", + "userAgent": "default", + "desc": "ld-pagination with text navigation end", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "c611bae5", + "image": "cf92c2668b303a6398e41bdf64d2c9a7.png", + "userAgent": "default", + "desc": "ld-pagination with text navigation middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "add4abdf", + "image": "eef8fef335a49f104092dc821df072c5.png", + "userAgent": "default", + "desc": "ld-pagination with text navigation start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "f9be2030", + "image": "d82fe0be1fc8104054f8a6e7b53a7af8.png", + "userAgent": "default", + "desc": "ld-pagination without arrows end", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "7b795257", + "image": "fbeb9fcabd5afa76854eea385352d807.png", + "userAgent": "default", + "desc": "ld-pagination without arrows middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "2dc73fb3", + "image": "901f182ea4b9fe921e323581f3cb55d8.png", + "userAgent": "default", + "desc": "ld-pagination without arrows start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "a4949859", + "image": "0661ed5b6bc97312387f706d30f3cbb4.png", + "userAgent": "default", + "desc": "ld-pagination without offset end", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "245deb37", + "image": "4a8544c04c813fc69d5aa49337dd481a.png", + "userAgent": "default", + "desc": "ld-pagination without offset middle", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "8f3e6a24", + "image": "ca752ab4fd97510e065fca6d917fea8c.png", + "userAgent": "default", + "desc": "ld-pagination without offset single", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "8b93d189", + "image": "a9e7b8d0fdd59c547381af0bd327de2f.png", + "userAgent": "default", + "desc": "ld-pagination without offset start", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, + { + "id": "2935613f", + "image": "97eb3701672cc7abc8effce037bdb88a.png", + "userAgent": "default", + "desc": "ld-pagination without offset without dots", + "testPath": "./src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, { "id": "89663549", "image": "4b35d193ebe73a13913f0a1caa82d6ba.png", diff --git a/screenshot/images/0661ed5b6bc97312387f706d30f3cbb4.png b/screenshot/images/0661ed5b6bc97312387f706d30f3cbb4.png new file mode 100644 index 0000000000..ed51633852 Binary files /dev/null and b/screenshot/images/0661ed5b6bc97312387f706d30f3cbb4.png differ diff --git a/screenshot/images/08d3fe6839ab9d9d0f21729495048bf7.png b/screenshot/images/08d3fe6839ab9d9d0f21729495048bf7.png new file mode 100644 index 0000000000..be95565138 Binary files /dev/null and b/screenshot/images/08d3fe6839ab9d9d0f21729495048bf7.png differ diff --git a/screenshot/images/09f7fa27b7b500cc3f24235d7c366b15.png b/screenshot/images/09f7fa27b7b500cc3f24235d7c366b15.png new file mode 100644 index 0000000000..eb272683e4 Binary files /dev/null and b/screenshot/images/09f7fa27b7b500cc3f24235d7c366b15.png differ diff --git a/screenshot/images/0c33424d8f2293b9463ca25e3f8ab884.png b/screenshot/images/0c33424d8f2293b9463ca25e3f8ab884.png new file mode 100644 index 0000000000..860f066ee0 Binary files /dev/null and b/screenshot/images/0c33424d8f2293b9463ca25e3f8ab884.png differ diff --git a/screenshot/images/1371d8b3fff3b7033494baaf064c4dd4.png b/screenshot/images/1371d8b3fff3b7033494baaf064c4dd4.png new file mode 100644 index 0000000000..69b5921037 Binary files /dev/null and b/screenshot/images/1371d8b3fff3b7033494baaf064c4dd4.png differ diff --git a/screenshot/images/14199f4eae607f547956869d00424d8b.png b/screenshot/images/14199f4eae607f547956869d00424d8b.png new file mode 100644 index 0000000000..8266c698b0 Binary files /dev/null and b/screenshot/images/14199f4eae607f547956869d00424d8b.png differ diff --git a/screenshot/images/159069a077fc2fe327290369572368aa.png b/screenshot/images/159069a077fc2fe327290369572368aa.png new file mode 100644 index 0000000000..1eefe2f491 Binary files /dev/null and b/screenshot/images/159069a077fc2fe327290369572368aa.png differ diff --git a/screenshot/images/168609da47798313485eed20b8291b23.png b/screenshot/images/168609da47798313485eed20b8291b23.png new file mode 100644 index 0000000000..298cc4516e Binary files /dev/null and b/screenshot/images/168609da47798313485eed20b8291b23.png differ diff --git a/screenshot/images/1d36b8727bbeb018da9317cf1fa8c178.png b/screenshot/images/1d36b8727bbeb018da9317cf1fa8c178.png new file mode 100644 index 0000000000..62641e8591 Binary files /dev/null and b/screenshot/images/1d36b8727bbeb018da9317cf1fa8c178.png differ diff --git a/screenshot/images/20566ee338827657718ef687eb0bee42.png b/screenshot/images/20566ee338827657718ef687eb0bee42.png new file mode 100644 index 0000000000..eafbb3e2e9 Binary files /dev/null and b/screenshot/images/20566ee338827657718ef687eb0bee42.png differ diff --git a/screenshot/images/24e327eaef64b6f1e584d48899f83fda.png b/screenshot/images/24e327eaef64b6f1e584d48899f83fda.png new file mode 100644 index 0000000000..cb5569c22a Binary files /dev/null and b/screenshot/images/24e327eaef64b6f1e584d48899f83fda.png differ diff --git a/screenshot/images/2d8720714c177bd5de96a5294d8db162.png b/screenshot/images/2d8720714c177bd5de96a5294d8db162.png new file mode 100644 index 0000000000..42b7ce2f2e Binary files /dev/null and b/screenshot/images/2d8720714c177bd5de96a5294d8db162.png differ diff --git a/screenshot/images/2e8f57327a9fc0a0a320b25167148d65.png b/screenshot/images/2e8f57327a9fc0a0a320b25167148d65.png new file mode 100644 index 0000000000..65957a46fe Binary files /dev/null and b/screenshot/images/2e8f57327a9fc0a0a320b25167148d65.png differ diff --git a/screenshot/images/349c204d5e67e2f7e792718868013311.png b/screenshot/images/349c204d5e67e2f7e792718868013311.png new file mode 100644 index 0000000000..aa9a649529 Binary files /dev/null and b/screenshot/images/349c204d5e67e2f7e792718868013311.png differ diff --git a/screenshot/images/3c6bba7ebaefacfa711421c0fef826a9.png b/screenshot/images/3c6bba7ebaefacfa711421c0fef826a9.png new file mode 100644 index 0000000000..ff1ee72702 Binary files /dev/null and b/screenshot/images/3c6bba7ebaefacfa711421c0fef826a9.png differ diff --git a/screenshot/images/3f6273a50904b41512e1974a30c977ab.png b/screenshot/images/3f6273a50904b41512e1974a30c977ab.png new file mode 100644 index 0000000000..1877e0c3bd Binary files /dev/null and b/screenshot/images/3f6273a50904b41512e1974a30c977ab.png differ diff --git a/screenshot/images/47bb8dc5aec11e1e9388d4409988c8e5.png b/screenshot/images/47bb8dc5aec11e1e9388d4409988c8e5.png new file mode 100644 index 0000000000..81544613c9 Binary files /dev/null and b/screenshot/images/47bb8dc5aec11e1e9388d4409988c8e5.png differ diff --git a/screenshot/images/4a8544c04c813fc69d5aa49337dd481a.png b/screenshot/images/4a8544c04c813fc69d5aa49337dd481a.png new file mode 100644 index 0000000000..55009daa12 Binary files /dev/null and b/screenshot/images/4a8544c04c813fc69d5aa49337dd481a.png differ diff --git a/screenshot/images/5c7cf6b8ac65f70c4d1d8ebf3b3211a9.png b/screenshot/images/5c7cf6b8ac65f70c4d1d8ebf3b3211a9.png new file mode 100644 index 0000000000..0b9aa77d15 Binary files /dev/null and b/screenshot/images/5c7cf6b8ac65f70c4d1d8ebf3b3211a9.png differ diff --git a/screenshot/images/5d0bbc64023b2c3bcf9d3a7f6ad06821.png b/screenshot/images/5d0bbc64023b2c3bcf9d3a7f6ad06821.png new file mode 100644 index 0000000000..f9c6d2589b Binary files /dev/null and b/screenshot/images/5d0bbc64023b2c3bcf9d3a7f6ad06821.png differ diff --git a/screenshot/images/7a3116f4e7f054af1280f5bd5f2f4c01.png b/screenshot/images/7a3116f4e7f054af1280f5bd5f2f4c01.png new file mode 100644 index 0000000000..fd693e3d47 Binary files /dev/null and b/screenshot/images/7a3116f4e7f054af1280f5bd5f2f4c01.png differ diff --git a/screenshot/images/7cc4c9c6b1d9d7a1ff3c4c5f61527eaa.png b/screenshot/images/7cc4c9c6b1d9d7a1ff3c4c5f61527eaa.png new file mode 100644 index 0000000000..150f7825b6 Binary files /dev/null and b/screenshot/images/7cc4c9c6b1d9d7a1ff3c4c5f61527eaa.png differ diff --git a/screenshot/images/8990d8c3c414ee5350344eca8e988cd4.png b/screenshot/images/8990d8c3c414ee5350344eca8e988cd4.png new file mode 100644 index 0000000000..9cc74b93a1 Binary files /dev/null and b/screenshot/images/8990d8c3c414ee5350344eca8e988cd4.png differ diff --git a/screenshot/images/8a7fa446a12dbf3418352db06268d444.png b/screenshot/images/8a7fa446a12dbf3418352db06268d444.png new file mode 100644 index 0000000000..5c2fd9688f Binary files /dev/null and b/screenshot/images/8a7fa446a12dbf3418352db06268d444.png differ diff --git a/screenshot/images/90181901a4400639eee89f6395eaa0ab.png b/screenshot/images/90181901a4400639eee89f6395eaa0ab.png new file mode 100644 index 0000000000..f63b2ba68d Binary files /dev/null and b/screenshot/images/90181901a4400639eee89f6395eaa0ab.png differ diff --git a/screenshot/images/901f182ea4b9fe921e323581f3cb55d8.png b/screenshot/images/901f182ea4b9fe921e323581f3cb55d8.png new file mode 100644 index 0000000000..1310c86605 Binary files /dev/null and b/screenshot/images/901f182ea4b9fe921e323581f3cb55d8.png differ diff --git a/screenshot/images/94465345e89514df085281fcbdc56a29.png b/screenshot/images/94465345e89514df085281fcbdc56a29.png deleted file mode 100644 index 96b341c071..0000000000 Binary files a/screenshot/images/94465345e89514df085281fcbdc56a29.png and /dev/null differ diff --git a/screenshot/images/9447a08b927a145692ab475c5ca28215.png b/screenshot/images/9447a08b927a145692ab475c5ca28215.png new file mode 100644 index 0000000000..b2ad98f0ed Binary files /dev/null and b/screenshot/images/9447a08b927a145692ab475c5ca28215.png differ diff --git a/screenshot/images/95bc6b11c0bdcb6d35851abe9b637370.png b/screenshot/images/95bc6b11c0bdcb6d35851abe9b637370.png new file mode 100644 index 0000000000..71c0ebde22 Binary files /dev/null and b/screenshot/images/95bc6b11c0bdcb6d35851abe9b637370.png differ diff --git a/screenshot/images/97eb3701672cc7abc8effce037bdb88a.png b/screenshot/images/97eb3701672cc7abc8effce037bdb88a.png new file mode 100644 index 0000000000..7b52bee6c3 Binary files /dev/null and b/screenshot/images/97eb3701672cc7abc8effce037bdb88a.png differ diff --git a/screenshot/images/9ac7208c4e70fec39cf07b736af99f69.png b/screenshot/images/9ac7208c4e70fec39cf07b736af99f69.png new file mode 100644 index 0000000000..fc52cd0768 Binary files /dev/null and b/screenshot/images/9ac7208c4e70fec39cf07b736af99f69.png differ diff --git a/screenshot/images/a9e7b8d0fdd59c547381af0bd327de2f.png b/screenshot/images/a9e7b8d0fdd59c547381af0bd327de2f.png new file mode 100644 index 0000000000..52002b3457 Binary files /dev/null and b/screenshot/images/a9e7b8d0fdd59c547381af0bd327de2f.png differ diff --git a/screenshot/images/afbef30750aac975e372dbdfc9921026.png b/screenshot/images/afbef30750aac975e372dbdfc9921026.png new file mode 100644 index 0000000000..c9b9ad828c Binary files /dev/null and b/screenshot/images/afbef30750aac975e372dbdfc9921026.png differ diff --git a/screenshot/images/b167629b504cc009b2e629d4d127b05a.png b/screenshot/images/b167629b504cc009b2e629d4d127b05a.png new file mode 100644 index 0000000000..237e330925 Binary files /dev/null and b/screenshot/images/b167629b504cc009b2e629d4d127b05a.png differ diff --git a/screenshot/images/b1f8813e1ee8ded0ead4ec74f4c5bb45.png b/screenshot/images/b1f8813e1ee8ded0ead4ec74f4c5bb45.png new file mode 100644 index 0000000000..e2c2c4a521 Binary files /dev/null and b/screenshot/images/b1f8813e1ee8ded0ead4ec74f4c5bb45.png differ diff --git a/screenshot/images/b26d946dac5b0cbb31b8f5ed8c05a6cb.png b/screenshot/images/b26d946dac5b0cbb31b8f5ed8c05a6cb.png new file mode 100644 index 0000000000..7b56d105ad Binary files /dev/null and b/screenshot/images/b26d946dac5b0cbb31b8f5ed8c05a6cb.png differ diff --git a/screenshot/images/b78ccdab10b5031c68e4e257a991ec7a.png b/screenshot/images/b78ccdab10b5031c68e4e257a991ec7a.png new file mode 100644 index 0000000000..40a4996bf5 Binary files /dev/null and b/screenshot/images/b78ccdab10b5031c68e4e257a991ec7a.png differ diff --git a/screenshot/images/b89912d0e9b0de84066e680da7d2e196.png b/screenshot/images/b89912d0e9b0de84066e680da7d2e196.png deleted file mode 100644 index e5853b3ed6..0000000000 Binary files a/screenshot/images/b89912d0e9b0de84066e680da7d2e196.png and /dev/null differ diff --git a/screenshot/images/bb7dfd9439d0012bbab917b739f5c4f6.png b/screenshot/images/bb7dfd9439d0012bbab917b739f5c4f6.png new file mode 100644 index 0000000000..a6d7a7692d Binary files /dev/null and b/screenshot/images/bb7dfd9439d0012bbab917b739f5c4f6.png differ diff --git a/screenshot/images/bd5aafab040b17fe58ed794da64e382e.png b/screenshot/images/bd5aafab040b17fe58ed794da64e382e.png new file mode 100644 index 0000000000..1557a865f9 Binary files /dev/null and b/screenshot/images/bd5aafab040b17fe58ed794da64e382e.png differ diff --git a/screenshot/images/be9634a503e2e05feb8b6f841164521a.png b/screenshot/images/be9634a503e2e05feb8b6f841164521a.png new file mode 100644 index 0000000000..cb0527188d Binary files /dev/null and b/screenshot/images/be9634a503e2e05feb8b6f841164521a.png differ diff --git a/screenshot/images/c3e6e755433c85faf1bdb28801a878b4.png b/screenshot/images/c3e6e755433c85faf1bdb28801a878b4.png new file mode 100644 index 0000000000..ff2c0d5484 Binary files /dev/null and b/screenshot/images/c3e6e755433c85faf1bdb28801a878b4.png differ diff --git a/screenshot/images/c56edec392c3476a6c42ffe93c90a160.png b/screenshot/images/c56edec392c3476a6c42ffe93c90a160.png new file mode 100644 index 0000000000..97190272cf Binary files /dev/null and b/screenshot/images/c56edec392c3476a6c42ffe93c90a160.png differ diff --git a/screenshot/images/ca687ec826744102d9a76dc4324093b7.png b/screenshot/images/ca687ec826744102d9a76dc4324093b7.png new file mode 100644 index 0000000000..db0b8a62f4 Binary files /dev/null and b/screenshot/images/ca687ec826744102d9a76dc4324093b7.png differ diff --git a/screenshot/images/ca752ab4fd97510e065fca6d917fea8c.png b/screenshot/images/ca752ab4fd97510e065fca6d917fea8c.png new file mode 100644 index 0000000000..8b6ae275e0 Binary files /dev/null and b/screenshot/images/ca752ab4fd97510e065fca6d917fea8c.png differ diff --git a/screenshot/images/cb9059de47db2594dcca2b89280928b9.png b/screenshot/images/cb9059de47db2594dcca2b89280928b9.png new file mode 100644 index 0000000000..179313f4e6 Binary files /dev/null and b/screenshot/images/cb9059de47db2594dcca2b89280928b9.png differ diff --git a/screenshot/images/cd0341d700ef8afd6dfe253ee8ac4e96.png b/screenshot/images/cd0341d700ef8afd6dfe253ee8ac4e96.png new file mode 100644 index 0000000000..f232f18b27 Binary files /dev/null and b/screenshot/images/cd0341d700ef8afd6dfe253ee8ac4e96.png differ diff --git a/screenshot/images/cf92c2668b303a6398e41bdf64d2c9a7.png b/screenshot/images/cf92c2668b303a6398e41bdf64d2c9a7.png new file mode 100644 index 0000000000..92959a4faf Binary files /dev/null and b/screenshot/images/cf92c2668b303a6398e41bdf64d2c9a7.png differ diff --git a/screenshot/images/d598319d5868d458f9edfce246d88a1f.png b/screenshot/images/d598319d5868d458f9edfce246d88a1f.png new file mode 100644 index 0000000000..5d4107770b Binary files /dev/null and b/screenshot/images/d598319d5868d458f9edfce246d88a1f.png differ diff --git a/screenshot/images/d82fe0be1fc8104054f8a6e7b53a7af8.png b/screenshot/images/d82fe0be1fc8104054f8a6e7b53a7af8.png new file mode 100644 index 0000000000..bee138e312 Binary files /dev/null and b/screenshot/images/d82fe0be1fc8104054f8a6e7b53a7af8.png differ diff --git a/screenshot/images/eef8fef335a49f104092dc821df072c5.png b/screenshot/images/eef8fef335a49f104092dc821df072c5.png new file mode 100644 index 0000000000..e1fb5a276d Binary files /dev/null and b/screenshot/images/eef8fef335a49f104092dc821df072c5.png differ diff --git a/screenshot/images/efbacb31464494d84a094c7dc84a6c35.png b/screenshot/images/efbacb31464494d84a094c7dc84a6c35.png new file mode 100644 index 0000000000..71d599e748 Binary files /dev/null and b/screenshot/images/efbacb31464494d84a094c7dc84a6c35.png differ diff --git a/screenshot/images/f387b8406198a5a78696ef6dafe012d9.png b/screenshot/images/f387b8406198a5a78696ef6dafe012d9.png new file mode 100644 index 0000000000..b9a892bda5 Binary files /dev/null and b/screenshot/images/f387b8406198a5a78696ef6dafe012d9.png differ diff --git a/screenshot/images/f760ef659abf1439c5ff044b3caeb9af.png b/screenshot/images/f760ef659abf1439c5ff044b3caeb9af.png new file mode 100644 index 0000000000..bb08d24c7e Binary files /dev/null and b/screenshot/images/f760ef659abf1439c5ff044b3caeb9af.png differ diff --git a/screenshot/images/f9a08104d9e3b30020536be6a00a8f2c.png b/screenshot/images/f9a08104d9e3b30020536be6a00a8f2c.png new file mode 100644 index 0000000000..d2a0c42b47 Binary files /dev/null and b/screenshot/images/f9a08104d9e3b30020536be6a00a8f2c.png differ diff --git a/screenshot/images/fbeb9fcabd5afa76854eea385352d807.png b/screenshot/images/fbeb9fcabd5afa76854eea385352d807.png new file mode 100644 index 0000000000..d02242cd78 Binary files /dev/null and b/screenshot/images/fbeb9fcabd5afa76854eea385352d807.png differ diff --git a/src/docs/components/docs-example/docs-example.css b/src/docs/components/docs-example/docs-example.css index f268691a93..b495d78a34 100644 --- a/src/docs/components/docs-example/docs-example.css +++ b/src/docs/components/docs-example/docs-example.css @@ -128,6 +128,11 @@ width: 100%; } } +.docs-example__show--centered { + > div { + align-items: center; + } +} .docs-example__show--stacked { > div { flex-direction: column; diff --git a/src/docs/components/docs-example/docs-example.tsx b/src/docs/components/docs-example/docs-example.tsx index 2d976a0000..9ab0bba0d5 100644 --- a/src/docs/components/docs-example/docs-example.tsx +++ b/src/docs/components/docs-example/docs-example.tsx @@ -9,6 +9,9 @@ import { getClassNames } from '../../../liquid/utils/getClassNames' shadow: false, }) export class DocsExample { + /** Center examples. */ + @Prop() centered = false + /** Web Component markup encoded as URI component. */ @Prop() code!: string @@ -68,6 +71,7 @@ export class DocsExample { if (this.themable && this.currentTheme) { clShow += ' ld-theme-' + this.currentTheme.toLowerCase() } + if (this.centered) clShow += ' docs-example__show--centered' if (this.stacked) clShow += ' docs-example__show--stacked' if (this.background) clShow += ` docs-example__show--${this.background}` diff --git a/src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts b/src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts index cac6c7e6ac..68b3ba1fa0 100644 --- a/src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts +++ b/src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts @@ -14,8 +14,6 @@ const cellTypes = [ 'tile', ] -jest.useRealTimers() - describe('ld-bg-cells', () => { describe('web component', () => { it(`default`, async () => { diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx index 12330cb5ab..f2778fa531 100644 --- a/src/liquid/components/ld-button/ld-button.tsx +++ b/src/liquid/components/ld-button/ld-button.tsx @@ -71,6 +71,9 @@ export class LdButton implements InnerFocusable, ClonesAttributes { /** Justify content. */ @Prop({ mutable: true }) justifyContent?: 'start' | 'end' | 'between' + /** Tab index of the button. */ + @Prop() ldTabindex: number | undefined + /** Display mode. */ @Prop() mode?: 'highlight' | 'secondary' | 'ghost' | 'danger' @@ -174,14 +177,12 @@ export class LdButton implements InnerFocusable, ClonesAttributes { @Watch('size') private updateIconSize() { - const forceLargeIcon = this.mode === 'ghost' && this.iconOnly - this.el.querySelectorAll('ld-icon').forEach((icon) => { - icon.size = forceLargeIcon ? 'lg' : this.size + icon.size = this.size }) this.el.querySelectorAll('.ld-icon').forEach((icon) => { - if (this.size === 'lg' || forceLargeIcon) { + if (this.size === 'lg') { icon.classList.remove('ld-icon--sm') icon.classList.add('ld-icon--lg') } else if (this.size === 'sm') { @@ -198,6 +199,7 @@ export class LdButton implements InnerFocusable, ClonesAttributes { 'align-text', 'brand-color', 'justify-content', + 'ld-tabindex', 'mode', 'progress', 'size', @@ -247,9 +249,11 @@ export class LdButton implements InnerFocusable, ClonesAttributes { } aria-live="polite" class={cl} + disabled={this.disabled} part="button focusable" ref={(el: HTMLAnchorElement | HTMLButtonElement) => (this.button = el)} rel={this.target === '_blank' ? 'noreferrer noopener' : undefined} + tabIndex={this.ldTabindex} value={this.value} > diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md index 9a8dcc3bff..d277c343f0 100644 --- a/src/liquid/components/ld-button/readme.md +++ b/src/liquid/components/ld-button/readme.md @@ -500,6 +500,7 @@ You can align the text inside the button using the `align-text` propperty. | `href` | `href` | Transforms the button to an anchor element. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href) for more information on the `href` attribute. | `string` | `undefined` | | `justifyContent` | `justify-content` | Justify content. | `"between" \| "end" \| "start"` | `undefined` | | `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the button. | `number` | `undefined` | | `mode` | `mode` | Display mode. | `"danger" \| "ghost" \| "highlight" \| "secondary"` | `undefined` | | `name` | `name` | Used to specify the name of the control. | `string` | `undefined` | | `progress` | `progress` | Displays a progress bar at the bottom of the button. | `"pending" \| number` | `undefined` | @@ -531,6 +532,19 @@ Type: `Promise` | `"progress-bar"` | Progress bar | +## Dependencies + +### Used by + + - [ld-pagination](../ld-pagination) + +### Graph +```mermaid +graph TD; + ld-pagination --> ld-button + style ld-button fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- diff --git a/src/liquid/components/ld-button/test/ld-button.e2e.ts b/src/liquid/components/ld-button/test/ld-button.e2e.ts index 8e6d7cfc95..6e5822c010 100644 --- a/src/liquid/components/ld-button/test/ld-button.e2e.ts +++ b/src/liquid/components/ld-button/test/ld-button.e2e.ts @@ -5,8 +5,6 @@ import { import { LdIcon } from '../../ld-icon/ld-icon' import { LdButton } from '../ld-button' -jest.useRealTimers() - const modes = ['', 'highlight', 'secondary', 'ghost', 'danger'] const attributes = ['', 'brand-color'] diff --git a/src/liquid/components/ld-checkbox/ld-checkbox.tsx b/src/liquid/components/ld-checkbox/ld-checkbox.tsx index 15aa6fbf1f..a40a018c90 100644 --- a/src/liquid/components/ld-checkbox/ld-checkbox.tsx +++ b/src/liquid/components/ld-checkbox/ld-checkbox.tsx @@ -50,6 +50,9 @@ export class LdCheckbox implements InnerFocusable, ClonesAttributes { /** Set this property to `true` in order to mark the checkbox visually as invalid. */ @Prop() invalid: boolean + /** Tab index of the input. */ + @Prop() ldTabindex: number | undefined + /** Display mode. */ @Prop() mode?: 'highlight' | 'danger' @@ -203,13 +206,14 @@ export class LdCheckbox implements InnerFocusable, ClonesAttributes { (this.input = ref)} + tabIndex={this.ldTabindex} type="checkbox" - disabled={this.disabled} - checked={this.checked} value={this.value} /> - + @@ -186,7 +186,7 @@ You can easily make the header sticky and make it hide when the user is scrollin {% example %} - + diff --git a/src/liquid/components/ld-header/test/ld-header.e2e.ts b/src/liquid/components/ld-header/test/ld-header.e2e.ts index 3dbfc76464..b35c466f46 100644 --- a/src/liquid/components/ld-header/test/ld-header.e2e.ts +++ b/src/liquid/components/ld-header/test/ld-header.e2e.ts @@ -4,8 +4,6 @@ import { LdIcon } from '../../ld-icon/ld-icon' import { LdTypo } from '../../ld-typo/ld-typo' import { LdHeader } from '../ld-header' -jest.useRealTimers() - describe('ld-header', () => { describe('web component', () => { it('default', async () => { @@ -67,7 +65,7 @@ describe('ld-header', () => { Register - + `) const results = await page.compareScreenshot() @@ -78,7 +76,7 @@ describe('ld-header', () => { const page = await getPageWithContent(` - + `) const results = await page.compareScreenshot() diff --git a/src/liquid/components/ld-icon/assets/arrow-double-left.svg b/src/liquid/components/ld-icon/assets/arrow-double-left.svg index 17b87504c0..32b65626ab 100644 --- a/src/liquid/components/ld-icon/assets/arrow-double-left.svg +++ b/src/liquid/components/ld-icon/assets/arrow-double-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-double-right.svg b/src/liquid/components/ld-icon/assets/arrow-double-right.svg index 699c8cae01..fdbdde6faa 100644 --- a/src/liquid/components/ld-icon/assets/arrow-double-right.svg +++ b/src/liquid/components/ld-icon/assets/arrow-double-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-down.svg b/src/liquid/components/ld-icon/assets/arrow-down.svg index 951e0c0584..a39c142453 100644 --- a/src/liquid/components/ld-icon/assets/arrow-down.svg +++ b/src/liquid/components/ld-icon/assets/arrow-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-left.svg b/src/liquid/components/ld-icon/assets/arrow-left.svg index 0465b5292f..639d720e05 100644 --- a/src/liquid/components/ld-icon/assets/arrow-left.svg +++ b/src/liquid/components/ld-icon/assets/arrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-right.svg b/src/liquid/components/ld-icon/assets/arrow-right.svg index c8cba2ea3c..50c7641e31 100644 --- a/src/liquid/components/ld-icon/assets/arrow-right.svg +++ b/src/liquid/components/ld-icon/assets/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-up-n-down.svg b/src/liquid/components/ld-icon/assets/arrow-up-n-down.svg index cea0ee1cb7..9d790ed26f 100644 --- a/src/liquid/components/ld-icon/assets/arrow-up-n-down.svg +++ b/src/liquid/components/ld-icon/assets/arrow-up-n-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/arrow-up.svg b/src/liquid/components/ld-icon/assets/arrow-up.svg index 27968e888b..fe49034cc0 100644 --- a/src/liquid/components/ld-icon/assets/arrow-up.svg +++ b/src/liquid/components/ld-icon/assets/arrow-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/burger-menu.svg b/src/liquid/components/ld-icon/assets/burger-menu.svg index eb3806bd3d..12a70f4819 100644 --- a/src/liquid/components/ld-icon/assets/burger-menu.svg +++ b/src/liquid/components/ld-icon/assets/burger-menu.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/gamepad.svg b/src/liquid/components/ld-icon/assets/gamepad.svg index 35ea7228af..e79e366427 100644 --- a/src/liquid/components/ld-icon/assets/gamepad.svg +++ b/src/liquid/components/ld-icon/assets/gamepad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/assets/initial-m.svg b/src/liquid/components/ld-icon/assets/initial-m.svg index 0733b0286f..fdf81ad33a 100644 --- a/src/liquid/components/ld-icon/assets/initial-m.svg +++ b/src/liquid/components/ld-icon/assets/initial-m.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/liquid/components/ld-icon/readme.md b/src/liquid/components/ld-icon/readme.md index d31f64d522..a3302b6838 100644 --- a/src/liquid/components/ld-icon/readme.md +++ b/src/liquid/components/ld-icon/readme.md @@ -275,12 +275,14 @@ Left-click an icon below to download its SVG file. To download all icons at once - [ld-header](../ld-header) - [ld-input-message](../ld-input-message) + - [ld-pagination](../ld-pagination) ### Graph ```mermaid graph TD; ld-header --> ld-icon ld-input-message --> ld-icon + ld-pagination --> ld-icon style ld-icon fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/liquid/components/ld-icon/test/ld-icon.e2e.ts b/src/liquid/components/ld-icon/test/ld-icon.e2e.ts index eb4f908ac2..7e4a121543 100644 --- a/src/liquid/components/ld-icon/test/ld-icon.e2e.ts +++ b/src/liquid/components/ld-icon/test/ld-icon.e2e.ts @@ -1,7 +1,5 @@ import { getPageWithContent } from '../../../utils/e2e-tests' -jest.useRealTimers() - const svg = ` diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx index 8efabf7998..613a6c8375 100644 --- a/src/liquid/components/ld-input/ld-input.tsx +++ b/src/liquid/components/ld-input/ld-input.tsx @@ -73,6 +73,9 @@ export class LdInput implements InnerFocusable, ClonesAttributes { /** Set this property to `true` in order to mark the field visually as invalid. */ @Prop() invalid?: boolean + /** Tab index of the input. */ + @Prop() ldTabindex: number | undefined + /** Value of the id attribute of the `` of autocomplete options. */ @Prop() list?: string @@ -352,6 +355,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes { onInput={this.handleInput} part="input focusable" ref={(el) => (this.input = el)} + tabIndex={this.ldTabindex} value={this.value} /> {type === 'file' && ( @@ -374,6 +378,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes { onKeyDown={this.handleKeyDown} part="input focusable" ref={(el) => (this.input = el)} + tabIndex={this.ldTabindex} value={this.value} /> {this.type === 'file' && ( diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md index 7beed72c19..2e2aca1d20 100644 --- a/src/liquid/components/ld-input/readme.md +++ b/src/liquid/components/ld-input/readme.md @@ -1027,6 +1027,7 @@ The `ld-input` Web Component does not provide any properties or methods for vali | `form` | `form` | Associates the control with a form element. | `string` | `undefined` | | `invalid` | `invalid` | Set this property to `true` in order to mark the field visually as invalid. | `boolean` | `undefined` | | `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the input. | `number` | `undefined` | | `list` | `list` | Value of the id attribute of the `` of autocomplete options. | `string` | `undefined` | | `max` | `max` | Maximum value. | `number \| string` | `undefined` | | `maxlength` | `maxlength` | Maximum length (number of characters) of `value`. | `string` | `undefined` | diff --git a/src/liquid/components/ld-input/test/ld-input.e2e.ts b/src/liquid/components/ld-input/test/ld-input.e2e.ts index ae76639b73..e88ece5d4e 100644 --- a/src/liquid/components/ld-input/test/ld-input.e2e.ts +++ b/src/liquid/components/ld-input/test/ld-input.e2e.ts @@ -4,8 +4,6 @@ import { } from '../../../utils/e2e-tests' import { LdInput } from '../ld-input' -jest.useRealTimers() - const tones = [undefined, 'dark'] const cssIconComponent = ` diff --git a/src/liquid/components/ld-label/test/ld-label.e2e.ts b/src/liquid/components/ld-label/test/ld-label.e2e.ts index eeeeba2c4b..3cbc10935b 100644 --- a/src/liquid/components/ld-label/test/ld-label.e2e.ts +++ b/src/liquid/components/ld-label/test/ld-label.e2e.ts @@ -6,8 +6,6 @@ import { LdInput } from '../../ld-input/ld-input' import { LdToggle } from '../../ld-toggle/ld-toggle' import { LdLabel } from '../ld-label' -jest.useRealTimers() - describe('ld-label', () => { it('renders', async () => { const page = await getPageWithContent('Email Address') diff --git a/src/liquid/components/ld-loading/test/ld-loading.e2e.ts b/src/liquid/components/ld-loading/test/ld-loading.e2e.ts index 3c4ccc880a..505dde5f27 100644 --- a/src/liquid/components/ld-loading/test/ld-loading.e2e.ts +++ b/src/liquid/components/ld-loading/test/ld-loading.e2e.ts @@ -1,8 +1,6 @@ import { getPageWithContent } from 'src/liquid/utils/e2e-tests' import { LdLoading } from '../ld-loading' -jest.useRealTimers() - describe('ld-loading', () => { it('renders', async () => { const page = await getPageWithContent( diff --git a/src/liquid/components/ld-notification/test/ld-notification.e2e.ts b/src/liquid/components/ld-notification/test/ld-notification.e2e.ts index 4cf068d0a2..fcda84b43a 100644 --- a/src/liquid/components/ld-notification/test/ld-notification.e2e.ts +++ b/src/liquid/components/ld-notification/test/ld-notification.e2e.ts @@ -1,7 +1,5 @@ import { getPageWithContent } from '../../../utils/e2e-tests' -jest.useRealTimers() - describe('ld-notification', () => { describe('placement', () => { it('renders placed at the top with prop placement set to "top"', async () => { diff --git a/src/liquid/components/ld-pagination/ld-pagination.css b/src/liquid/components/ld-pagination/ld-pagination.css new file mode 100644 index 0000000000..6a454045db --- /dev/null +++ b/src/liquid/components/ld-pagination/ld-pagination.css @@ -0,0 +1,131 @@ +.ld-pagination { + --ld-pagination-sm-item-size: 2rem; + --ld-pagination-md-item-size: 2.5rem; + --ld-pagination-lg-item-size: 3.125rem; + --ld-pagination-column-size: calc( + var(--ld-pagination-item-size) + var(--ld-pagination-items-space) + ); + --ld-pagination-more-indicator-font: var(--ld-typo-body-m); + --ld-pagination-item-size: var(--ld-pagination-md-item-size); + --ld-pagination-items-space: var(--ld-sp-4); + + align-items: center; + display: inline-flex; + list-style: none; + margin: 0; + overflow: hidden; + /* for the focus outline */ + padding: var(--ld-sp-1); + position: relative; + + &--sm { + --ld-pagination-more-indicator-font: var(--ld-typo-body-s); + --ld-pagination-item-size: var(--ld-pagination-sm-item-size); + } + + &--lg { + --ld-pagination-more-indicator-font: var(--ld-typo-body-l); + --ld-pagination-item-size: var(--ld-pagination-lg-item-size); + } +} + +.ld-pagination__arrow:not(:last-child), +.ld-pagination__sticky { + margin-right: var(--ld-pagination-items-space); +} + +.ld-pagination__sticky, +.ld-pagination__item { + width: var(--ld-pagination-item-size); + + ld-button::part(button) { + padding: 0; + } +} + +.ld-pagination__more-indicator, +.ld-pagination__item { + opacity: 0; + transition: opacity 100ms linear; + + &--visible { + opacity: 1; + } +} + +.ld-pagination__more-indicator { + color: var(--ld-thm-primary); + font: var(--ld-pagination-more-indicator-font); + font-weight: 700; + height: var(--ld-pagination-item-size); + line-height: 1; + pointer-events: none; + position: relative; + + &--end { + right: var(--ld-pagination-column-size); + } + + span { + align-items: center; + justify-content: center; + display: flex; + height: 100%; + position: absolute; + white-space: nowrap; + width: var(--ld-pagination-item-size); + } +} + +.ld-pagination__slide-wrapper { + height: var(--ld-pagination-item-size); + position: relative; + width: calc( + var(--ld-pagination-slider-cols) * var(--ld-pagination-column-size) + ); +} + +.ld-pagination__items { + display: inline-flex; + list-style: none; + padding: 0; + pointer-events: none; + position: absolute; + transform: translateX( + calc( + var(--ld-pagination-slide-index) * var(--ld-pagination-column-size) * -1 + ) + ); + transition: transform 100ms ease; +} + +.ld-pagination__item { + left: calc(var(--ld-pagination-item-pos) * var(--ld-pagination-column-size)); + position: absolute; + + &--visible { + pointer-events: auto; + } + + &--selected ld-button { + --ld-button-bg-color: transparent; + + &::part(button) { + color: var(--thm-primary-active); + font-weight: 900; + } + } +} + +.ld-pagination__marker { + background: var(--ld-thm-primary-alpha-lowest); + border-radius: var(--ld-br-m); + height: var(--ld-pagination-item-size); + position: absolute; + width: var(--ld-pagination-item-size); + z-index: -1; + transform: translateX( + calc(var(--ld-pagination-column-size) * var(--ld-pagination-selected-index)) + ); + transition: transform 100ms ease; +} diff --git a/src/liquid/components/ld-pagination/ld-pagination.tsx b/src/liquid/components/ld-pagination/ld-pagination.tsx new file mode 100644 index 0000000000..d3f83c6966 --- /dev/null +++ b/src/liquid/components/ld-pagination/ld-pagination.tsx @@ -0,0 +1,427 @@ +import { + Component, + Host, + h, + Prop, + Event, + EventEmitter, + Watch, + State, +} from '@stencil/core' +import { getClassNames } from 'src/liquid/utils/getClassNames' + +const BUFFER_SIZE = 20 + +/** + * @virtualProp ref - reference to component + * @virtualProp {string | number} key - for tracking the node's identity when working with lists + * @part arrow - all arrow items (`ld-button` elements) + * @part more-indicator - list-items containing more-indicator + * @part end - arrow to jump to the last item (`ld-button` element) + * @part item - all pagination items containing a number (`ld-button` elements) + * @part items - list containing all slidable items and the marker + * @part list-wrapper - list-item containing the `ul` element with slidable items + * @part marker - marker highlighting the selected item + * @part next - arrow to go to the next item (`ld-button` element) + * @part prev - arrow to go to the previous item (`ld-button` element) + * @part start - arrow to jump to the first item (`ld-button` element) + * @part sticky - all sticky items (`ld-button` elements) + * @part wrapper - list containing all pagination items + */ +@Component({ + assetsDirs: ['assets'], + tag: 'ld-pagination', + styleUrl: 'ld-pagination.css', + shadow: true, +}) +export class LdPagination { + /** Hide the buttons to navigate forward/backward. */ + @Prop() hidePrevNext = false + + /** Hide the buttons to navigate to the first/last item. */ + @Prop() hideStartEnd = false + + /** Label to communicate the type of an item. */ + @Prop() itemLabel = 'Page' + + /** The number of items/pages available for pagination (required to let the user jump to the last item/page). */ + @Prop({ mutable: true }) length = Infinity + + /** The currently selected item (an index of `-1` means nothing is selected). */ + @Prop({ mutable: true }) selectedIndex = 0 + + /** Label text for the end button (replaces the icon). */ + @Prop() endLabel?: string + + /** Label text for the forward button (replaces the icon). */ + @Prop() nextLabel?: string + + /** Number of next/previous items visible. */ + @Prop() offset = 2 + + /** Label text for the backward button (replaces the icon). */ + @Prop() prevLabel?: string + + /** Size of the pagination. */ + @Prop() size?: 'sm' | 'lg' + + /** Label text for the start button (replaces the icon). */ + @Prop() startLabel?: string + + /** Number of items permanently visible at the start/end. */ + @Prop() sticky = 0 + + @State() maxSliderColumns = 0 + @State() renderMoreIndicators = false + @State() renderSticky = false + @State() slidableItems: number[] = [] + @State() sliderContent: number[] = [] + @State() visibleItemsInSlider = 0 + + /** Dispatched, if the selected index changes. */ + @Event() ldchange: EventEmitter + + @Watch('selectedIndex') + handleSelectedIndex() { + if (this.selectedIndex < 0) { + this.selectedIndex = 0 + } else if (this.selectedIndex >= this.length) { + this.selectedIndex = this.length - 1 + } else { + this.ldchange.emit(this.selectedIndex) + } + } + + // pageNumber is 1-based + private renderItem = ( + itemNumber: number, + showFrom: number, + showTo: number + ) => { + const isHidden = + this.renderMoreIndicators && + (itemNumber < showFrom || itemNumber > showTo) + const isSelected = itemNumber === this.selectedIndex + 1 + return ( +
  • + { + this.selectedIndex = itemNumber - 1 + }} + part="item focusable" + size={this.size} + > + {itemNumber} + +
  • + ) + } + + private calculateSliderContent = () => { + const directlyReachableFirstItems = this.maxSliderColumns + this.sticky - 1 + const directlyReachableLastItems = + this.length - this.maxSliderColumns - this.sticky + 1 + + this.sliderContent = this.slidableItems.filter( + (itemNumber) => + (itemNumber > this.selectedIndex - BUFFER_SIZE && + itemNumber <= this.selectedIndex + BUFFER_SIZE) || + // render the first/last items in case the user can navigate there directly + ((!this.hideStartEnd || this.sticky > 0) && + (itemNumber <= directlyReachableFirstItems || + itemNumber > directlyReachableLastItems)) + ) + } + + @Watch('length') + @Watch('offset') + @Watch('sticky') + componentWillLoad() { + this.visibleItemsInSlider = this.offset * 2 + 1 + const maxVisibleItems = this.sticky * 2 + this.visibleItemsInSlider + this.maxSliderColumns = this.visibleItemsInSlider + 2 + this.renderSticky = this.sticky > 0 + this.renderMoreIndicators = this.length > maxVisibleItems + 2 + this.slidableItems = Array.from({ + length: this.length === Infinity ? 9999 : this.length - this.sticky * 2, + }).map((_, index) => index + this.sticky + 1) + + if (this.length < 1) { + this.length = 1 + } + + if (this.selectedIndex < 0) { + this.selectedIndex = 0 + } else if (this.selectedIndex >= this.length) { + this.selectedIndex = this.length - 1 + } + + this.calculateSliderContent() + } + + render() { + // +1 because it must be the index right to the centered item + const showStartMoreIndicator = + this.renderMoreIndicators && + this.selectedIndex > this.sticky + this.offset + 1 + // -1 because it is 0-based and another -1 because it must be the index left to the centered item + const showEndMoreIndicator = + this.renderMoreIndicators && + this.selectedIndex < this.length - this.offset - this.sticky - 2 + const showFrom = + // +1 because it is not 0-based + Math.max( + Math.min( + this.selectedIndex - + this.offset - + // start hiding numbers + (showStartMoreIndicator ? 0 : 1), + this.length - this.visibleItemsInSlider - this.sticky - 1 + ), + this.sticky + ) + 1 + // +1 because it is not 0-based + const showTo = + Math.min( + Math.max( + this.selectedIndex + (showEndMoreIndicator ? 0 : 1), + this.offset + this.sticky + 1 + ) + this.offset, + this.length - this.sticky + ) + 1 + + return ( + +
      + {!this.hideStartEnd && ( +
    • + { + this.selectedIndex = 0 + }} + part="arrow start focusable" + size={this.size} + > + {this.startLabel ? ( + this.startLabel + ) : ( + + )} + +
    • + )} + {!this.hidePrevNext && ( +
    • + { + this.selectedIndex -= 1 + }} + part="arrow prev focusable" + size={this.size} + > + {this.prevLabel ? ( + this.prevLabel + ) : ( + + )} + +
    • + )} + {this.renderSticky && + Array.from({ length: Math.min(this.sticky, this.length) }).map( + (_: unknown, index: number) => { + return ( +
    • + { + this.selectedIndex = index + }} + part="sticky item focusable" + size={this.size} + > + {index + 1} + +
    • + ) + } + )} + {this.renderMoreIndicators && ( +
    • + . . . +
    • + )} +
    • +
        +
      • + {this.length > 0 && + this.sliderContent.map((itemNumber) => + this.renderItem(itemNumber, showFrom, showTo) + )} +
      +
    • + {this.renderMoreIndicators && ( +
    • + . . . +
    • + )} + {this.renderSticky && + this.length < Infinity && + Array.from({ length: this.sticky }) + .map((_: unknown, index: number) => { + const itemNumber = this.length - index + + if (itemNumber <= this.sticky) { + return null + } + + return ( +
    • + { + this.selectedIndex = itemNumber - 1 + }} + part="sticky item focusable" + size={this.size} + > + {itemNumber} + +
    • + ) + }) + .reverse()} + {!this.hidePrevNext && ( +
    • + = this.length - 1} + mode="ghost" + onClick={() => { + this.selectedIndex += 1 + }} + part="arrow next focusable" + size={this.size} + > + {this.nextLabel ? ( + this.nextLabel + ) : ( + + )} + +
    • + )} + {this.length < Infinity && !this.hideStartEnd && ( +
    • + = this.length - 1} + mode="ghost" + onClick={() => { + this.selectedIndex = this.length - 1 + }} + part="arrow end focusable" + size={this.size} + > + {this.endLabel ? ( + this.endLabel + ) : ( + + )} + +
    • + )} +
    +
    + ) + } +} diff --git a/src/liquid/components/ld-pagination/readme.md b/src/liquid/components/ld-pagination/readme.md new file mode 100644 index 0000000000..6ab8fa0f8b --- /dev/null +++ b/src/liquid/components/ld-pagination/readme.md @@ -0,0 +1,181 @@ +--- +eleventyNavigation: + key: Pagination + parent: Components +layout: layout.njk +title: Pagination +permalink: components/ld-pagination/ +--- + +# ld-pagination + +An pagination provides a visual hint for content or interactions. Combine it with textual information for a better user experience. When using an pagination on its own, make sure to either apply an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) or use the [ld-sr-only](components/ld-sr-only/) component. + +--- + +## Examples + +### Default + +{% example '{ "centered": true, "stacked": true }' %} + +{% endexample %} + +### With sticky items + +{% example '{ "centered": true, "stacked": true }' %} + + +{% endexample %} + +### Offset + +{% example '{ "centered": true, "stacked": true }' %} + + +{% endexample %} + +### Indefinite length + +{% example %} + +{% endexample %} + +### Item label + +{% example %} + +{% endexample %} + +### Hide arrow buttons + +{% example '{ "centered": true, "stacked": true }' %} + + + +{% endexample %} + +### Text instead of arrow buttons + +{% example '{ "centered": true, "stacked": true }' %} + + + +{% endexample %} + +### Size + +{% example '{ "centered": true, "stacked": true }' %} + + + +{% endexample %} + +### Preselected index + +{% example %} + +{% endexample %} + +### Programmatic manipulation + +{% example %} +<< 10 + +>> 10 +Remove 10 +Add 10 + + +{% endexample %} + +### Event handling + +{% example %} + + + +{% endexample %} + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------- | ------------------ | ----------- | +| `endLabel` | `end-label` | Label text for the end button (replaces the icon). | `string` | `undefined` | +| `hidePrevNext` | `hide-prev-next` | Hide the buttons to navigate forward/backward. | `boolean` | `false` | +| `hideStartEnd` | `hide-start-end` | Hide the buttons to navigate to the first/last item. | `boolean` | `false` | +| `itemLabel` | `item-label` | Label to communicate the type of an item. | `string` | `'Page'` | +| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `length` | `length` | The number of items/pages available for pagination (required to let the user jump to the last item/page). | `number` | `Infinity` | +| `nextLabel` | `next-label` | Label text for the forward button (replaces the icon). | `string` | `undefined` | +| `offset` | `offset` | Number of next/previous items visible. | `number` | `2` | +| `prevLabel` | `prev-label` | Label text for the backward button (replaces the icon). | `string` | `undefined` | +| `ref` | `ref` | reference to component | `any` | `undefined` | +| `selectedIndex` | `selected-index` | The currently selected item (an index of `-1` means nothing is selected). | `number` | `0` | +| `size` | `size` | Size of the pagination. | `"lg" \| "sm"` | `undefined` | +| `startLabel` | `start-label` | Label text for the start button (replaces the icon). | `string` | `undefined` | +| `sticky` | `sticky` | Number of items permanently visible at the start/end. | `number` | `0` | + + +## Events + +| Event | Description | Type | +| ---------- | ------------------------------------------ | --------------------- | +| `ldchange` | Dispatched, if the selected index changes. | `CustomEvent` | + + +## Shadow Parts + +| Part | Description | +| ------------------ | --------------------------------------------------------------- | +| `"arrow"` | all arrow items (`ld-button` elements) | +| `"end"` | arrow to jump to the last item (`ld-button` element) | +| `"focusable"` | | +| `"item"` | all pagination items containing a number (`ld-button` elements) | +| `"items"` | list containing all slidable items and the marker | +| `"list-wrapper"` | list-item containing the `ul` element with slidable items | +| `"marker"` | marker highlighting the selected item | +| `"more-indicator"` | list-items containing more-indicator | +| `"next"` | arrow to go to the next item (`ld-button` element) | +| `"prev"` | arrow to go to the previous item (`ld-button` element) | +| `"slide-wrapper"` | | +| `"start"` | arrow to jump to the first item (`ld-button` element) | +| `"sticky"` | all sticky items (`ld-button` elements) | +| `"wrapper"` | list containing all pagination items | + + +## Dependencies + +### Depends on + +- [ld-button](../ld-button) +- [ld-icon](../ld-icon) + +### Graph +```mermaid +graph TD; + ld-pagination --> ld-button + ld-pagination --> ld-icon + style ld-pagination fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + + diff --git a/src/liquid/components/ld-pagination/test/__snapshots__/ld-pagination.spec.tsx.snap b/src/liquid/components/ld-pagination/test/__snapshots__/ld-pagination.spec.tsx.snap new file mode 100644 index 0000000000..8efd72c656 --- /dev/null +++ b/src/liquid/components/ld-pagination/test/__snapshots__/ld-pagination.spec.tsx.snap @@ -0,0 +1,3061 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ld-pagination re-renders on item selection 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders a buffer of next items and the last items in the slider 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders a buffer of previous items and the first items in the slider 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + + + + + + + + + + + + + + + + + + +
      • + + 94 + +
      • +
      • + + 95 + +
      • +
      • + + 96 + +
      • +
      • + + 97 + +
      • +
      • + + 98 + +
      • +
      • + + 99 + +
      • +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders default 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with custom item label 1`] = ` + + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    + +`; + +exports[`ld-pagination renders with custom offset 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • + + + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with determined length 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with different size 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators hidden at the end on last sliding position (with sticky items) 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + + +
      • + + 8 + +
      • +
      • + + 9 + +
      • +
      • + + 10 + +
      • +
      • + + 11 + +
      • +
      • + + 12 + +
      • +
      • + + 13 + +
      • +
      +
    • +
    • + + . . . + +
    • +
    • + + 14 + +
    • +
    • + + 15 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators hidden at the end on last sliding position 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + + + + + + +
      • + + 10 + +
      • +
      • + + 11 + +
      • +
      • + + 12 + +
      • +
      • + + 13 + +
      • +
      • + + 14 + +
      • +
      • + + 15 + +
      • +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators hidden at the start before sliding begins (with sticky items) 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + 14 + +
    • +
    • + + 15 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators hidden at the start before sliding begins 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators shown at the end on penultimate sliding position (with sticky items) 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + +
      • + + 7 + +
      • +
      • + + 8 + +
      • +
      • + + 9 + +
      • +
      • + + 10 + +
      • +
      • + + 11 + +
      • + + +
      +
    • +
    • + + . . . + +
    • +
    • + + 14 + +
    • +
    • + + 15 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators shown at the end on penultimate sliding position 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + + + + + +
      • + + 9 + +
      • +
      • + + 10 + +
      • +
      • + + 11 + +
      • +
      • + + 12 + +
      • +
      • + + 13 + +
      • + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators shown at the start after sliding once (with sticky items) 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • +
      • + + 9 + +
      • + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + 14 + +
    • +
    • + + 15 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with more-indicators shown at the start after sliding once 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with one item only 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with one sticky item only 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • +
        +
      • +
      +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with pre-selected index 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + + + + +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • +
      • + + 9 + +
      • +
      • + + 10 + +
      • + + + + + + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with sticky items 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + 14 + +
    • +
    • + + 15 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with sticky items but without more-indicators 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • +
        +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • +
      • + + 9 + +
      • +
      +
    • +
    • + + 10 + +
    • +
    • + + 11 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with sticky items only on one side 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • +
      • + + 7 + +
      • +
      • + + 8 + +
      • + + + + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders with text navigation 1`] = ` + + +
      +
    • + + First + +
    • +
    • + + Prev + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    • + + Next + +
    • +
    • + + Last + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders without arrows 1`] = ` + + +
      +
    • + + . . . + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      • + + 6 + +
      • + + + + + + + + + +
      +
    • +
    • + + . . . + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders without more-indicators 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • +
        +
      • +
      • + + 1 + +
      • +
      • + + 2 + +
      • +
      • + + 3 + +
      • +
      • + + 4 + +
      • +
      • + + 5 + +
      • +
      +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders without offset 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + . . . + +
    • +
    • +
        +
      • + + +
      • + + 3 + +
      • + + +
      +
    • +
    • + + . . . + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; + +exports[`ld-pagination renders without slidable elements 1`] = ` + + +
      +
    • + + + +
    • +
    • + + + +
    • +
    • + + 1 + +
    • +
    • + + 2 + +
    • +
    • + + 3 + +
    • +
    • +
        +
      • +
      +
    • +
    • + + 4 + +
    • +
    • + + 5 + +
    • +
    • + + 6 + +
    • +
    • + + + +
    • +
    • + + + +
    • +
    +
    +
    +`; diff --git a/src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts b/src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts new file mode 100644 index 0000000000..24d152fbd4 --- /dev/null +++ b/src/liquid/components/ld-pagination/test/ld-pagination.e2e.ts @@ -0,0 +1,591 @@ +import { + analyzeAccessibility, + getPageWithContent, +} from '../../../utils/e2e-tests' + +describe('ld-pagination', () => { + describe('default', () => { + it('start', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('single', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('without dots', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('indefinite', () => { + it('start', async () => { + const page = await getPageWithContent('') + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('sticky', () => { + it('start', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('single', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('without dots', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('without offset', () => { + it('start', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('single', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('without dots', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('hover', () => { + it('start arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow > ld-button' + ) + await arrow.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('prev arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:nth-child(2) > ld-button' + ) + await arrow.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('first sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__sticky > ld-button' + ) + await item.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('slidable item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__item:nth-child(6) > ld-button' + ) + await item.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('selected item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__item--selected > ld-button' + ) + await item.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('last sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__sticky:nth-last-child(2) > ld-button' + ) + await item.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('next arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:nth-last-child(2) > ld-button' + ) + await arrow.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:last-child > ld-button' + ) + await arrow.hover() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('active', () => { + it('start arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow > ld-button' + ) + await arrow.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('prev arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:nth-child(2) > ld-button' + ) + await arrow.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('first sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__sticky > ld-button' + ) + await item.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('slidable item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__item:nth-child(6) > ld-button' + ) + await item.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('selected item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__item--selected > ld-button' + ) + await item.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('last sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + const item = await page.find( + 'ld-pagination >>> li.ld-pagination__sticky:nth-last-child(2) > ld-button' + ) + await item.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('next arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:nth-last-child(2) > ld-button' + ) + await arrow.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end arrow', async () => { + const page = await getPageWithContent( + '' + ) + + const arrow = await page.find( + 'ld-pagination >>> li.ld-pagination__arrow:last-child > ld-button' + ) + await arrow.hover() + await page.mouse.down() + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('focus', () => { + it('start arrow', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('prev arrow', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('first sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('slidable item', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('selected item', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('last sticky item', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('next arrow', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end arrow', async () => { + const page = await getPageWithContent( + '' + ) + + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('without arrows', () => { + it('start', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + }) + + describe('with text navigation', () => { + it('start', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + + it('middle', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + }) + + it('end', async () => { + const page = await getPageWithContent( + '' + ) + const results = await page.compareScreenshot() + expect(results).toMatchScreenshot() + + const accessibilityReport = await analyzeAccessibility(page) + expect(accessibilityReport).toHaveNoAccessibilityIssues() + }) + }) +}) diff --git a/src/liquid/components/ld-pagination/test/ld-pagination.spec.tsx b/src/liquid/components/ld-pagination/test/ld-pagination.spec.tsx new file mode 100644 index 0000000000..d5b89ca899 --- /dev/null +++ b/src/liquid/components/ld-pagination/test/ld-pagination.spec.tsx @@ -0,0 +1,348 @@ +import { h } from '@stencil/core' +import { newSpecPage } from '@stencil/core/testing' +import { LdPagination } from '../ld-pagination' + +describe('ld-pagination', () => { + describe('renders', () => { + it('default', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with custom item label', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.body).toMatchSnapshot() + }) + + it('with determined length', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with pre-selected index', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with custom offset', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('without offset', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + + it('with different size', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with sticky items', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with sticky items only on one side', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('without more-indicators', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with sticky items but without more-indicators', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('without slidable elements', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with one item only', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with one sticky item only', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('without arrows', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('with text navigation', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + + it('a buffer of next items and the last items in the slider', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('a buffer of previous items and the first items in the slider', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + }) + + describe('renders with more-indicators', () => { + it('hidden at the start before sliding begins', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('shown at the start after sliding once', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('shown at the end on penultimate sliding position', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('hidden at the end on last sliding position', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + expect(page.root).toMatchSnapshot() + }) + + it('hidden at the start before sliding begins (with sticky items)', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + + it('shown at the start after sliding once (with sticky items)', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + + it('shown at the end on penultimate sliding position (with sticky items)', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + + it('hidden at the end on last sliding position (with sticky items)', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => ( + + ), + }) + expect(page.root).toMatchSnapshot() + }) + }) + + it('re-renders on item selection', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const changeHandler = jest.fn() + + page.root.addEventListener('ldchange', changeHandler) + // :nth-child(4) = item no 2, because of the marker at index 1 + const item = page.root.shadowRoot.querySelector( + 'li:nth-child(4) > ld-button' + ) + item.click() + + expect(page.root).toMatchSnapshot() + }) + + it('corrects initial length < 1', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + expect(ldPagination.length).toBe(1) + }) + + it('corrects initially selected index >= length', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + expect(ldPagination.selectedIndex).toBe(6) + }) + + it('corrects initially selected index < 0', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + expect(ldPagination.selectedIndex).toBe(0) + }) + + it('corrects changed length < 1', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + + ldPagination.length = 0 + expect(ldPagination.length).toBe(1) + }) + + it('corrects changed selected index >= length', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + + ldPagination.selectedIndex = 7 + expect(ldPagination.selectedIndex).toBe(6) + }) + + it('corrects changed selected index < 0', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const ldPagination = page.root as HTMLLdPaginationElement + + ldPagination.selectedIndex = -1 + expect(ldPagination.selectedIndex).toBe(0) + }) + + it('emits custom event', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const changeHandler = jest.fn() + + page.root.addEventListener('ldchange', changeHandler) + // :nth-child(4) = item no 2, because of the marker at index 1 + const item = page.root.shadowRoot.querySelector( + 'li:nth-child(4) > ld-button' + ) + item.click() + + expect(changeHandler).toHaveBeenCalledWith( + expect.objectContaining({ detail: 2 }) + ) + }) + + it('emits custom event only once when correcting changed selected index', async () => { + const page = await newSpecPage({ + components: [LdPagination], + template: () => , + }) + const changeHandler = jest.fn() + const ldPagination = page.root as HTMLLdPaginationElement + + ldPagination.addEventListener('ldchange', changeHandler) + ldPagination.selectedIndex = -1 + + expect(changeHandler).toHaveBeenCalledTimes(1) + expect(changeHandler).toHaveBeenCalledWith( + expect.objectContaining({ detail: 0 }) + ) + }) +}) diff --git a/src/liquid/components/ld-radio/ld-radio.tsx b/src/liquid/components/ld-radio/ld-radio.tsx index ab5e905646..bce1318638 100644 --- a/src/liquid/components/ld-radio/ld-radio.tsx +++ b/src/liquid/components/ld-radio/ld-radio.tsx @@ -44,6 +44,9 @@ export class LdRadio implements InnerFocusable, ClonesAttributes { /** Set this property to `true` in order to mark the radio visually as invalid. */ @Prop() invalid: boolean + /** Tab index of the input. */ + @Prop() ldTabindex: number | undefined + /** Display mode. */ @Prop() mode?: 'highlight' | 'danger' @@ -242,11 +245,7 @@ export class LdRadio implements InnerFocusable, ClonesAttributes { type="radio" disabled={this.disabled} checked={this.checked} - tabIndex={ - this.checked - ? parseInt(this.el.getAttribute('tabindex')) || undefined - : -1 - } + tabIndex={this.checked ? this.ldTabindex : -1} value={this.value} />
    diff --git a/src/liquid/components/ld-radio/readme.md b/src/liquid/components/ld-radio/readme.md index ac5df74cc7..75b8d7a12b 100644 --- a/src/liquid/components/ld-radio/readme.md +++ b/src/liquid/components/ld-radio/readme.md @@ -359,21 +359,22 @@ The `ld-radio` Web Component provides a low level API for integrating the compon ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | --------------------------------------------------------------------------- | ------------------------- | ----------- | -| `autofocus` | `autofocus` | Automatically focus the form control when the page is loaded. | `boolean` | `false` | -| `checked` | `checked` | Indicates whether the radio button is selected. | `boolean` | `false` | -| `disabled` | `disabled` | Disabled state of the radio. | `boolean` | `undefined` | -| `form` | `form` | Associates the control with a form element. | `string` | `undefined` | -| `invalid` | `invalid` | Set this property to `true` in order to mark the radio visually as invalid. | `boolean` | `undefined` | -| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | -| `mode` | `mode` | Display mode. | `"danger" \| "highlight"` | `undefined` | -| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` | -| `readonly` | `readonly` | The value is not editable. | `boolean` | `undefined` | -| `ref` | `ref` | reference to component | `any` | `undefined` | -| `required` | `required` | Set this property to `true` in order to mark the checkbox as required. | `boolean` | `undefined` | -| `tone` | `tone` | radio tone. Use `'dark'` on white backgrounds. Default is a light tone. | `"dark"` | `undefined` | -| `value` | `value` | The input value. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | --------------------------------------------------------------------------- | ------------------------- | ----------- | +| `autofocus` | `autofocus` | Automatically focus the form control when the page is loaded. | `boolean` | `false` | +| `checked` | `checked` | Indicates whether the radio button is selected. | `boolean` | `false` | +| `disabled` | `disabled` | Disabled state of the radio. | `boolean` | `undefined` | +| `form` | `form` | Associates the control with a form element. | `string` | `undefined` | +| `invalid` | `invalid` | Set this property to `true` in order to mark the radio visually as invalid. | `boolean` | `undefined` | +| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the input. | `number` | `undefined` | +| `mode` | `mode` | Display mode. | `"danger" \| "highlight"` | `undefined` | +| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` | +| `readonly` | `readonly` | The value is not editable. | `boolean` | `undefined` | +| `ref` | `ref` | reference to component | `any` | `undefined` | +| `required` | `required` | Set this property to `true` in order to mark the checkbox as required. | `boolean` | `undefined` | +| `tone` | `tone` | radio tone. Use `'dark'` on white backgrounds. Default is a light tone. | `"dark"` | `undefined` | +| `value` | `value` | The input value. | `string` | `undefined` | ## Methods diff --git a/src/liquid/components/ld-radio/test/ld-radio.e2e.ts b/src/liquid/components/ld-radio/test/ld-radio.e2e.ts index c2c8ed4c32..d4401b6142 100644 --- a/src/liquid/components/ld-radio/test/ld-radio.e2e.ts +++ b/src/liquid/components/ld-radio/test/ld-radio.e2e.ts @@ -1,8 +1,6 @@ import { getPageWithContent } from '../../../utils/e2e-tests' import { LdRadio } from '../ld-radio' -jest.useRealTimers() - const tones = [undefined, 'dark'] const checkedStates = [false, true] diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx index a4e0c38343..97b77f7c76 100644 --- a/src/liquid/components/ld-select/ld-select.tsx +++ b/src/liquid/components/ld-select/ld-select.tsx @@ -62,6 +62,9 @@ export class LdSelect implements InnerFocusable { /** Set this property to `true` in order to mark the select visually as invalid. */ @Prop() invalid: boolean + /** Tab index of the trigger button. */ + @Prop() ldTabindex = 0 + /** * Constrains the height of the trigger button by replacing overflowing selection * with a "+X more" indicator. @@ -1000,7 +1003,11 @@ export class LdSelect implements InnerFocusable { class={getClassNames(triggerCl)} role="button" part="btn-trigger focusable" - tabindex={this.disabled && !this.ariaDisabled ? undefined : '0'} + tabindex={ + this.disabled && !this.ariaDisabled + ? undefined + : this.ldTabindex + } aria-disabled={ this.disabled || this.ariaDisabled ? 'true' : 'false' } diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md index 449bfcf689..3f5a0eeaeb 100644 --- a/src/liquid/components/ld-select/readme.md +++ b/src/liquid/components/ld-select/readme.md @@ -1233,6 +1233,7 @@ The `ld-select` Web Component provides a low level API for integrating it with t | `form` | `form` | The form element to associate the select with (its form owner). | `string` | `undefined` | | `invalid` | `invalid` | Set this property to `true` in order to mark the select visually as invalid. | `boolean` | `undefined` | | `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the trigger button. | `number` | `0` | | `maxRows` | `max-rows` | Constrains the height of the trigger button by replacing overflowing selection with a "+X more" indicator. | `number` | `undefined` | | `mode` | `mode` | Display mode. | `"detached" \| "ghost" \| "inline"` | `undefined` | | `multiple` | `multiple` | Multiselect mode. | `boolean` | `undefined` | diff --git a/src/liquid/components/ld-select/test/ld-select.e2e.ts b/src/liquid/components/ld-select/test/ld-select.e2e.ts index d8e8d426f6..f5a13bbf8a 100644 --- a/src/liquid/components/ld-select/test/ld-select.e2e.ts +++ b/src/liquid/components/ld-select/test/ld-select.e2e.ts @@ -1,8 +1,6 @@ import { getPageWithContent } from '../../../utils/e2e-tests' import { LdSelect } from '../ld-select' -jest.useRealTimers() - const selectIcon = ` { it('renders', async () => { - const page = await newE2EPage() - await page.setContent('') + const page = await getPageWithContent('') const element = await page.find('ld-sr-live') expect(element).toHaveClass('hydrated') diff --git a/src/liquid/components/ld-sr-only/test/ld-sr-only.e2e.ts b/src/liquid/components/ld-sr-only/test/ld-sr-only.e2e.ts index 8e4028d19d..da39501913 100644 --- a/src/liquid/components/ld-sr-only/test/ld-sr-only.e2e.ts +++ b/src/liquid/components/ld-sr-only/test/ld-sr-only.e2e.ts @@ -1,11 +1,10 @@ -import { newE2EPage } from '@stencil/core/testing' - -jest.useRealTimers() +import { getPageWithContent } from '../../../utils/e2e-tests' describe('ld-sr-only', () => { it('renders', async () => { - const page = await newE2EPage() - await page.setContent('Hello screen reader') + const page = await getPageWithContent( + 'Hello screen reader' + ) const element = await page.find('ld-sr-only') expect(element).toHaveClass('hydrated') diff --git a/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx b/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx index f4ee4781a3..edc9400406 100644 --- a/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx +++ b/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx @@ -29,14 +29,17 @@ export class LdTab implements InnerFocusable { private btnRef: HTMLButtonElement /** - * If present, this boolean attribute indicates that the tab is selected. + * Disables the tab. */ - @Prop({ mutable: true, reflect: true }) selected?: boolean + @Prop() disabled?: boolean + + /** Tab index of the tab. */ + @Prop() ldTabindex: number | undefined /** - * Disables the tab. + * If present, this boolean attribute indicates that the tab is selected. */ - @Prop() disabled?: boolean + @Prop({ mutable: true, reflect: true }) selected?: boolean /** * Focuses the tab @@ -84,7 +87,7 @@ export class LdTab implements InnerFocusable { part="button focusable" ref={(el) => (this.btnRef = el as HTMLButtonElement)} role="tab" - tabindex={this.selected ? undefined : '-1'} + tabindex={this.selected ? this.ldTabindex : '-1'} > diff --git a/src/liquid/components/ld-tabs/ld-tab/readme.md b/src/liquid/components/ld-tabs/ld-tab/readme.md index 0745e6e1c7..86c45d93f8 100644 --- a/src/liquid/components/ld-tabs/ld-tab/readme.md +++ b/src/liquid/components/ld-tabs/ld-tab/readme.md @@ -21,12 +21,13 @@ Please refer to the [`ld-tabs` documentation](components/ld-tabs) for usage exam ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------- | ------------------ | ----------- | -| `disabled` | `disabled` | Disables the tab. | `boolean` | `undefined` | -| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | -| `ref` | `ref` | reference to component | `any` | `undefined` | -| `selected` | `selected` | If present, this boolean attribute indicates that the tab is selected. | `boolean` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ---------------------------------------------------------------------- | ------------------ | ----------- | +| `disabled` | `disabled` | Disables the tab. | `boolean` | `undefined` | +| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the tab. | `number` | `undefined` | +| `ref` | `ref` | reference to component | `any` | `undefined` | +| `selected` | `selected` | If present, this boolean attribute indicates that the tab is selected. | `boolean` | `undefined` | ## Events diff --git a/src/liquid/components/ld-tabs/test/ld-tabs.e2e.ts b/src/liquid/components/ld-tabs/test/ld-tabs.e2e.ts index a28270163e..a13fd540b5 100644 --- a/src/liquid/components/ld-tabs/test/ld-tabs.e2e.ts +++ b/src/liquid/components/ld-tabs/test/ld-tabs.e2e.ts @@ -1,7 +1,5 @@ import { getPageWithContent } from 'src/liquid/utils/e2e-tests' -jest.useRealTimers() - const rounded = ['all', 'all-lg', 'top', 'top-lg'] const sizes = ['sm', 'lg'] diff --git a/src/liquid/components/ld-toggle/ld-toggle.tsx b/src/liquid/components/ld-toggle/ld-toggle.tsx index 8fa8534e66..8a3db3b758 100644 --- a/src/liquid/components/ld-toggle/ld-toggle.tsx +++ b/src/liquid/components/ld-toggle/ld-toggle.tsx @@ -52,6 +52,9 @@ export class LdToggle implements InnerFocusable, ClonesAttributes { /** Set this property to `true` in order to mark the checkbox visually as invalid. */ @Prop() invalid: boolean + /** Tab index of the input. */ + @Prop() ldTabindex: number | undefined + /** Used to specify the name of the control. */ @Prop() name: string @@ -195,14 +198,15 @@ export class LdToggle implements InnerFocusable, ClonesAttributes { (this.input = ref)} required={this.required} + tabIndex={this.ldTabindex} type="checkbox" - checked={this.checked} - disabled={this.disabled} value={this.value} /> diff --git a/src/liquid/components/ld-toggle/readme.md b/src/liquid/components/ld-toggle/readme.md index 05de222ac8..0a60a98b98 100644 --- a/src/liquid/components/ld-toggle/readme.md +++ b/src/liquid/components/ld-toggle/readme.md @@ -444,6 +444,7 @@ Please refer to the [ld-label](components/ld-label/) docs for more information o | `form` | `form` | Associates the control with a form element. | `string` | `undefined` | | `invalid` | `invalid` | Set this property to `true` in order to mark the checkbox visually as invalid. | `boolean` | `undefined` | | `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` | +| `ldTabindex` | `ld-tabindex` | Tab index of the input. | `number` | `undefined` | | `name` | `name` | Used to specify the name of the control. | `string` | `undefined` | | `readonly` | `readonly` | The value is not editable. | `boolean` | `undefined` | | `ref` | `ref` | reference to component | `any` | `undefined` | diff --git a/src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts b/src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts index 306b71bafd..f007ef6715 100644 --- a/src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts +++ b/src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts @@ -2,8 +2,6 @@ import { getPageWithContent } from '../../../utils/e2e-tests' import { LdIcon } from '../../ld-icon/ld-icon' import { LdToggle } from '../ld-toggle' -jest.useRealTimers() - const checkedStates = [false, true] const iconStart = ` diff --git a/src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts b/src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts index d51b611396..b96bc7bd5a 100644 --- a/src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts +++ b/src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts @@ -1,7 +1,5 @@ import { getPageWithContent } from '../../../utils/e2e-tests' -jest.useRealTimers() - const positions = [ 'bottom center', 'bottom left', diff --git a/src/liquid/utils/e2e-tests.ts b/src/liquid/utils/e2e-tests.ts index 406797d54d..22242f7249 100644 --- a/src/liquid/utils/e2e-tests.ts +++ b/src/liquid/utils/e2e-tests.ts @@ -4,6 +4,8 @@ import { realpathSync } from 'fs' import * as axe from 'axe-core' import { printReceived } from 'jest-matcher-utils' +jest.useRealTimers() + const PATH_TO_AXE = './node_modules/axe-core/axe.min.js' const appDirectory = realpathSync(process.cwd()) @@ -24,12 +26,11 @@ type Component = Record & { } export const getPageWithContent = async ( - content, + content: string, config?: { bgColor?: string components?: unknown disableAllTransitions?: boolean - enforceAnimationDurationSeconds?: number notWrapped?: boolean } ) => { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index e19d42c4d2..738c215c73 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1,5 +1,6 @@ interface InnerFocusable { focusInner: () => Promise + ldTabindex: number | undefined } interface ClonesAttributes {