Update section component

canonical · Jul 5, 2023 · c349a41 · c349a41
1 parent 19c2f67
commit c349a41
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 49 deletions.
diff --git a/releases.yml b/releases.yml
@@ -1,5 +1,13 @@
 - version: 4.0.0
   features:
+    - component: Section
+      url: /docs/patterns/section
+      status: Updated
+      notes: We've updated the section component with new shallow and deep options.
+    - component: Block
+      url: /docs/patterns/section#shallow-sections
+      status: Deprecated
+      notes: The block component should is deprecated, use shallow section instead.
     - component: Border radius setting
       url: /docs/settings/placeholder-settings
       status: Deprecated

diff --git a/scss/_patterns_section.scss b/scss/_patterns_section.scss
@@ -8,7 +8,17 @@
     }
   }
 
-  .p-block {
+  .p-section--deep {
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-deep * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-deep;
+    }
+  }
+
+  .p-block, // deprecated, use .p-section--shallow
+  .p-section--shallow {
     // same as %section-padding--shallow
     padding-bottom: $spv--x-large;
   }

diff --git a/scss/_utilities_vertical-spacing.scss b/scss/_utilities_vertical-spacing.scss
@@ -1,4 +1,8 @@
 @mixin vf-u-vertical-spacing($start: -3, $end: 3) {
+  // FIXME
+  // this utility works only on elements that don't have borders or backgrounds
+  // by adding an ::after pseudo-element it extends the inside of the element
+  // rather than modyfing the space after it
   %u-vertical-spacer {
     content: '';
     display: block;

diff --git a/side-navigation.yaml b/side-navigation.yaml
@@ -84,7 +84,7 @@
       url: /docs/patterns/search-and-filter
     - title: Search box
       url: /docs/patterns/search-box
-    - title: Sections and blocks
+    - title: Sections
       url: /docs/patterns/section
     - title: Segmented control
       url: /docs/patterns/segmented-control

diff --git a/templates/docs/examples/layouts/brochure-site/_50-50.html b/templates/docs/examples/layouts/brochure-site/_50-50.html
@@ -1,5 +1,5 @@
 <section class="p-section">
-  <div class="p-block">
+  <div class="p-section--shallow">
     <div class="row">
       <hr class="p-rule">
     </div>
@@ -15,8 +15,7 @@ <h2>Become a customer</h2>
       </div>
     </div>
   </div>
-
-  <div class="p-block">
+  <div class="p-section--shallow">
     <div class="row">
       <hr class="p-rule">
     </div>
@@ -31,7 +30,7 @@ <h2>Free for personal use</h2>
       </div>
     </div>
   </div>
-  <div class="p-block">
+  <div class="p-section--shallow">
     <div class="row">
       <hr class="p-rule">
     </div>

diff --git a/templates/docs/examples/patterns/rule/dark.html b/templates/docs/examples/patterns/rule/dark.html
@@ -6,7 +6,7 @@
 {% block content %}
 
 <div class="p-strip--dark">
-    <div class="u-fixed-width p-block">
+    <div class="u-fixed-width p-section--shallow">
       <hr class="p-rule--highlight is-dark">
       <h2>
         <strong>
@@ -15,7 +15,7 @@ <h2>
           Made for reliability, designed to help you <br>drive down infrastructure costs.
       </h2>
     </div>
-    <div class="p-block">
+    <div class="p-section--shallow">
       <div class="row--25-75">
         <div class="col">
           <hr class="p-rule is-dark">

diff --git a/templates/docs/examples/patterns/section/block.html b/templates/docs/examples/patterns/section/block.html
diff --git a/templates/docs/examples/patterns/section/deep.html b/templates/docs/examples/patterns/section/deep.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Deep{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+<main>
+  <section class="p-section--deep">
+    <hr class="p-rule" />
+    <h3>Deep section</h3>
+    <p>I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page. </p>
+  </section>
+</main>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/section/section.html b/templates/docs/examples/patterns/section/section.html
@@ -7,12 +7,12 @@
 <main>
   <section class="p-section">
     <hr class="p-rule" />
-    <h2>Section</h2>
+    <h3>Section</h3>
     <p>I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page.</p>
   </section>
   <section class="p-section">
     <hr class="p-rule" />
-    <h2>Section</h2>
+    <h3>Section</h3>
     <p>I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page.</p>
   </section>
 </main>

diff --git a/templates/docs/examples/patterns/section/shallow.html b/templates/docs/examples/patterns/section/shallow.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Shallow{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+<section class="p-section">
+  <hr class="p-rule" />
+  <h3>Section</h3>
+  <div class="p-section--shallow">
+    <p>I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. </p>
+  </div>
+  <div class="p-section--shallow">
+    <p>I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. I'm a nested  shallow section. </p>
+  </div>
+</section>
+{% endblock %}
diff --git a/templates/docs/layouts/brochure.md b/templates/docs/layouts/brochure.md
@@ -47,10 +47,10 @@ context:
   </div>
   <div class="row--25-75">
     <div class="col">
-      <div class="p-block">
+      <div class="p-section--shallow">
         <h2>Layouts</h2>
       </div>
-      <div class="p-block">
+      <div class="p-section--shallow">
         <p>
           Layouts are controlled by a responsive grid that has 4, 6 or 12 columns depending on the browser window width.
           Having 12 columns is necessary in order to create versatile layouts, however, it provides far too many choices - few of which work well in a sequence of sections.

diff --git a/templates/docs/migration-guide-to-v4.md b/templates/docs/migration-guide-to-v4.md
@@ -151,13 +151,13 @@ If you are using the `$color-brand` or `$color-accent` variable in any custom st
 
 Before releasing Vanilla 4.0 we started adding new components to help building brochure sites in a new style. While these are not technically new to 4.0, it’s worth taking the migration opportunity and learning more about them, and start using them where feasible.
 
-### Section and block
+### Section
 
-Section and block components are containers that provide spacing between sections and subsections of content on brochure site pages.
+Section components are containers that provide spacing between sections and subsections of content on brochure site pages.
 
-In many cases new section components can replace existing strips (especially the ones that needed to have u-no-padding--top applied). Block component is used within a section.
+In many cases new section components can replace existing strips (especially the ones that needed to have u-no-padding--top applied). Shallow and deep sections allow to adjust spacing as needed.
 
-For more information see [the section and block component documentation](/docs/patterns/section) or [brochure layout guidelines](/docs/layouts/brochure).
+For more information see [the section component documentation](/docs/patterns/section) or [brochure layout guidelines](/docs/layouts/brochure).
 
 ### Rule
 

diff --git a/templates/docs/patterns/section.md b/templates/docs/patterns/section.md
@@ -1,21 +1,19 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Section and block | Components
+  title: Section | Components
 ---
 
-# Sections and blocks
+# Sections
 
 <hr>
 
-Use sections and blocks for different types of elements on the page depending on your markup. They are used for managing the bottom space after each element.
+Use section components to wrap around parts of content on the page. They are used for managing the bottom space after each element.
 
-## Sections
+## Regular sections
 
 Use a section component (`.p-section`) for displaying subsequent sections on the page on a same background. They should be used in place of strips for most of the standard page content.
 
-Sections should not be nested inside each other or inside the strips.
-
 <div class="row">
   <div class="col-6 col-medium-3">
     <div class="p-notification--positive">
@@ -29,7 +27,7 @@ Sections should not be nested inside each other or inside the strips.
     <div class="p-notification--negative">
       <p class="p-notification__content">
         <span class="p-notification__title">Don't:</span>
-        <span class="p-notification__message">If a section of a page has a different background, or needs to be emphasised using deeper spacing use the <a href="/docs/patterns/strip">strip</a> component instead.</span>
+        <span class="p-notification__message">If a section of a page has a different background, use the <a href="/docs/patterns/strip">strip</a> component instead.</span>
       </p>
     </div>
   </div>
@@ -39,12 +37,26 @@ Sections should not be nested inside each other or inside the strips.
 View example of the "section" pattern
 </a></div>
 
-## Blocks
+## Shallow sections
+
+Use a shallow section component (`.p-section--shallow`) to group larger chunks of content inside a single section or strip or to add a shallow spacing to a heading.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/section/shallow" class="js-example">
+View example of the shallow section
+</a></div>
+
+<span class="p-status-label--negative">Deprecated</span>
+
+The block component `.p-block` previously served the same purpose, but is now deprecated and should not be used any more. Use the shallow section component instead.
+
+## Deep sections
+
+In cases when a section needs a deep spacing below it (for example at the bottom of the page), use a deep section component (`.p-section--deep`).
 
-Use a block component (`.p-block`) to group larger chunks of content inside a single section or strip.
+Please not that to emphasize the sections of the page with both top and bottom spacing, a strip component should be used instead.
 
-<div class="embedded-example"><a href="/docs/examples/patterns/section/block" class="js-example">
-View example of the "block" pattern
+<div class="embedded-example"><a href="/docs/examples/patterns/section/deep" class="js-example">
+View example of the shallow section
 </a></div>
 
 ## Import
@@ -57,7 +69,7 @@ To import just this component into your project, copy the snippet below and incl
 @import 'vanilla-framework';
 @include vf-base;
 
-@include vf-p-container;
+@include vf-p-section;
 ```
 
 For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.