floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon support to button, alert, badge, and form input

Browse Source 
Button:
- :icon-left, :icon-right props for buttons with leading/trailing icons
- :icon prop for icon-only buttons (square padding via .btn-icon class)
- Icon size scales with button size (sm→sm, md/lg→sm/md)

Alert:
- Auto-assigns variant-specific icons (circle-check, alert-triangle,
  alert-circle, info) per variant
- :icon-name prop to override default, false to suppress
- Layout restructured with .alert-icon + .alert-content wrapper

Badge:
- :icon-name prop adds a leading icon before text
- .badge-icon CSS scales icon to match badge font size

Form input:
- :icon-left and :icon-right props on form-input
- Wraps input in .form-input-wrap with absolutely-positioned icon spans
- Padding adjusts automatically via .form-input--icon-left/right

All three dev targets (hiccup, replicant, squint) updated with demos.
This commit is contained in:
Florian Schroedl
2026-03-05 19:33:55 +01:00
parent e3132a3cb4
commit 93edebf144
15 changed files with 438 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
dev/hiccup/src/dev/hiccup.clj
View File

@@ -98,7 +98,19 @@
(button/button {:variant :primary :href "#"} "Link primary")
(button/button {:variant :secondary :href "#"} "Link secondary")
(button/button {:variant :link} "Link button")
(button/button {:variant :link :href "https://example.com"} "Link with href")]))
(button/button {:variant :link :href "https://example.com"} "Link with href")]
[:div {:style "display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;"}
(button/button {:variant :primary :icon-left :plus} "Add item")
(button/button {:variant :secondary :icon-right :arrow-right} "Next")
(button/button {:variant :primary :icon-left :download :icon-right :arrow-down} "Download")
(button/button {:variant :ghost :icon-left :edit} "Edit")]
[:div {:style "display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;"}
(button/button {:variant :primary :icon :plus})
(button/button {:variant :secondary :icon :search})
(button/button {:variant :ghost :icon :settings})
(button/button {:variant :danger :icon :trash})
(button/button {:variant :primary :icon :plus :size :sm})
(button/button {:variant :primary :icon :plus :size :lg})]))
(defn alert-demo []
(section "Alert"
@@ -116,7 +128,12 @@
(badge/badge {:variant :outline} "Outline")
(badge/badge {:variant :success} "Success")
(badge/badge {:variant :warning} "Warning")
(badge/badge {:variant :danger} "Danger")]))
(badge/badge {:variant :danger} "Danger")]
[:div {:style "display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"}
(badge/badge {:icon-name :check :variant :success} "Verified")
(badge/badge {:icon-name :star} "Featured")
(badge/badge {:icon-name :alert-triangle :variant :warning} "Caution")
(badge/badge {:icon-name :clock :variant :secondary} "Pending")]))
(defn card-demo []
(section "Card"
@@ -271,6 +288,10 @@
(form/form-input {:type :datetime-local}))
(form/form-field {:label "Date"}
(form/form-input {:type :date}))
(form/form-field {:label "Search (icon left)"}
(form/form-input {:type :text :placeholder "Search..." :icon-left :search}))
(form/form-field {:label "URL (both icons)"}
(form/form-input {:type :text :placeholder "example.com" :icon-left :globe :icon-right :check}))
(form/form-checkbox {:label "I agree to the terms"})
(form/form-radio-group {:label "Preference"
:radio-name "pref"

25
dev/replicant/src/dev/replicant.cljs
View File

@@ -60,7 +60,19 @@
(button/button {:variant :primary :href "#"} "Link primary")
(button/button {:variant :secondary :href "#"} "Link secondary")
(button/button {:variant :link} "Link button")
(button/button {:variant :link :href "https://example.com"} "Link with href")]))
(button/button {:variant :link :href "https://example.com"} "Link with href")]
[:div {:style {:display "flex" :gap "0.75rem" :flex-wrap "wrap" :align-items "center"}}
(button/button {:variant :primary :icon-left :plus} "Add item")
(button/button {:variant :secondary :icon-right :arrow-right} "Next")
(button/button {:variant :primary :icon-left :download :icon-right :arrow-down} "Download")
(button/button {:variant :ghost :icon-left :edit} "Edit")]
[:div {:style {:display "flex" :gap "0.75rem" :flex-wrap "wrap" :align-items "center"}}
(button/button {:variant :primary :icon :plus})
(button/button {:variant :secondary :icon :search})
(button/button {:variant :ghost :icon :settings})
(button/button {:variant :danger :icon :trash})
(button/button {:variant :primary :icon :plus :size :sm})
(button/button {:variant :primary :icon :plus :size :lg})]))
(defn alert-demo []
(section "Alert"
@@ -78,7 +90,12 @@
(badge/badge {:variant :outline} "Outline")
(badge/badge {:variant :success} "Success")
(badge/badge {:variant :warning} "Warning")
(badge/badge {:variant :danger} "Danger")]))
(badge/badge {:variant :danger} "Danger")]
[:div {:style {:display "flex" :gap "0.5rem" :flex-wrap "wrap" :align-items "center"}}
(badge/badge {:icon-name :check :variant :success} "Verified")
(badge/badge {:icon-name :star} "Featured")
(badge/badge {:icon-name :alert-triangle :variant :warning} "Caution")
(badge/badge {:icon-name :clock :variant :secondary} "Pending")]))
(defn card-demo []
(section "Card"
@@ -235,6 +252,10 @@
(form/form-input {:type :datetime-local}))
(form/form-field {:label "Date"}
(form/form-input {:type :date}))
(form/form-field {:label "Search (icon left)"}
(form/form-input {:type :text :placeholder "Search..." :icon-left :search}))
(form/form-field {:label "URL (both icons)"}
(form/form-input {:type :text :placeholder "example.com" :icon-left :globe :icon-right :check}))
(form/form-checkbox {:label "I agree to the terms"})
(form/form-radio-group {:label "Preference"
:radio-name "pref"

25
dev/squint/src/dev/squint.cljs
View File

@@ -78,7 +78,19 @@
[(button/button {:variant "primary" :href "#"} "Link primary")
(button/button {:variant "secondary" :href "#"} "Link secondary")
(button/button {:variant "link"} "Link button")
(button/button {:variant "link" :href "https://example.com"} "Link with href")])))
(button/button {:variant "link" :href "https://example.com"} "Link with href")])
(into [:div {:style {"display" "flex" "gap" "0.75rem" "flex-wrap" "wrap" "align-items" "center"}}]
[(button/button {:variant "primary" :icon-left "plus"} "Add item")
(button/button {:variant "secondary" :icon-right "arrow-right"} "Next")
(button/button {:variant "primary" :icon-left "download" :icon-right "arrow-down"} "Download")
(button/button {:variant "ghost" :icon-left "edit"} "Edit")])
(into [:div {:style {"display" "flex" "gap" "0.75rem" "flex-wrap" "wrap" "align-items" "center"}}]
[(button/button {:variant "primary" :icon "plus"})
(button/button {:variant "secondary" :icon "search"})
(button/button {:variant "ghost" :icon "settings"})
(button/button {:variant "danger" :icon "trash"})
(button/button {:variant "primary" :icon "plus" :size "sm"})
(button/button {:variant "primary" :icon "plus" :size "lg"})])))
(defn alert-demo []
(section "Alert"
@@ -96,7 +108,12 @@
(badge/badge {:variant "outline"} "Outline")
(badge/badge {:variant "success"} "Success")
(badge/badge {:variant "warning"} "Warning")
(badge/badge {:variant "danger"} "Danger")])))
(badge/badge {:variant "danger"} "Danger")])
(into [:div {:style {"display" "flex" "gap" "0.5rem" "flex-wrap" "wrap" "align-items" "center"}}]
[(badge/badge {:icon-name "check" :variant "success"} "Verified")
(badge/badge {:icon-name "star"} "Featured")
(badge/badge {:icon-name "alert-triangle" :variant "warning"} "Caution")
(badge/badge {:icon-name "clock" :variant "secondary"} "Pending")])))
(defn card-demo []
(section "Card"
@@ -253,6 +270,10 @@
(form/form-input {:type "datetime-local"}))
(form/form-field {:label "Date"}
(form/form-input {:type "date"}))
(form/form-field {:label "Search (icon left)"}
(form/form-input {:type "text" :placeholder "Search..." :icon-left "search"}))
(form/form-field {:label "URL (both icons)"}
(form/form-input {:type "text" :placeholder "example.com" :icon-left "globe" :icon-right "check"}))
(form/form-checkbox {:label "I agree to the terms"})
(form/form-radio-group {:label "Preference"
:radio-name "pref"

34
src/ui/alert.cljc
View File

@@ -1,5 +1,6 @@
(ns ui.alert
(:require [clojure.string :as str]))
(:require [clojure.string :as str]
[ui.icon :as icon]))
#?(:squint (defn- kw-name [s] s)
:cljs (defn- kw-name [s] (name s))
@@ -17,38 +18,61 @@
[opts]
(str/join " " (alert-class-list opts)))
(def ^:private variant-icons
"Default icon names per alert variant."
{"success" :circle-check
"warning" :alert-triangle
"danger" :alert-circle
"info" :info})
(defn alert
"Render an alert element.
Props:
:variant - :success, :warning, :danger, :info (nil for neutral)
:title - optional title string
:icon-name - override icon (nil uses variant default, false to suppress)
:class - additional CSS classes
:attrs - additional HTML attributes"
[{:keys [variant title class attrs] :as _props} & children]
[{:keys [variant title icon-name class attrs] :as _props} & children]
(let [v (some-> variant kw-name)
iname (cond
(false? icon-name) nil ;; explicitly suppressed
icon-name icon-name ;; explicit override
v (get variant-icons v))]
#?(:squint
(let [classes (cond-> (alert-classes {:variant variant})
class (str " " class))
base-attrs (merge {:class classes :role "alert"} attrs)]
(into [:div base-attrs]
(cond-> []
iname (conj [:span {:class "alert-icon"} (icon/icon {:icon-name iname :size :sm})])
true (conj (into [:div {:class "alert-content"}]
(cond-> []
title (conj [:p {:class "alert-title"} title])
:always (into (map (fn [c] [:p {:class "alert-body"} c]) children)))))
:always (into (map (fn [c] [:p {:class "alert-body"} c]) children))))))))
:cljs
(let [cls (alert-class-list {:variant variant})
classes (cond-> cls class (conj class))
base-attrs (merge {:class classes :role "alert"} attrs)]
(into [:div base-attrs]
(cond-> []
iname (conj [:span {:class ["alert-icon"]} (icon/icon {:icon-name iname :size :sm})])
true (conj (into [:div {:class ["alert-content"]}]
(cond-> []
title (conj [:p {:class ["alert-title"]} title])
:always (into (map (fn [c] [:p {:class ["alert-body"]} c]) children)))))
:always (into (map (fn [c] [:p {:class ["alert-body"]} c]) children))))))))
:clj
(let [classes (cond-> (alert-classes {:variant variant})
class (str " " class))
base-attrs (merge {:class classes :role "alert"} attrs)]
(into [:div base-attrs]
(cond-> []
iname (conj [:span {:class "alert-icon"} (icon/icon {:icon-name iname :size :sm})])
true (conj (into [:div {:class "alert-content"}]
(cond-> []
title (conj [:p {:class "alert-title"} title])
:always (into (map (fn [c] [:p {:class "alert-body"} c]) children)))))))
:always (into (map (fn [c] [:p {:class "alert-body"} c]) children)))))))))))

