keyboard navigation

src/clj/auto_ap/ssr/components.clj

@@ -21,6 +21,8 @@
 (def a-icon-button buttons/a-icon-button-)
 (def button-group buttons/group-)
 (def button-group-button buttons/group-button-)
+(def navigation-button-list buttons/navigation-button-list-)
+(def navigation-button buttons/navigation-button-)
 (def modal dialog/modal-)
 (def modal-card dialog/modal-card-)
 (def modal-card-advanced dialog/modal-card-advanced-)

src/clj/auto_ap/ssr/components/buttons.clj

@@ -26,7 +26,7 @@
                           (second color))
                         500)
         disabled-weight (when disabled 400)]
-    
+
     (format " bg-%s-%d hover:bg-%s-%d  focus:ring-%s-%d dark:bg-%s-%d dark:hover:bg-%s-%d "
             base-color
             (or disabled-weight (+ base-weight 0))
@@ -41,9 +41,7 @@
             (or disabled-weight (+ base-weight 100))
 
             base-color
-            (or disabled-weight (+ base-weight 200))
+            (or disabled-weight (+ base-weight 200)))))
-
-            )))
 
 (defn dark-color-weight [disabled]
   (if disabled
@@ -57,7 +55,7 @@
 
 (for [color ["green" "blue" "white"]
       weight (range 100 900 100)]
-  (str "bg-" color "-" weight)) 
+  (str "bg-" color "-" weight))
 ;;ensuring these colors show up
 ;; => ("bg-green-100"
 ;;     "bg-green-200"
@@ -85,7 +83,7 @@
 ;;     "bg-white-800")
 
 (defn button- [params & children]
-  
+
   [:button (update params
                    :class #(cond-> %
                              true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center relative justify-center"
@@ -115,8 +113,7 @@
                             (= :secondary (:color params)) (str " text-white  bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700")
                             (= :primary (:color params))   (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ")
                             (nil? (:color params))
-                            (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700")
+                            (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700")))
-                            ))
           (assoc :tabindex 0)
           (assoc :href (:href params "#")))
    [:div.htmx-indicator.flex.items-center
@@ -143,18 +140,17 @@
     [:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center (into [:div.h-4.w-4] children)]]))
 
 (defn a-icon-button- [params & children]
-  (into 
+  (into
-    [:a (-> params (update :class str  " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100"
+   [:a (-> params (update :class str  " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100")
-                           )
+           (update :href #(or % "")))
-            (update :href #(or % "")))
+    [:div.h-4.w-4 children]]))
-     [:div.h-4.w-4 children]]))
 
 (defn save-button- [params & children]
-  [:button { :class "text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center hover:scale-105 transition duration-300"}
+  [:button {:class "text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center hover:scale-105 transition duration-300"}
    [:div.htmx-indicator.flex.items-center
     (svg/spinner {:class "inline w-4 h-4 text-white"})
     [:div.ml-3 "Loading..."]]
-   (into [:div.htmx-indicator-hidden ] children)])
+   (into [:div.htmx-indicator-hidden] children)])
 
 
 
@@ -169,10 +165,8 @@
                                            (str " text-xs px-3 py-2")
 
                                            (= :normal size)
-                                           (str " text-sm px-4 py-2")
+                                           (str " text-sm px-4 py-2"))))
-                                           )
+                   true (dissoc :size))] children))
-                                         ))
-                   true (dissoc :size))] children ))
 
 (defn group- [{:keys [name]} & children]
   (let [children (-> children
@@ -184,6 +178,49 @@
            [:input {:type "hidden" :name name}]]
           children)))
 
