boxwood 2.2.0 → 2.2.1

package/package.json

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

package/ui/Group/index.js

@@ -4,14 +4,20 @@ const {
   normalizeFlex,
   normalizeBreakpoint,
   normalizeWidth,
+  normalizeSpacing,
 } = require("../normalize")
 
-function Group({ align, breakpoint, justify, gap, width, style }, children) {
+function Group(
+  { align, className, breakpoint, justify, gap, width, margin, padding, style },
+  children
+) {
   gap = normalizeGap(gap)
   align = normalizeFlex(align)
   justify = normalizeFlex(justify)
   breakpoint = normalizeBreakpoint(breakpoint)
   width = normalizeWidth(width)
+  margin = normalizeSpacing(margin)
+  padding = normalizeSpacing(padding)
 
   const styleObject = {
     display: "flex",
@@ -20,6 +26,8 @@ function Group({ align, breakpoint, justify, gap, width, style }, children) {
     ...(align && { "align-items": align }),
     ...(justify && { "justify-content": justify }),
     ...(width && { width }),
+    ...(margin && { margin }),
+    ...(padding && { padding }),
     ...(breakpoint && {
       [`@media (max-width: ${breakpoint})`]: {
         "flex-direction": "column",
@@ -33,7 +41,10 @@ function Group({ align, breakpoint, justify, gap, width, style }, children) {
     }
   `
 
-  return [Div({ className: styles.group, style }, children), styles.css]
+  return [
+    Div({ className: [styles.group, className], style }, children),
+    styles.css,
+  ]
 }
 
 module.exports = component(Group)

package/ui/Stack/index.js

@@ -1,11 +1,21 @@
 const { css, component, Div } = require("../..")
-const { normalizeGap, normalizeFlex, normalizeWidth } = require("../normalize")
+const {
+  normalizeGap,
+  normalizeFlex,
+  normalizeWidth,
+  normalizeSpacing,
+} = require("../normalize")
 
-function Stack({ align, justify, gap, width, style }, children) {
+function Stack(
+  { align, className, justify, gap, width, margin, padding, style },
+  children
+) {
   gap = normalizeGap(gap)
   align = normalizeFlex(align)
   justify = normalizeFlex(justify)
   width = normalizeWidth(width)
+  margin = normalizeSpacing(margin)
+  padding = normalizeSpacing(padding)
 
   const styleObject = {
     display: "flex",
@@ -14,6 +24,8 @@ function Stack({ align, justify, gap, width, style }, children) {
     ...(align && { "align-items": align }),
     ...(justify && { "justify-content": justify }),
     ...(width && { width }),
+    ...(margin && { margin }),
+    ...(padding && { padding }),
   }
 
   const styles = css`
@@ -22,7 +34,10 @@ function Stack({ align, justify, gap, width, style }, children) {
     }
   `
 
-  return [Div({ className: styles.stack, style }, children), styles.css]
+  return [
+    Div({ className: [styles.stack, className], style }, children),
+    styles.css,
+  ]
 }
 
 module.exports = component(Stack)

package/ui/normalize.js

@@ -58,9 +58,29 @@ function normalizeWidth(width) {
   return width
 }
 
+const SPACING_MAP = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "2rem",
+  xl: "4rem",
+  none: null,
+}
+
+function normalizeSpacing(spacing) {
+  if (typeof spacing === "number") {
+    return `${spacing}px`
+  }
+  if (SPACING_MAP.hasOwnProperty(spacing)) {
+    return SPACING_MAP[spacing]
+  }
+  return spacing
+}
+
 module.exports = {
   normalizeFlex,
   normalizeGap,
   normalizeBreakpoint,
   normalizeWidth,
+  normalizeSpacing,
 }