15
src/ui/alert.css
View File

@@ -2,8 +2,7 @@
container-type: inline-size;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
align-items: flex-start;
gap: var(--size-3);
padding: var(--size-4) var(--size-6);
background: var(--bg-1);
@@ -12,6 +11,18 @@
font-size: var(--font-sm);
}
.alert-icon {
display: flex;
align-items: center;
flex-shrink: 0;
padding-top: var(--size-1);
}
.alert-content {
flex: 1;
min-width: 0;
}
.alert-title {
font-weight: 600;
margin: 0;

21
src/ui/badge.cljc
View File

@@ -1,5 +1,6 @@
(ns ui.badge
(:require [clojure.string :as str]))
(:require [clojure.string :as str]
[ui.icon :as icon]))
#?(:squint (defn- kw-name [s] s)
:cljs (defn- kw-name [s] (name s))
@@ -26,23 +27,33 @@
Props:
:variant - :primary, :secondary, :outline, :success, :warning, :danger
:icon-name - optional leading icon (e.g. :check, :star)
:class - additional CSS classes
:attrs - additional HTML attributes"
[{:keys [variant class attrs] :as _props} & children]
[{:keys [variant icon-name class attrs] :as _props} & children]
#?(:squint
(let [classes (cond-> (badge-classes {:variant variant})
class (str " " class))
base-attrs (merge {:class classes} attrs)]
(into [:span base-attrs] children))
(into [:span base-attrs]
(cond-> []
icon-name (conj (icon/icon {:icon-name icon-name :size :sm :class "badge-icon"}))
true (into children))))
:cljs
(let [cls (badge-class-list {:variant variant})
classes (cond-> cls class (conj class))
base-attrs (merge {:class classes} attrs)]
(into [:span base-attrs] children))
(into [:span base-attrs]
(cond-> []
icon-name (conj (icon/icon {:icon-name icon-name :size :sm :class "badge-icon"}))
true (into children))))
:clj
(let [classes (cond-> (badge-classes {:variant variant})
class (str " " class))
base-attrs (merge {:class classes} attrs)]
(into [:span base-attrs] children))))
(into [:span base-attrs]
(cond-> []
icon-name (conj (icon/icon {:icon-name icon-name :size :sm :class "badge-icon"}))
true (into children))))))

