feat: parameterize hardcoded icon references

component-library/components/cta/cta.hugo.html

@@ -10,12 +10,13 @@
 */}}
 
 {{/* Main code */}}
+{{- $ctaAction := site.Params.icons.ctaAction | default "fas chevron-right" -}}
 {{ $links := slice }}
 {{ if and (reflect.IsSlice .links) (gt (len .links) 0) }}
 	{{ $links = .links }}
 {{ else }}
 	{{ with site.Params.modules.bookshop.cta.defaultURL }}
-		{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" "fas chevron-right") }}
+		{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" $ctaAction) }}
 	{{ end }}
 {{ end }}
 

config.toml

@@ -51,6 +51,19 @@
   [[module.imports]]
     path = "github.com/cloudcannon/bookshop/hugo/v3"
 
+# Icon defaults for mod-blocks components
+[params.icons]
+  # Testimonial carousel controls
+  carouselPrev    = "fas chevron-left"
+  carouselNext    = "fas chevron-right"
+  # CTA and contact action links
+  ctaAction       = "fas chevron-right"
+  # Preview component device tabs and error state
+  previewDesktop  = "fas fa-desktop"
+  previewTablet   = "fas fa-tablet-alt"
+  previewMobile   = "fas fa-mobile-alt"
+  previewError    = "fas fa-exclamation-triangle"
+
 # Bookshop module configuration
 # These defaults are used by mod-blocks components
 [params.modules.bookshop]

layouts/partials/assets/preview.html

@@ -21,6 +21,12 @@
 
 {{/* Initialize global variables */}}
 {{- $padding := partial "utilities/GetPadding.html" -}}
+{{- $deviceIcons := dict
+    "desktop" (site.Params.icons.previewDesktop | default "fas fa-desktop")
+    "tablet"  (site.Params.icons.previewTablet  | default "fas fa-tablet-alt")
+    "mobile"  (site.Params.icons.previewMobile  | default "fas fa-mobile-alt")
+-}}
+{{- $previewError := site.Params.icons.previewError | default "fas fa-exclamation-triangle" -}}
 
 {{/* Initialize local variables */}}
 {{- $devices := slice "desktop" "tablet" "mobile" -}}
@@ -41,7 +47,6 @@
             <div class="btn-group" role="tablist" aria-label="Device selection">
                 {{- range $index, $device := $devices -}}
                     {{- $isActive := eq $device $defaultDevice -}}
-                    {{- $iconName := cond (eq $device "desktop") "desktop" (cond (eq $device "tablet") "tablet-alt" "mobile-alt") -}}
                     <button type="button"
                             id="{{ $id }}-{{ $device }}-tab"
                             class="btn btn-outline-primary preview-device-btn{{ if $isActive }} active{{ end }}"
@@ -52,7 +57,7 @@
                             aria-selected="{{ if $isActive }}true{{ else }}false{{ end }}"
                             title="{{ $device | title }}"
                             aria-label="{{ $device | title }} view">
-                        {{ partial "assets/icon.html" (dict "icon" (printf "fas fa-%s" $iconName) "spacing" false) }}
+                        {{ partial "assets/icon.html" (dict "icon" (index $deviceIcons $device) "spacing" false) }}
                     </button>
                 {{- end -}}
             </div>
@@ -76,7 +81,7 @@
                 </iframe>
                 <div class="preview-error" style="display: none;">
                     <div class="alert alert-warning" role="alert">
-                        {{ partial "assets/icon.html" (dict "icon" "fas fa-exclamation-triangle" "spacing" false) }}
+                        {{ partial "assets/icon.html" (dict "icon" $previewError "spacing" false) }}
                         {{ T "previewError" }} <code>{{ $args.url }}</code>.
                         <a href="{{ $args.url }}" target="_blank" rel="noopener" class="alert-link">
                             {{ T "previewOpenTab" }}

layouts/partials/assets/testimonial-carousel.html

@@ -22,6 +22,8 @@
 {{/* Initialize global variables */}}
 {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
 {{- $padding := partial "utilities/GetPadding.html" -}}
+{{- $carouselPrev := site.Params.icons.carouselPrev | default "fas chevron-left" -}}
+{{- $carouselNext := site.Params.icons.carouselNext | default "fas chevron-right" -}}
 
 {{/* Initialize local variables */}}
 {{ $colGrid := printf "row-cols-%d" ($args.cols | default 1) }}
@@ -77,11 +79,11 @@
 				{{ end}}
 			</div>
 			<button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
-				{{ partial "assets/icon.html" (dict "icon" "fas chevron-left fa-2xl") }}
+				{{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2xl" $carouselPrev)) }}
 				<span class="visually-hidden">{{ T "testimonialPrevious" }}</span>
 			</button>
 			<button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
-				{{ partial "assets/icon.html" (dict "icon" "fas chevron-right fa-2xl") }}
+				{{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2xl" $carouselNext)) }}
 				<span class="visually-hidden">{{ T "testimonialNext" }}</span>
 			</button>
 		</div>

layouts/partials/page/contact.html

@@ -3,6 +3,7 @@
 {{- $orientation := .orientation -}}
 {{- $align := .align | default "start" }}
 {{- $title := .title | default (T "contactHeaderTopic") }}
+{{- $ctaAction := site.Params.icons.ctaAction | default "fas chevron-right" -}}
 
 {{- with $contact -}}
     {{- $link := "" -}}
@@ -19,7 +20,7 @@
             "orientation" $orientation
             "class"       "contact-img"
             "contact"     $contact
-            "links"       (slice (dict "title" (T "contactAction") "url" $link "icon" "fas chevron-right"))
+            "links"       (slice (dict "title" (T "contactAction") "url" $link "icon" $ctaAction))
             "data"        site.Params.modules.bookshop.cta.section
         ) }}
     {{ else }}