Half grey columns variant #136 (#205)

Netcentric · Feb 6, 2024 · eb48157 · eb48157
1 parent 061e666
commit eb48157
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css
@@ -1,3 +1,13 @@
+.v2-columns-container {
+  overflow: hidden;
+}
+
+/* TODO: refactor generic section/block paddings */
+.v2-columns-container.padding-0 > div {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .v2-columns-container.section--with-background {
   position: relative;
 }
@@ -18,13 +28,25 @@
 }
 
 .v2-columns__column--with-image {
+  position: relative;
   order: 0;
 }
 
 .v2-columns__column--with-image img {
   display: block;
 }
 
+.v2-columns--background-plane .v2-columns__column--with-image::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -16px;
+  right: -16px;
+  z-index: -1;
+  height: 50%;
+  background-color: var(--c-secondary-silver);
+}
+
 .v2-columns__column--with-text .icon,
 .v2-columns__column--with-text svg {
   width: 32px;
@@ -76,7 +98,6 @@
 }
 
 .v2-columns__column--with-text a.button {
-  min-width: auto;
   margin: 0;
 }
 
@@ -103,6 +124,18 @@
     order: unset;
   }
 
+  .v2-columns--background-plane .v2-columns__column--with-image::after {
+    right: 50%;
+    left: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  .v2-columns--background-plane .v2-columns__column--with-text + .v2-columns__column--with-image::after {
+    right: auto;
+    left: 50%;
+  }
+
   .v2-columns .v2-columns__column--with-text {
     padding: 0 56px;
   }

diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js
@@ -1,10 +1,10 @@
-import { variantsClassesToBEM, createElement } from '../../scripts/common.js';
+import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
 
 export default async function decorate(block) {
   const blockParent = block.parentElement.parentElement;
   const blockName = 'v2-columns';
 
-  const variantClasses = ['with-background-image'];
+  const variantClasses = ['with-background-image', 'background-plane'];
   variantsClassesToBEM(block.classList, variantClasses, blockName);
 
   const isBackgroundImageVariant = block.classList.contains(`${blockName}--with-background-image`);