6
src/ui/badge.css
View File

@@ -11,6 +11,12 @@
color: var(--fg-on-accent);
}
.badge-icon {
width: 0.875em;
height: 0.875em;
flex-shrink: 0;
}
.badge-secondary {
background: var(--bg-2);
color: var(--fg-0);

61
src/ui/button.cljc
View File

@@ -1,5 +1,6 @@
(ns ui.button
(:require [clojure.string :as str]))
(:require [clojure.string :as str]
[ui.icon :as icon]))
;; In squint, keywords are strings — name is identity
#?(:squint (defn- kw-name [s] s)
@@ -10,13 +11,15 @@
(def default-size "md")
(defn button-class-list
"Generate a vector of CSS class strings for a button given variant and size.
Returns e.g. [\"btn\" \"btn-primary\" \"btn-lg\"]."
[{:keys [variant size]}]
"Generate a vector of CSS class strings for a button given variant, size, and icon mode.
Returns e.g. [\"btn\" \"btn-primary\" \"btn-lg\"].
When :icon is provided (icon-only mode), adds \"btn-icon\"."
[{:keys [variant size icon]}]
(let [v (or (some-> variant kw-name) default-variant)
s (or (some-> size kw-name) default-size)]
(cond-> ["btn" (str "btn-" v)]
(not= s "md") (conj (str "btn-" s)))))
(not= s "md") (conj (str "btn-" s))
icon (conj "btn-icon"))))
(defn button-classes
"Generate CSS class string for a button. Returns a space-joined string."
@@ -33,37 +36,63 @@
:href - URL string; when set, renders as <a> tag
:on-click - click handler (ignored in :clj target)
:disabled - boolean
:icon-left - icon name keyword for left icon (e.g. :plus)
:icon-right - icon name keyword for right icon (e.g. :arrow-right)
:icon - icon name keyword for icon-only button (no text children)
:class - additional CSS classes (string or vector)
:attrs - additional HTML attributes map"
[{:keys [variant size href on-click disabled class attrs] :as _props} & children]
[{:keys [variant size href on-click disabled icon-left icon-right icon class attrs] :as _props} & children]
(let [icon-size (case (kw-name (or size default-size))
"sm" :sm
"lg" :md
#?(:squint "sm" :cljs :sm :clj :sm))]
#?(:squint
(let [tag (if href :a :button)
classes (cond-> (button-classes {:variant variant :size size})
classes (cond-> (button-classes {:variant variant :size size :icon icon})
class (str " " class))
base-attrs (cond-> (merge {:class classes} attrs)
href (assoc :href href)
disabled (assoc :disabled true))]
(into [tag (cond-> base-attrs
disabled (assoc :disabled true))
base-attrs (cond-> base-attrs
on-click (assoc :on-click on-click))]
children))
(if icon
[tag base-attrs (icon/icon {:icon-name icon :size icon-size})]
(into [tag base-attrs]
(cond-> []
icon-left (conj (icon/icon {:icon-name icon-left :size icon-size}))
true (into children)
icon-right (conj (icon/icon {:icon-name icon-right :size icon-size}))))))
:cljs
(let [tag (if href :a :button)
cls (button-class-list {:variant variant :size size})
cls (button-class-list {:variant variant :size size :icon icon})
classes (cond-> cls
class (conj class))
base-attrs (cond-> (merge {:class classes} attrs)
href (assoc :href href)
disabled (assoc :disabled true))]
(into [tag (cond-> base-attrs
disabled (assoc :disabled true))
base-attrs (cond-> base-attrs
on-click (assoc-in [:on :click] on-click))]
children))
(if icon
[tag base-attrs (icon/icon {:icon-name icon :size icon-size})]
(into [tag base-attrs]
(cond-> []
icon-left (conj (icon/icon {:icon-name icon-left :size icon-size}))
true (into children)
icon-right (conj (icon/icon {:icon-name icon-right :size icon-size}))))))
:clj
(let [tag (if href :a :button)
classes (cond-> (button-classes {:variant variant :size size})
classes (cond-> (button-classes {:variant variant :size size :icon icon})
class (str " " class))
base-attrs (cond-> (merge {:class classes} attrs)
href (assoc :href href)
disabled (assoc :disabled true))]
(into [tag base-attrs] children))))
(if icon
[tag base-attrs (icon/icon {:icon-name icon :size icon-size})]
(into [tag base-attrs]
(cond-> []
icon-left (conj (icon/icon {:icon-name icon-left :size icon-size}))
true (into children)
icon-right (conj (icon/icon {:icon-name icon-right :size icon-size})))))))))

