Merge pull request #101 from springload/feature/streamfield-wrappers-…

…and-featured-tile-style Streamfield wrapper overhaul and featured tiles style
springload · Jun 14, 2024 · 15d390d · 15d390d
2 parents 6893743 + ca32a44
commit 15d390d
Show file tree

Hide file tree

Showing 32 changed files with 363 additions and 320 deletions.
diff --git a/cdhweb/pages/templates/cdhpages/blocks/feature_block.html b/cdhweb/pages/templates/cdhpages/blocks/feature_block.html
@@ -1,25 +1,28 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 {% image self.image width-400 as img_base %}
-<div class="feature">
-    <div class="feature__text-content">
-      <h2>{{ self.heading }}</h2>
-      {{ self.feature_text|richtext }}
-      {% if self.cta_buttons %}
-        {% include_block self.cta_buttons %}
-      {% endif %}
-    </div>
 
-    {% image self.image width-750 as img_base %}
-    {% image self.image width-1200 as img_sm %}
-    {% image self.image width-1400 as img_md %}
+<div class="block block--feature">
+  <div class="feature">
+      <div class="feature__text-content">
+        <h2>{{ self.heading }}</h2>
+        {{ self.feature_text|richtext }}
+        {% if self.cta_buttons %}
+          {% include_block self.cta_buttons %}
+        {% endif %}
+      </div>
 
-    <picture class="feature__img">
-      <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
-      <source srcset="{{ img_md.url }}" media="(min-width: 768px)">
-      <img 
-        src="{{ img_base.url }}" 
-        alt="{{ self.alt_text|default:img_base.alt }}"
-        loading="lazy"
-    />
-  </picture>
+      {% image self.image width-750 as img_base %}
+      {% image self.image width-1200 as img_sm %}
+      {% image self.image width-1400 as img_md %}
+
+      <picture class="feature__img">
+        <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
+        <source srcset="{{ img_md.url }}" media="(min-width: 768px)">
+        <img 
+          src="{{ img_base.url }}" 
+          alt="{{ self.alt_text|default:img_base.alt }}"
+          loading="lazy"
+      />
+    </picture>
+  </div>
 </div>
diff --git a/cdhweb/pages/templates/cdhpages/blocks/image_block.html b/cdhweb/pages/templates/cdhpages/blocks/image_block.html
@@ -17,47 +17,48 @@
     {% image self.image width-2300 as img_xxxl %}
 {% endif %}
 
-<figure class="sk-image sk-image--{{ self.size }}">    
-    <picture>
-        {% if img_sm %}
-            <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
-        {% endif %}
-        {% if img_md %}
-            <source srcset="{{ img_md.url }}" media="(min-width: 768px)">
-        {% endif %}
-        {% if img_lg %}
-            <source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
-        {% endif %}
-        {% if img_xl %}
-            <source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
-        {% endif %}
-        {% if img_xxl %}
-            <source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
-        {% endif %}
-        {% if img_xxxl %}
-            <source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
-        {% endif %}
-        <img class="sk-image__img"
-            src="{{ img_base.url }}" 
-            alt="{{ self.alt_text|default:img_base.alt }}"
-            loading="lazy"
-            style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
-        />
-    </picture>
-
-    {% if self.credit or self.caption %}
-        <figcaption class="sk-image__text-content">
-            {% if self.credit %}
-                <div class="sk-image__credit">
-                    {{ self.credit|richtext }}
-                </div>
+<div class="block block--image">
+    <figure class="sk-image sk-image--{{ self.size }}">    
+        <picture>
+            {% if img_sm %}
+                <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
+            {% endif %}
+            {% if img_md %}
+                <source srcset="{{ img_md.url }}" media="(min-width: 768px)">
+            {% endif %}
+            {% if img_lg %}
+                <source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
             {% endif %}
-            {% if self.caption %}
-                <div class="sk-image__caption">
-                    {{ self.caption|richtext }}
-                </div>
+            {% if img_xl %}
+                <source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
             {% endif %}
-        </figcaption>
-    {% endif %}
-</figure>
+            {% if img_xxl %}
+                <source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
+            {% endif %}
+            {% if img_xxxl %}
+                <source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
+            {% endif %}
+            <img class="sk-image__img"
+                src="{{ img_base.url }}" 
+                alt="{{ self.alt_text|default:img_base.alt }}"
+                loading="lazy"
+                style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
+            />
+        </picture>
 
