feat(style-guide): composable css styles (#114)

src/cljc/athens/lib/dom/attributes.cljc

@@ -34,23 +34,18 @@
     ([attrs] (merge-styles attrs styles))))
 
 
-(comment
-
-  ;; Combine with-classes and with-style
-  (def +heavily-styled
-    (comp
-     (with-classes "strong" "happy")
-     (with-style {:color :green
-                  :background :white})))
-
-  ;; Usage:
-
-
-  [:h1 (+heavily-styled) "some statement"]
-
-  [:h1 (+heavily-styled {:on-click (fn [_e] #_(js/alert "something else"))}) "some statement"]
-
-  )
+(defn with-styles
+  ([map-or-fn]
+   (if (fn? map-or-fn)
+     (with-styles (map-or-fn))
+     (if (:style map-or-fn)
+       map-or-fn
+       {:style map-or-fn})))
+  ([map-or-fn & more]
+   (reduce (fn [acc x]
+             (update acc :style merge (:style (with-styles x))))
+           (with-styles map-or-fn)
+           more)))
 
 
 (defn with-attributes
@@ -80,7 +75,6 @@
 (comment
 
   (with-attributes
-    +heavily-styled
     {:class "foo bar"}
     {:class "baz poo"}
     {:style {:color :red}}

test/athens/lib/dom/attributes_test.cljc

@@ -1,7 +1,24 @@
 (ns athens.lib.dom.attributes-test
   (:require
-    [athens.lib.dom.attributes :refer [with-attributes with-classes with-style]]
-    [clojure.test :refer [deftest is are]]))
+    [athens.lib.dom.attributes :refer [with-attributes with-classes with-style with-styles]]
+    [clojure.test :refer [deftest is are run-tests]]))
+
+
+(deftest with-styles-test
+  (def flex-style-map {:style {:display "flex"}})
+
+  (are [x] (= (with-styles x) flex-style-map)
+    {:display "flex"}
+    {:style {:display "flex"}}
+    (fn [] {:display "flex"})
+    (fn [] {:style {:display "flex"}}))
+
+  (def +justify-center (with-styles {:justify-content "center"}))
+  (def +align-center (with-styles {:align-items "center"}))
+
+  (is (= (with-styles flex-style-map +justify-center +align-center)
+         {:style {:display "flex" :justify-content "center" :align-items "center"}})
+      "Support infinity arity"))
 
 
 (def +heavily-styled