Merge pull request #40 from hlxsites/grid

Add Grid and Grid-item components

.stylelintrc.json

@@ -3,6 +3,7 @@
   "rules": {
     "no-descending-specificity": null,
     "custom-property-pattern": null,
+    "declaration-block-no-redundant-longhand-properties": null,
     "selector-class-pattern": [
       "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$",
       {

blocks/accordion/accordion.js

@@ -10,7 +10,7 @@ export default class Accordion extends ComponentBase {
         button: {
           componentName: 'button',
           loaderConfig: {
-            targetsSelectorsPrefix: ':scope > :is(:nth-child(even)) >',
+            targetsSelectorsPrefix: ':scope > :is(:nth-child(even))',
           },
         },
       },

blocks/button/button.css

@@ -16,7 +16,7 @@ raqn-button {
 
 raqn-button :where(a, button) {
   display: inline-flex;
-  line-height: var(--icon-size, 1em);
+  line-height: var(--icon-size, 1);
   background: var(--accent-background, #000);
   color: var(--accent-text, #fff);
   text-transform: none;

blocks/column/column.js

@@ -5,12 +5,13 @@ export default class Column extends ComponentBase {
 
   connected() {
     this.position = parseInt(this.dataset.position, 10);
-    this.dataset.justify ??= 'stretch';
     this.calculateGridTemplateColumns();
   }
 
   calculateGridTemplateColumns() {
-    this.style.setProperty('justify-content', this.dataset.justify);
+    if (this.dataset.justify) {
+      this.style.setProperty('justify-content', this.dataset.justify);
+    }
     if (this.position) {
       const parent = this.parentElement;
       const children = Array.from(parent.children);

blocks/grid-item/grid-item.css

@@ -0,0 +1,65 @@
+raqn-grid-item {
+  --grid-item-justify: initial;
+  --grid-item-align: initial;
+  --grid-item-order: initial;
+
+  grid-column: initial;
+  grid-row: initial;
+  grid-area: initial;
+  justify-self: var(--grid-item-justify);
+  align-self: var(--grid-item-align);
+  order: var(--grid-item-order);
+}
+
+/* Make grid item sticky */
+raqn-grid-item[data-sticky='true' i] {
+  position: sticky;
+  top: var(--header-height);
+}
+
+/* End */
+
+/* Start Make entire item clickable 
+ * if the first anchor in the grid item is italic
+ */
+raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) {
+  position: relative;
+}
+
+raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) > p:first-child a {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  width: 100%;
+  height: 100%;
+  color: transparent;
+  user-select: none;
+  z-index: 1;
+}
+
+/* Make other anchor or buttons in the grid item still accessible */
+raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) :where(a, button) {
+  position: relative;
+  z-index: 2;
+}
+
+raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) {
+  margin: 0;
+}
+
+/* End */
+
+/* Start Remove unwanted spacing from elements inside grid item */
+raqn-grid-item > :first-child {
+  margin-block-start: 0;
+}
+
+raqn-grid-item > :last-child {
+  margin-block-end: 0;
+}
+
+raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) + * {
+  margin-block-start: 0;
+}
+
+/* End */

blocks/grid-item/grid-item.js

@@ -0,0 +1,90 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Grid extends ComponentBase {
+  static observedAttributes = [
+    'data-level',
+    'data-order',
+    'data-sticky',
+    'data-column',
+    'data-row',
+    'data-area',
+    'data-justify',
+    'data-align',
+  ];
+
+  nestedComponentsConfig = {};
+
+  attributesValues = {
+    all: {
+      data: {
+        level: 1,
+      },
+    },
+  };
+
+  setDefaults() {
+    super.setDefaults();
+    this.gridParent = null;
+  }
+
+  get siblingsItems() {
+    return this.gridParent.gridItems.filter((x) => x !== this);
+  }
+
+  get logicalOrder() {
+    return this.gridParent.gridItems.indexOf(this) + 1;
+  }
+
+  get areaName() {
+    return `item-${this.logicalOrder}`;
+  }
+
+  // This method is called by the gridParent when a grid-template-areas is set.
+  setAutoAreaName(add = true) {
+    if (add) {
+      this.dataset.area = this.areaName;
+    } else {
+      delete this.dataset.area;
+    }
+  }
+
+  connected() {
+    this.gridParent ??= this.parentElement;
+  }
+
+  onAttributeOrderChanged({ oldValue, newValue }) {
+    this.setStyleProp('--grid-item-order', oldValue, newValue);
+  }
+
+  // grid-column doesn't work with value from css variable;
+  onAttributeColumnChanged({ oldValue, newValue }) {
+    this.setStyleProp('grid-column', oldValue, newValue);
+  }
+
+  // grid-row doesn't work with value from css variable;
+  onAttributeRowChanged({ oldValue, newValue }) {
+    this.setStyleProp('grid-row', oldValue, newValue);
+  }
+
+  // grid-area doesn't work with value from css variable;
+  onAttributeAreaChanged({ oldValue, newValue }) {
+    this.setStyleProp('grid-area', oldValue, newValue);
+  }
+
+  onAttributeJustifyChanged({ oldValue, newValue }) {
+    this.setStyleProp('--grid-item-justify', oldValue, newValue);
+  }
+
+  onAttributeAlignChanged({ oldValue, newValue }) {
+    this.setStyleProp('--grid-item-align', oldValue, newValue);
+  }
+
+  setStyleProp(prop, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (newValue) {
+      this.style.setProperty(prop, newValue);
+    } else {
+      this.style.removeProperty(prop);
+    }
+  }
+}

blocks/grid/grid.css

@@ -0,0 +1,43 @@
+raqn-grid {
+  /* Set to initial to prevent inheritance for nested grids */
+  --grid-height: initial;
+  --grid-width: 100%;
+  --grid-justify-items: initial;
+  --grid-align-items: initial;
+  --grid-justify-content: initial;
+  --grid-align-content: initial;
+  --grid-columns: initial;
+  --grid-rows: initial;
+  --grid-auto-columns: initial;
+  --grid-auto-rows: initial;
+  --grid-tpl-areas: initial;
+  --grid-tpl-columns: repeat(var(--grid-columns, 2), 1fr);
+  --grid-tpl-rows: repeat(var(--grid-rows, 0), 1fr);
+  --grid-background: var(--background, black);
+  --grid-color: var(--text, white);
+
+  display: grid;
+
+  /* defaults to 2 columns */
+  grid-template-columns: var(--grid-tpl-columns);
+  grid-template-rows: var(--grid-tpl-rows);
+  grid-template-areas: var(--grid-tpl-areas);
+  grid-auto-columns: var(--grid-auto-columns);
+  grid-auto-rows: var(--grid-auto-rows);
+  gap: var(--gap, 20px);
+  justify-items: var(--grid-justify-items);
+  align-items: var(--grid-align-items);
+  justify-content: var(--grid-justify-content);
+  align-content: var(--grid-align-content);
+  height: var(--grid-height);
+  background: var(--grid-background);
+  color: var(--grid-color);
+}
+
+/* 
+ * First level grids will (as any other block) will act as a container
+ * and width should not be applied.
+ */
+raqn-grid:not(main > div > raqn-grid) {
+  width: var(--grid-width);
+}