Merge pull request #931 from gethinode/develop

Fix button layout of type link in horizontal stack

assets/scss/components/_button.scss

@@ -41,3 +41,7 @@ a.btn {
     background-repeat: no-repeat if($enable-important-utilities, !important, null);
     background-size: $btn-close-width if($enable-important-utilities, !important, null);
 }
+
+.btn-link {
+    --bs-btn-padding-x: 0;
+}

assets/scss/components/_card.scss

@@ -95,3 +95,7 @@
     z-index: 2;
     position: relative;
 }
+
+.card-button-link {
+    text-decoration: underline if($enable-important-utilities, !important, null);
+}

data/structures/card-group.yml

@@ -103,6 +103,16 @@ arguments:
     optional: true
     comment: >-
       Flag indicating if the number of columns should be responsive, defaults to `true`.
+  buttonType:
+    type: select
+    optional: true
+    default: button
+    release: v0.23.18
+    comment: Type of the button elements.
+    options:
+      values:
+        - link
+        - button
   hook:
     type: string
     optional: true

data/structures/card.yml

@@ -206,6 +206,17 @@ arguments:
     release: v0.23.2
     comment: >-
       Label of the link button, defaults to the card title.
+  buttonType:
+    type: select
+    parent: cascade
+    optional: true
+    default: button
+    comment: Type of the button element.
+    release: v0.23.18
+    options:
+      values:
+        - link
+        - button
   hook:
     type: string
     optional: true

exampleSite/content/en/blog/bootstrap-elements.md

@@ -136,7 +136,7 @@ As an example, the following shortcode displays a card group of three elements.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" gutter="3" */>}}
+{{</* card-group padding="3" gutter="3" button=true buttonType="link" */>}}
     {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
         Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
         Sass files.

exampleSite/hugo_stats.json

@@ -93,6 +93,7 @@
       "btn-close",
       "btn-group",
       "btn-light",
+      "btn-link",
       "btn-outline-primary",
       "btn-outline-secondary",
       "btn-primary",
@@ -104,6 +105,7 @@
       "card-body-link",
       "card-body-margin",
       "card-button",
+      "card-button-link",
       "card-emphasize",
       "card-icon",
       "card-img-bg",

layouts/partials/assets/button.html

@@ -84,8 +84,8 @@
         {{- with $toast }} data-toast-target="{{ $toast }}"{{ end -}}
         {{- with $clipboard }} data-clipboard="{{ $clipboard }}"{{ end -}}
         {{- if eq $type "button" }} class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class -}}"
-        role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
+        {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-        {{- else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+        {{- else }} class="btn btn-link link-{{ $color }} position-relative {{ $class }}"{{ end -}}
         {{- with $tooltip }} data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
         {{- with $collapse }} data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
         {{- if eq $state "active" }} data-bs-toggle="button" aria-pressed="true"{{ end -}}
@@ -93,6 +93,7 @@
         {{- range $key, $val := $attributes -}}
             {{ printf " %s=\"%s\"" $key $val | safeHTMLAttr }}
         {{- end -}}
+        role="button"
         >
         <div class="d-flex justify-content-{{ $justify }}">
             <div class="my-auto">{{ $title | safeHTML }}</div>

layouts/partials/assets/card-group.html

@@ -33,6 +33,7 @@
 {{- $loading := .loading -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $hook := .hook | default "assets/card.html" }}
 
 <!-- Override arguments -->
@@ -137,6 +138,7 @@
                 "align" $align
                 "button" $button
                 "buttonLabel" $buttonLabel
+                "buttonType" $buttonType
             ) -}}
             {{- $params = merge $params $element }}
 

layouts/partials/assets/card.html

@@ -32,6 +32,7 @@
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
     {{ if $subtle }}