4
src/ui/button.css
View File

@@ -78,6 +78,8 @@ a.btn-link {
line-height: var(--size-6);
}
/* ── Icon-only button ────────────────────────────────────────── */
.btn-icon {
padding: var(--size-2);
line-height: 1;
@@ -96,6 +98,8 @@ a.btn-link {
border-radius: 9999px;
}
/* ── Disabled ────────────────────────────────────────────────── */
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;

60
src/ui/form.cljc
View File

@@ -93,7 +93,8 @@
(str/join " " (form-input-class-list opts)))
(defn form-input
"Render a text input element.
"Render a text input element. When :icon-left or :icon-right is provided,
wraps in a .form-input-wrap div with absolutely-positioned icons.
Props:
:type - :text, :email, :password, :date, :datetime-local, etc.
@@ -101,36 +102,67 @@
:value - input value
:disabled - boolean
:error - boolean, adds error styling
:icon-left - icon name keyword for left icon (e.g. :search)
:icon-right - icon name keyword for right icon (e.g. :check)
:on-change - change handler (ignored in :clj target)
:class - additional CSS classes
:attrs - additional HTML attributes"
[{:keys [type placeholder value disabled error on-change class attrs] :as _props}]
(let [input-type (or (some-> type kw-name) "text")]
[{:keys [type placeholder value disabled error icon-left icon-right on-change class attrs] :as _props}]
(let [input-type (or (some-> type kw-name) "text")
has-icons (or icon-left icon-right)]
#?(:squint
(let [classes (cond-> (form-input-classes {:error error})
class (str " " class))]
[:input (cond-> (merge {:class classes :type input-type} attrs)
(let [input-cls (cond-> (form-input-classes {:error error})
class (str " " class)
icon-left (str " form-input--icon-left")
icon-right (str " form-input--icon-right"))
input-el [:input (cond-> (merge {:class input-cls :type input-type} attrs)
placeholder (assoc :placeholder placeholder)
value (assoc :value value)
disabled (assoc :disabled true)
on-change (assoc :on-change on-change))])
on-change (assoc :on-change on-change))]]
(if has-icons
(into [:div {:class "form-input-wrap"}]
(cond-> []
icon-left (conj [:span {:class "form-input-icon form-input-icon--left"} (icon/icon {:icon-name icon-left :size :sm})])
true (conj input-el)
icon-right (conj [:span {:class "form-input-icon form-input-icon--right"} (icon/icon {:icon-name icon-right :size :sm})])))
input-el))
:cljs
(let [cls (form-input-class-list {:error error})
classes (cond-> cls class (conj class))]
[:input (cond-> (merge {:class classes :type input-type} attrs)
input-cls (cond-> cls
class (conj class)
icon-left (conj "form-input--icon-left")
icon-right (conj "form-input--icon-right"))
input-el [:input (cond-> (merge {:class input-cls :type input-type} attrs)
placeholder (assoc :placeholder placeholder)
value (assoc :value value)
disabled (assoc :disabled true)
on-change (assoc-in [:on :change] on-change))])
on-change (assoc-in [:on :change] on-change))]]
(if has-icons
(into [:div {:class ["form-input-wrap"]}]
(cond-> []
icon-left (conj [:span {:class ["form-input-icon" "form-input-icon--left"]} (icon/icon {:icon-name icon-left :size :sm})])
true (conj input-el)
icon-right (conj [:span {:class ["form-input-icon" "form-input-icon--right"]} (icon/icon {:icon-name icon-right :size :sm})])))
input-el))
:clj
(let [classes (cond-> (form-input-classes {:error error})
class (str " " class))]
[:input (cond-> (merge {:class classes :type input-type} attrs)
(let [input-cls (cond-> (form-input-classes {:error error})
class (str " " class)
icon-left (str " form-input--icon-left")
icon-right (str " form-input--icon-right"))
input-el [:input (cond-> (merge {:class input-cls :type input-type} attrs)
placeholder (assoc :placeholder placeholder)
value (assoc :value value)
disabled (assoc :disabled true))]))))
disabled (assoc :disabled true))]]
(if has-icons
(into [:div {:class "form-input-wrap"}]
(cond-> []
icon-left (conj [:span {:class "form-input-icon form-input-icon--left"} (icon/icon {:icon-name icon-left :size :sm})])
true (conj input-el)
icon-right (conj [:span {:class "form-input-icon form-input-icon--right"} (icon/icon {:icon-name icon-right :size :sm})])))
input-el)))))
;; ── Textarea ────────────────────────────────────────────────────────

