Add block to the styleguide

Author: albinazs

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.yaml

@@ -18,6 +18,6 @@ context:
 
 tags:
   srcset_image:
-    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" class="" alt=""':
+    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
       raw: |
-        <img alt="" class="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
+        <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">

tbx/project_styleguide/templates/patterns/styleguide/components/components.html

@@ -170,17 +170,17 @@ <h2 class="underline mt-8 mb-2">Code block</h2>
         </div>
 
         <div>
-            <h2 class="underline mt-8 mb-2">Imapact report heading block</h2>
+            <h2 class="underline mt-8 mb-2">Impact report heading block</h2>
             {% include "patterns/molecules/streamfield/blocks/impact_report_heading_block.html" %}
         </div>
 
         <div>
-            <h2 class="underline mt-8 mb-2">Imapact report instagram block</h2>
+            <h2 class="underline mt-8 mb-2">Impact report instagram block</h2>
             {% include "patterns/molecules/streamfield/blocks/instagram_gallery_block.html" %}
         </div>
 
         <div>
-            <h2 class="underline mt-8 mb-2">Imapact report small image with text block</h2>
+            <h2 class="underline mt-8 mb-2">Impact report small image with text block</h2>
             {% include "patterns/molecules/streamfield/blocks/small_image_with_text_block.html" %}
         </div>
 
@@ -189,6 +189,11 @@ <h2 class="underline mt-8 mb-2">Table block</h2>
             {% include "patterns/molecules/streamfield/blocks/typed_table_block.html" %}
         </div>
 
+        <div>
+            <h2 class="underline mt-8 mb-2">Division signpost block</h2>
+            {% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}
+        </div>
+
         <div>
             <h2 class="underline mt-8 mb-2">Footer CTA</h2>
             {% include "patterns/molecules/footer-cta/footer-cta.html" with value=partners_data  %}

tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml

@@ -113,7 +113,11 @@ tags:
     # instagram block
     'post.image format-webp fill-{250x250,500x500} sizes="(max-width: 598px) 50vw, (max-width: 1021px) 25vw, (min-width: 1022px) 250px" class="instagram-post__image" loading="lazy"':
       raw: '<img alt="advent-9" class="instagram-post__image" height="250" loading="lazy" sizes="(max-width: 598px) 50vw, (max-width: 1021px) 25vw, (min-width: 1022px) 250px" src="https://picsum.photos/250/250.webp" srcset="https://picsum.photos/250/250.webp 250w, https://picsum.photos/500/500.webp 500w" width="250">'
-  image:
+    # division signpost block
+    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
+      raw: |
+        <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
+      image:
     # company logo for pull quote
     value.logo max-110x70 format-webp class="pullquote__company-logo":
       raw: |