feat(shared): allow aligning button, add generic headline block

shared/blocks.py

@@ -289,8 +289,22 @@ class ButtonBlock(blocks.StructBlock):
         help_text="Pokud je zapnuto, tlačítko mění barvu, když na něj uživatel najede myší.",
         required=False,
     )
+    mobile_fullwidth = blocks.BooleanBlock(
+        label="Plná šířka na mobilních zařízeních",
+        default=True,
+        help_text="Pokud je zapnuto, tlačítko se na mobilních zařízeních roztáhne na plnou šířku.",
+        required=False,
+    )
     page = blocks.PageChooserBlock(label="Stránka", required=False)
     link = blocks.URLBlock(label="Odkaz", required=False)
+    align = blocks.ChoiceBlock(
+        choices=(
+            ("auto", "Automaticky"),
+            ("center", "Na střed"),
+        ),
+        label="Zarovnání",
+        default="auto",
+    )
 
     class Meta:
         label = "Tlačítko"
@@ -327,6 +341,86 @@ class ButtonGroupBlock(blocks.StructBlock):
         template = "styleguide/2.3.x/blocks/button_group_block.html"
 
 
+class HeadlineBlock(blocks.StructBlock):
+    headline = blocks.CharBlock(label="Headline", max_length=300, required=True)
+    style = blocks.ChoiceBlock(
+        choices=(
+            ("head-alt-xl", "Bebas XL"),
+            ("head-alt-lg", "Bebas L"),
+            ("head-alt-md", "Bebas M"),
+            ("head-alt-base", "Bebas base"),
+            ("head-alt-sm", "Bebas SM"),
+            ("head-alt-xs", "Bebas XS"),
+            ("head-alt-2xs", "Bebas 2XS"),
+            ("head-heavy-base", "Roboto base"),
+            ("head-heavy-sm", "Roboto SM"),
+            ("head-heavy-xs", "Roboto XS"),
+            ("head-heavy-2xs", "Roboto 2XS"),
+            ("head-allcaps-2xs", "Allcaps 2XS"),
+            ("head-allcaps-3xs", "Allcaps 3XS"),
+            ("head-allcaps-4xs", "Allcaps 4XS"),
+            ("head-heavy-allcaps-2xs", "Allcaps heavy 2XS"),
+            ("head-heavy-allcaps-3xs", "Allcaps heavy 3XS"),
+            ("head-heavy-allcaps-4xs", "Allcaps heavy 4XS"),
+        ),
+        label="Styl",
+        help_text="Náhled si prohlédněte na https://styleguide.pir-test.eu/latest/?p=viewall-atoms-text.",
+        default="head-alt-md",
+        required=True,
+    )
+    tag = blocks.ChoiceBlock(
+        choices=(
+            ("h1", "H1"),
+            ("h2", "H2"),
+            ("h3", "H3"),
+            ("h4", "H4"),
+            ("h5", "H5"),
+            ("h6", "H6"),
+        ),
+        label="Úroveň nadpisu",
+        help_text="Čím nižší číslo, tím vyšší úroveň.",
+        required=True,
+        default="h1",
+    )
+    align = blocks.ChoiceBlock(
+        choices=(
+            ("auto", "Automaticky"),
+            ("center", "Na střed"),
+        ),
+        label="Zarovnání",
+        default="auto",
+        required=True,
+    )
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context)
+        context["responsive_style"] = {
+            "head-alt-xl": "head-alt-lg md:head-alt-xl",
+            "head-alt-lg": "head-alt-md md:head-alt-lg",
+            "head-alt-md": "head-alt-md",
+            "head-alt-base": "head-alt-base",
+            "head-alt-sm": "head-alt-sm",
+            "head-alt-xs": "head-alt-xs",
+            "head-alt-2xs": "head-alt-2xs",
+            "head-heavy-base": "head-heavy-base",
+            "head-heavy-sm": "head-heavy-sm",
+            "head-heavy-xs": "head-heavy-xs",
+            "head-heavy-2xs": "head-heavy-2xs",
+            "head-allcaps-2xs": "head-allcaps-2xs",
+            "head-allcaps-3xs": "head-allcaps-3xs",
+            "head-allcaps-4xs": "head-allcaps-4xs",
+            "head-heavy-allcaps-2xs": "head-heavy-allcaps-2xs",
+            "head-heavy-allcaps-3xs": "head-heavy-allcaps-3xs",
+            "head-heavy-allcaps-4xs": "head-heavy-allcaps-4xs",
+        }[value["style"]]
+        return context
+
+    class Meta:
+        label = "Headline"
+        icon = "bold"
+        template = "styleguide/2.3.x/blocks/headline_block.html"
+
+
 class TwoColumnBlock(blocks.StructBlock):
     left_column_content = blocks.StreamBlock(
         label="Obsah levého sloupce",
@@ -494,6 +588,7 @@ DEFAULT_CONTENT_BLOCKS = [
             label="Textový editor", features=RICH_TEXT_DEFAULT_FEATURES
         ),
     ),
+    ("headline", HeadlineBlock()),
     ("table", TableBlock(template="shared/blocks/table_block.html")),
     ("gallery", GalleryBlock(label="Galerie")),
     ("figure", FigureBlock()),

shared/templates/styleguide/2.3.x/blocks/button_block.html

 {% load wagtailcore_tags wagtailimages_tags %}
 {% firstof self.page.url self.link as target %}
-<a href="{{ target }}" class="btn btn--{{ self.color }} {% if self.hoveractive %}btn--hoveractive{% endif %} {% if self.icon %}btn--icon{% endif %} btn--autowidth text-{{ self.size }}"
+{% if self.align == 'center' %}<div class="text-center">{% endif %}
+<a href="{{ target }}" class="btn btn--{{ self.color }} {% if self.hoveractive %}btn--hoveractive{% endif %} {% if self.icon %}btn--icon{% endif %} text-{{ self.size }} {% if self.mobile_fullwidth %}btn--fullwidth md:btn--autowidth{% else %}btn--autowidth{% endif %}"
 >
     {% if self.icon %}
         <div class="btn__body-wrap">
@@ -11,3 +12,4 @@
         <div class="btn__body ">{{ self.title }}</div>
     {% endif %}
 </a>
+{% if self.align == 'center' %}</div>{% endif %}

shared/templates/styleguide/2.3.x/blocks/headline_block.html

+<{{ self.tag }} class="{{ responsive_style }} {% if self.align == 'center' %}text-center{% endif %}">{{ self.headline }}</{{ self.tag}}>