33
src/ui/form.css
View File

@@ -85,6 +85,39 @@
outline-color: var(--danger);
}
/* ── Input with icons ──────────────────────────────────────────── */
.form-input-wrap {
position: relative;
width: 100%;
}
.form-input-icon {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
pointer-events: none;
color: var(--fg-2);
}
.form-input-icon--left {
left: var(--size-3);
}
.form-input-icon--right {
right: var(--size-3);
}
.form-input--icon-left {
padding-left: var(--size-8);
}
.form-input--icon-right {
padding-right: var(--size-8);
}
/* ── Textarea ──────────────────────────────────────────────────── */
.form-textarea {

36
test/ui/alert_test.clj
View File

@@ -1,6 +1,7 @@
(ns ui.alert-test
(:require [clojure.test :refer [deftest is testing]]
[ui.alert :as alert]))
[ui.alert :as alert]
[ui.icon :as icon]))
(deftest alert-class-list-test
(testing "neutral (no variant)"
@@ -24,12 +25,29 @@
(is (= "alert alert-success" (get-in result [1 :class])))
(is (= "alert" (get-in result [1 :role])))))
(testing "alert with title includes title paragraph"
(let [result (alert/alert {:title "Title"} "Body")]
(is (some #(and (vector? %) (= "alert-title" (get-in % [1 :class])))
(rest (rest result))))))
(testing "variant alert includes default icon"
(let [result (alert/alert {:variant :success :title "Done!"} "Saved.")
icon-span (nth result 2)]
(is (= :span (first icon-span)))
(is (= "alert-icon" (get-in icon-span [1 :class])))))
(testing "alert without title has no title paragraph"
(let [result (alert/alert {} "Body")]
(is (not (some #(and (vector? %) (= "alert-title" (get-in % [1 :class])))
(rest (rest result))))))))
(testing "neutral alert has no icon"
(let [result (alert/alert {:title "Title"} "Body")]
(is (not (some #(and (vector? %) (= "alert-icon" (get-in % [1 :class])))
(rest (rest result)))))))
(testing "icon-name false suppresses icon"
(let [result (alert/alert {:variant :success :icon-name false} "Body")]
(is (not (some #(and (vector? %) (= "alert-icon" (get-in % [1 :class])))
(rest (rest result)))))))
(testing "icon-name overrides default"
(let [result (alert/alert {:variant :success :icon-name :star} "Body")
icon-span (nth result 2)]
(is (= "alert-icon" (get-in icon-span [1 :class])))))
(testing "alert content is wrapped in alert-content div"
(let [result (alert/alert {:variant :info :title "Title"} "Body")
content-div (last result)]
(is (= :div (first content-div)))
(is (= "alert-content" (get-in content-div [1 :class]))))))

