Adjust spacing and size of logo section and deprecate the dense variant

releases.yml

@@ -20,6 +20,10 @@
       url: /docs/patterns/hero#layouts
       status: New
       notes: We've added new layout options and detailed documentation to the hero pattern.
+    - component: Logo Section / Dense
+      url: /docs/patterns/logo-section#dense
+      status: Deprecated
+      notes: We've deprecated the dense version of the logo section component.
 - version: 4.14.0
   features:
     - component: Links / Anchor headings

scss/_patterns_logo-section.scss

@@ -4,17 +4,16 @@
     @extend %small-caps-text;
   }
 
-  $logo-section-item-size: 8rem; // height of the logos on large screens
-  $logo-section-item-size-medium: 6rem; // height of the logos on medium screens
+  $logo-section-item-size: 6.5rem; // height of the logos on large screens
   $logo-section-item-size-small: 4rem; // height of the logos on small screens
 
   $logo-section-offset: 1rem; // offset by which rows are pulled closer together
-  $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens
   $logo-section-offset-small: 0.5rem; // height of the logos on small screens
 
-  $logo-section-item-gap: 3rem;
-  $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap);
+  $logo-section-item-gap: 2rem;
 
+  // TODO: Remove .p-logo-section--dense since it's been deprecated in favor
+  // of just using .p-logo-section instead
   .p-logo-section,
   .p-logo-section--dense {
     .p-logo-section__item {
@@ -25,11 +24,6 @@
       margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
 
       @media (min-width: $breakpoint-small) {
-        margin-bottom: calc(-1 * $logo-section-offset-medium);
-        margin-top: calc(-1 * $logo-section-offset-medium);
-      }
-
-      @media (min-width: $breakpoint-large) {
         margin-bottom: calc(-1 * $logo-section-offset);
         margin-top: calc(-1 * $logo-section-offset);
       }
@@ -42,10 +36,6 @@
       width: auto;
 
       @media (min-width: $breakpoint-small) {
-        height: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         height: $logo-section-item-size;
       }
     }
@@ -58,36 +48,12 @@
       padding-top: $logo-section-offset-small;
 
       @media (min-width: $breakpoint-small) {
-        padding-bottom: $logo-section-offset-medium;
-        padding-top: $logo-section-offset-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         padding-bottom: $logo-section-offset;
         padding-top: $logo-section-offset;
       }
     }
   }
 
-  .p-logo-section--dense {
-    .p-logo-section__item {
-      display: inline-block;
-      margin: 0;
-      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
-      margin-right: $logo-section-item-gap-dense;
-      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
-    }
-
-    .p-logo-section__logo {
-      height: $logo-section-item-size-small;
-    }
-
-    .p-logo-section__items {
-      padding-bottom: $logo-section-offset-small;
-      padding-top: $logo-section-offset-small;
-    }
-  }
-
   // fallback for old logo sections that may have logos not properly aligned by design team
   .p-logo-section.has-misaligned-images,
   .p-logo-section--dense.has-misaligned-images {
@@ -98,10 +64,6 @@
       width: $logo-section-item-size-small;
 
       @media (min-width: $breakpoint-small) {
-        width: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         width: $logo-section-item-size;
       }
     }

scss/standalone/patterns_logo-section.scss

@@ -6,5 +6,8 @@
 // Used to keep the background dark on the dark logo section
 @include vf-p-strip;
 
+// Needed for .u-align--center
+@include vf-u-align;
+
 // Needed for .u-fixed-width
 @include vf-u-layout;

templates/docs/patterns/logo-section/index.md

@@ -25,6 +25,13 @@ View example of the logo section pattern inside a six column parent container
 
 ## Dense
 
+<div class="p-notification--caution">
+  <div class="p-notification__content">
+    <h3 class="p-notification__title">Deprecated</h3>
+    <p class="p-notification__message">The dense variant is deprecated. Use the default <code>.p-logo-section</code> instead.</p>
+  </div>
+</div>
+
 If you need to show more smaller logos you can use dense version of logo section with `p-logo-section--dense`.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/logo-section/logo-section-dense/" class="js-example">