@@ -148,7 +149,19 @@
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
                     {{ if $button }}
                         {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
-                        <div class="d-flex align-items-end">{{ partial "assets/button.html" (dict "title" $label "icon" "fas chevron-right" "href" $href "outline" true "size" "sm" "class" "card-button mb-n4") }}</div>
+                        {{ $buttonClass := "card-button mb-n4" }}
+                        {{ if eq $buttonType "link" }}{{ $buttonClass = "card-button card-button-link mb-n4" }}{{ end }}
+                        <div class="d-flex align-items-end">
+                            {{ partial "assets/button.html" (dict 
+                                "title" $label
+                                "icon" "fas chevron-right"
+                                "href" $href
+                                "outline" true
+                                "size" "sm"
+                                "class" $buttonClass
+                                "type" $buttonType
+                            )}}
+                        </div>
                     {{ end }}
                 </div>
             </div>
@@ -174,7 +187,17 @@
             <div class="row p-{{ $padding }}" >
                 <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else if eq $orientation "horizontal" }}col-4{{ end }}"></div>
                 <div class="col d-flex align-items-end {{ if eq $orientation "horizontal-sm" }}px-2{{ else if eq $orientation "horizontal"}}px-1 {{ else }}px-2 pt-1{{ end }}">
-                    {{ partial "assets/button.html" (dict "title" $label "href" $href "outline" true "size" "sm" "class" "card-button") }}
+                    {{ $buttonClass := "card-button" }}
+                    {{ if eq $buttonType "link" }}{{ $buttonClass = "card-button card-button-link" }}{{ end }}
+                    {{ partial "assets/button.html" (dict 
+                        "title" $label
+                        "href" $href
+                        "outline" true
+                        "size" "sm"
+                        "class" "card-button"
+                        "class" $buttonClass
+                        "type" $buttonType
+                    )}}
                 </div>
             </div>
         {{ end }}

layouts/partials/assets/section-menu.html

@@ -37,7 +37,7 @@
         -}}
     </div>
 
-    <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+    <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll d-{{ $breakpoint.prev }}-none" id="toc-collapse">
         <div class="toc toc-panel section-menu text-body p-2 fs-6">
             {{- range $items }}
                 {{ $active := eq $page.RelPermalink .RelPermalink }}

layouts/shortcodes/card-group.html

@@ -28,6 +28,7 @@
 {{- $style := .Get  "style" | default "" -}}
 {{- $subtle := .Get "subtle" | default false -}}
 {{- $button := .Get "button" | default false -}}
+{{- $buttonType := .Get "buttonType" | default "" -}}
 
 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -56,5 +57,6 @@
     "style" $style
     "subtle" $subtle
     "button" $button
+    "buttonType" $buttonType
     ) 
 -}}

layouts/shortcodes/card.html

@@ -33,6 +33,7 @@
 {{- $thumbnail := .Get "thumbnail" -}}
 {{- $title := .Get "title" -}}
 {{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
+{{- $buttonType := partial "utilities/GetArgParent" (dict "page" . "arg" "buttonType") | default "" -}}
 
 <!-- Override arguments -->
 {{ if $path }}
@@ -70,6 +71,7 @@
         "loading" $loading
         "alt" $alt
         "button" $button
+        "buttonType" $buttonType
     ) -}}
 
     <!-- Pass output to parent or current stream -->

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.17",
+  "version": "0.23.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.17",
+      "version": "0.23.19",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
@@ -27,7 +27,7 @@
         "postcss-cli": "^11.0.0",
         "purgecss-whitelister": "^2.4.0",
         "replace-in-files-cli": "^2.2.0",
-        "rimraf": "^5.0.5",
+        "rimraf": "^5.0.7",
         "shx": "^0.3.4",
         "stylelint": "^16.5.0",
         "stylelint-config-standard-scss": "^13.1.0"
@@ -8124,9 +8124,9 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "5.0.5",
+      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
-      "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==",
+      "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
       "dev": true,
       "dependencies": {
         "glob": "^10.3.7"
@@ -8135,7 +8135,7 @@
         "rimraf": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.17",
+  "version": "0.23.19",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -85,7 +85,7 @@
     "postcss-cli": "^11.0.0",
     "purgecss-whitelister": "^2.4.0",
     "replace-in-files-cli": "^2.2.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.7",
     "shx": "^0.3.4",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0"