#414986 review scripts

blocks/columns/columns.css

@@ -7,27 +7,59 @@
   width: 100%;
 }
 
-.columns > div > div {
-  order: 1;
-}
-
-.columns > div > .columns-img-col {
-  order: 0;
-}
-
-.columns > div > .columns-img-col img {
-  display: block;
-}
-
 @media (min-width: 900px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: var(--padding-vertical) var(--padding-horizontal);
+    padding: var(--padding-vertical) var(--padding-horizontal);
+  }
+
+  .columns > div > div:nth-child(1) {
+    flex: var(--column0-flex, 0);
+  }
+
+  .columns > div > div:nth-child(2) {
+    flex: var(--column1-flex, 0);
+  }
+
+  .columns > div > div:nth-child(3) {
+    flex: var(--column2-flex, 0);
+  }
+
+  .columns > div > div:nth-child(4) {
+    flex: var(--column3-flex, 0);
+  }
+
+  .columns > div > div:nth-child(5) {
+    flex: var(--column4-flex, 0);
+  }
+
+  .columns > div > div:nth-child(6) {
+    flex: var(--column5-flex, 0);
+  }
+
+  .columns > div > div:nth-child(7) {
+    flex: var(--column6-flex, 0);
+  }
+
+  .columns > div > div:nth-child(8) {
+    flex: var(--column7-flex, 0);
+  }
+
+  .columns > div > div:nth-child(9) {
+    flex: var(--column8-flex, 0);
+  }
+
+  .columns > div > div:nth-child(10) {
+    flex: var(--column9-flex, 0);
+  }
+
+  .columns > div > div:nth-child(11) {
+    flex: var(--column10-flex, 0);
   }
 
-  .columns > div > div {
-    flex: 1;
-    order: unset;
+  .columns > div > div:nth-child(12) {
+    flex: var(--column11-flex, 0);
   }
 }

blocks/columns/columns.js

@@ -1,18 +1,18 @@
+import {
+  addCssVariables,
+} from '../../scripts/lib-franklin.js';
+
 export default function decorate(block) {
-  const cols = [...block.firstElementChild.children];
-  block.classList.add(`columns-${cols.length}-cols`);
+  const columns = block.querySelectorAll(':scope > div > div');
+  const columnCount = columns.length;
+  // following line regex matches partition sizes separated by dashes like 1-2-3
+  const columnPartionRegex = /^\d{1,}(?:-\d{1,})*$/;
+  const columnPartions = [...block.classList].find((c) => columnPartionRegex.test(c))?.split('-') || [];
 
-  // setup image columns
-  [...block.children].forEach((row) => {
-    [...row.children].forEach((col) => {
-      const pic = col.querySelector('picture');
-      if (pic) {
-        const picWrapper = pic.closest('div');
-        if (picWrapper && picWrapper.children.length === 1) {
-          // picture is only content in column
-          picWrapper.classList.add('columns-img-col');
-        }
-      }
-    });
-  });
+  const variables = {};
+  for (let i = 0; i < columnCount; i += 1) {
+    const partition = columnPartions.length > i ? columnPartions[i] : 1;
+    variables[`column${i}-flex`] = partition;
+  }
+  addCssVariables(block, variables);
 }

blocks/grid/grid.css

@@ -0,0 +1,30 @@
+.section.grid {
+  display: grid;
+  grid-template-columns: var(--grid-template-columns, unset);
+  grid-template-rows: var(--grid-template-rows, unset);
+}
+
+.section.grid .element {
+  grid-column: var(--grid-column-start-position, auto) / var(--grid-column-end-position, auto);
+  grid-row: var(--grid-row-start-position, auto) / var(--grid-row-end-position, auto);
+  width: 100%;
+  max-width: unset;
+  background-color: var(--background-color, transparent);
+  color: var(--text-color);
+  margin: auto;
+}
+
+.section.grid .element .image-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+.section.grid .element img {
+  width: 100%;
+  height: auto;
+}
+
+.section.grid .element p {
+  margin: 0;
+  padding: var(--padding-vertical) var(--padding-horizontal);
+}

blocks/grid/grid.js

@@ -0,0 +1,29 @@
+import {
+  addCssVariables,
+} from '../../scripts/lib-franklin.js';
+
+export default function decorate(block) {
+  const elements = [...block.querySelectorAll(':scope > div')];
+
+  const columnTemplate = elements.find((e) => e.dataset.gridColumns)?.dataset.gridColumns;
+  const rowTemplate = elements.find((e) => e.dataset.gridRows)?.dataset.gridRows;
+  if (columnTemplate || rowTemplate) {
+    addCssVariables(block, {
+      'grid-template-columns': columnTemplate,
+      'grid-template-rows': rowTemplate,
+    });
+  }
+
+  elements.forEach((e) => {
+    e.classList.add('element');
+
+    const [[startColumnPosition, startRowPosition], [endColumnPosition, endRowPosition]] = e.dataset.gridPosition.split(/\s*\/\s*/).map((p) => p.split(/\s*-\s*/));
+
+    addCssVariables(e, {
+      'grid-column-start-position': startColumnPosition,
+      'grid-row-start-position': startRowPosition,
+      'grid-column-end-position': endColumnPosition,
+      'grid-row-end-position': endRowPosition,
+    });
+  });
+}

blocks/header/header.css

@@ -0,0 +1,19 @@
+header a:any-link {
+  color: inherit;
+}
+
+header p,
+header .section.grid .element p {
+  margin: 0;
+  padding: 0;
+}
+
+a.button:any-link {
+  background-color: transparent;
+  color: inherit;
+  font-weight: normal;
+}
+
+a.button:any-link .icon {
+  vertical-align: middle;
+}

blocks/header/header.js

@@ -1,4 +1,3 @@
-// import { getMetadata, decorateIcons } from '../../scripts/lib-franklin.js';
 
 import { ComponentBase } from "../../scripts/component-base.js";
 

blocks/navigation/navigation.css

@@ -0,0 +1,5 @@
+.navigation ul {
+    list-style: none;
+    display: flex;
+    gap: var(--padding-horizontal);
+}

blocks/navigation/navigation.js

@@ -0,0 +1,3 @@
+export default async function decorate(/* block */) {
+  // nop
+}

package.json

@@ -7,6 +7,7 @@
     "lint:js": "eslint .",
     "lint:css": "stylelint blocks/**/*.css styles/*.css",
     "lint": "npm run lint:js && npm run lint:css",
+    "lint:fix": "npm run lint:js -- --fix && npm run lint:css -- --fix",
     "semantic-release": "semantic-release --debug"
   },
   "repository": {