Update inputs

resources/public/index.html

@@ -20,5 +20,6 @@
         <script src="assets/js/main.js"></script>
         <script src="suitkin/js/core.js"></script>
         <script src="portfolio/prism.js"></script>
+        <script src="text/javascript">var suitkin_public_prefix = ''</script>
     </body>
 </html>

src/suitkin/components/button.cljc

@@ -85,7 +85,8 @@
                          primary-default)
                        (case (:size properties)
                          "narrow" button-size-narrow
-                         button-size-default)]
+                         button-size-default)
+                       (:class properties)]
             :title (:title properties)}
    (when (:icon properties)
      [icon (:icon properties)])

src/suitkin/components/dropdown/styles.cljc

@@ -21,3 +21,9 @@
       :border-radius "4px"}
      [:hover {:background "var(--basic-gray-0)"
               :cursor     "pointer"}]))
+
+(def menu-item-empty
+  (c {:padding "6px 15px"
+      :border-radius "4px"
+      :color "var(--basic-gray-4)"
+      :cursor "not-allowed"}))

src/suitkin/components/dropdown/view.cljc

@@ -7,10 +7,31 @@
 
 (defn component
   [properties]
-  [:div {:class s/root}
-   [input/component
-    {:placeholder "Choose weekday"
-     :s/right [:img {:src (u/public-src "/suitkin/img/icon/ic-chevron-down-16.svg")}]}]
-   [:div {:class s/menu-items}
-    (for [item (:items properties)] ^{:key (:value item)}
-      [:div {:class s/menu-item} (:title item)])]])
+  (let [open? (u/ratom (:open? properties false))]
+    (fn [properties]
+      [:div {:class s/root}
+       [input/component
+        (-> (:search properties)
+            (assoc :type "search")
+            (assoc :s/right [:img {:src (u/public-src "/suitkin/img/icon/ic-chevron-down-16.svg")}])
+            (update :on-click
+                    (fn [callback]
+                      (fn [event]
+                        (reset! open? true)
+                        (when callback (callback event)))))
+            (update :on-blur
+                    (fn [callback]
+                      (fn [event]
+                        (reset! open? false)
+                        (when callback (callback event))))))]
+       (when @open?
+         [:div {:class s/menu-items}
+          (if-let [items (seq (get-in properties [:menu :items]))]
+            (for [item items] ^{:key (:value item)}
+              [:div {:class s/menu-item
+                     :on-mouse-down (fn [event]
+                                      (when-let [callback (get-in properties [:menu :on-select])]
+                                        (callback event item)))}
+               (:title item)])
+            [:div {:class s/menu-item-empty}
+             (get-in properties [:menu :not-found] "No items found")])])])))

src/suitkin/components/input/styles.cljc

@@ -9,7 +9,7 @@
       :font-weight   "500"
       :min-width     "238px"
       :display       "block"
-      :border-radius "3px"}
+      :border-radius "4px"}
      [:placeholder
       {:color "var(--basic-gray-3)"}]
      [[:&:focus

src/suitkin/components/input/view.cljc

@@ -20,6 +20,8 @@
     properties
     [:input
      (merge
-       {:type  "search"
-        :class [s/root (if (= "narrow" (:s/size properties)) s/narrow s/default)]}
+       {:type      (:type properties)
+        :on-click  (:on-click properties)
+        :on-change (:on-change properties)
+        :class     [s/root (if (= "narrow" (:s/size properties)) s/narrow s/default) (:class properties)]}
        (dissoc properties :s/size :s/right :s/left))]))

src/suitkin/components/typography.cljc

@@ -0,0 +1,23 @@
+(ns suitkin.components.typography
+  (:require [stylo.core :refer [c]]))
+
+(defn h1
+  [options & content]
+  [:h1 {:class [(c {:font-family "Inter"
+                    :font-size   "28px"
+                    :font-weight "700"
+                    :color       "#212636"})
+                (:class options)]}
+   content])
+
+(defn label
+  [options & content]
+  [:label {:class [(c {:font-family "Inter"
+                        :margin-left "1px"
+                        :font-size   "14px"
+                        :font-weight "400"
+                        :line-height "20px"
+                        :margin-bottom "6px"
+                        :color       "#010205"})
+                   (:class options)]}
+   content])

src/suitkin/core.cljc

@@ -4,10 +4,13 @@
    [suitkin.components.input.view]
    [suitkin.components.sidebar.view]
    [suitkin.components.dropdown.view]
-   [suitkin.components.segment-control.view]))
+   [suitkin.components.segment-control.view]
+   [suitkin.components.typography]))
 
-(def button          #'suitkin.components.button/component)
-(def sidebar         #'suitkin.components.sidebar.view/component)
-(def input           #'suitkin.components.input.view/component)
+(def button #'suitkin.components.button/component)
+(def sidebar #'suitkin.components.sidebar.view/component)
+(def input #'suitkin.components.input.view/component)
 (def segment-control #'suitkin.components.segment-control.view/component)
-(def dropdown        #'suitkin.components.dropdown.view/component)
+(def dropdown #'suitkin.components.dropdown.view/component)
+(def h1 #'suitkin.components.typography/h1)
+(def label #'suitkin.components.typography/label)

src/suitkin/utils.cljc

@@ -1,4 +1,5 @@
-(ns suitkin.utils)
+(ns suitkin.utils
+  #?(:cljs (:require [reagent.core])))
 
 #?(:cljs (goog-define CLASSPATH "")
    :clj  (def CLASSPATH ""))
@@ -27,3 +28,13 @@
   [keyname]
   #?(:cljs (js/localStorage.removeItem keyname)
      :clj  nil))
+
+(defn ratom
+  [value]
+  #?(:cljs (reagent.core/atom value)
+     :clj  (atom value)))
+
+(defn target-value
+  [event]
+  #?(:cljs (.. event -target -value)
+     :cljs (-> event :target :value)))