add comp-icon; bump 0.3.2

Author: tiye

README.md

@@ -13,13 +13,18 @@ Read stylesheets: [style.cljs](https://github.com/Respo/respo-ui/blob/master/src
 [![Clojars Project](https://img.shields.io/clojars/v/respo/ui.svg)](https://clojars.org/respo/ui)
 
 ```clojure
-[respo/ui "0.3.1"]
+[respo/ui "0.3.2"]
 ```
 
 ```clojure
 [respo-ui.core :as ui]
 [respo-ui.colors :as colors]
-[respo-ui.comp.switchy :refer [comp-switch]] ; `switch` is a reserved word
+```
+
+```clojure
+(respo-ui.comp.icon/comp-icon :flash)
+(respo-ui.comp.icon/comp-ios-icon :bell)
+(respo-ui.comp.icon/comp-android-icon :cart)
 ```
 
 Use `ui/button` as `:style` attributes for buttons.

build.boot

@@ -9,7 +9,7 @@
                                      :username "jiyinyiyong"
                                      :password (read-password "Clojars password: ")}]))
 
-(def +version+ "0.3.1")
+(def +version+ "0.3.2")
 
 (deftask deploy []
   (comp

coir.edn

@@ -25,7 +25,7 @@
   "license": "MIT",
   "devDependencies": {
     "http-server": "^0.11.1",
-    "shadow-cljs": "2.0.134"
+    "shadow-cljs": "2.0.142"
   },
   "dependencies": {}
 }

package.json

@@ -1,13 +1,13 @@
 
 {:source-paths ["src"]
  :dependencies [[mvc-works/hsl          "0.1.2"]
-                [mvc-works/shell-page   "0.1.6"]
-                [mvc-works/verbosely    "0.1.2"]
-                [respo/reel             "0.2.3"]
                 [mvc-works/keycode      "0.1.3"]
-                [respo/value            "0.2.3"]
+                [mvc-works/verbosely    "0.1.2"]
+                [mvc-works/shell-page   "0.1.6"]
+                [respo                  "0.8.13"]
+                [respo/value            "0.2.4"]
                 [respo/router           "0.4.0"]
-                [respo                  "0.8.12"]]
+                [respo/reel             "0.2.4"]]
  :open-file-command ["subl" ["%s:%s:%s" :file :line :column]]
  :builds {:browser {:target :browser
                     :output-dir "target/browser"
@@ -19,7 +19,7 @@
                     :devtools {:after-load respo-ui.main/reload!
                                :preloads [shadow.cljs.devtools.client.hud]
                                :http-root "target"
-                               :http-port 8080}
+                               :http-port 7000}
                     :release {:output-dir "dist/"
                               :module-hash-names 8
                               :build-options {:manifest-name "assets.edn"}}}

shadow-cljs.edn

@@ -12,7 +12,8 @@
             [respo-ui.comp.layouts-page :refer [comp-layouts-page]]
             [respo-ui.comp.fonts-page :refer [comp-fonts-page]]
             [respo-ui.comp.components :refer [comp-components-page]]
-            [respo-ui.comp.navbar :refer [comp-navbar]]))
+            [respo-ui.comp.navbar :refer [comp-navbar]]
+            [respo-ui.comp.icons-page :refer [comp-icons-page]]))
 
 (def style-content {:padding 8})
 
@@ -40,4 +41,5 @@
         "layouts.html" (comp-layouts-page)
         "fonts.html" (comp-fonts-page)
         "components.html" (cursor-> :components comp-components-page states)
+        "icons.html" (comp-icons-page)
         (<> (pr-str router))))))))

src/respo_ui/comp/container.cljs

@@ -0,0 +1,23 @@
+
+(ns respo-ui.comp.icon
+  (:require [respo.macros :refer [defcomp div input textarea button span select option a <>]]
+            [respo.core :refer [create-element]]))
+
+(defn get-string [icon-name]
+  (cond
+    (keyword? icon-name) (name icon-name)
+    (string? icon-name) icon-name
+    :else (throw (js/Error. (str "Unknown icon: " (pr-str icon-name))))))
+
+(defcomp
+ comp-android-icon
+ (icon-name)
+ (create-element :i {:class-name (str "ion-android-" (get-string icon-name))}))
+
+(defn comp-icon [icon-name]
+  (create-element :i {:class-name (str "ion-" (get-string icon-name))}))
+
+(defcomp
+ comp-ios-icon
+ (icon-name)
+ (create-element :i {:class-name (str "ion-ios-" (get-string icon-name))}))

src/respo_ui/comp/icon.cljs

@@ -0,0 +1,15 @@
+
+(ns respo-ui.comp.icons-page
+  (:require [respo.macros :refer [defcomp div <>]]
+            [respo-ui.core :as ui]
+            [respo-ui.comp.icon :refer [comp-icon comp-android-icon comp-ios-icon]]))
+
+(defcomp
+ comp-icons-page
+ ()
+ (div
+  {}
+  (<> "icon pages")
+  (div {} (comp-icon :flash))
+  (div {} (comp-ios-icon :bell))
+  (div {} (comp-android-icon :cart))))

src/respo_ui/comp/icons_page.cljs

@@ -28,4 +28,5 @@
   (render-entry "fonts.html" "Fonts" mobile?)
   (render-entry "widgets.html" "Widgets" mobile?)
   (render-entry "layouts.html" "Layouts" mobile?)
-  (render-entry "components.html" "Components" mobile?)))
+  (render-entry "components.html" "Components" mobile?)
+  (render-entry "icons.html" "Icons" mobile?)))

src/respo_ui/comp/sidebar.cljs

@@ -24,7 +24,8 @@
    "/colors.html"
    "/layouts.html"
    "/fonts.html"
-   "/components.html"])
+   "/components.html"
+   "/icons.html"])
 
 (def preview? (= "preview" js/process.env.prod))