diff --git a/component-library/bookshop.scss b/component-library/bookshop.scss index 0765909..f4a0620 100644 --- a/component-library/bookshop.scss +++ b/component-library/bookshop.scss @@ -3,6 +3,7 @@ @import "modules/bookshop/components/approach/approach"; @import "modules/bookshop/components/articles/articles"; @import "modules/bookshop/components/cards/cards"; +@import "modules/bookshop/components/contact-form/contact-form"; @import "modules/bookshop/components/cta/cta"; @import "modules/bookshop/components/faq/faq"; @import "modules/bookshop/components/featured/featured"; diff --git a/component-library/components/contact-form/contact-form.bookshop.yml b/component-library/components/contact-form/contact-form.bookshop.yml new file mode 100644 index 0000000..219e4ef --- /dev/null +++ b/component-library/components/contact-form/contact-form.bookshop.yml @@ -0,0 +1,37 @@ +# Metadata about this component, to be used in the CMS +spec: + structures: + - content_blocks + label: Contact form + description: Contact form with illustration + icon: contact_mail + tags: [] + +# Defines the structure of this component, as well as the default values +blueprint: + id: + heading: + preheading: + title: + content: + align: + width: + background: + backdrop: + color: + subtle: + image: + hook: + action: + form_id: + responsive: + class: + width: + justify: + wrapper: + fluid: + theme: + cover: + overlay_mode: + section_class: + bg_class: diff --git a/component-library/components/contact-form/contact-form.hugo.html b/component-library/components/contact-form/contact-form.hugo.html new file mode 100644 index 0000000..19bab8d --- /dev/null +++ b/component-library/components/contact-form/contact-form.hugo.html @@ -0,0 +1,77 @@ +{{/* + Copyright © 2026 The Hinode Team / Mark Dumay. All rights reserved. + Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file. + Visit gethinode.com/license for more details. + + Note: To support live editing, bookshop components should use a clear path to the provided arguments. + Therefore, we cannot use the InitArgs partial at this point, and we need to access each argument + directly. See the docs for more background: + https://github.com/CloudCannon/bookshop/blob/main/guides/hugo.adoc#passing-data-to-bookshop-components +*/}} + +{{/* Validate arguments */}} +{{ $error := false }} +{{ if not site.Params.env_bookshop_live }} + {{ $bookshop := "contact-form" }} + {{ $args := partial "utilities/InitArgs.html" (dict "bookshop" $bookshop "args" .)}} + {{ $err := $args.err }} + {{ $msg := ($args.errmsg | append $args.warnmsg) }} + + {{ if not $err }} + {{ if not $args.hook }} + {{ $msg = $msg | append (printf "[%s] requires argument 'hook'" $bookshop) }} + {{ $err = true }} + {{ else if (not (templates.Exists (printf "_partials/%s" $args.hook))) }} + {{ $hook := cond (path.Ext $args.hook) $args.hook (printf "%s.html" $args.hook) }} + {{ if (not (templates.Exists (printf "_partials/%s" $hook))) }} + {{ $msg = $msg | append (printf "[%s] cannot find render hook '%s'" $bookshop $args.hook) }} + {{ $err = true }} + {{ end }} + {{ end }} + {{ end }} + + {{ if or $err $args.warnmsg }} + {{ partial (cond $err "utilities/LogErr.html" "utilities/LogWarn.html") (dict + "partial" "component-library/components/contact-form/contact-form.hugo.html" + "warnid" "warn-invalid-arguments" + "msg" "Invalid arguments" + "details" $msg + "file" page.File + )}} + {{ $error = $err }} + {{- end -}} +{{- end -}} + +{{ if not $error }} + {{/* Initialize global arguments */}} + {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}} + {{- $padding := partial "utilities/GetPadding.html" -}} + + {{/* Main code */}} + {{ $color := "" }} + {{ if .contrast }}{{ $color = "white" }}{{ end }} + {{- $raw := partial "assets/section-title.html" (dict + "heading" .heading + "justify" .justify + "class" (printf "pb-%d" $padding.y)) + -}} + + {{ $raw = printf "%s%s" $raw (partial .hook (dict "action" .action "form-id" .form_id)) }} + {{ if $raw }} + {{ partial "utilities/section.html" (dict + "component-name" "contact-form" + "id" .id + "raw" $raw + "background" .background + "width" .width + "justify" .justify + "wrapper" .wrapper + "fluid" .fluid + "theme" .theme + "cover" .cover + "overlay-mode" (or .overlay_mode (index . "overlay-mode")) + "section-class" (or .section_class (index . "section-class")) + "bg-class" (or .bg_class (index . "bg-class")) + )}} + {{ end }} +{{ end }} diff --git a/component-library/components/contact-form/contact-form.hugo.md b/component-library/components/contact-form/contact-form.hugo.md new file mode 100644 index 0000000..14d150e --- /dev/null +++ b/component-library/components/contact-form/contact-form.hugo.md @@ -0,0 +1,3 @@ +{{ with .action -}} +Form action: {{ . }} +{{ end -}} diff --git a/component-library/components/contact-form/contact-form.scss b/component-library/components/contact-form/contact-form.scss new file mode 100644 index 0000000..e69de29 diff --git a/component-library/components/contact-form/contact-form.yml b/component-library/components/contact-form/contact-form.yml new file mode 100644 index 0000000..76dc0cc --- /dev/null +++ b/component-library/components/contact-form/contact-form.yml @@ -0,0 +1,27 @@ +comment: >- + Renders a contact form with an optional heading and custom form handler. +arguments: + hook: + type: string + optional: false + comment: Render hook for the actual form. + action: + type: string + optional: false + comment: >- + The form submission callback URL. + form_id: + type: string + optional: true + comment: >- + The form's ID, which is used to retrieve the form definition. +example: | + heading: + preheading: Get in touch + title: Contact Us + content: We'd love to hear from you. + align: center + background: + color: body-tertiary + hook: assets/netlify-contact-form-hook.html + action: /thank-you/ diff --git a/component-library/components/list/list.hugo.html b/component-library/components/list/list.hugo.html index bbced97..1583e03 100644 --- a/component-library/components/list/list.hugo.html +++ b/component-library/components/list/list.hugo.html @@ -12,16 +12,28 @@ {{/* Validate arguments */}} {{ $error := false }} {{ if not site.Params.env_bookshop_live }} - {{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "list" "args" .) }} - {{ if or $args.err $args.warnmsg }} - {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict + {{ $bookshop := "list" }} + {{ $args := partial "utilities/InitArgs.html" (dict "bookshop" $bookshop "args" .) }} + {{ $err := $args.err }} + {{ $msg := ($args.errmsg | append $args.warnmsg) }} + + {{ if and (not $err) $args.hook }} + {{ $hook := cond (path.Ext $args.hook) $args.hook (printf "%s.html" $args.hook) }} + {{ if (not (templates.Exists (printf "_partials/%s" $hook))) }} + {{ $msg = $msg | append (printf "[%s] cannot find render hook '%s'" $bookshop $args.hook) }} + {{ $err = true }} + {{ end }} + {{ end }} + + {{ if or $err $args.warnmsg }} + {{ partial (cond $err "utilities/LogErr.html" "utilities/LogWarn.html") (dict "partial" "component-library/components/list/list.hugo.html" "warnid" "warn-invalid-arguments" "msg" "Invalid arguments" - "details" ($args.errmsg | append $args.warnmsg) + "details" $msg "file" page.File )}} - {{ $error = $args.err }} + {{ $error = $err }} {{- end -}} {{- end -}}