mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Use SVG icons in StreamField buttons and headers 

- Simplify rendering of .c-sf-button and its elements
- replaces the rendering of `.c-sf-button` as a flexbox by a simple
- block element - as it is enough here - and moves text related rules to the <button> element.
- Use SVG icon in StreamField's action buttons
pull/7561/head
Jérôme Lebleu 2021-10-01 17:21:12 +02:00 zatwierdzone przez LB (Ben Johnston)
rodzic 932762c9f1
commit 5522992c29
10 zmienionych plików z 503 dodań i 293 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
CHANGELOG.txt
Wyświetl plik

@ -40,6 +40,7 @@ Changelog
* Added the ability to customise the pre-filled Image title on upload and it now defaults to the filename without the file extension (LB Johnston)
* Add support for Python 3.10 (Matt Westcott)
* Introduce, `autocomplete`, a separate method which performs partial matching on specific autocomplete fields. This is useful for suggesting pages to the user in real-time as they type their query. (Karl Hobley, Matt Westcott)
* Use SVG icons in StreamField buttons and headers (Jérôme Lebleu)
* Fix: Delete button is now correct colour on snippets and modeladmin listings (Brandon Murch)
* Fix: Ensure that StreamBlock / ListBlock-level validation errors are counted towards error counts (Matt Westcott)
* Fix: InlinePanel add button is now keyboard navigatable (Jesse Menn)

1
client/src/components/StreamField/StreamField.scss
Wyświetl plik

@ -1,4 +1,5 @@
@use './scss/index' with (
$teal: $color-teal,
$error-color: $color-red,
$font-sans: $font-sans,
);

10
client/src/components/StreamField/blocks/BaseSequenceBlock.js
Wyświetl plik

