Merge pull request #931 from gethinode/develop

Fix button layout of type link in horizontal stack
Merge branch 'main' into develop
2025-10-13 13:03:13 +00:00 · 2024-05-13 16:42:21 +02:00 · 2024-05-13 16:08:50 +02:00 · 2024-05-13 16:08:25 +02:00 · 2024-05-13 13:50:19 +00:00 · 2024-05-13 13:42:00 +00:00
14 changed files with 76 additions and 15 deletions
--- a/assets/scss/components/_button.scss
+++ b/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;
+}
--- a/assets/scss/components/_card.scss
+++ b/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);
+}
--- a/data/structures/card-group.yml
+++ b/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
--- a/data/structures/card.yml
+++ b/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
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/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.
--- a/exampleSite/hugo_stats.json
+++ b/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",
--- a/layouts/partials/assets/button.html
+++ b/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 -}}
-        {{- else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+        {{ if eq $state "disabled" }}aria-disabled="true"{{ 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>
--- a/layouts/partials/assets/card-group.html
+++ b/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 }}

--- a/layouts/partials/assets/card.html
+++ b/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 }}
--- a/layouts/partials/assets/section-menu.html
+++ b/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 }}
--- a/layouts/shortcodes/card-group.html
+++ b/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
    ) 
 -}}
--- a/layouts/shortcodes/card.html
+++ b/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 -->
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
-      "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
+      "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"
--- a/package.json
+++ b/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"
Author	SHA1	Message	Date
Mark Dumay	967492de76	Merge pull request #931 from gethinode/develop Fix button layout of type link in horizontal stack	2024-05-13 16:42:21 +02:00
Mark Dumay	2b876fbb2e	Merge branch 'main' into develop	2024-05-13 16:08:50 +02:00
Mark Dumay	8a0b0df3ff	Fix button layout of type link in horizontal stack	2024-05-13 16:08:25 +02:00
github-actions[bot]	20f4e959d6	Merge pull request #930 from gethinode/dependabot/npm_and_yarn/rimraf-5.0.7 Bump rimraf from 5.0.5 to 5.0.7	2024-05-13 13:50:19 +00:00
dependabot[bot]	a46317f1d2	Bump rimraf from 5.0.5 to 5.0.7 Bumps [rimraf](https://github.com/isaacs/rimraf) from 5.0.5 to 5.0.7. - [Changelog](https://github.com/isaacs/rimraf/blob/main/CHANGELOG.md) - [Commits](https://github.com/isaacs/rimraf/compare/v5.0.5...v5.0.7) --- updated-dependencies: - dependency-name: rimraf dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-05-13 13:42:00 +00:00
Mark Dumay	d264c9154e	Merge pull request #929 from gethinode/develop Support configurable button type for cards	2024-05-12 14:31:03 +02:00
Mark Dumay	96dacd5838	Merge branch 'main' into develop	2024-05-12 11:49:04 +02:00
Mark Dumay	5a6f58a96d	Support configurable button type for cards	2024-05-12 11:48:25 +02:00
Mark Dumay	05e57ff255	Always hide toc panel on larger screens	2024-05-10 16:30:13 +02:00