+(defn navigation-button- [{:keys [class next-arrow?] :or {next-arrow? true} :as params} & children]
+  [:button
+   (-> params
+       (update :class (fnil hh/add-class  "") 
+               "p-4 text-green-700 border border-gray-300 rounded-lg bg-gray-50 
+                dark:bg-gray-800 dark:border-green-800 dark:text-green-400 
+                focus:ring-green-400 focus:ring-2 
+                hover:border-green-300 hover:bg-green-200 hover:dark:bg-gray-800 hover:dark:border-green-800 
+                hover:dark:text-green-400")
+       (dissoc :next-arrow?))
+   [:div
+    {:class "flex items-center justify-between"}
+    [:span {:class "sr-only"} children]
+    [:h3 {:class "font-medium"} children]
+    (when next-arrow?
+      [:div.w-4.h-4
+       svg/arrow-right])]])
+
+(defn navigation-button-list- [{:keys []} & children]
+  [:ol
+   {:class "space-y-4 w-72"}
+   (for [n children]
+     [:li n])
+   
+   #_[:li
+      [:div
+       {:class
+        "w-full p-4 text-gray-900 bg-gray-100 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400",
+        :role "alert"}
+       [:div
+        {:class "flex items-center justify-between"}
+        [:span {:class "sr-only"} "Review"]
+        [:h3 {:class "font-medium"} "4. Review"]]]]
+   #_[:li
+      [:div
+       {:class
+        "w-full p-4 text-gray-900 bg-gray-100 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400",
+        :role "alert"}
+       [:div
+        {:class "flex items-center justify-between"}
+        [:span {:class "sr-only"} "Confirmation"]
+        [:h3 {:class "font-medium"} "5. Confirmation"]]]]])
+
 
 (defn validated-save-button- [{:keys [errors class] :as params} & children]
   (button- (-> {:color (or (:color params) :primary)

src/clj/auto_ap/ssr/hx.clj

@@ -20,13 +20,13 @@
   (str/join ", " triggers))
 
 (defn alpine-appear [m]
-  (assoc m 
+  (assoc m
          "x-transition:enter" "transition-opacity duration-500"
          "x-transition:enter-start" "opacity-0"
          "x-transition:enter-end" "opacity-100"))
 
 (defn alpine-disappear [m]
-  (assoc m 
+  (assoc m
          "x-transition:leave" "transition duration-500"
          "x-transition:leave-start" "opacity-100"
          "x-transition:leave-end" "opacity-0"))
@@ -41,12 +41,15 @@
 
 (defn bind-alpine-vals [m field->alpine-field]
   (assoc m "x-bind:hx-vals"
-         
+
          (format "JSON.stringify({%s})"
                  (str/join ", "
                            (map
-                             (fn [[field alpine-field]]
+                            (fn [[field alpine-field]]
-                               (format "\"%s\": $data.%s || ''" field alpine-field))
+                              (format "\"%s\": $data.%s || ''" field alpine-field))
 
-                             field->alpine-field)))))
+                            field->alpine-field)))))
+                             
+(defn trigger-click-or-enter [m]
+  (assoc m :hx-trigger "click, keyup[keyCode==13]"))
 

src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj

@@ -467,19 +467,20 @@
      :body (mm/default-step-body
             {}
             [:p.text-lg "Would you like to pay this invoice now?"]
-            [:div.flex.flex-col.gap-2
+            
-             (com/button {:color :primary
+            (com/navigation-button-list {}
-                          :class "w-24"
+                                        (com/navigation-button (-> {:class "w-48"
-                          :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard)
+                                                                    :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard)
-                                          {:selected (:db/id snapshot)
+                                                                                    {:selected (:db/id snapshot)
-                                           :replace-modal true})} "Pay now")
+                                                                                     :replace-modal true})}
-             (com/button {:color :secondary
+                                                                   hx/trigger-click-or-enter) "Pay now")
-                          :class "w-24"
+                                        (com/navigation-button (-> {:class "w-48"
-                          :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard)
+                                                                    :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard)
-                                          {:replace-modal true})} "Add another")
+                                                                                    {:replace-modal true})}
-             (com/button {:class "w-24"
+                                                                   hx/trigger-click-or-enter) "Add another")
-                          "@click" "$dispatch('modalclose')"}
+                                        (com/navigation-button {:class "w-48" :next-arrow? false
-                         "Close")])
+                                                                "@click" "$dispatch('modalclose') "
+                                                                 "@keyup.enter.stop" "$dispatch('modalclose')"} "Close")))
      :footer
      nil
      :validation-route ::route/new-wizard-navigate)))