Merge pull request bhauman#53 from codebeige/classname-option

Bruce Hauman · Bruce Hauman · commit 83e855b9e2ba · 2015-10-13T23:48:29.000-04:00
Add option for providing a custom classname [close bhauman#44]
diff --git a/example-resources/public/devcards/css/devcard-api.css b/example-resources/public/devcards/css/devcard-api.css
@@ -0,0 +1,3 @@
+.red-box {
+  border: 5px solid red;
+}
diff --git a/example-resources/public/devcards/index.html b/example-resources/public/devcards/index.html
@@ -12,6 +12,7 @@
     <!-- <link id="com-rigsomelight-devcards-css" href="/devcards/css/com_rigsomelight_devcards.css"
          rel="stylesheet" type="text/css"> -->
     <link href="/devcards/css/two-zero.css" rel="stylesheet" type="text/css">
+    <link href="/devcards/css/devcard-api.css" rel="stylesheet" type="text/css">
   </head>
   <body>
     <script src="/devcards/js/compiled/devdemos.js" type="text/javascript"></script>
diff --git a/example_src/devdemos/defcard_api.cljs b/example_src/devdemos/defcard_api.cljs
@@ -392,6 +392,7 @@
     :inspect-data false ;; wether to display the data in the card atom
     :watch-atom true    ;; wether to watch the atom and render on change 
     :history false      ;; wether to record a change history of the atom
+    :classname ""       ;; provide card with a custom classname
   }
   ```
 
@@ -418,6 +419,11 @@
   {}
   {:padding false})
 
+(defcard custom-classname
+  (str " this card has a custom class `.red-box`")
+  {}
+  {:classname "red-box"})
+
 (defcard inspect-data
   (fn [data-atom owner]
     (sab/html [:div [:h3 "Inspecting data on this Counter: " (:count @data-atom)]
diff --git a/src/devcards/core.cljs b/src/devcards/core.cljs
@@ -134,12 +134,15 @@
 ;; returns a react component of rendered edn
 
 (defn- naked-card [children card]
-  (sab/html
-   [:div
-    {:class
-     (str devcards.system/devcards-rendered-card-class
-          (if (get-in card [:options :padding]) " com-rigsomelight-devcards-devcard-padding" "")) }
-    children]))
+  (let [classname (get-in card [:options :classname])
+        padding?  (get-in card [:options :padding])]
+    (sab/html
+      [:div
+       {:class
+        (cond-> devcards.system/devcards-rendered-card-class
+          padding? (str " com-rigsomelight-devcards-devcard-padding")
+          (not-empty classname) (str " " classname))}
+       children])))
 
 (defn- frame
   ([children]

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.red-box {`
	`2`	`+ border: 5px solid red;`
	`3`	`+}`