boxwood 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/container/index.js

@@ -32,7 +32,7 @@ function Container(
       width: 100%;
     }
 
-    @media (max-width: ${width + padding * 2 - 1}px) {
+    @media (max-width: ${width - 1}px) {
       .container {
         max-width: 100%;
       }

package/ui/grid/index.js

@@ -0,0 +1,49 @@
+const { component, css, Div } = require("../..")
+const { normalizeGap, normalizeBreakpoint } = require("../normalize")
+
+function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
+  gap = normalizeGap(gap)
+  breakpoint = normalizeBreakpoint(breakpoint)
+
+  const styleObject = {
+    "box-sizing": "border-box",
+    display: "grid",
+    gap,
+    ...(typeof columns === "number" && {
+      "grid-template-columns": `repeat(${columns}, 1fr)`,
+    }),
+    ...(typeof columns === "string" && {
+      "grid-template-columns": columns,
+    }),
+    ...(typeof columns === "object" &&
+      Object.keys(columns).reduce((object, key) => {
+        if (key === "default") {
+          object["grid-template-columns"] = columns[key]
+        } else {
+          object[`@media (min-width: ${key}px)`] = {
+            "grid-template-columns": columns[key],
+          }
+        }
+        return object
+      }, {})),
+    ...(gap && { gap }),
+    ...(breakpoint && {
+      [`@media (max-width: ${breakpoint})`]: {
+        "grid-template-columns": "1fr",
+      },
+    }),
+  }
+
+  const styles = css`
+    .grid {
+      ${css.create(styleObject).toString()}
+    }
+  `
+
+  return [
+    Div({ className: [styles.grid, className], style }, children),
+    styles.css,
+  ]
+}
+
+module.exports = component(Grid)

package/ui/index.js

@@ -1,9 +1,11 @@
 const Container = require("./container")
+const Grid = require("./grid")
 const Group = require("./group")
 const Stack = require("./stack")
 
 module.exports = {
   Container,
+  Grid,
   Group,
   Stack,
 }