14
test/ui/badge_test.clj
View File

@@ -1,6 +1,7 @@
(ns ui.badge-test
(:require [clojure.test :refer [deftest is testing]]
[ui.badge :as badge]))
[ui.badge :as badge]
[ui.icon :as icon]))
(deftest badge-class-list-test
(testing "default variant (primary)"
@@ -29,3 +30,14 @@
(testing "extra class gets appended"
(let [result (badge/badge {:class "extra"} "X")]
(is (= "badge extra" (get-in result [1 :class]))))))
(deftest badge-icon-test
(testing "badge with icon-name renders icon before text"
(let [result (badge/badge {:icon-name :check} "Done")]
(is (= :span (first result)))
(is (= :svg (first (nth result 2)))) ;; icon is first child
(is (= "Done" (nth result 3))))) ;; text is second child
(testing "badge without icon-name has no icon"
(let [result (badge/badge {} "Plain")]
(is (= "Plain" (nth result 2))))))

39
test/ui/button_test.clj
View File

@@ -1,6 +1,7 @@
(ns ui.button-test
(:require [clojure.test :refer [deftest is testing]]
[ui.button :as button]))
[ui.button :as button]
[ui.icon :as icon]))
(deftest button-class-list-test
(testing "default variant and size"
@@ -97,3 +98,39 @@
(is (= :a (first result)))
(is (= "https://example.com" (get-in result [1 :href])))
(is (= "btn btn-link" (get-in result [1 :class]))))))
(deftest button-icon-class-list-test
(testing "icon-only adds btn-icon class"
(is (= ["btn" "btn-secondary" "btn-icon"] (button/button-class-list {:icon :plus})))
(is (= ["btn" "btn-primary" "btn-icon"] (button/button-class-list {:variant :primary :icon :plus}))))
(testing "icon-only with size"
(is (= ["btn" "btn-primary" "btn-sm" "btn-icon"]
(button/button-class-list {:variant :primary :size :sm :icon :plus})))))
(deftest button-icon-component-test
(testing "icon-only button renders icon child"
(let [result (button/button {:variant :primary :icon :plus})]
(is (= :button (first result)))
(is (= "btn btn-primary btn-icon" (get-in result [1 :class])))
;; third element should be the SVG icon
(is (= :svg (first (nth result 2))))))
(testing "icon-left renders icon before text"
(let [result (button/button {:variant :primary :icon-left :plus} "Add")]
(is (= :button (first result)))
(is (= :svg (first (nth result 2)))) ;; icon is first child
(is (= "Add" (nth result 3))))) ;; text is second child
(testing "icon-right renders icon after text"
(let [result (button/button {:variant :primary :icon-right :arrow-right} "Next")]
(is (= :button (first result)))
(is (= "Next" (nth result 2))) ;; text is first child
(is (= :svg (first (nth result 3)))))) ;; icon is second child
(testing "icon-left and icon-right together"
(let [result (button/button {:variant :primary :icon-left :plus :icon-right :arrow-right} "Add")]
(is (= :svg (first (nth result 2)))) ;; left icon
(is (= "Add" (nth result 3))) ;; text
(is (= :svg (first (nth result 4)))))) ;; right icon
)