@ -15,7 +15,9 @@ class ActionButton {
this.dom = $(`
<button type="button" class="c-sf-block__actions__single" title="${h(label)}">
<i class="icon icon-${h(this.icon)}" aria-hidden="true"></i>
<svg class="icon icon-${h(this.icon)}" aria-hidden="true">
<use href="#icon-${h(this.icon)}"></use>
</svg>
</button>
`);
@ -119,9 +121,9 @@ export class BaseSequenceChild extends EventEmitter {
<div class="c-sf-container__block-container">
<div class="c-sf-block">
<div data-block-header class="c-sf-block__header c-sf-block__header--collapsible">
<span class="c-sf-block__header__icon">
<i class="icon icon-${h(this.blockDef.meta.icon)}"></i>
</span>
<svg class="icon icon-${h(this.blockDef.meta.icon)} c-sf-block__header__icon" aria-hidden="true">
<use href="#icon-${h(this.blockDef.meta.icon)}"></use>
</svg>
<h3 data-block-title class="c-sf-block__header__title"></h3>
<div class="c-sf-block__actions" data-block-actions>
<span class="c-sf-block__type">${h(this.blockDef.meta.label)}</span>

8
client/src/components/StreamField/blocks/StreamBlock.js
Wyświetl plik

@ -87,10 +87,10 @@ class StreamBlockMenu extends BaseInsertionControl {
blockDefs.forEach(blockDef => {
const button = $(`
<button type="button" class="c-sf-button action-add-block-${h(blockDef.name)}">
<span class="c-sf-button__icon">
<i class="icon icon-${h(blockDef.meta.icon)}"></i>
</span>
<span class="c-sf-button__label">${h(blockDef.meta.label)}</span>
<svg class="icon icon-${h(blockDef.meta.icon)} c-sf-button__icon" aria-hidden="true">
<use href="#icon-${h(blockDef.meta.icon)}"></use>
</svg>
${h(blockDef.meta.label)}
</button>
`);
grid.append(button);

330
client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
Wyświetl plik

@ -21,20 +21,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -64,20 +72,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -107,20 +123,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -165,20 +189,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -208,20 +240,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -266,20 +306,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -309,20 +357,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -367,20 +423,28 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -410,20 +474,28 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -468,20 +540,28 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -511,20 +591,28 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -569,20 +657,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -612,20 +708,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -670,20 +774,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -713,20 +825,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\"></span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">

362
client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
Wyświetl plik

@ -25,20 +25,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -73,20 +81,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -121,20 +137,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -188,20 +212,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -236,20 +268,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -303,20 +343,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -351,20 +399,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -418,20 +474,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -466,20 +530,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -533,20 +605,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -570,15 +650,15 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"\\" aria-hidden=\\"false\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"><div class=\\"c-sf-add-panel__grid\\"><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_a\\">
<span class=\\"c-sf-button__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<span class=\\"c-sf-button__label\\">Test Block A</span>
<svg class=\\"icon icon-placeholder c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
Test Block A
</button><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_b\\">
<span class=\\"c-sf-button__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<span class=\\"c-sf-button__label\\">Test Block B</span>
<svg class=\\"icon icon-pilcrow c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
Test Block B
</button></div></div>
</div>
</div><div aria-hidden=\\"false\\" data-contentpath=\\"2\\">
@ -591,20 +671,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -658,20 +746,28 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block A</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -706,20 +802,28 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block B</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -762,15 +866,15 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"\\" aria-hidden=\\"false\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"><div class=\\"c-sf-add-panel__grid\\"><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_a\\">
<span class=\\"c-sf-button__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<span class=\\"c-sf-button__label\\">Test Block &lt;A&gt;</span>
<svg class=\\"icon icon-placeholder c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
Test Block &lt;A&gt;
</button><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_b\\">
<span class=\\"c-sf-button__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<span class=\\"c-sf-button__label\\">Test Block &lt;B&gt;</span>
<svg class=\\"icon icon-pilcrow c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
Test Block &lt;B&gt;
</button></div></div>
</div>
</div><div aria-hidden=\\"false\\" data-contentpath=\\"1\\">
@ -783,20 +887,28 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-placeholder\\"></i>
</span>
<svg class=\\"icon icon-placeholder c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block &lt;A&gt;</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete &amp; kill with fire\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">
@ -831,20 +943,28 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
<div class=\\"c-sf-container__block-container\\">
<div class=\\"c-sf-block\\">
<div data-block-header=\\"\\" class=\\"c-sf-block__header c-sf-block__header--collapsible\\">
<span class=\\"c-sf-block__header__icon\\">
<i class=\\"icon icon-pilcrow\\"></i>
</span>
<svg class=\\"icon icon-pilcrow c-sf-block__header__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
<h3 data-block-title=\\"\\" class=\\"c-sf-block__header__title\\"></h3>
<div class=\\"c-sf-block__actions\\" data-block-actions=\\"\\">
<span class=\\"c-sf-block__type\\">Test Block &lt;B&gt;</span>
<button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move up\\">
<i class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Move down\\" disabled=\\"disabled\\">
<i class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Duplicate\\">
<i class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"c-sf-block__actions__single\\" title=\\"Delete &amp; kill with fire\\">
<i class=\\"icon icon-bin\\" aria-hidden=\\"true\\"></i>
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div data-block-content=\\"\\" class=\\"c-sf-block__content\\" aria-hidden=\\"false\\">

1
client/src/components/StreamField/scss/_variables.scss
Wyświetl plik

@ -31,3 +31,4 @@ $screen-xs-max: 799px !default;
$screen-sm-min: 800px !default;
$screen-l-min: 1075px !default;
$add-panel-gutter: 8px !default;
$font-sans: 'Open Sans', sans-serif !default;

30
client/src/components/StreamField/scss/components/c-sf-block.scss
Wyświetl plik

@ -58,8 +58,9 @@
}
&__icon {
width: 20px;
height: 20px;
margin: 0 $header-gutter;
font-size: 20px;
transition: color $hover-transition-duration ease-in-out;
}
}
@ -84,14 +85,14 @@
cursor: pointer;
color: $header-text-color;
opacity: 1;
transition: opacity $hover-transition-duration ease-in-out, background-color $hover-transition-duration ease-in-out;
transition-property: opacity, color, background-color;
font-size: $action-font-size;
transition: opacity $hover-transition-duration ease-in-out, color $hover-transition-duration ease-in-out, background-color $hover-transition-duration ease-in-out;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 1;
font-size: $action-font-size;
text-align: center;
padding: 0 8px;
padding: 0;
&:not(:last-of-type) {
margin-right: 3px;
@ -99,23 +100,14 @@
&:focus,
&:hover {
color: #333;
background-color: rgba(0, 0, 0, 0.05);
/* stylelint-disable-next-line max-nesting-depth */
i {
color: #333;
}
}
i {
font-style: normal;
transition: color $hover-transition-duration ease-in-out;
/* stylelint-disable-next-line max-nesting-depth */
&:before {
vertical-align: top;
margin: 0 0 0 -2px;
}
svg.icon {
width: 1em;
height: 1em;
vertical-align: middle;
}
&[disabled] {

52
client/src/components/StreamField/scss/components/c-sf-button.scss
Wyświetl plik

@ -1,9 +1,13 @@
.c-sf-button {
$root: &;
display: flex;
flex: 1 1 200px;
margin: $add-panel-gutter;
appearance: none;
color: #333;
line-height: 1.833;
font-weight: 600;
font-size: 12px;
font-family: $font-sans;
text-align: left;
background: #eee;
padding: $type-button-padding-vertical $type-button-padding-horizontal;
border: 1px solid #e6e6e6;
@ -11,17 +15,12 @@
outline: none;
cursor: pointer;
overflow: hidden;
transition: background-color $hover-transition-duration ease-in-out;
justify-content: center;
transition: background-color $hover-transition-duration ease-in-out, color $hover-transition-duration ease-in-out;
&:hover,
&:focus {
color: #fff;
background-color: $teal;
#{$root}__icon,
#{$root}__label {
color: #fff;
}
}
&[disabled] {
@ -29,37 +28,10 @@
pointer-events: none;
}
// Fallback for no `grid` support in IE11
/* stylelint-disable-next-line scss/media-feature-value-dollar-variable */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: inline-block;
margin: 0 10px 10px 0;
}
&__icon,
&__label {
display: inline-block;
// Fixes for label elements getting global `label` styles from Wagtail -@jonnyscholes
color: #333;
font-weight: 600;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
transition: color $hover-transition-duration ease-in-out;
}
&__icon {
font-size: 16px;
padding-right: $type-button-padding-horizontal;
.icon {
&::before {
vertical-align: initial;
}
}
}
&__label {
padding-top: 2px;
width: 16px;
height: 16px;
margin-right: 0.5em;
vertical-align: text-top;
}
}

1
docs/releases/2.15.rst
Wyświetl plik

@ -56,6 +56,7 @@ Other features
* Added the ability to customise the pre-filled Image title on upload and it now defaults to the filename without the file extension (LB Johnston)
* Add support for Python 3.10 (Matt Westcott)
* Introduce, ``autocomplete``, a separate method which performs partial matching on specific autocomplete fields. This is useful for suggesting pages to the user in real-time as they type their query. (Karl Hobley, Matt Westcott)
* Use SVG icons in StreamField buttons and headers (Jérôme Lebleu)
Bug fixes
~~~~~~~~~