rw-elements-tools 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rw-elements-tools",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Build tools for RapidWeaver Elements packs - generates properties.json and hooks.js files",
   "author": "Elements Platform",
   "license": "MIT",

package/shared-hooks/layout/globalActAsGridOrFlexItem.js

@@ -1,3 +1,16 @@
+const getOrderClasses = (orderByBreakpoint = {}, orderCustomByBreakpoint = {}) => {
+  return Object.entries(orderByBreakpoint)
+    .map(([breakpoint, value]) => {
+      const prefix = breakpoint === "base" ? "" : `${breakpoint}:`;
+      const orderValue = value === "order-custom" 
+        ? orderCustomByBreakpoint[breakpoint] 
+        : value;
+      return orderValue ? `${prefix}${orderValue}` : null;
+    })
+    .filter(Boolean)
+    .join(" ");
+};
+
 const globalActAsGridOrFlexItem = (app) => {
   const {
     globalGridOrFlexDisplayAs: displayAs,
@@ -21,10 +34,13 @@ const globalActAsGridOrFlexItem = (app) => {
     // General
     globalGridOrFlexItemAlignSelf: alignSelf,
     globalGridOrFlexItemJustifySelf: justifySelf,
-    globalGridOrFlexItemOrder: order,
-    globalGridOrFlexItemOrderCustom: orderCustom
   } = app.props;
 
+  const {
+    globalGridOrFlexItemOrder: orderByBreakpoint,
+    globalGridOrFlexItemOrderCustom: orderCustomByBreakpoint,
+  } = app.responsiveProps;
+
   if (displayAs == "default") {
     return false;
   }
@@ -40,7 +56,7 @@ const globalActAsGridOrFlexItem = (app) => {
         shrink,
         grow,
         basis == "custom" ? basisCustom : basis,
-        order == "custom" ? orderCustom : order
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
       ] : [])
     );
   }
@@ -56,7 +72,7 @@ const globalActAsGridOrFlexItem = (app) => {
         rowEnd !== "row-end-auto" ? rowEnd : undefined,
         alignSelf,
         justifySelf,
-        order == "custom" ? orderCustom : order
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
       ] : [])
     );
   }