38
test/ui/form_test.clj
View File

@@ -1,6 +1,7 @@
(ns ui.form-test
(:require [clojure.test :refer [deftest is testing]]
[ui.form :as form]))
[ui.form :as form]
[ui.icon :as icon]))
;; ── form-field ──────────────────────────────────────────────────────
@@ -102,6 +103,41 @@
(let [result (form/form-input {:error true})]
(is (= "form-input form-input--error" (get-in result [1 :class]))))))
(deftest form-input-icon-test
(testing "input with icon-left wraps in form-input-wrap"
(let [result (form/form-input {:icon-left :search :placeholder "Search..."})]
(is (= :div (first result)))
(is (= "form-input-wrap" (get-in result [1 :class])))
;; first child: left icon span
(let [icon-span (nth result 2)]
(is (= :span (first icon-span)))
(is (= "form-input-icon form-input-icon--left" (get-in icon-span [1 :class]))))
;; second child: the actual input
(let [input (nth result 3)]
(is (= :input (first input)))
(is (clojure.string/includes? (get-in input [1 :class]) "form-input--icon-left")))))
(testing "input with icon-right wraps in form-input-wrap"
(let [result (form/form-input {:icon-right :check})]
(is (= :div (first result)))
;; second child: the input
(let [input (nth result 2)]
(is (= :input (first input)))
(is (clojure.string/includes? (get-in input [1 :class]) "form-input--icon-right")))
;; third child: right icon span
(let [icon-span (nth result 3)]
(is (= :span (first icon-span)))
(is (= "form-input-icon form-input-icon--right" (get-in icon-span [1 :class]))))))
(testing "input with both icons"
(let [result (form/form-input {:icon-left :search :icon-right :x})]
(is (= :div (first result)))
(is (= 5 (count result))))) ;; div + attrs + left-icon + input + right-icon
(testing "input without icons returns bare input"
(let [result (form/form-input {:placeholder "Name"})]
(is (= :input (first result))))))
;; ── form-textarea ───────────────────────────────────────────────────
(deftest form-textarea-class-list-test