mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2025-01-07 12:24:18 +00:00
8e4da83908
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
199 lines
10 KiB
Plaintext
199 lines
10 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`Table of contents re-rendering re-renders toc when wikipage.tableOfContents hook is fired with empty sections 1`] = `
|
|
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\"></div>
|
|
"
|
|
`;
|
|
|
|
exports[`Table of contents re-rendering re-renders toc when wikipage.tableOfContents hook is fired with sections 1`] = `
|
|
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\"><div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
|
|
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
|
|
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
|
|
</div>
|
|
<ul class=\\"vector-toc-contents sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
|
|
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a href=\\"#\\" class=\\"vector-toc-link sidebar-toc-link\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">Beginning</div>
|
|
</a>
|
|
</li>
|
|
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#foo\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">1</span>foo</div>
|
|
</a>
|
|
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#bar\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2</span>bar</div>
|
|
</a>
|
|
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle sidebar-toc-toggle\\" aria-expanded=\\"true\\">
|
|
Toggle bar subsection
|
|
</button>
|
|
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2 sidebar-toc-list-item sidebar-toc-level-2\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#baz\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1</span>baz</div>
|
|
</a>
|
|
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3 sidebar-toc-list-item sidebar-toc-level-3\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#qux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1.1</span>qux</div>
|
|
</a>
|
|
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#quux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">3</span>quux</div>
|
|
</a>
|
|
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-bat\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#bat\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">4</span>bat</div>
|
|
</a>
|
|
<ul id=\\"toc-bat-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
"
|
|
`;
|
|
|
|
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is false 1`] = `
|
|
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
|
|
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
|
|
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
|
|
</div>
|
|
<ul class=\\"vector-toc-contents sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
|
|
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a href=\\"#\\" class=\\"vector-toc-link sidebar-toc-link\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">Beginning</div>
|
|
</a>
|
|
</li>
|
|
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#foo\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">1</span>foo</div>
|
|
</a>
|
|
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#bar\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2</span>bar</div>
|
|
</a>
|
|
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle sidebar-toc-toggle\\" aria-expanded=\\"true\\">
|
|
Toggle bar subsection
|
|
</button>
|
|
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2 sidebar-toc-list-item sidebar-toc-level-2\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#baz\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1</span>baz</div>
|
|
</a>
|
|
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3 sidebar-toc-list-item sidebar-toc-level-3\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#qux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1.1</span>qux</div>
|
|
</a>
|
|
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#quux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">3</span>quux</div>
|
|
</a>
|
|
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
"
|
|
`;
|
|
|
|
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is true 1`] = `
|
|
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
|
|
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
|
|
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
|
|
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
|
|
</div>
|
|
<ul class=\\"vector-toc-contents sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
|
|
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a href=\\"#\\" class=\\"vector-toc-link sidebar-toc-link\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">Beginning</div>
|
|
</a>
|
|
</li>
|
|
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#foo\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">1</span>foo</div>
|
|
</a>
|
|
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#bar\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2</span>bar</div>
|
|
</a>
|
|
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle sidebar-toc-toggle\\" aria-expanded=\\"false\\">
|
|
Toggle bar subsection
|
|
</button>
|
|
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2 sidebar-toc-list-item sidebar-toc-level-2\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#baz\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1</span>baz</div>
|
|
</a>
|
|
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3 sidebar-toc-list-item sidebar-toc-level-3\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#qux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">2.1.1</span>qux</div>
|
|
</a>
|
|
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 sidebar-toc-list-item sidebar-toc-level-1\\">
|
|
<a class=\\"vector-toc-link sidebar-toc-link\\" href=\\"#quux\\">
|
|
<div class=\\"vector-toc-text sidebar-toc-text\\">
|
|
<span class=\\"vector-toc-numb sidebar-toc-numb\\">3</span>quux</div>
|
|
</a>
|
|
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list sidebar-toc-list\\">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
"
|
|
`;
|