+        {% if self.credit or self.caption %}
+            <figcaption class="sk-image__text-content">
+                {% if self.credit %}
+                    <div class="sk-image__credit">
+                        {{ self.credit|richtext }}
+                    </div>
+                {% endif %}
+                {% if self.caption %}
+                    <div class="sk-image__caption">
+                        {{ self.caption|richtext }}
+                    </div>
+                {% endif %}
+            </figcaption>
+        {% endif %}
+    </figure>
+</div>
diff --git a/cdhweb/pages/templates/cdhpages/blocks/rich_text.html b/cdhweb/pages/templates/cdhpages/blocks/rich_text.html
@@ -1,2 +1,4 @@
 {% load wagtailcore_tags %}
-{{ self | richtext }}
+<div class="block block--paragraph">
+  {{ self | richtext }}
+</div>
diff --git a/cdhweb/pages/templates/cdhpages/blocks/table_block.html b/cdhweb/pages/templates/cdhpages/blocks/table_block.html
@@ -2,30 +2,32 @@
 
 {# Note: This is actually a wagtail typed table, not a standard wagtail table #}
 
-{# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
-<div class="table-scroll-wrapper" tabindex="0">
-    <table class="table">
-        {% if value.caption %}
-            <caption class="table__caption">{{ value.caption }}</caption>
-        {% endif %}
-        <thead class="table__thead">
-            <tr>
-                {% for col in value.table.columns %}
-                <th class="table__th" scope="col">{{ col.heading }}</th>
+<div class="block block--table">
+    {# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
+    <div class="table-scroll-wrapper" tabindex="0">
+        <table class="table">
+            {% if value.caption %}
+                <caption class="table__caption">{{ value.caption }}</caption>
+            {% endif %}
+            <thead class="table__thead">
+                <tr>
+                    {% for col in value.table.columns %}
+                    <th class="table__th" scope="col">{{ col.heading }}</th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody class="table__tbody">
+                {% for row in value.table.rows %}
+                <tr>
+                    {% for block in row %}
+                    <td class="table__td">{% include_block block %}</td>
+                    {% endfor %}
+                </tr>
                 {% endfor %}
-            </tr>
-        </thead>
-        <tbody class="table__tbody">
-            {% for row in value.table.rows %}
-            <tr>
-                {% for block in row %}
-                <td class="table__td">{% include_block block %}</td>
-                {% endfor %}
-            </tr>
-            {% endfor %}
-        </tbody>        
-    </table>
-</div>
-{% if value.notes %}
-    <div class="table__notes">{{ value.notes }}</div>
-{% endif %}
+            </tbody>        
+        </table>
+    </div>
+    {% if value.notes %}
+        <div class="table__notes">{{ value.notes }}</div>
+    {% endif %}
+</div>
diff --git a/cdhweb/static_src/global/components/cta.scss b/cdhweb/static_src/global/components/cta.scss
@@ -1,4 +1,4 @@
-.block-cta_block {
+.cta {
   border: 1px solid var(--color-brand-100);
   background-color: var(--color-brand-5);
   padding: 24px;

diff --git a/cdhweb/static_src/global/components/newsletter.scss b/cdhweb/static_src/global/components/newsletter.scss
@@ -1,11 +1,11 @@
 /*
 Newsletter streamfield block.
 Note: this uses the same `includes/newsletter_form.html` rendered by in <footer>.
-We don't have a streamfield-specific template for it, therefore we're styling this one 
-the streamfield version based on its wagtail-generated class name `.block-newsletter`.
+We don't have a streamfield-specific template for it, but we conditionally add a 
+`.block--newsletter` wrapper when it's used in a streamfield context.
 */
 
-.block-newsletter {
+.block--newsletter {
   --form-control-border-color: var(--color-grey-80);
   --btn-color: var(--color-black);
   --btn-bg: var(--color-brand-100);

diff --git a/cdhweb/static_src/global/components/tiles.scss b/cdhweb/static_src/global/components/tiles.scss
@@ -1,3 +1,12 @@
+.tiles--featured {
+  @include full-bleed-bg(var(--color-grey-5));
+  padding-block: 40px;
+
+  @include md {
+    padding-block: 72px;
+  }
+}
+
 // Wrapper for component title and 'see more' link, both of
 // which are optional. Only renders if content is present.
 .tiles__title-wrapper {
@@ -34,7 +43,7 @@
   row-gap: 40px;
 
   @include sm {
-    grid-template-columns: repeat(auto-fit, minmax(px2rem(280), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(px2rem(280), 1fr));
     column-gap: 32px;
   }
 }
@@ -48,6 +57,7 @@
 .tile__text {
   grid-row: 2;
   grid-column: 1;
+  background-color: var(--color-white);
   border: 8px solid var(--color-brand-100);
   border-top: none;
   padding: 24px 12px;

diff --git a/cdhweb/static_src/global/components/video.scss b/cdhweb/static_src/global/components/video.scss
@@ -1,5 +1,6 @@
-.sk-video__iframe,
-.block-embed iframe {
+// Apply to both the video block (.sk-video__iframe) and the
+// hosted video block (which we can't access the DOM for)
+.block--video :where(iframe) {
   aspect-ratio: 16/9;
   width: 100%;
   display: block;

diff --git a/cdhweb/static_src/global/layout/streamfields.scss b/cdhweb/static_src/global/layout/streamfields.scss
@@ -7,44 +7,42 @@
   display: flex;
   flex-direction: column;
 
-  & > * + * {
+  & > :where(.block + .block) {
     // Default `lg` space above each streamfield
     margin-block-start: var(--streamfield-space-lg);
 
     // Cases where there should be a `sm` space above:
     &:where(
         :is(
-            .block-image,
-            .block-table,
-            .block-note,
-            .block-paragraph,
-            .block-pull_quote,
-            .block-accordion_block:not(:has(> h2)),
-            .block-embed:not(:has(> h2)),
-            .block-video_block:not(:has(> h2))
+            .block--image,
+            .block--table,
+            .block--note,
+            .block--paragraph,
+            .block--pull-quote,
+            .block--accordion:not(:has(> h2)),
+            .block--video:not(:has(> h2))
           )
       ) {
       margin-block-start: var(--streamfield-space-sm);
     }
 
     // Cases where there should be a `xs` space above:
-    &:where(:is(.block-heading + *)) {
+    &:where(:is(.block--heading + *)) {
       margin-block-start: var(--streamfield-space-xs);
     }
   }
 
   & > * {
     // Cap width of some (most?) streamfield block types
     &:where(
-        .block-accordion_block,
-        .block-table,
-        .block-paragraph,
-        .block-download_block,
-        .block-cta_block,
-        .block-note,
-        .block-pull_quote,
-        .block-video_block,
-        .block-embed
+        .block--accordion,
+        .block--table,
+        .block--paragraph,
+        .block--download,
+        .block--cta,
+        .block--note,
+        .block--pull-quote,
+        .block--video
       ) {
       max-inline-size: var(--reading-max-width);
     }
@@ -53,12 +51,7 @@
   // Outdented components.
   // Tile block title is excluded because it needs to be wrapped in another
   // container to allow the "see all" link to display in line with it.
-  :where(
-      .block-heading,
-      .block-accordion_block > h2,
-      .block-video_block > h2,
-      .block-embed > h2
-    ) {
+  :where(.block--heading, .block--accordion > h2, .block--video > h2) {
     @include md {
       margin-left: calc(-1 * var(--content-outdent));
     }

diff --git a/cdhweb/static_src/global/migrated-content.scss b/cdhweb/static_src/global/migrated-content.scss
@@ -2,7 +2,7 @@
     Regarding content migrated as part of Springload's 2024 rebuild.
     Existing content was dumped into a "migrated" content streamfield block.
 */
-.migrated-content {
+.block--migrated-content {
   :where(h2) {
     @include md {
       margin-left: calc(-1 * var(--content-outdent));

diff --git a/cdhweb/static_src/global/rich-text.scss b/cdhweb/static_src/global/rich-text.scss
@@ -59,7 +59,7 @@
     margin-bottom: var(--space-h6-lg);
   }
 
-  :where(.block-paragraph blockquote) {
+  :where(.block--paragraph blockquote) {
     @include outdented-line-block;
   }
 

diff --git a/templates/blog/blog_post.html b/templates/blog/blog_post.html
@@ -8,9 +8,9 @@
     <div class="content-width grid-standard page-layout page-layout--without-sidenav">
         <div class="page-layout__main-content">
             <div class="streamfields-wrapper">
-                {% if page.body %}
-                    {% include_block page.body %}
-                {% endif %}
+                {% for block in page.body %}
+                    {% include_block block %}
+                {% endfor %}
             </div>
         </div>
     </div>